99 lines
2.9 KiB
TypeScript
99 lines
2.9 KiB
TypeScript
import RoundIconButton from '@/Components/Button/RoundIconButton'
|
|
import { FunctionComponent, useEffect, useMemo } from 'react'
|
|
import { observer } from 'mobx-react-lite'
|
|
import { PreferencesMenu } from './PreferencesMenu'
|
|
import PreferencesCanvas from './PreferencesCanvas'
|
|
import { PreferencesProps } from './PreferencesProps'
|
|
import { useDisableBodyScrollOnMobile } from '@/Hooks/useDisableBodyScrollOnMobile'
|
|
import { useAndroidBackHandler } from '@/NativeMobileWeb/useAndroidBackHandler'
|
|
import Modal from '../Modal/Modal'
|
|
import { classNames } from '@standardnotes/snjs'
|
|
import { isIOS } from '@/Utils'
|
|
import { useCommandService } from '../CommandProvider'
|
|
import { ESCAPE_COMMAND } from '@standardnotes/ui-services'
|
|
|
|
const PreferencesView: FunctionComponent<PreferencesProps> = ({
|
|
application,
|
|
viewControllerManager,
|
|
closePreferences,
|
|
userProvider,
|
|
mfaProvider,
|
|
}) => {
|
|
const commandService = useCommandService()
|
|
|
|
const menu = useMemo(
|
|
() => new PreferencesMenu(application, viewControllerManager.enableUnfinishedFeatures),
|
|
[viewControllerManager.enableUnfinishedFeatures, application],
|
|
)
|
|
|
|
useEffect(() => {
|
|
menu.selectPane(viewControllerManager.preferencesController.currentPane)
|
|
}, [menu, viewControllerManager.preferencesController.currentPane])
|
|
|
|
useDisableBodyScrollOnMobile()
|
|
|
|
const addAndroidBackHandler = useAndroidBackHandler()
|
|
|
|
useEffect(() => {
|
|
const removeListener = addAndroidBackHandler(() => {
|
|
closePreferences()
|
|
return true
|
|
})
|
|
return () => {
|
|
if (removeListener) {
|
|
removeListener()
|
|
}
|
|
}
|
|
}, [addAndroidBackHandler, closePreferences])
|
|
|
|
useEffect(() => {
|
|
return commandService.addCommandHandler({
|
|
command: ESCAPE_COMMAND,
|
|
onKeyDown: () => {
|
|
closePreferences()
|
|
return true
|
|
},
|
|
})
|
|
}, [commandService, closePreferences])
|
|
|
|
return (
|
|
<Modal
|
|
close={closePreferences}
|
|
title="Preferences"
|
|
className={{
|
|
content: 'md:h-full md:!max-h-full md:!w-full',
|
|
description: 'flex flex-col',
|
|
}}
|
|
customHeader={
|
|
<div
|
|
className={classNames(
|
|
'flex w-full flex-row items-center justify-between border-b border-solid border-border bg-default px-3 pb-2 md:p-3',
|
|
isIOS() ? 'pt-safe-top' : 'pt-2',
|
|
)}
|
|
>
|
|
<div className="hidden h-8 w-8 md:block" />
|
|
<h1 className="text-base font-bold md:text-lg">Your preferences for Standard Notes</h1>
|
|
<RoundIconButton
|
|
onClick={() => {
|
|
closePreferences()
|
|
}}
|
|
icon="close"
|
|
label="Close preferences"
|
|
/>
|
|
</div>
|
|
}
|
|
>
|
|
<PreferencesCanvas
|
|
menu={menu}
|
|
application={application}
|
|
viewControllerManager={viewControllerManager}
|
|
closePreferences={closePreferences}
|
|
userProvider={userProvider}
|
|
mfaProvider={mfaProvider}
|
|
/>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
export default observer(PreferencesView)
|