39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
import { WebApplication } from '@/Application/WebApplication'
|
|
import { FunctionComponent, useCallback, useMemo } from 'react'
|
|
import { isMobileScreen } from '@/Utils'
|
|
import { TOGGLE_FOCUS_MODE_COMMAND } from '@standardnotes/ui-services'
|
|
import MenuSwitchButtonItem from '../Menu/MenuSwitchButtonItem'
|
|
|
|
type Props = {
|
|
application: WebApplication
|
|
onToggle: (value: boolean) => void
|
|
onClose: () => void
|
|
isEnabled: boolean
|
|
}
|
|
|
|
const FocusModeSwitch: FunctionComponent<Props> = ({ application, onToggle, onClose, isEnabled }) => {
|
|
const toggle = useCallback(() => {
|
|
onToggle(!isEnabled)
|
|
onClose()
|
|
}, [onToggle, isEnabled, onClose])
|
|
|
|
const shortcut = useMemo(
|
|
() => application.keyboardService.keyboardShortcutForCommand(TOGGLE_FOCUS_MODE_COMMAND),
|
|
[application],
|
|
)
|
|
|
|
const isMobile = application.isNativeMobileWeb() || isMobileScreen()
|
|
|
|
if (isMobile) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<MenuSwitchButtonItem onChange={toggle} shortcut={shortcut} checked={isEnabled}>
|
|
Focus Mode
|
|
</MenuSwitchButtonItem>
|
|
)
|
|
}
|
|
|
|
export default FocusModeSwitch
|