Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 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}