65 lines
2.1 KiB
TypeScript
65 lines
2.1 KiB
TypeScript
import { observer } from 'mobx-react-lite'
|
|
import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
|
|
import { WebApplication } from '@/Application/WebApplication'
|
|
import { useCallback, FunctionComponent, KeyboardEventHandler } from 'react'
|
|
import { WebApplicationGroup } from '@/Application/WebApplicationGroup'
|
|
import { AccountMenuPane } from './AccountMenuPane'
|
|
import MenuPaneSelector from './MenuPaneSelector'
|
|
import { KeyboardKey } from '@standardnotes/ui-services'
|
|
|
|
export type AccountMenuProps = {
|
|
viewControllerManager: ViewControllerManager
|
|
application: WebApplication
|
|
onClickOutside: () => void
|
|
mainApplicationGroup: WebApplicationGroup
|
|
}
|
|
|
|
const AccountMenu: FunctionComponent<AccountMenuProps> = ({
|
|
application,
|
|
viewControllerManager,
|
|
mainApplicationGroup,
|
|
}) => {
|
|
const { currentPane } = viewControllerManager.accountMenuController
|
|
|
|
const closeAccountMenu = useCallback(() => {
|
|
viewControllerManager.accountMenuController.closeAccountMenu()
|
|
}, [viewControllerManager])
|
|
|
|
const setCurrentPane = useCallback(
|
|
(pane: AccountMenuPane) => {
|
|
viewControllerManager.accountMenuController.setCurrentPane(pane)
|
|
},
|
|
[viewControllerManager],
|
|
)
|
|
|
|
const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = useCallback(
|
|
(event) => {
|
|
if (event.key === KeyboardKey.Escape) {
|
|
if (currentPane === AccountMenuPane.GeneralMenu) {
|
|
closeAccountMenu()
|
|
} else if (currentPane === AccountMenuPane.ConfirmPassword) {
|
|
setCurrentPane(AccountMenuPane.Register)
|
|
} else {
|
|
setCurrentPane(AccountMenuPane.GeneralMenu)
|
|
}
|
|
}
|
|
},
|
|
[closeAccountMenu, currentPane, setCurrentPane],
|
|
)
|
|
|
|
return (
|
|
<div id="account-menu" className="sn-component" onKeyDown={handleKeyDown}>
|
|
<MenuPaneSelector
|
|
viewControllerManager={viewControllerManager}
|
|
application={application}
|
|
mainApplicationGroup={mainApplicationGroup}
|
|
menuPane={currentPane}
|
|
setMenuPane={setCurrentPane}
|
|
closeMenu={closeAccountMenu}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default observer(AccountMenu)
|