this repo has no description
Unwrap Menu.Trigger on web (#3182)
authored by
Eric Bailey
and committed by
GitHub
b8afb935
17d921fd
+78
-54
+42
-23
src/components/Menu/index.web.tsx
+42
-23
src/components/Menu/index.web.tsx
···
1
+
/* eslint-disable react/prop-types */
2
+
1
3
import React from 'react'
2
4
import {View, Pressable} from 'react-native'
3
5
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
···
14
16
GroupProps,
15
17
ItemTextProps,
16
18
ItemIconProps,
19
+
RadixPassThroughTriggerProps,
17
20
} from '#/components/Menu/types'
18
21
import {Context} from '#/components/Menu/context'
19
22
···
76
79
)
77
80
}
78
81
79
-
export function Trigger({children, label, style}: TriggerProps) {
82
+
const RadixTriggerPassThrough = React.forwardRef(
83
+
(
84
+
props: {
85
+
children: (
86
+
props: RadixPassThroughTriggerProps & {
87
+
ref: React.Ref<any>
88
+
},
89
+
) => React.ReactNode
90
+
},
91
+
ref,
92
+
) => {
93
+
// @ts-expect-error Radix provides no types of this stuff
94
+
return props.children({...props, ref})
95
+
},
96
+
)
97
+
RadixTriggerPassThrough.displayName = 'RadixTriggerPassThrough'
98
+
99
+
export function Trigger({children, label}: TriggerProps) {
80
100
const {control} = React.useContext(Context)
81
101
const {
82
102
state: hovered,
···
87
107
88
108
return (
89
109
<DropdownMenu.Trigger asChild>
90
-
<Pressable
91
-
accessibilityHint=""
92
-
accessibilityLabel={label}
93
-
onFocus={onFocus}
94
-
onBlur={onBlur}
95
-
style={flatten([style, focused && web({outline: 0})])}
96
-
onPointerDown={() => control.open()}
97
-
{...web({
98
-
onMouseEnter,
99
-
onMouseLeave,
100
-
})}>
101
-
{children({
102
-
isNative: false,
103
-
control,
104
-
state: {
105
-
hovered,
106
-
focused,
107
-
pressed: false,
108
-
},
109
-
props: {},
110
-
})}
111
-
</Pressable>
110
+
<RadixTriggerPassThrough>
111
+
{props =>
112
+
children({
113
+
isNative: false,
114
+
control,
115
+
state: {
116
+
hovered,
117
+
focused,
118
+
pressed: false,
119
+
},
120
+
props: {
121
+
...props,
122
+
onFocus: onFocus,
123
+
onBlur: onBlur,
124
+
onMouseEnter,
125
+
onMouseLeave,
126
+
accessibilityLabel: label,
127
+
},
128
+
})
129
+
}
130
+
</RadixTriggerPassThrough>
112
131
</DropdownMenu.Trigger>
113
132
)
114
133
}
+25
-3
src/components/Menu/types.ts
+25
-3
src/components/Menu/types.ts
···
1
1
import React from 'react'
2
-
import {GestureResponderEvent, PressableProps} from 'react-native'
2
+
import {
3
+
GestureResponderEvent,
4
+
PressableProps,
5
+
AccessibilityProps,
6
+
} from 'react-native'
3
7
4
8
import {Props as SVGIconProps} from '#/components/icons/common'
5
9
import * as Dialog from '#/components/Dialog'
···
9
13
control: Dialog.DialogOuterProps['control']
10
14
}
11
15
12
-
export type TriggerProps = ViewStyleProp & {
16
+
export type RadixPassThroughTriggerProps = {
17
+
id: string
18
+
type: 'button'
19
+
disabled: boolean
20
+
['data-disabled']: boolean
21
+
['data-state']: string
22
+
['aria-controls']?: string
23
+
['aria-haspopup']?: boolean
24
+
['aria-expanded']?: AccessibilityProps['aria-expanded']
25
+
onKeyDown: (e: React.KeyboardEvent) => void
26
+
onPointerDown: PressableProps['onPointerDown']
27
+
}
28
+
export type TriggerProps = {
13
29
children(props: TriggerChildProps): React.ReactNode
14
30
label: string
15
31
}
···
52
68
*/
53
69
pressed: false
54
70
}
55
-
props: {}
71
+
props: RadixPassThroughTriggerProps & {
72
+
onFocus: () => void
73
+
onBlur: () => void
74
+
onMouseEnter: () => void
75
+
onMouseLeave: () => void
76
+
accessibilityLabel: string
77
+
}
56
78
}
57
79
58
80
export type ItemProps = React.PropsWithChildren<
+10
-27
src/view/com/util/forms/PostDropdownBtn.tsx
+10
-27
src/view/com/util/forms/PostDropdownBtn.tsx
···
1
1
import React, {memo} from 'react'
2
-
import {
3
-
StyleProp,
4
-
ViewStyle,
5
-
Pressable,
6
-
View,
7
-
PressableProps,
8
-
} from 'react-native'
2
+
import {StyleProp, ViewStyle, Pressable, PressableProps} from 'react-native'
9
3
import Clipboard from '@react-native-clipboard/clipboard'
10
4
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
11
5
import {useNavigation} from '@react-navigation/native'
···
38
32
import {richTextToString} from '#/lib/strings/rich-text-helpers'
39
33
import {useGlobalDialogsControlContext} from '#/components/dialogs/Context'
40
34
41
-
import {atoms as a, useTheme as useAlf, web} from '#/alf'
35
+
import {atoms as a, useTheme as useAlf} from '#/alf'
42
36
import * as Menu from '#/components/Menu'
43
37
import {Clipboard_Stroke2_Corner2_Rounded as ClipboardIcon} from '#/components/icons/Clipboard'
44
38
import {Filter_Stroke2_Corner0_Rounded as Filter} from '#/components/icons/Filter'
···
174
168
<Menu.Root>
175
169
<Menu.Trigger label={_(msg`Open post options menu`)}>
176
170
{({props, state}) => {
177
-
const styles = [
178
-
style,
179
-
a.rounded_full,
180
-
(state.hovered || state.focused || state.pressed) && [
181
-
web({outline: 0}),
182
-
alf.atoms.bg_contrast_25,
183
-
],
184
-
]
185
-
return isWeb ? (
186
-
<View {...props} testID={testID} style={styles}>
187
-
<FontAwesomeIcon
188
-
icon="ellipsis"
189
-
size={20}
190
-
color={defaultCtrlColor}
191
-
style={{pointerEvents: 'none'}}
192
-
/>
193
-
</View>
194
-
) : (
171
+
return (
195
172
<Pressable
196
173
{...props}
197
174
hitSlop={hitSlop}
198
175
testID={testID}
199
-
style={styles}>
176
+
style={[
177
+
style,
178
+
a.rounded_full,
179
+
(state.hovered || state.pressed) && [
180
+
alf.atoms.bg_contrast_50,
181
+
],
182
+
]}>
200
183
<FontAwesomeIcon
201
184
icon="ellipsis"
202
185
size={20}
+1
-1
src/view/screens/Storybook/Menus.tsx
+1
-1
src/view/screens/Storybook/Menus.tsx