acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Onboarding moderation improvements (#2713)

Browse Source 
* create separate label group arrays

* render adult and other label groups separately

* animate in/out the additional settings

* improve toggle logic

* support animations on all platforms

* remove debug

* update notice, prevent running animations on mount

* reorg imports
This commit is contained in:
Hailey
2024-01-31 14:14:37 -08:00
committed by GitHub
parent a4ff290769
commit 5db56277c0
4 changed files with 130 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/Onboarding/StepModeration/ModerationOption.tsx
+24 -25
View File
@@ -3,6 +3,7 @@ import {View} from 'react-native'
import {LabelPreference} from '@atproto/api'
import {useLingui} from '@lingui/react'
import {msg} from '@lingui/macro'
import Animated, {Easing, Layout, FadeIn} from 'react-native-reanimated'
import {
CONFIGURABLE_LABEL_GROUPS,
@@ -16,8 +17,10 @@ import * as ToggleButton from '#/components/forms/ToggleButton'
export function ModerationOption({
labelGroup,
isMounted,
}: {
labelGroup: ConfigurableLabelGroup
isMounted: React.MutableRefObject<boolean>
}) {
const {_} = useLingui()
const t = useTheme()
@@ -41,7 +44,7 @@ export function ModerationOption({
}
return (
<View
<Animated.View
style={[
a.flex_row,
a.justify_between,
@@ -49,7 +52,9 @@ export function ModerationOption({
a.py_xs,
a.px_xs,
a.align_center,
]}>
]}
layout={Layout.easing(Easing.ease).duration(200)}
entering={isMounted.current ? FadeIn : undefined}>
<View style={[a.gap_xs, {width: '50%'}]}>
<Text style={[a.font_bold]}>{groupInfo.title}</Text>
<Text style={[t.atoms.text_contrast_700, a.leading_snug]}>
@@ -57,29 +62,23 @@ export function ModerationOption({
</Text>
</View>
<View style={[a.justify_center, {minHeight: 35}]}>
{!preferences?.adultContentEnabled && groupInfo.isAdultImagery ? (
<View style={[a.justify_center, {minHeight: 40}]}>
<Text style={[a.font_bold]}>{labels.hide}</Text>
</View>
) : (
<ToggleButton.Group
label={_(
msg`Configure content filtering setting for category: ${groupInfo.title.toLowerCase()}`,
)}
values={[visibility ?? 'hide']}
onChange={onChange}>
<ToggleButton.Button name="hide" label={labels.hide}>
{labels.hide}
</ToggleButton.Button>
<ToggleButton.Button name="warn" label={labels.warn}>
{labels.warn}
</ToggleButton.Button>
<ToggleButton.Button name="ignore" label={labels.show}>
{labels.show}
</ToggleButton.Button>
</ToggleButton.Group>
)}
<ToggleButton.Group
label={_(
msg`Configure content filtering setting for category: ${groupInfo.title.toLowerCase()}`,
)}
values={[visibility ?? 'hide']}
onChange={onChange}>
<ToggleButton.Button name="hide" label={labels.hide}>
{labels.hide}
</ToggleButton.Button>
<ToggleButton.Button name="warn" label={labels.warn}>
{labels.warn}
</ToggleButton.Button>
<ToggleButton.Button name="ignore" label={labels.show}>
{labels.show}
</ToggleButton.Button>
</ToggleButton.Group>
</View>
</View>
</Animated.View>
)
}