95 lines
3.6 KiB
TypeScript
95 lines
3.6 KiB
TypeScript
import { WebApplication } from '@/Application/WebApplication'
|
|
import { FeatureIdentifier, FeatureStatus } from '@standardnotes/snjs'
|
|
import { FunctionComponent, MouseEventHandler, useCallback, useMemo } from 'react'
|
|
import Icon from '@/Components/Icon/Icon'
|
|
import { usePremiumModal } from '@/Hooks/usePremiumModal'
|
|
import { ThemeItem } from './ThemeItem'
|
|
import { PremiumFeatureIconClass, PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon'
|
|
import { isMobileScreen } from '@/Utils'
|
|
import { classNames } from '@standardnotes/utils'
|
|
import MenuSwitchButtonItem from '../Menu/MenuSwitchButtonItem'
|
|
import MenuRadioButtonItem from '../Menu/MenuRadioButtonItem'
|
|
import { useCommandService } from '../CommandProvider'
|
|
import { TOGGLE_DARK_MODE_COMMAND } from '@standardnotes/ui-services'
|
|
import { KeyboardShortcutIndicator } from '../KeyboardShortcutIndicator/KeyboardShortcutIndicator'
|
|
|
|
type Props = {
|
|
item: ThemeItem
|
|
application: WebApplication
|
|
}
|
|
|
|
const ThemesMenuButton: FunctionComponent<Props> = ({ application, item }) => {
|
|
const commandService = useCommandService()
|
|
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 = useCallback(() => {
|
|
if (item.component && canActivateTheme) {
|
|
const isThemeLayerable = item.component.isLayerable()
|
|
const themeIsLayerableOrNotActive = isThemeLayerable || !item.component.active
|
|
|
|
if (themeIsLayerableOrNotActive) {
|
|
application.mutator.toggleTheme(item.component).catch(console.error)
|
|
}
|
|
} else {
|
|
premiumModal.activate(`${item.name} theme`)
|
|
}
|
|
}, [application, canActivateTheme, item, premiumModal])
|
|
|
|
const onClick: MouseEventHandler<HTMLButtonElement> = useCallback(
|
|
(event) => {
|
|
event.preventDefault()
|
|
toggleTheme()
|
|
},
|
|
[toggleTheme],
|
|
)
|
|
|
|
const isMobile = application.isNativeMobileWeb() || isMobileScreen()
|
|
const shouldHideButton = item.identifier === FeatureIdentifier.DynamicTheme && isMobile
|
|
|
|
const darkThemeShortcut = useMemo(() => {
|
|
if (item.identifier === FeatureIdentifier.DarkTheme) {
|
|
return commandService.keyboardShortcutForCommand(TOGGLE_DARK_MODE_COMMAND)
|
|
}
|
|
}, [commandService, item.identifier])
|
|
|
|
if (shouldHideButton) {
|
|
return null
|
|
}
|
|
|
|
return item.component?.isLayerable() ? (
|
|
<MenuSwitchButtonItem checked={item.component.active} onChange={() => toggleTheme()}>
|
|
{!canActivateTheme && (
|
|
<Icon type={PremiumFeatureIconName} className={classNames(PremiumFeatureIconClass, 'mr-2')} />
|
|
)}
|
|
{item.name}
|
|
</MenuSwitchButtonItem>
|
|
) : (
|
|
<MenuRadioButtonItem checked={Boolean(item.component?.active)} onClick={onClick}>
|
|
<span className={classNames('mr-auto', item.component?.active ? 'font-semibold' : undefined)}>{item.name}</span>
|
|
{darkThemeShortcut && <KeyboardShortcutIndicator className="mr-2" shortcut={darkThemeShortcut} />}
|
|
{item.component && canActivateTheme ? (
|
|
<div
|
|
className="h-5 w-5 rounded-full"
|
|
style={{
|
|
backgroundColor: item.component.package_info?.dock_icon?.background_color,
|
|
}}
|
|
></div>
|
|
) : (
|
|
<Icon type={PremiumFeatureIconName} className={classNames(PremiumFeatureIconClass, 'ml-auto')} />
|
|
)}
|
|
</MenuRadioButtonItem>
|
|
)
|
|
}
|
|
|
|
export default ThemesMenuButton
|