88 lines
2.8 KiB
TypeScript
88 lines
2.8 KiB
TypeScript
import { WebApplication } from '@/UIModels/Application'
|
|
import { FeatureStatus } from '@standardnotes/snjs'
|
|
import { FunctionComponent } from 'preact'
|
|
import { useMemo } from 'preact/hooks'
|
|
import { JSXInternal } from 'preact/src/jsx'
|
|
import { Icon } from '@/Components/Icon'
|
|
import { usePremiumModal } from '@/Hooks/usePremiumModal'
|
|
import { Switch } from '@/Components/Switch'
|
|
import { ThemeItem } from './ThemeItem'
|
|
|
|
type Props = {
|
|
item: ThemeItem
|
|
application: WebApplication
|
|
onBlur: (event: { relatedTarget: EventTarget | null }) => void
|
|
}
|
|
|
|
export const ThemesMenuButton: FunctionComponent<Props> = ({ application, item, onBlur }) => {
|
|
const premiumModal = usePremiumModal()
|
|
|
|
const isThirdPartyTheme = useMemo(
|
|
() => application.features.isThirdPartyFeature(item.identifier),
|
|
[application, item.identifier],
|
|
)
|
|
const isEntitledToTheme = useMemo(
|
|
() => application.features.getFeatureStatus(item.identifier) === FeatureStatus.Entitled,
|
|
[application, item.identifier],
|
|
)
|
|
const canActivateTheme = useMemo(
|
|
() => isEntitledToTheme || isThirdPartyTheme,
|
|
[isEntitledToTheme, isThirdPartyTheme],
|
|
)
|
|
|
|
const toggleTheme: JSXInternal.MouseEventHandler<HTMLButtonElement> = (e) => {
|
|
e.preventDefault()
|
|
|
|
if (item.component && canActivateTheme) {
|
|
const themeIsLayerableOrNotActive = item.component.isLayerable() || !item.component.active
|
|
|
|
if (themeIsLayerableOrNotActive) {
|
|
application.mutator.toggleTheme(item.component).catch(console.error)
|
|
}
|
|
} else {
|
|
premiumModal.activate(`${item.name} theme`)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<button
|
|
className={'sn-dropdown-item focus:bg-info-backdrop focus:shadow-none justify-between'}
|
|
onClick={toggleTheme}
|
|
onBlur={onBlur}
|
|
>
|
|
{item.component?.isLayerable() ? (
|
|
<>
|
|
<div className="flex items-center">
|
|
<Switch className="px-0 mr-2" checked={item.component?.active} />
|
|
{item.name}
|
|
</div>
|
|
{!canActivateTheme && <Icon type="premium-feature" />}
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className="flex items-center">
|
|
<div
|
|
className={`pseudo-radio-btn ${
|
|
item.component?.active ? 'pseudo-radio-btn--checked' : ''
|
|
} mr-2`}
|
|
></div>
|
|
<span className={item.component?.active ? 'font-semibold' : undefined}>
|
|
{item.name}
|
|
</span>
|
|
</div>
|
|
{item.component && canActivateTheme ? (
|
|
<div
|
|
className="w-5 h-5 rounded-full"
|
|
style={{
|
|
backgroundColor: item.component.package_info?.dock_icon?.background_color,
|
|
}}
|
|
></div>
|
|
) : (
|
|
<Icon type="premium-feature" />
|
|
)}
|
|
</>
|
|
)}
|
|
</button>
|
|
)
|
|
}
|