55 lines
1.9 KiB
TypeScript
55 lines
1.9 KiB
TypeScript
import { FunctionComponent, useCallback, useEffect, useState } from 'react'
|
|
import Menu from '../Menu/Menu'
|
|
import { useApplication } from '../ApplicationProvider'
|
|
import { ContentType, VaultListingInterface } from '@standardnotes/snjs'
|
|
import MenuRadioButtonItem from '../Menu/MenuRadioButtonItem'
|
|
import { observer } from 'mobx-react-lite'
|
|
import Icon from '../Icon/Icon'
|
|
import VaultSelectMenuItemWithOptions from './MenuItemWithVaultOption'
|
|
|
|
const SingleVaultSelectionMenu: FunctionComponent = () => {
|
|
const application = useApplication()
|
|
|
|
const [vaults, setVaults] = useState(() => application.vaults.getVaults())
|
|
useEffect(() => {
|
|
return application.items.streamItems(ContentType.TYPES.VaultListing, () => {
|
|
setVaults(application.vaults.getVaults())
|
|
})
|
|
}, [application.items, application.vaults])
|
|
|
|
const isVaultVisible = useCallback(
|
|
(vault: VaultListingInterface) => {
|
|
return application.vaultDisplayService.isVaultExclusivelyShown(vault)
|
|
},
|
|
[application],
|
|
)
|
|
|
|
const selectVault = useCallback(
|
|
(vault: VaultListingInterface) => {
|
|
application.vaultDisplayService.showOnlyVault(vault)
|
|
},
|
|
[application],
|
|
)
|
|
|
|
return (
|
|
<Menu a11yLabel="Vault selection menu" isOpen>
|
|
{!vaults.length && <div className="py-1 text-center">No vaults found</div>}
|
|
{vaults.map((vault) => (
|
|
<VaultSelectMenuItemWithOptions vault={vault}>
|
|
<MenuRadioButtonItem
|
|
className="!px-0 focus:!bg-transparent md:!py-[0.455rem]"
|
|
key={vault.uuid}
|
|
checked={isVaultVisible(vault)}
|
|
onClick={() => selectVault(vault)}
|
|
>
|
|
{vault.name}
|
|
{application.vaultLocks.isVaultLocked(vault) && <Icon className="ml-1" type="lock" size={'small'} />}
|
|
</MenuRadioButtonItem>
|
|
</VaultSelectMenuItemWithOptions>
|
|
))}
|
|
</Menu>
|
|
)
|
|
}
|
|
|
|
export default observer(SingleVaultSelectionMenu)
|