Paul Coroneos
ff5ad38253
* update eslint config with jsx runtime * leverage jsx transform to remove unnecessary react imports and update eslint config * run yarn lint --fix to remove eslint disables related to react/prop-types that is now disabled
79 lines
2.4 KiB
TypeScript
79 lines
2.4 KiB
TypeScript
import {View} from 'react-native'
|
|
|
|
import {atoms as a, useTheme} from '#/alf'
|
|
import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2'
|
|
import * as Menu from '#/components/Menu'
|
|
import {Text} from '#/components/Typography'
|
|
// import {useDialogStateControlContext} from '#/state/dialogs'
|
|
|
|
export function Menus() {
|
|
const t = useTheme()
|
|
const menuControl = Menu.useMenuControl()
|
|
// const {closeAllDialogs} = useDialogStateControlContext()
|
|
|
|
return (
|
|
<View style={[a.gap_md]}>
|
|
<View style={[a.flex_row, a.align_start]}>
|
|
<Menu.Root control={menuControl}>
|
|
<Menu.Trigger label="Open basic menu">
|
|
{({state, props}) => {
|
|
return (
|
|
<Text
|
|
{...props}
|
|
style={[
|
|
a.py_sm,
|
|
a.px_md,
|
|
a.rounded_sm,
|
|
t.atoms.bg_contrast_50,
|
|
(state.hovered || state.focused || state.pressed) && [
|
|
t.atoms.bg_contrast_200,
|
|
],
|
|
]}>
|
|
Open
|
|
</Text>
|
|
)
|
|
}}
|
|
</Menu.Trigger>
|
|
|
|
<Menu.Outer>
|
|
<Menu.Group>
|
|
<Menu.Item label="Click me" onPress={() => {}}>
|
|
<Menu.ItemIcon icon={Search} />
|
|
<Menu.ItemText>Click me</Menu.ItemText>
|
|
</Menu.Item>
|
|
|
|
<Menu.Item
|
|
label="Another item"
|
|
onPress={() => menuControl.close()}>
|
|
<Menu.ItemText>Another item</Menu.ItemText>
|
|
</Menu.Item>
|
|
</Menu.Group>
|
|
|
|
<Menu.Divider />
|
|
|
|
<Menu.Group>
|
|
<Menu.Item label="Click me" onPress={() => {}}>
|
|
<Menu.ItemIcon icon={Search} />
|
|
<Menu.ItemText>Click me</Menu.ItemText>
|
|
</Menu.Item>
|
|
|
|
<Menu.Item
|
|
label="Another item"
|
|
onPress={() => menuControl.close()}>
|
|
<Menu.ItemText>Another item</Menu.ItemText>
|
|
</Menu.Item>
|
|
</Menu.Group>
|
|
|
|
<Menu.Divider />
|
|
|
|
<Menu.Item label="Click me" onPress={() => {}}>
|
|
<Menu.ItemIcon icon={Search} />
|
|
<Menu.ItemText>Click me</Menu.ItemText>
|
|
</Menu.Item>
|
|
</Menu.Outer>
|
|
</Menu.Root>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|