diff options
author | Samuel Newman <mozzius@protonmail.com> | 2024-03-19 15:18:29 +0000 |
---|---|---|
committer | Samuel Newman <mozzius@protonmail.com> | 2024-03-19 15:18:29 +0000 |
commit | f491bd89cc28cba46a92b443e1f07ff73e8f7128 (patch) | |
tree | 8f7c34372afe1f600a5626ef72dd9c8b28b930a6 /src/components/moderation/PostHider.tsx | |
parent | d2a11f3344149a299372f0a7dcd01de9f58ef9a1 (diff) | |
parent | 9c49b209ca9eda8e6fab0942f7046d335c955c1a (diff) | |
download | voidsky-f491bd89cc28cba46a92b443e1f07ff73e8f7128.tar.zst |
Merge remote-tracking branch 'origin/main' into samuel/alf-login
Diffstat (limited to 'src/components/moderation/PostHider.tsx')
-rw-r--r-- | src/components/moderation/PostHider.tsx | 129 |
1 files changed, 129 insertions, 0 deletions
diff --git a/src/components/moderation/PostHider.tsx b/src/components/moderation/PostHider.tsx new file mode 100644 index 000000000..464ee2077 --- /dev/null +++ b/src/components/moderation/PostHider.tsx @@ -0,0 +1,129 @@ +import React, {ComponentProps} from 'react' +import {StyleSheet, Pressable, View, ViewStyle, StyleProp} from 'react-native' +import {ModerationUI} from '@atproto/api' +import {useLingui} from '@lingui/react' +import {Trans, msg} from '@lingui/macro' + +import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription' +import {addStyle} from 'lib/styles' + +import {useTheme, atoms as a} from '#/alf' +import { + ModerationDetailsDialog, + useModerationDetailsDialogControl, +} from '#/components/moderation/ModerationDetailsDialog' +import {Text} from '#/components/Typography' +// import {Link} from '#/components/Link' TODO this imposes some styles that screw things up +import {Link} from '#/view/com/util/Link' + +interface Props extends ComponentProps<typeof Link> { + iconSize: number + iconStyles: StyleProp<ViewStyle> + modui: ModerationUI +} + +export function PostHider({ + testID, + href, + modui, + style, + children, + iconSize, + iconStyles, + ...props +}: Props) { + const t = useTheme() + const {_} = useLingui() + const [override, setOverride] = React.useState(false) + const control = useModerationDetailsDialogControl() + const blur = modui.blurs[0] + const desc = useModerationCauseDescription(blur) + + if (!blur) { + return ( + <Link + testID={testID} + style={style} + href={href} + accessible={false} + {...props}> + {children} + </Link> + ) + } + + return !override ? ( + <Pressable + onPress={() => { + if (!modui.noOverride) { + setOverride(v => !v) + } + }} + accessibilityRole="button" + accessibilityHint={ + override ? _(msg`Hide the content`) : _(msg`Show the content`) + } + accessibilityLabel="" + style={[ + a.flex_row, + a.align_center, + a.gap_sm, + a.py_md, + { + paddingLeft: 6, + paddingRight: 18, + }, + override ? {paddingBottom: 0} : undefined, + t.atoms.bg, + ]}> + <ModerationDetailsDialog control={control} modcause={blur} /> + <Pressable + onPress={() => { + control.open() + }} + accessibilityRole="button" + accessibilityLabel={_(msg`Learn more about this warning`)} + accessibilityHint=""> + <View + style={[ + t.atoms.bg_contrast_25, + a.align_center, + a.justify_center, + { + width: iconSize, + height: iconSize, + borderRadius: iconSize, + }, + iconStyles, + ]}> + <desc.icon size="sm" fill={t.atoms.text_contrast_medium.color} /> + </View> + </Pressable> + <Text style={[t.atoms.text_contrast_medium, a.flex_1]} numberOfLines={1}> + {desc.name} + </Text> + {!modui.noOverride && ( + <Text style={[{color: t.palette.primary_500}]}> + {override ? <Trans>Hide</Trans> : <Trans>Show</Trans>} + </Text> + )} + </Pressable> + ) : ( + <Link + testID={testID} + style={addStyle(style, styles.child)} + href={href} + accessible={false} + {...props}> + {children} + </Link> + ) +} + +const styles = StyleSheet.create({ + child: { + borderWidth: 0, + borderTopWidth: 0, + borderRadius: 8, + }, +}) |