forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Extract RepostButton inner dialog (#6498)
* Extract RepostButton inner dialog
* use `useDialogContext` instead of passing prop
---------
Co-authored-by: Samuel Newman <mozzius@protonmail.com>
authored by
dan
Samuel Newman
and committed by
GitHub
b87c94e6
ec973522
+109
-79
+109
-79
src/view/com/util/post-ctrls/RepostButton.tsx
+109
-79
src/view/com/util/post-ctrls/RepostButton.tsx
···
36
36
const requireAuth = useRequireAuth()
37
37
const dialogControl = Dialog.useDialogControl()
38
38
const playHaptic = useHaptics()
39
-
40
39
const color = React.useMemo(
41
40
() => ({
42
41
color: isReposted ? t.palette.positive_600 : t.palette.contrast_500,
43
42
}),
44
43
[t, isReposted],
45
44
)
46
-
47
-
const close = useCallback(() => dialogControl.close(), [dialogControl])
48
-
49
45
return (
50
46
<>
51
47
<Button
···
92
88
control={dialogControl}
93
89
nativeOptions={{preventExpansion: true}}>
94
90
<Dialog.Handle />
95
-
<Dialog.ScrollableInner label={_(msg`Repost or quote post`)}>
96
-
<View style={a.gap_xl}>
97
-
<View style={a.gap_xs}>
98
-
<Button
99
-
style={[a.justify_start, a.px_md]}
100
-
label={
101
-
isReposted
102
-
? _(msg`Remove repost`)
103
-
: _(msg({message: `Repost`, context: 'action'}))
104
-
}
105
-
onPress={() => {
106
-
if (!isReposted) playHaptic()
107
-
108
-
dialogControl.close(() => {
109
-
onRepost()
110
-
})
111
-
}}
112
-
size="large"
113
-
variant="ghost"
114
-
color="primary">
115
-
<Repost size="lg" fill={t.palette.primary_500} />
116
-
<Text style={[a.font_bold, a.text_xl]}>
117
-
{isReposted
118
-
? _(msg`Remove repost`)
119
-
: _(msg({message: `Repost`, context: 'action'}))}
120
-
</Text>
121
-
</Button>
122
-
<Button
123
-
disabled={embeddingDisabled}
124
-
testID="quoteBtn"
125
-
style={[a.justify_start, a.px_md]}
126
-
label={
127
-
embeddingDisabled
128
-
? _(msg`Quote posts disabled`)
129
-
: _(msg`Quote post`)
130
-
}
131
-
onPress={() => {
132
-
playHaptic()
133
-
dialogControl.close(() => {
134
-
onQuote()
135
-
})
136
-
}}
137
-
size="large"
138
-
variant="ghost"
139
-
color="primary">
140
-
<Quote
141
-
size="lg"
142
-
fill={
143
-
embeddingDisabled
144
-
? t.atoms.text_contrast_low.color
145
-
: t.palette.primary_500
146
-
}
147
-
/>
148
-
<Text
149
-
style={[
150
-
a.font_bold,
151
-
a.text_xl,
152
-
embeddingDisabled && t.atoms.text_contrast_low,
153
-
]}>
154
-
{embeddingDisabled
155
-
? _(msg`Quote posts disabled`)
156
-
: _(msg`Quote post`)}
157
-
</Text>
158
-
</Button>
159
-
</View>
160
-
<Button
161
-
label={_(msg`Cancel quote post`)}
162
-
onPress={close}
163
-
size="large"
164
-
variant="solid"
165
-
color="primary">
166
-
<ButtonText>{_(msg`Cancel`)}</ButtonText>
167
-
</Button>
168
-
</View>
169
-
</Dialog.ScrollableInner>
91
+
<RepostButtonDialogInner
92
+
isReposted={isReposted}
93
+
onRepost={onRepost}
94
+
onQuote={onQuote}
95
+
embeddingDisabled={embeddingDisabled}
96
+
/>
170
97
</Dialog.Outer>
171
98
</>
172
99
)
173
100
}
174
101
RepostButton = memo(RepostButton)
175
102
export {RepostButton}
103
+
104
+
let RepostButtonDialogInner = ({
105
+
isReposted,
106
+
onRepost,
107
+
onQuote,
108
+
embeddingDisabled,
109
+
}: {
110
+
isReposted: boolean
111
+
onRepost: () => void
112
+
onQuote: () => void
113
+
embeddingDisabled: boolean
114
+
}): React.ReactNode => {
115
+
const t = useTheme()
116
+
const {_} = useLingui()
117
+
const playHaptic = useHaptics()
118
+
const control = Dialog.useDialogContext()
119
+
120
+
const onPressRepost = useCallback(() => {
121
+
if (!isReposted) playHaptic()
122
+
123
+
control.close(() => {
124
+
onRepost()
125
+
})
126
+
}, [control, isReposted, onRepost, playHaptic])
127
+
128
+
const onPressQuote = useCallback(() => {
129
+
playHaptic()
130
+
control.close(() => {
131
+
onQuote()
132
+
})
133
+
}, [control, onQuote, playHaptic])
134
+
135
+
const onPressClose = useCallback(() => control.close(), [control])
136
+
137
+
return (
138
+
<Dialog.ScrollableInner label={_(msg`Repost or quote post`)}>
139
+
<View style={a.gap_xl}>
140
+
<View style={a.gap_xs}>
141
+
<Button
142
+
style={[a.justify_start, a.px_md]}
143
+
label={
144
+
isReposted
145
+
? _(msg`Remove repost`)
146
+
: _(msg({message: `Repost`, context: 'action'}))
147
+
}
148
+
onPress={onPressRepost}
149
+
size="large"
150
+
variant="ghost"
151
+
color="primary">
152
+
<Repost size="lg" fill={t.palette.primary_500} />
153
+
<Text style={[a.font_bold, a.text_xl]}>
154
+
{isReposted
155
+
? _(msg`Remove repost`)
156
+
: _(msg({message: `Repost`, context: 'action'}))}
157
+
</Text>
158
+
</Button>
159
+
<Button
160
+
disabled={embeddingDisabled}
161
+
testID="quoteBtn"
162
+
style={[a.justify_start, a.px_md]}
163
+
label={
164
+
embeddingDisabled
165
+
? _(msg`Quote posts disabled`)
166
+
: _(msg`Quote post`)
167
+
}
168
+
onPress={onPressQuote}
169
+
size="large"
170
+
variant="ghost"
171
+
color="primary">
172
+
<Quote
173
+
size="lg"
174
+
fill={
175
+
embeddingDisabled
176
+
? t.atoms.text_contrast_low.color
177
+
: t.palette.primary_500
178
+
}
179
+
/>
180
+
<Text
181
+
style={[
182
+
a.font_bold,
183
+
a.text_xl,
184
+
embeddingDisabled && t.atoms.text_contrast_low,
185
+
]}>
186
+
{embeddingDisabled
187
+
? _(msg`Quote posts disabled`)
188
+
: _(msg`Quote post`)}
189
+
</Text>
190
+
</Button>
191
+
</View>
192
+
<Button
193
+
label={_(msg`Cancel quote post`)}
194
+
onPress={onPressClose}
195
+
size="large"
196
+
variant="solid"
197
+
color="primary">
198
+
<ButtonText>{_(msg`Cancel`)}</ButtonText>
199
+
</Button>
200
+
</View>
201
+
</Dialog.ScrollableInner>
202
+
)
203
+
}
204
+
RepostButtonDialogInner = memo(RepostButtonDialogInner)
205
+
export {RepostButtonDialogInner}