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:
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user