58 lines
1.8 KiB
TypeScript
58 lines
1.8 KiB
TypeScript
import { observer } from 'mobx-react-lite'
|
|
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'
|
|
import { useApplication } from '../ApplicationProvider'
|
|
|
|
export type AccountMenuProps = {
|
|
onClickOutside: () => void
|
|
mainApplicationGroup: WebApplicationGroup
|
|
}
|
|
|
|
const AccountMenu: FunctionComponent<AccountMenuProps> = ({ mainApplicationGroup }) => {
|
|
const application = useApplication()
|
|
|
|
const { currentPane } = application.accountMenuController
|
|
|
|
const closeAccountMenu = useCallback(() => {
|
|
application.accountMenuController.closeAccountMenu()
|
|
}, [application])
|
|
|
|
const setCurrentPane = useCallback(
|
|
(pane: AccountMenuPane) => {
|
|
application.accountMenuController.setCurrentPane(pane)
|
|
},
|
|
[application],
|
|
)
|
|
|
|
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
|
|
mainApplicationGroup={mainApplicationGroup}
|
|
menuPane={currentPane}
|
|
setMenuPane={setCurrentPane}
|
|
closeMenu={closeAccountMenu}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default observer(AccountMenu)
|