forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Display the language selection dialog correctly on web (#2719)
* add event to callback
* position translation button correctly based on press position
* properly place the background
* remove worthless comment
+37
-15
+5
-7
src/view/com/util/forms/Button.tsx
+5
-7
src/view/com/util/forms/Button.tsx
···
9
9
PressableStateCallbackType,
10
10
ActivityIndicator,
11
11
View,
12
+
NativeSyntheticEvent,
13
+
NativeTouchEvent,
12
14
} from 'react-native'
13
15
import {Text} from '../text/Text'
14
16
import {useTheme} from 'lib/ThemeContext'
15
17
import {choose} from 'lib/functions'
16
-
17
-
type Event =
18
-
| React.MouseEvent<HTMLAnchorElement, MouseEvent>
19
-
| GestureResponderEvent
20
18
21
19
export type ButtonType =
22
20
| 'primary'
···
59
57
style?: StyleProp<ViewStyle>
60
58
labelContainerStyle?: StyleProp<ViewStyle>
61
59
labelStyle?: StyleProp<TextStyle>
62
-
onPress?: () => void | Promise<void>
60
+
onPress?: (e: NativeSyntheticEvent<NativeTouchEvent>) => void | Promise<void>
63
61
testID?: string
64
62
accessibilityLabel?: string
65
63
accessibilityHint?: string
···
148
146
149
147
const [isLoading, setIsLoading] = React.useState(false)
150
148
const onPressWrapped = React.useCallback(
151
-
async (event: Event) => {
149
+
async (event: GestureResponderEvent) => {
152
150
event.stopPropagation()
153
151
event.preventDefault()
154
152
withLoading && setIsLoading(true)
155
-
await onPress?.()
153
+
await onPress?.(event)
156
154
withLoading && setIsLoading(false)
157
155
},
158
156
[onPress, withLoading],
+32
-8
src/view/com/util/forms/DropdownButton.tsx
+32
-8
src/view/com/util/forms/DropdownButton.tsx
···
1
1
import React, {PropsWithChildren, useMemo, useRef} from 'react'
2
2
import {
3
3
Dimensions,
4
+
GestureResponderEvent,
4
5
StyleProp,
5
6
StyleSheet,
6
7
TouchableOpacity,
7
8
TouchableWithoutFeedback,
9
+
useWindowDimensions,
8
10
View,
9
11
ViewStyle,
10
12
} from 'react-native'
···
19
21
import {HITSLOP_10} from 'lib/constants'
20
22
import {useLingui} from '@lingui/react'
21
23
import {msg} from '@lingui/macro'
24
+
import {isWeb} from 'platform/detection'
22
25
23
26
const ESTIMATED_BTN_HEIGHT = 50
24
27
const ESTIMATED_SEP_HEIGHT = 16
···
80
83
const ref1 = useRef<TouchableOpacity>(null)
81
84
const ref2 = useRef<View>(null)
82
85
83
-
const onPress = () => {
86
+
const onPress = (e: GestureResponderEvent) => {
84
87
const ref = ref1.current || ref2.current
88
+
const {height: winHeight} = Dimensions.get('window')
89
+
const pressY = e.nativeEvent.pageY
85
90
ref?.measure(
86
91
(
87
92
_x: number,
88
93
_y: number,
89
94
width: number,
90
-
height: number,
95
+
_height: number,
91
96
pageX: number,
92
97
pageY: number,
93
98
) => {
94
99
if (!menuWidth) {
95
100
menuWidth = 200
96
101
}
97
-
const winHeight = Dimensions.get('window').height
98
102
let estimatedMenuHeight = 0
99
103
for (const item of items) {
100
104
if (item && isSep(item)) {
···
108
112
const newX = openToRight
109
113
? pageX + width + rightOffset
110
114
: pageX + width - menuWidth
111
-
let newY = pageY + height + bottomOffset
115
+
116
+
// Add a bit of additional room
117
+
let newY = pressY + bottomOffset + 20
112
118
if (openUpwards || newY + estimatedMenuHeight > winHeight) {
113
119
newY -= estimatedMenuHeight
114
120
}
115
121
createDropdownMenu(
116
122
newX,
117
123
newY,
124
+
pageY,
118
125
menuWidth,
119
126
items.filter(v => !!v) as DropdownItem[],
120
127
)
···
168
175
function createDropdownMenu(
169
176
x: number,
170
177
y: number,
178
+
pageY: number,
171
179
width: number,
172
180
items: DropdownItem[],
173
181
): RootSiblings {
···
185
193
onOuterPress={onOuterPress}
186
194
x={x}
187
195
y={y}
196
+
pageY={pageY}
188
197
width={width}
189
198
items={items}
190
199
onPressItem={onPressItem}
···
198
207
onOuterPress: () => void
199
208
x: number
200
209
y: number
210
+
pageY: number
201
211
width: number
202
212
items: DropdownItem[]
203
213
onPressItem: (index: number) => void
···
207
217
onOuterPress,
208
218
x,
209
219
y,
220
+
pageY,
210
221
width,
211
222
items,
212
223
onPressItem,
···
214
225
const pal = usePalette('default')
215
226
const theme = useTheme()
216
227
const {_} = useLingui()
228
+
const {height: screenHeight} = useWindowDimensions()
217
229
const dropDownBackgroundColor =
218
230
theme.colorScheme === 'dark' ? pal.btn : pal.view
219
231
const separatorColor =
···
233
245
onPress={onOuterPress}
234
246
accessibilityLabel={_(msg`Toggle dropdown`)}
235
247
accessibilityHint="">
236
-
<View style={[styles.bg]} />
248
+
<View
249
+
style={[
250
+
styles.bg,
251
+
// On web we need to adjust the top and bottom relative to the scroll position
252
+
isWeb
253
+
? {
254
+
top: -pageY,
255
+
bottom: pageY - screenHeight,
256
+
}
257
+
: {
258
+
top: 0,
259
+
bottom: 0,
260
+
},
261
+
]}
262
+
/>
237
263
</TouchableWithoutFeedback>
238
264
<View
239
265
style={[
···
295
321
const styles = StyleSheet.create({
296
322
bg: {
297
323
position: 'absolute',
298
-
top: 0,
299
-
right: 0,
300
-
bottom: 0,
301
324
left: 0,
325
+
width: '100%',
302
326
backgroundColor: '#000',
303
327
opacity: 0.1,
304
328
},