From 6bc00f8d714fa1113d03f57ec06caccd4ffbb9dc Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Wed, 16 Oct 2024 18:52:14 +0300 Subject: Composer - Self label dialog ALF rewrite (#4354) --- src/components/dialogs/GifSelect.tsx | 2 +- src/components/forms/ToggleButton.tsx | 2 +- src/state/modals/index.tsx | 8 - src/view/com/composer/Composer.tsx | 10 +- src/view/com/composer/labels/LabelsBtn.tsx | 225 ++++++++++++++++++++------ src/view/com/composer/photos/SelectGifBtn.tsx | 2 +- src/view/com/modals/Modal.tsx | 4 - src/view/com/modals/Modal.web.tsx | 3 - src/view/com/modals/SelfLabel.tsx | 204 ----------------------- 9 files changed, 182 insertions(+), 278 deletions(-) delete mode 100644 src/view/com/modals/SelfLabel.tsx (limited to 'src') diff --git a/src/components/dialogs/GifSelect.tsx b/src/components/dialogs/GifSelect.tsx index ffd8130db..64ad2624a 100644 --- a/src/components/dialogs/GifSelect.tsx +++ b/src/components/dialogs/GifSelect.tsx @@ -37,7 +37,7 @@ export function GifSelectDialog({ onSelectGif: onSelectGifProp, }: { controlRef: React.RefObject<{open: () => void}> - onClose: () => void + onClose?: () => void onSelectGif: (gif: Gif) => void }) { const control = Dialog.useDialogControl() diff --git a/src/components/forms/ToggleButton.tsx b/src/components/forms/ToggleButton.tsx index f47a272b1..8e08665fd 100644 --- a/src/components/forms/ToggleButton.tsx +++ b/src/components/forms/ToggleButton.tsx @@ -36,7 +36,7 @@ export function Group({children, multiple, ...props}: GroupProps) { export function Button({children, ...props}: ItemProps) { return ( - + {children} ) diff --git a/src/state/modals/index.tsx b/src/state/modals/index.tsx index 03ab73f43..05e0c53f6 100644 --- a/src/state/modals/index.tsx +++ b/src/state/modals/index.tsx @@ -42,13 +42,6 @@ export interface DeleteAccountModal { name: 'delete-account' } -export interface SelfLabelModal { - name: 'self-label' - labels: string[] - hasMedia: boolean - onChange: (labels: string[]) => void -} - export interface ChangeHandleModal { name: 'change-handle' onChanged: () => void @@ -120,7 +113,6 @@ export type Modal = // Posts | CropImageModal - | SelfLabelModal // Bluesky access | WaitlistModal diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx index a45477d11..2f28b9665 100644 --- a/src/view/com/composer/Composer.tsx +++ b/src/view/com/composer/Composer.tsx @@ -499,10 +499,6 @@ export const ComposePost = ({ openEmojiPicker?.(textInput.current?.getCursorPosition()) }, [openEmojiPicker]) - const focusTextInput = useCallback(() => { - textInput.current?.focus() - }, []) - const onSelectGif = useCallback((gif: Gif) => { dispatch({type: 'embed_add_gif', gif}) }, []) @@ -808,11 +804,7 @@ export const ComposePost = ({ disabled={!canSelectImages} onAdd={onImageAdd} /> - + {!isMobile ? ( + + + + - ) : null} - + + ) } -const styles = StyleSheet.create({ - button: { - flexDirection: 'row', - alignItems: 'center', - paddingVertical: 2, - paddingHorizontal: 6, - }, - dimmed: { - opacity: 0.4, - }, - label: { - maxWidth: 100, - }, -}) +function DialogInner({ + labels, + onChange, + hasAdultSelection, + hasMedia, + removeAdultLabel, +}: { + labels: string[] + onChange: (v: string[]) => void + hasAdultSelection: boolean + hasMedia: boolean + removeAdultLabel: () => void +}) { + const {_} = useLingui() + const control = Dialog.useDialogContext() + const t = useTheme() + + return ( + + + + Add a content warning + + + + + + Adult Content + + + + + {hasMedia ? ( + <> + { + onChange(values) + LayoutAnimation.configureNext( + LayoutAnimation.Presets.easeInEaseOut, + ) + }}> + + + Suggestive + + + + + Nudity + + + + + Porn + + + + + + {labels.includes('sexual') ? ( + Pictures meant for adults. + ) : labels.includes('nudity') ? ( + Artistic or non-erotic nudity. + ) : labels.includes('porn') ? ( + Sexual activity or erotic nudity. + ) : ( + If none are selected, suitable for all ages. + )} + + + ) : ( + + + + + Not Applicable. + {' '} + This warning is only available for posts with media attached. + + + + )} + + + + + + ) +} diff --git a/src/view/com/composer/photos/SelectGifBtn.tsx b/src/view/com/composer/photos/SelectGifBtn.tsx index d13df0a11..74f9acdc6 100644 --- a/src/view/com/composer/photos/SelectGifBtn.tsx +++ b/src/view/com/composer/photos/SelectGifBtn.tsx @@ -11,7 +11,7 @@ import {GifSelectDialog} from '#/components/dialogs/GifSelect' import {GifSquare_Stroke2_Corner0_Rounded as GifIcon} from '#/components/icons/Gif' type Props = { - onClose: () => void + onClose?: () => void onSelectGif: (gif: Gif) => void disabled?: boolean } diff --git a/src/view/com/modals/Modal.tsx b/src/view/com/modals/Modal.tsx index 8cb6ddfef..c2360742e 100644 --- a/src/view/com/modals/Modal.tsx +++ b/src/view/com/modals/Modal.tsx @@ -19,7 +19,6 @@ import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguages import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings' import * as LinkWarningModal from './LinkWarning' import * as ListAddUserModal from './ListAddRemoveUsers' -import * as SelfLabelModal from './SelfLabel' import * as UserAddRemoveListsModal from './UserAddRemoveLists' import * as VerifyEmailModal from './VerifyEmail' @@ -66,9 +65,6 @@ export function ModalsContainer() { } else if (activeModal?.name === 'delete-account') { snapPoints = DeleteAccountModal.snapPoints element = - } else if (activeModal?.name === 'self-label') { - snapPoints = SelfLabelModal.snapPoints - element = } else if (activeModal?.name === 'change-handle') { snapPoints = ChangeHandleModal.snapPoints element = diff --git a/src/view/com/modals/Modal.web.tsx b/src/view/com/modals/Modal.web.tsx index 013028944..76b2811b1 100644 --- a/src/view/com/modals/Modal.web.tsx +++ b/src/view/com/modals/Modal.web.tsx @@ -19,7 +19,6 @@ import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguages import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings' import * as LinkWarningModal from './LinkWarning' import * as ListAddUserModal from './ListAddRemoveUsers' -import * as SelfLabelModal from './SelfLabel' import * as UserAddRemoveLists from './UserAddRemoveLists' import * as VerifyEmailModal from './VerifyEmail' @@ -72,8 +71,6 @@ function Modal({modal}: {modal: ModalIface}) { element = } else if (modal.name === 'delete-account') { element = - } else if (modal.name === 'self-label') { - element = } else if (modal.name === 'change-handle') { element = } else if (modal.name === 'invite-codes') { diff --git a/src/view/com/modals/SelfLabel.tsx b/src/view/com/modals/SelfLabel.tsx deleted file mode 100644 index ce3fbcef8..000000000 --- a/src/view/com/modals/SelfLabel.tsx +++ /dev/null @@ -1,204 +0,0 @@ -import React, {useState} from 'react' -import {StyleSheet, TouchableOpacity, View} from 'react-native' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' - -import {useModalControls} from '#/state/modals' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {colors, s} from 'lib/styles' -import {isWeb} from 'platform/detection' -import {ScrollView} from 'view/com/modals/util' -import {Button} from '../util/forms/Button' -import {SelectableBtn} from '../util/forms/SelectableBtn' -import {Text} from '../util/text/Text' - -const ADULT_CONTENT_LABELS = ['sexual', 'nudity', 'porn'] - -export const snapPoints = ['50%'] - -export function Component({ - labels, - hasMedia, - onChange, -}: { - labels: string[] - hasMedia: boolean - onChange: (labels: string[]) => void -}) { - const pal = usePalette('default') - const {closeModal} = useModalControls() - const {isMobile} = useWebMediaQueries() - const [selected, setSelected] = useState(labels) - const {_} = useLingui() - - const toggleAdultLabel = (label: string) => { - const hadLabel = selected.includes(label) - const stripped = selected.filter(l => !ADULT_CONTENT_LABELS.includes(l)) - const final = !hadLabel ? stripped.concat([label]) : stripped - setSelected(final) - onChange(final) - } - - const removeAdultLabel = () => { - const final = selected.filter(l => !ADULT_CONTENT_LABELS.includes(l)) - setSelected(final) - onChange(final) - } - - const hasAdultSelection = - selected.includes('sexual') || - selected.includes('nudity') || - selected.includes('porn') - return ( - - - - Add a content warning - - - - - - - - Adult Content - - {hasAdultSelection ? ( - - ) : null} - - {hasMedia ? ( - <> - - toggleAdultLabel('sexual')} - accessibilityHint="" - style={s.flex1} - /> - toggleAdultLabel('nudity')} - accessibilityHint="" - style={s.flex1} - /> - toggleAdultLabel('porn')} - accessibilityHint="" - style={s.flex1} - /> - - - - {selected.includes('sexual') ? ( - Pictures meant for adults. - ) : selected.includes('nudity') ? ( - Artistic or non-erotic nudity. - ) : selected.includes('porn') ? ( - Sexual activity or erotic nudity. - ) : ( - If none are selected, suitable for all ages. - )} - - - ) : ( - - - - - Not Applicable. - {' '} - This warning is only available for posts with media attached. - - - - )} - - - - - { - closeModal() - }} - style={styles.btn} - accessibilityRole="button" - accessibilityLabel={_(msg`Confirm`)} - accessibilityHint=""> - - Done - - - - - ) -} - -const styles = StyleSheet.create({ - container: { - flex: 1, - paddingBottom: isWeb ? 0 : 40, - }, - titleSection: { - paddingTop: isWeb ? 0 : 4, - paddingBottom: isWeb ? 14 : 10, - }, - title: { - textAlign: 'center', - fontWeight: '600', - marginBottom: 5, - }, - description: { - textAlign: 'center', - paddingHorizontal: 32, - }, - section: { - borderTopWidth: 1, - paddingVertical: 20, - }, - adultExplainer: { - paddingLeft: 5, - paddingTop: 10, - }, - btn: { - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'center', - borderRadius: 32, - padding: 14, - backgroundColor: colors.blue3, - }, - btnContainer: { - paddingTop: 20, - paddingHorizontal: 20, - }, -}) -- cgit 1.4.1