From e46f80ec935439121f0bc14e0398e1abc537ea1f Mon Sep 17 00:00:00 2001 From: Dylan Jeffers Date: Tue, 30 Jul 2024 13:00:45 -0700 Subject: [PATCH 1/2] [PAY-3253] Fix confirmation drawer height --- .../src/components/drawers/ConfirmationDrawer.tsx | 13 +++++-------- .../edit-collection-screen/EditCollectionForm.tsx | 4 ++-- .../src/screens/edit-track-screen/EditTrackForm.tsx | 4 ++-- .../components/CancelEditTrackDrawer.tsx | 1 + .../components/ConfirmPublishDrawer.tsx | 7 +++---- 5 files changed, 13 insertions(+), 16 deletions(-) diff --git a/packages/mobile/src/components/drawers/ConfirmationDrawer.tsx b/packages/mobile/src/components/drawers/ConfirmationDrawer.tsx index 3d794d6aff9..d79b0db7f55 100644 --- a/packages/mobile/src/components/drawers/ConfirmationDrawer.tsx +++ b/packages/mobile/src/components/drawers/ConfirmationDrawer.tsx @@ -17,9 +17,6 @@ const defaultMessages = { const useStyles = makeStyles(({ spacing }) => ({ root: { paddingHorizontal: spacing(4) - }, - confirmButton: { - marginBottom: spacing(4) } })) @@ -34,6 +31,7 @@ type BaseConfirmationDrawerProps = { onCancel?: () => void variant?: 'destructive' | 'affirmative' icon?: IconComponent + addBottomInset?: boolean } type NativeConfirmationDrawerProps = BaseConfirmationDrawerProps & { @@ -59,9 +57,9 @@ const ConfirmationDrawerContent = (props: DrawerContentProps) => { onCancel, onClose, variant = 'destructive', - icon: Icon = IconInfo + icon: Icon = IconInfo, + addBottomInset } = props - const styles = useStyles() const messages = { ...defaultMessages, ...messagesProp } const insets = useSafeAreaInsets() const { spacing } = useTheme() @@ -91,10 +89,9 @@ const ConfirmationDrawerContent = (props: DrawerContentProps) => { {messages.description} - + - + {addBottomInset ? : null} ) } diff --git a/packages/mobile/src/screens/edit-collection-screen/EditCollectionForm.tsx b/packages/mobile/src/screens/edit-collection-screen/EditCollectionForm.tsx index a63751454be..9f71e2d5ddc 100644 --- a/packages/mobile/src/screens/edit-collection-screen/EditCollectionForm.tsx +++ b/packages/mobile/src/screens/edit-collection-screen/EditCollectionForm.tsx @@ -24,7 +24,7 @@ import { useNavigation } from 'app/hooks/useNavigation' import { makeStyles } from 'app/styles' import { TopBarIconButton } from '../app-screen' -import { ConfirmPublishTrackDrawer } from '../edit-track-screen/components/ConfirmPublishDrawer' +import { ConfirmPublishDrawer } from '../edit-track-screen/components/ConfirmPublishDrawer' import { FormScreen } from '../page-form-screen' import { AdvancedAlbumField } from './AdvancedAlbumField' @@ -176,7 +176,7 @@ export const EditCollectionForm = ( {confirmDrawerType ? ( - diff --git a/packages/mobile/src/screens/edit-track-screen/EditTrackForm.tsx b/packages/mobile/src/screens/edit-track-screen/EditTrackForm.tsx index 0e14a761584..a155882cd70 100644 --- a/packages/mobile/src/screens/edit-track-screen/EditTrackForm.tsx +++ b/packages/mobile/src/screens/edit-track-screen/EditTrackForm.tsx @@ -29,7 +29,7 @@ import { makeStyles } from 'app/styles' import { TopBarIconButton } from '../app-screen' import { CancelEditTrackDrawer } from './components' -import { ConfirmPublishTrackDrawer } from './components/ConfirmPublishDrawer' +import { ConfirmPublishDrawer } from './components/ConfirmPublishDrawer' import { SelectGenreField, DescriptionField, @@ -204,7 +204,7 @@ export const EditTrackForm = (props: EditTrackFormProps) => { {!isUpload && confirmDrawerType ? ( - diff --git a/packages/mobile/src/screens/edit-track-screen/components/CancelEditTrackDrawer.tsx b/packages/mobile/src/screens/edit-track-screen/components/CancelEditTrackDrawer.tsx index ed75bea89f0..bbb2a01592e 100644 --- a/packages/mobile/src/screens/edit-track-screen/components/CancelEditTrackDrawer.tsx +++ b/packages/mobile/src/screens/edit-track-screen/components/CancelEditTrackDrawer.tsx @@ -16,6 +16,7 @@ export const CancelEditTrackDrawer = () => { drawerName='CancelEditTrack' messages={messages} onConfirm={navigation.goBack} + addBottomInset /> ) } diff --git a/packages/mobile/src/screens/edit-track-screen/components/ConfirmPublishDrawer.tsx b/packages/mobile/src/screens/edit-track-screen/components/ConfirmPublishDrawer.tsx index 49454382e88..a2b92a2719a 100644 --- a/packages/mobile/src/screens/edit-track-screen/components/ConfirmPublishDrawer.tsx +++ b/packages/mobile/src/screens/edit-track-screen/components/ConfirmPublishDrawer.tsx @@ -24,14 +24,12 @@ const messages = { } } -type ConfirmPublishTrackDrawerProps = { +type ConfirmPublishDrawerProps = { type: 'release' | 'early_release' | 'hidden' onConfirm: () => void } -export const ConfirmPublishTrackDrawer = ( - props: ConfirmPublishTrackDrawerProps -) => { +export const ConfirmPublishDrawer = (props: ConfirmPublishDrawerProps) => { const { type, onConfirm } = props const confirmationMessages = @@ -47,6 +45,7 @@ export const ConfirmPublishTrackDrawer = ( modalName='EditAccessConfirmation' onConfirm={onConfirm} messages={confirmationMessages} + addBottomInset /> ) } From 6cb510124d91eb21ea2c9a404e721b585de79771 Mon Sep 17 00:00:00 2001 From: Dylan Jeffers Date: Thu, 1 Aug 2024 17:18:51 -0700 Subject: [PATCH 2/2] Revert cahnges --- .../EditCollectionForm.tsx | 26 ++++++++--- .../edit-track-screen/EditTrackForm.tsx | 45 +++++++++---------- .../components/ConfirmPublishDrawer.tsx | 23 ++++++---- 3 files changed, 53 insertions(+), 41 deletions(-) diff --git a/packages/mobile/src/screens/edit-collection-screen/EditCollectionForm.tsx b/packages/mobile/src/screens/edit-collection-screen/EditCollectionForm.tsx index 9f71e2d5ddc..689db4743d7 100644 --- a/packages/mobile/src/screens/edit-collection-screen/EditCollectionForm.tsx +++ b/packages/mobile/src/screens/edit-collection-screen/EditCollectionForm.tsx @@ -11,7 +11,7 @@ import { capitalize } from 'lodash' import { View } from 'react-native' import { useDispatch } from 'react-redux' -import { IconClose, IconTrash } from '@audius/harmony-native' +import { Flex, IconClose, IconTrash, Button } from '@audius/harmony-native' import { Divider, TextButton, @@ -24,8 +24,8 @@ import { useNavigation } from 'app/hooks/useNavigation' import { makeStyles } from 'app/styles' import { TopBarIconButton } from '../app-screen' -import { ConfirmPublishDrawer } from '../edit-track-screen/components/ConfirmPublishDrawer' -import { FormScreen } from '../page-form-screen' +import { ConfirmPublishTrackDrawer } from '../edit-track-screen/components/ConfirmPublishDrawer' +import { FormScreen } from '../form-screen' import { AdvancedAlbumField } from './AdvancedAlbumField' import { CollectionDescriptionField } from './CollectionDescriptionField' @@ -137,17 +137,29 @@ export const EditCollectionForm = ( submitAndGoBack ]) + const handleCancel = useCallback(() => { + handleReset() + navigation.goBack() + }, [handleReset, navigation]) + return ( <> } + bottomSection={ + + + + + } > @@ -176,7 +188,7 @@ export const EditCollectionForm = ( {confirmDrawerType ? ( - diff --git a/packages/mobile/src/screens/edit-track-screen/EditTrackForm.tsx b/packages/mobile/src/screens/edit-track-screen/EditTrackForm.tsx index a155882cd70..7d6f96d35dc 100644 --- a/packages/mobile/src/screens/edit-track-screen/EditTrackForm.tsx +++ b/packages/mobile/src/screens/edit-track-screen/EditTrackForm.tsx @@ -9,10 +9,10 @@ import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view import { useDispatch } from 'react-redux' import { - IconArrowRight, IconCaretLeft, IconCloudUpload, - Button + Button, + Flex } from '@audius/harmony-native' import { Tile } from 'app/components/core' import { InputErrorMessage } from 'app/components/core/InputErrorMessage' @@ -20,7 +20,6 @@ import { PriceAndAudienceField } from 'app/components/edit/PriceAndAudienceField import { VisibilityField } from 'app/components/edit/VisibilityField' import { PickArtworkField, TextField } from 'app/components/fields' import { useNavigation } from 'app/hooks/useNavigation' -import { useOneTimeDrawer } from 'app/hooks/useOneTimeDrawer' import { useFeatureFlag } from 'app/hooks/useRemoteConfig' import { FormScreen } from 'app/screens/form-screen' import { setVisibility } from 'app/store/drawers/slice' @@ -29,7 +28,7 @@ import { makeStyles } from 'app/styles' import { TopBarIconButton } from '../app-screen' import { CancelEditTrackDrawer } from './components' -import { ConfirmPublishDrawer } from './components/ConfirmPublishDrawer' +import { ConfirmPublishTrackDrawer } from './components/ConfirmPublishDrawer' import { SelectGenreField, DescriptionField, @@ -45,12 +44,10 @@ import type { EditTrackFormProps } from './types' const messages = { trackName: 'Track Name', trackNameError: 'Track Name Required', - fixErrors: 'Fix Errors To Continue' + fixErrors: 'Fix Errors To Continue', + cancel: 'Cancel' } -const GATED_CONTENT_UPLOAD_PROMPT_DRAWER_SEEN_KEY = - 'gated_content_upload_prompt_drawer_seen' - const useStyles = makeStyles(({ spacing }) => ({ backButton: { marginLeft: -6 @@ -93,11 +90,6 @@ export const EditTrackForm = (props: EditTrackFormProps) => { const [confirmDrawerType, setConfirmDrawerType] = useState>(null) - useOneTimeDrawer({ - key: GATED_CONTENT_UPLOAD_PROMPT_DRAWER_SEEN_KEY, - name: 'GatedContentUploadPrompt' - }) - const handlePressBack = useCallback(() => { if (!dirty) { navigation.goBack() @@ -113,6 +105,7 @@ export const EditTrackForm = (props: EditTrackFormProps) => { }, [dirty, navigation, dispatch]) const handleSubmit = useCallback(() => { + Keyboard.dismiss() const showConfirmDrawer = usersMayLoseAccess || isToBePublished if (showConfirmDrawer) { if (usersMayLoseAccess) { @@ -163,17 +156,19 @@ export const EditTrackForm = (props: EditTrackFormProps) => { style={styles.errorText} /> ) : null} - + + + + } > @@ -204,7 +199,7 @@ export const EditTrackForm = (props: EditTrackFormProps) => { {!isUpload && confirmDrawerType ? ( - diff --git a/packages/mobile/src/screens/edit-track-screen/components/ConfirmPublishDrawer.tsx b/packages/mobile/src/screens/edit-track-screen/components/ConfirmPublishDrawer.tsx index a2b92a2719a..fb2888f62c5 100644 --- a/packages/mobile/src/screens/edit-track-screen/components/ConfirmPublishDrawer.tsx +++ b/packages/mobile/src/screens/edit-track-screen/components/ConfirmPublishDrawer.tsx @@ -1,3 +1,5 @@ +import { Portal } from '@gorhom/portal' + import { ConfirmationDrawer } from 'app/components/drawers' const messages = { @@ -24,12 +26,14 @@ const messages = { } } -type ConfirmPublishDrawerProps = { +type ConfirmPublishTrackDrawerProps = { type: 'release' | 'early_release' | 'hidden' onConfirm: () => void } -export const ConfirmPublishDrawer = (props: ConfirmPublishDrawerProps) => { +export const ConfirmPublishTrackDrawer = ( + props: ConfirmPublishTrackDrawerProps +) => { const { type, onConfirm } = props const confirmationMessages = @@ -40,12 +44,13 @@ export const ConfirmPublishDrawer = (props: ConfirmPublishDrawerProps) => { : messages.hidden return ( - + + + ) }