forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Replace "Note about sharing" prompt with an inline hint (#8452)
* add pwi warning to share menu, remove prompt
* add pwi label to web, remove prompt
* add an option to the PWI menu
* conditionally reorder items on web
authored by
Samuel Newman
and committed by
GitHub
487da69a
23a7bc50
+142
-146
+28
-17
src/components/Menu/index.tsx
+28
-17
src/components/Menu/index.tsx
···
1
-
import React from 'react'
2
-
import {Pressable, StyleProp, View, ViewStyle} from 'react-native'
1
+
import {cloneElement, Fragment, isValidElement, useMemo} from 'react'
2
+
import {
3
+
Pressable,
4
+
type StyleProp,
5
+
type TextStyle,
6
+
View,
7
+
type ViewStyle,
8
+
} from 'react-native'
3
9
import {msg, Trans} from '@lingui/macro'
4
10
import {useLingui} from '@lingui/react'
5
11
import flattenReactChildren from 'react-keyed-flatten-children'
···
16
22
useMenuItemContext,
17
23
} from '#/components/Menu/context'
18
24
import {
19
-
ContextType,
20
-
GroupProps,
21
-
ItemIconProps,
22
-
ItemProps,
23
-
ItemTextProps,
24
-
TriggerProps,
25
+
type ContextType,
26
+
type GroupProps,
27
+
type ItemIconProps,
28
+
type ItemProps,
29
+
type ItemTextProps,
30
+
type TriggerProps,
25
31
} from '#/components/Menu/types'
26
32
import {Text} from '#/components/Typography'
27
33
···
39
45
control?: Dialog.DialogControlProps
40
46
}>) {
41
47
const defaultControl = Dialog.useDialogControl()
42
-
const context = React.useMemo<ContextType>(
48
+
const context = useMemo<ContextType>(
43
49
() => ({
44
50
control: control || defaultControl,
45
51
}),
···
276
282
)
277
283
}
278
284
279
-
export function LabelText({children}: {children: React.ReactNode}) {
285
+
export function LabelText({
286
+
children,
287
+
style,
288
+
}: {
289
+
children: React.ReactNode
290
+
style?: StyleProp<TextStyle>
291
+
}) {
280
292
const t = useTheme()
281
293
return (
282
294
<Text
283
295
style={[
284
296
a.font_bold,
285
297
t.atoms.text_contrast_medium,
286
-
{
287
-
marginBottom: -8,
288
-
},
298
+
{marginBottom: -8},
299
+
style,
289
300
]}>
290
301
{children}
291
302
</Text>
···
304
315
style,
305
316
]}>
306
317
{flattenReactChildren(children).map((child, i) => {
307
-
return React.isValidElement(child) &&
318
+
return isValidElement(child) &&
308
319
(child.type === Item || child.type === ContainerItem) ? (
309
-
<React.Fragment key={i}>
320
+
<Fragment key={i}>
310
321
{i > 0 ? (
311
322
<View style={[a.border_b, t.atoms.border_contrast_low]} />
312
323
) : null}
313
-
{React.cloneElement(child, {
324
+
{cloneElement(child, {
314
325
// @ts-expect-error cloneElement is not aware of the types
315
326
style: {
316
327
borderRadius: 0,
317
328
borderWidth: 0,
318
329
},
319
330
})}
320
-
</React.Fragment>
331
+
</Fragment>
321
332
) : null
322
333
})}
323
334
</View>
+25
-14
src/components/Menu/index.web.tsx
+25
-14
src/components/Menu/index.web.tsx
···
1
-
import React from 'react'
2
-
import {Pressable, type StyleProp, View, type ViewStyle} from 'react-native'
1
+
import {forwardRef, useCallback, useId, useMemo, useState} from 'react'
2
+
import {
3
+
Pressable,
4
+
type StyleProp,
5
+
type TextStyle,
6
+
View,
7
+
type ViewStyle,
8
+
} from 'react-native'
3
9
import {msg} from '@lingui/macro'
4
10
import {useLingui} from '@lingui/react'
5
11
import {DropdownMenu} from 'radix-ui'
···
29
35
export {useMenuContext}
30
36
31
37
export function useMenuControl(): Dialog.DialogControlProps {
32
-
const id = React.useId()
33
-
const [isOpen, setIsOpen] = React.useState(false)
38
+
const id = useId()
39
+
const [isOpen, setIsOpen] = useState(false)
34
40
35
-
return React.useMemo(
41
+
return useMemo(
36
42
() => ({
37
43
id,
38
44
ref: {current: null},
···
56
62
}>) {
57
63
const {_} = useLingui()
58
64
const defaultControl = useMenuControl()
59
-
const context = React.useMemo<ContextType>(
65
+
const context = useMemo<ContextType>(
60
66
() => ({
61
67
control: control || defaultControl,
62
68
}),
63
69
[control, defaultControl],
64
70
)
65
-
const onOpenChange = React.useCallback(
71
+
const onOpenChange = useCallback(
66
72
(open: boolean) => {
67
73
if (context.control.isOpen && !open) {
68
74
context.control.close()
···
96
102
)
97
103
}
98
104
99
-
const RadixTriggerPassThrough = React.forwardRef(
105
+
const RadixTriggerPassThrough = forwardRef(
100
106
(
101
107
props: {
102
108
children: (
···
355
361
)
356
362
}
357
363
358
-
export function LabelText({children}: {children: React.ReactNode}) {
364
+
export function LabelText({
365
+
children,
366
+
style,
367
+
}: {
368
+
children: React.ReactNode
369
+
style?: StyleProp<TextStyle>
370
+
}) {
359
371
const t = useTheme()
360
372
return (
361
373
<Text
362
374
style={[
363
375
a.font_bold,
364
-
a.pt_md,
365
-
a.pb_sm,
376
+
a.p_sm,
366
377
t.atoms.text_contrast_low,
367
-
{
368
-
paddingHorizontal: 10,
369
-
},
378
+
a.leading_snug,
379
+
{paddingHorizontal: 10},
380
+
style,
370
381
]}>
371
382
{children}
372
383
</Text>
+13
-2
src/components/PostControls/PostMenu/PostMenuItems.tsx
+13
-2
src/components/PostControls/PostMenu/PostMenuItems.tsx
···
48
48
useProfileMuteMutationQueue,
49
49
} from '#/state/queries/profile'
50
50
import {useToggleReplyVisibilityMutation} from '#/state/queries/threadgate'
51
-
import {useSession} from '#/state/session'
51
+
import {useRequireAuth, useSession} from '#/state/session'
52
52
import {useMergedThreadgateHiddenReplies} from '#/state/threadgate-hidden-replies'
53
53
import * as Toast from '#/view/com/util/Toast'
54
54
import {useDialogControl} from '#/components/Dialog'
···
113
113
const {mutateAsync: deletePostMutate} = usePostDeleteMutation()
114
114
const {mutateAsync: pinPostMutate, isPending: isPinPending} =
115
115
usePinnedPostMutation()
116
+
const requireSignIn = useRequireAuth()
116
117
const hiddenPosts = useHiddenPosts()
117
118
const {hidePost} = useHiddenPostsApi()
118
119
const feedFeedback = useFeedFeedbackContext()
···
397
398
openLink(url)
398
399
}
399
400
401
+
const onSignIn = () => requireSignIn(() => {})
402
+
400
403
const gate = useGate()
401
404
const isDiscoverDebugUser =
402
405
IS_INTERNAL ||
···
434
437
)}
435
438
436
439
<Menu.Group>
437
-
{(!hideInPWI || hasSession) && (
440
+
{!hideInPWI || hasSession ? (
438
441
<>
439
442
<Menu.Item
440
443
testID="postDropdownTranslateBtn"
···
452
455
<Menu.ItemIcon icon={ClipboardIcon} position="right" />
453
456
</Menu.Item>
454
457
</>
458
+
) : (
459
+
<Menu.Item
460
+
testID="postDropdownSignInBtn"
461
+
label={_(msg`Sign in to view post`)}
462
+
onPress={onSignIn}>
463
+
<Menu.ItemText>{_(msg`Sign in to view post`)}</Menu.ItemText>
464
+
<Menu.ItemIcon icon={Eye} position="right" />
465
+
</Menu.Item>
455
466
)}
456
467
</Menu.Group>
457
468