forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Merge pull request #1553 from mozzius/refreshed-web-repost-dropdown
Use refreshed dropdown style for repost/quote post dropdown
authored by
Eric Bailey
and committed by
GitHub
6d4ad594
d87c2326
+54
-37
+54
-37
src/view/com/util/post-ctrls/RepostButton.web.tsx
+54
-37
src/view/com/util/post-ctrls/RepostButton.web.tsx
···
1
-
import React, {useMemo} from 'react'
1
+
import React from 'react'
2
2
import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
3
3
import {RepostIcon} from 'lib/icons'
4
-
import {DropdownButton} from '../forms/DropdownButton'
5
4
import {colors} from 'lib/styles'
6
5
import {useTheme} from 'lib/ThemeContext'
7
6
import {Text} from '../text/Text'
8
7
8
+
import {
9
+
NativeDropdown,
10
+
DropdownItem as NativeDropdownItem,
11
+
} from '../forms/NativeDropdown'
12
+
import {EventStopper} from '../EventStopper'
13
+
9
14
interface Props {
10
15
isReposted: boolean
11
16
repostCount?: number
12
17
big?: boolean
13
18
onRepost: () => void
14
19
onQuote: () => void
20
+
style?: StyleProp<ViewStyle>
15
21
}
16
22
17
23
export const RepostButton = ({
···
30
36
[theme],
31
37
)
32
38
33
-
const items = useMemo(
34
-
() => [
35
-
{
36
-
label: isReposted ? 'Undo repost' : 'Repost',
37
-
icon: 'retweet' as const,
38
-
onPress: onRepost,
39
+
const dropdownItems: NativeDropdownItem[] = [
40
+
{
41
+
label: isReposted ? 'Undo repost' : 'Repost',
42
+
testID: 'repostDropdownRepostBtn',
43
+
icon: {
44
+
ios: {name: 'repeat'},
45
+
android: '',
46
+
web: 'retweet',
39
47
},
40
-
{label: 'Quote post', icon: 'quote-left' as const, onPress: onQuote},
41
-
],
42
-
[isReposted, onRepost, onQuote],
43
-
)
48
+
onPress: onRepost,
49
+
},
50
+
{
51
+
label: 'Quote post',
52
+
testID: 'repostDropdownQuoteBtn',
53
+
icon: {
54
+
ios: {name: 'quote.bubble'},
55
+
android: '',
56
+
web: 'quote-left',
57
+
},
58
+
onPress: onQuote,
59
+
},
60
+
]
44
61
45
62
return (
46
-
<DropdownButton
47
-
type="bare"
48
-
items={items}
49
-
bottomOffset={4}
50
-
openToRight
51
-
rightOffset={-40}>
52
-
<View
53
-
style={[
54
-
styles.control,
55
-
!big && styles.controlPad,
56
-
(isReposted
57
-
? styles.reposted
58
-
: defaultControlColor) as StyleProp<ViewStyle>,
59
-
]}>
60
-
<RepostIcon strokeWidth={2.4} size={big ? 24 : 20} />
61
-
{typeof repostCount !== 'undefined' ? (
62
-
<Text
63
-
testID="repostCount"
64
-
type={isReposted ? 'md-bold' : 'md'}
65
-
style={styles.repostCount}>
66
-
{repostCount ?? 0}
67
-
</Text>
68
-
) : undefined}
69
-
</View>
70
-
</DropdownButton>
63
+
<EventStopper>
64
+
<NativeDropdown
65
+
items={dropdownItems}
66
+
accessibilityLabel="Repost or quote post"
67
+
accessibilityHint="">
68
+
<View
69
+
style={[
70
+
styles.control,
71
+
!big && styles.controlPad,
72
+
(isReposted
73
+
? styles.reposted
74
+
: defaultControlColor) as StyleProp<ViewStyle>,
75
+
]}>
76
+
<RepostIcon strokeWidth={2.2} size={big ? 24 : 20} />
77
+
{typeof repostCount !== 'undefined' ? (
78
+
<Text
79
+
testID="repostCount"
80
+
type={isReposted ? 'md-bold' : 'md'}
81
+
style={styles.repostCount}>
82
+
{repostCount ?? 0}
83
+
</Text>
84
+
) : undefined}
85
+
</View>
86
+
</NativeDropdown>
87
+
</EventStopper>
71
88
)
72
89
}
73
90