Samuel Newman
88 lines
2.2 KiB
TypeScript
88 lines
2.2 KiB
TypeScript
import {type StyleProp, type ViewStyle} from 'react-native'
|
|
|
|
import {atoms as a, useTheme} from '#/alf'
|
|
import * as Menu from '#/components/Menu'
|
|
import {type TriggerProps as MenuTriggerProps} from '#/components/Menu/types'
|
|
import {Text} from '#/components/Typography'
|
|
import {type AuxiliaryViewProps, type TriggerProps} from './types'
|
|
|
|
export {
|
|
ContainerItem,
|
|
type MenuControlProps as ContextMenuControlProps,
|
|
Divider,
|
|
Group,
|
|
Item,
|
|
ItemIcon,
|
|
ItemRadio,
|
|
ItemText,
|
|
LabelText,
|
|
Root,
|
|
useMenuContext as useContextMenuContext,
|
|
useMenuControl as useContextMenuControl,
|
|
} from '#/components/Menu'
|
|
|
|
export function Provider({children}: {children: React.ReactNode}) {
|
|
return children
|
|
}
|
|
|
|
// native only
|
|
export function AuxiliaryView({}: AuxiliaryViewProps) {
|
|
return null
|
|
}
|
|
|
|
/*
|
|
* On web the context menu is just a Menu; contentLabel, onTap, style, and
|
|
* swipeGesture only apply to the native press-and-hold presentation.
|
|
*/
|
|
export function Trigger({children, label, hint, role}: TriggerProps) {
|
|
return (
|
|
<Menu.Trigger label={label} hint={hint} role={role}>
|
|
{/*
|
|
* Menu supplies the same web-arm child props shape as ContextMenu's
|
|
* TriggerChildProps; only the native arms of the two unions differ,
|
|
* and those never occur here.
|
|
*/}
|
|
{children as unknown as MenuTriggerProps['children']}
|
|
</Menu.Trigger>
|
|
)
|
|
}
|
|
|
|
export function Outer({
|
|
children,
|
|
label,
|
|
align: _align,
|
|
style,
|
|
onCloseAutoFocus,
|
|
}: {
|
|
children: React.ReactNode
|
|
label?: string
|
|
/**
|
|
* Native positions the menu against the message bubble explicitly; the web
|
|
* dropdown is anchored by radix, so this is accepted only for parity.
|
|
*/
|
|
align?: 'left' | 'right'
|
|
style?: StyleProp<ViewStyle>
|
|
onCloseAutoFocus?: (event: Event) => void
|
|
}) {
|
|
const t = useTheme()
|
|
return (
|
|
<Menu.Outer style={style} onCloseAutoFocus={onCloseAutoFocus}>
|
|
{label ? (
|
|
<Text
|
|
numberOfLines={1}
|
|
style={[
|
|
a.pl_sm,
|
|
a.pt_md,
|
|
a.pr_lg,
|
|
a.pb_md,
|
|
a.text_xs,
|
|
t.atoms.text_contrast_medium,
|
|
]}>
|
|
{label}
|
|
</Text>
|
|
) : null}
|
|
{children}
|
|
</Menu.Outer>
|
|
)
|
|
}
|