Extract RepostButton inner dialog (#6498)

* Extract RepostButton inner dialog

* use `useDialogContext` instead of passing prop

---------

Co-authored-by: Samuel Newman <mozzius@protonmail.com>
This commit is contained in:
dan
2024-11-18 21:51:23 +00:00
committed by GitHub
parent ec97352201
commit b87c94e6d9
+52 -22
View File
@@ -36,16 +36,12 @@ let RepostButton = ({
const requireAuth = useRequireAuth() const requireAuth = useRequireAuth()
const dialogControl = Dialog.useDialogControl() const dialogControl = Dialog.useDialogControl()
const playHaptic = useHaptics() const playHaptic = useHaptics()
const color = React.useMemo( const color = React.useMemo(
() => ({ () => ({
color: isReposted ? t.palette.positive_600 : t.palette.contrast_500, color: isReposted ? t.palette.positive_600 : t.palette.contrast_500,
}), }),
[t, isReposted], [t, isReposted],
) )
const close = useCallback(() => dialogControl.close(), [dialogControl])
return ( return (
<> <>
<Button <Button
@@ -92,6 +88,53 @@ let RepostButton = ({
control={dialogControl} control={dialogControl}
nativeOptions={{preventExpansion: true}}> nativeOptions={{preventExpansion: true}}>
<Dialog.Handle /> <Dialog.Handle />
<RepostButtonDialogInner
isReposted={isReposted}
onRepost={onRepost}
onQuote={onQuote}
embeddingDisabled={embeddingDisabled}
/>
</Dialog.Outer>
</>
)
}
RepostButton = memo(RepostButton)
export {RepostButton}
let RepostButtonDialogInner = ({
isReposted,
onRepost,
onQuote,
embeddingDisabled,
}: {
isReposted: boolean
onRepost: () => void
onQuote: () => void
embeddingDisabled: boolean
}): React.ReactNode => {
const t = useTheme()
const {_} = useLingui()
const playHaptic = useHaptics()
const control = Dialog.useDialogContext()
const onPressRepost = useCallback(() => {
if (!isReposted) playHaptic()
control.close(() => {
onRepost()
})
}, [control, isReposted, onRepost, playHaptic])
const onPressQuote = useCallback(() => {
playHaptic()
control.close(() => {
onQuote()
})
}, [control, onQuote, playHaptic])
const onPressClose = useCallback(() => control.close(), [control])
return (
<Dialog.ScrollableInner label={_(msg`Repost or quote post`)}> <Dialog.ScrollableInner label={_(msg`Repost or quote post`)}>
<View style={a.gap_xl}> <View style={a.gap_xl}>
<View style={a.gap_xs}> <View style={a.gap_xs}>
@@ -102,13 +145,7 @@ let RepostButton = ({
? _(msg`Remove repost`) ? _(msg`Remove repost`)
: _(msg({message: `Repost`, context: 'action'})) : _(msg({message: `Repost`, context: 'action'}))
} }
onPress={() => { onPress={onPressRepost}
if (!isReposted) playHaptic()
dialogControl.close(() => {
onRepost()
})
}}
size="large" size="large"
variant="ghost" variant="ghost"
color="primary"> color="primary">
@@ -128,12 +165,7 @@ let RepostButton = ({
? _(msg`Quote posts disabled`) ? _(msg`Quote posts disabled`)
: _(msg`Quote post`) : _(msg`Quote post`)
} }
onPress={() => { onPress={onPressQuote}
playHaptic()
dialogControl.close(() => {
onQuote()
})
}}
size="large" size="large"
variant="ghost" variant="ghost"
color="primary"> color="primary">
@@ -159,7 +191,7 @@ let RepostButton = ({
</View> </View>
<Button <Button
label={_(msg`Cancel quote post`)} label={_(msg`Cancel quote post`)}
onPress={close} onPress={onPressClose}
size="large" size="large"
variant="solid" variant="solid"
color="primary"> color="primary">
@@ -167,9 +199,7 @@ let RepostButton = ({
</Button> </Button>
</View> </View>
</Dialog.ScrollableInner> </Dialog.ScrollableInner>
</Dialog.Outer>
</>
) )
} }
RepostButton = memo(RepostButton) RepostButtonDialogInner = memo(RepostButtonDialogInner)
export {RepostButton} export {RepostButtonDialogInner}