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

Conditionally render labels button when media exists in post (#5942)

Browse Source 
* conditionally render button

* update labels on remove

* tweak
This commit is contained in:
Hailey
2024-10-25 14:52:37 -07:00
committed by GitHub
parent d520dd95b9
commit e05b4a910f
3 changed files with 120 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/view/com/composer/Composer.tsx
+8 -7
View File
@@ -896,13 +896,14 @@ function ComposerPills({
style={bottomBarAnimatedStyle} style={bottomBarAnimatedStyle}
/> />
)} )}
<LabelsBtn {hasMedia || hasLink ? (
labels={draft.labels} <LabelsBtn
onChange={nextLabels => { labels={draft.labels}
dispatch({type: 'update_labels', labels: nextLabels}) onChange={nextLabels => {
}} dispatch({type: 'update_labels', labels: nextLabels})
hasMedia={hasMedia || hasLink} }}
/> />
) : null}
</ScrollView> </ScrollView>
</Animated.View> </Animated.View>
) )
src/view/com/composer/labels/LabelsBtn.tsx
+97 -132
View File
@@ -21,11 +21,9 @@ import {Text} from '#/components/Typography'
export function LabelsBtn({ export function LabelsBtn({
labels, labels,
hasMedia,
onChange, onChange,
}: { }: {
labels: SelfLabel[] labels: SelfLabel[]
hasMedia: boolean
onChange: (v: SelfLabel[]) => void onChange: (v: SelfLabel[]) => void
}) { }) {
const control = Dialog.useDialogControl() const control = Dialog.useDialogControl()
@@ -45,10 +43,6 @@ export function LabelsBtn({
onChange([...filtered, newLabel].filter(Boolean) as SelfLabel[]) onChange([...filtered, newLabel].filter(Boolean) as SelfLabel[])
} }
if (!hasMedia && hasLabel) {
onChange([])
}
return ( return (
<> <>
<Button <Button
@@ -65,7 +59,6 @@ export function LabelsBtn({
msg`Opens a dialog to add a content warning to your post`, msg`Opens a dialog to add a content warning to your post`,
)} )}
style={[ style={[
!hasMedia && {opacity: 0.5},
native({ native({
paddingHorizontal: 8, paddingHorizontal: 8,
paddingVertical: 6, paddingVertical: 6,
@@ -85,7 +78,6 @@ export function LabelsBtn({
<Dialog.Handle /> <Dialog.Handle />
<DialogInner <DialogInner
labels={labels} labels={labels}
hasMedia={hasMedia}
updateAdultLabels={updateAdultLabels} updateAdultLabels={updateAdultLabels}
updateOtherLabels={updateOtherLabels} updateOtherLabels={updateOtherLabels}
/> />
@@ -96,12 +88,10 @@ export function LabelsBtn({
function DialogInner({ function DialogInner({
labels, labels,
hasMedia,
updateAdultLabels, updateAdultLabels,
updateOtherLabels, updateOtherLabels,
}: { }: {
labels: string[] labels: string[]
hasMedia: boolean
updateAdultLabels: (labels: AdultSelfLabel[]) => void updateAdultLabels: (labels: AdultSelfLabel[]) => void
updateOtherLabels: (labels: OtherSelfLabel[]) => void updateOtherLabels: (labels: OtherSelfLabel[]) => void
}) { }) {
@@ -119,133 +109,108 @@ function DialogInner({
<Trans>Add a content warning</Trans> <Trans>Add a content warning</Trans>
</Text> </Text>
<Text style={[t.atoms.text_contrast_medium, a.leading_snug]}> <Text style={[t.atoms.text_contrast_medium, a.leading_snug]}>
{hasMedia ? ( <Trans>
<Trans> Choose self-labels that are applicable for the media you are
Choose self-labels that are applicable for the media you are posting. If none are selected, this post is suitable for all
posting. If none are selected, this post is suitable for all audiences.
audiences. </Trans>
</Trans>
) : (
<Trans>
No self-labels can be applied to this post because it contains
no media.
</Trans>
)}
</Text> </Text>
</View> </View>
<View style={[a.my_md, a.gap_lg]}> <View style={[a.my_md, a.gap_lg]}>
{hasMedia ? ( <View>
<> <View
<View> style={[a.flex_row, a.align_center, a.justify_between, a.pb_sm]}>
<View <Text style={[a.font_bold, a.text_lg]}>
style={[ <Trans>Adult Content</Trans>
a.flex_row, </Text>
a.align_center, </View>
a.justify_between, <View
a.pb_sm, style={[
]}> a.p_md,
<Text style={[a.font_bold, a.text_lg]}> a.rounded_sm,
<Trans>Adult Content</Trans> a.border,
</Text> t.atoms.border_contrast_medium,
]}>
<Toggle.Group
label={_(msg`Adult Content labels`)}
values={labels}
onChange={values => {
updateAdultLabels(values as AdultSelfLabel[])
}}>
<View style={[a.gap_sm]}>
<Toggle.Item name="sexual" label={_(msg`Suggestive`)}>
<Toggle.Radio />
<Toggle.LabelText>
<Trans>Suggestive</Trans>
</Toggle.LabelText>
</Toggle.Item>
<Toggle.Item name="nudity" label={_(msg`Nudity`)}>
<Toggle.Radio />
<Toggle.LabelText>
<Trans>Nudity</Trans>
</Toggle.LabelText>
</Toggle.Item>
<Toggle.Item name="porn" label={_(msg`Porn`)}>
<Toggle.Radio />
<Toggle.LabelText>
<Trans>Porn</Trans>
</Toggle.LabelText>
</Toggle.Item>
</View> </View>
<View </Toggle.Group>
style={[ <Text style={[a.mt_sm, t.atoms.text_contrast_medium]}>
a.p_md, {labels.includes('sexual') ? (
a.rounded_sm, <Trans>Pictures meant for adults.</Trans>
a.border, ) : labels.includes('nudity') ? (
t.atoms.border_contrast_medium, <Trans>Artistic or non-erotic nudity.</Trans>
]}> ) : labels.includes('porn') ? (
<Toggle.Group <Trans>Sexual activity or erotic nudity.</Trans>
label={_(msg`Adult Content labels`)} ) : (
values={labels} <Trans>Does not contain adult content.</Trans>
onChange={values => { )}
updateAdultLabels(values as AdultSelfLabel[]) </Text>
}}> </View>
<View style={[a.gap_sm]}> </View>
<Toggle.Item name="sexual" label={_(msg`Suggestive`)}> <View>
<Toggle.Radio /> <View
<Toggle.LabelText> style={[a.flex_row, a.align_center, a.justify_between, a.pb_sm]}>
<Trans>Suggestive</Trans> <Text style={[a.font_bold, a.text_lg]}>
</Toggle.LabelText> <Trans>Other</Trans>
</Toggle.Item> </Text>
<Toggle.Item name="nudity" label={_(msg`Nudity`)}> </View>
<Toggle.Radio /> <View
<Toggle.LabelText> style={[
<Trans>Nudity</Trans> a.p_md,
</Toggle.LabelText> a.rounded_sm,
</Toggle.Item> a.border,
<Toggle.Item name="porn" label={_(msg`Porn`)}> t.atoms.border_contrast_medium,
<Toggle.Radio /> ]}>
<Toggle.LabelText> <Toggle.Group
<Trans>Porn</Trans> label={_(msg`Adult Content labels`)}
</Toggle.LabelText> values={labels}
</Toggle.Item> onChange={values => {
</View> updateOtherLabels(values as OtherSelfLabel[])
</Toggle.Group> }}>
<Text style={[a.mt_sm, t.atoms.text_contrast_medium]}> <Toggle.Item name="graphic-media" label={_(msg`Graphic Media`)}>
{labels.includes('sexual') ? ( <Toggle.Checkbox />
<Trans>Pictures meant for adults.</Trans> <Toggle.LabelText>
) : labels.includes('nudity') ? ( <Trans>Graphic Media</Trans>
<Trans>Artistic or non-erotic nudity.</Trans> </Toggle.LabelText>
) : labels.includes('porn') ? ( </Toggle.Item>
<Trans>Sexual activity or erotic nudity.</Trans> </Toggle.Group>
) : ( <Text style={[a.mt_sm, t.atoms.text_contrast_medium]}>
<Trans>Does not contain adult content.</Trans> {labels.includes('graphic-media') ? (
)} <Trans>
</Text> Media that may be disturbing or inappropriate for some
</View> audiences.
</View> </Trans>
<View> ) : (
<View <Trans>Does not contain graphic or disturbing content.</Trans>
style={[ )}
a.flex_row, </Text>
a.align_center, </View>
a.justify_between, </View>
a.pb_sm,
]}>
<Text style={[a.font_bold, a.text_lg]}>
<Trans>Other</Trans>
</Text>
</View>
<View
style={[
a.p_md,
a.rounded_sm,
a.border,
t.atoms.border_contrast_medium,
]}>
<Toggle.Group
label={_(msg`Adult Content labels`)}
values={labels}
onChange={values => {
updateOtherLabels(values as OtherSelfLabel[])
}}>
<Toggle.Item
name="graphic-media"
label={_(msg`Graphic Media`)}>
<Toggle.Checkbox />
<Toggle.LabelText>
<Trans>Graphic Media</Trans>
</Toggle.LabelText>
</Toggle.Item>
</Toggle.Group>
<Text style={[a.mt_sm, t.atoms.text_contrast_medium]}>
{labels.includes('graphic-media') ? (
<Trans>
Media that may be disturbing or inappropriate for some
audiences.
</Trans>
) : (
<Trans>
Does not contain graphic or disturbing content.
</Trans>
)}
</Text>
</View>
</View>
</>
) : null}
</View> </View>
</View> </View>
src/view/com/composer/state/composer.ts
+15
View File
@@ -158,6 +158,7 @@ export function composerReducer(
} }
case 'embed_remove_image': { case 'embed_remove_image': {
const prevMedia = state.embed.media const prevMedia = state.embed.media
let nextLabels = state.labels
if (prevMedia?.type === 'images') { if (prevMedia?.type === 'images') {
const removedImage = action.image const removedImage = action.image
let nextMedia: ImagesMedia | undefined = { let nextMedia: ImagesMedia | undefined = {
@@ -168,9 +169,13 @@ export function composerReducer(
} }
if (nextMedia.images.length === 0) { if (nextMedia.images.length === 0) {
nextMedia = undefined nextMedia = undefined
if (!state.embed.link) {
nextLabels = []
}
} }
return { return {
...state, ...state,
labels: nextLabels,
embed: { embed: {
...state.embed, ...state.embed,
media: nextMedia, media: nextMedia,
@@ -220,8 +225,13 @@ export function composerReducer(
if (prevMedia?.type === 'video') { if (prevMedia?.type === 'video') {
nextMedia = undefined nextMedia = undefined
} }
let nextLabels = state.labels
if (!state.embed.link) {
nextLabels = []
}
return { return {
...state, ...state,
labels: nextLabels,
embed: { embed: {
...state.embed, ...state.embed,
media: nextMedia, media: nextMedia,
@@ -258,8 +268,13 @@ export function composerReducer(
} }
} }
case 'embed_remove_link': { case 'embed_remove_link': {
let nextLabels = state.labels
if (!state.embed.media) {
nextLabels = []
}
return { return {
...state, ...state,
labels: nextLabels,
embed: { embed: {
...state.embed, ...state.embed,
link: undefined, link: undefined,