1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
|
import {
type AccessibilityRole,
type GestureResponderEvent,
type StyleProp,
type ViewStyle,
} from 'react-native'
import {type SharedValue} from 'react-native-reanimated'
import type React from 'react'
import type * as Dialog from '#/components/Dialog'
import {
type ItemProps as MenuItemProps,
type RadixPassThroughTriggerProps,
} from '#/components/Menu/types'
export type {
GroupProps,
ItemIconProps,
ItemTextProps,
} from '#/components/Menu/types'
export type AuxiliaryViewProps = {
children?: React.ReactNode
align?: 'left' | 'right'
}
export type ItemProps = Omit<MenuItemProps, 'onPress' | 'children'> & {
// remove default styles (i.e. for emoji reactions)
unstyled?: boolean
onPress: (evt?: GestureResponderEvent) => void
children?: React.ReactNode | ((hovered: boolean) => React.ReactNode)
// absolute position of the parent element. if undefined, assumed to
// be in the context menu. use this if using AuxiliaryView
position?: Measurement
}
export type Measurement = {
x: number
y: number
width: number
height: number
}
export type ContextType = {
isOpen: boolean
measurement: Measurement | null
/* Spring animation between 0 and 1 */
animationSV: SharedValue<number>
/* Translation in Y axis to ensure everything's onscreen */
translationSV: SharedValue<number>
mode: 'full' | 'auxiliary-only'
open: (evt: Measurement, mode: 'full' | 'auxiliary-only') => void
close: () => void
registerHoverable: (
id: string,
rect: Measurement,
onTouchUp: () => void,
) => void
hoverablesSV: SharedValue<Record<string, {id: string; rect: Measurement}>>
hoveredMenuItem: string | null
setHoveredMenuItem: React.Dispatch<React.SetStateAction<string | null>>
onTouchUpMenuItem: (id: string) => void
}
export type MenuContextType = {
align: 'left' | 'right'
}
export type ItemContextType = {
disabled: boolean
}
export type TriggerProps = {
children(props: TriggerChildProps): React.ReactNode
label: string
/**
* When activated, this is the accessibility label for the entire thing that has been triggered.
* For example, if the trigger is a message bubble, use the message content.
*
* @platform ios, android
*/
contentLabel: string
hint?: string
role?: AccessibilityRole
style?: StyleProp<ViewStyle>
}
export type TriggerChildProps =
| {
isNative: true
control: {
isOpen: boolean
open: (mode: 'full' | 'auxiliary-only') => void
}
state: {
hovered: false
focused: false
pressed: false
}
/**
* We don't necessarily know what these will be spread on to, so we
* should add props one-by-one.
*
* On web, these properties are applied to a parent `Pressable`, so this
* object is empty.
*/
props: {
ref: null
onPress: null
onFocus: null
onBlur: null
onPressIn: null
onPressOut: null
accessibilityHint: null
accessibilityLabel: string
accessibilityRole: null
}
}
| {
isNative: false
control: Dialog.DialogOuterProps['control']
state: {
hovered: false
focused: false
pressed: false
}
props: RadixPassThroughTriggerProps & {
onPress: () => void
onFocus: () => void
onBlur: () => void
onMouseEnter: () => void
onMouseLeave: () => void
accessibilityHint?: string
accessibilityLabel: string
accessibilityRole: AccessibilityRole
}
}
|
