From 3fd5b717c186bb54f5045db9e2c2f2cb2a19cdab Mon Sep 17 00:00:00 2001 From: Johannes Klein Date: Thu, 4 Jul 2024 12:24:03 +0200 Subject: [PATCH] 1746 radio bottom sheet (#1769) * Update radio bottom sheet element margins and paddings * Update radio button row element margins and paddings * Revert "Update radio button row element margins and paddings" This reverts commit 269882b93c1c4d0fa9f32652287f394845dc8e1f. * Label margin * Explainer * Add four pixel between radio button and text * Actually, let's patch the radio button to not have intrinsic margin, that makes everything easy peasy * Create react-native-paper+5.12.3.patch * Add margin between label and description * RadioButtonRow TS * Icon is optional * Update RadioButtonSheet.js * RadioButtonSheet TS * Radio labels in ExploreFilters should be smaller * BottomSheetStandardBackdrop TS * Move key * Update Settings radio button containers * Update containers of radio filters * Modal TS * Update types * Update types * Update interface * Update types * Update types --- patches/react-native-paper+5.12.3.patch | 12 ++ .../Explore/Modals/ExploreFiltersModal.js | 2 +- .../Modals/ExploreLocationSearchModal.tsx | 14 +-- .../Modals/ExploreProjectSearchModal.tsx | 14 +-- .../Modals/ExploreTaxonSearchModal.tsx | 2 +- .../Explore/Modals/ExploreUserSearchModal.tsx | 14 +-- src/components/Explore/Modals/FilterModal.tsx | 118 ++++++++++-------- .../MediaViewer/MediaViewerModal.js | 2 +- .../MyObservations/MyObservationsEmpty.js | 2 +- src/components/Settings/Settings.js | 10 +- .../SharedComponents/{Modal.js => Modal.tsx} | 33 +++-- .../PermissionGateContainer.js | 2 +- .../{RadioButtonRow.js => RadioButtonRow.tsx} | 29 +++-- ...rop.js => BottomSheetStandardBackdrop.tsx} | 10 +- .../Sheets/RadioButtonSheet.js | 65 ---------- .../Sheets/RadioButtonSheet.tsx | 72 +++++++++++ src/providers/ExploreContext.tsx | 17 ++- 17 files changed, 226 insertions(+), 192 deletions(-) create mode 100644 patches/react-native-paper+5.12.3.patch rename src/components/SharedComponents/{Modal.js => Modal.tsx} (80%) rename src/components/SharedComponents/{RadioButtonRow.js => RadioButtonRow.tsx} (69%) rename src/components/SharedComponents/Sheets/{BottomSheetStandardBackdrop.js => BottomSheetStandardBackdrop.tsx} (67%) delete mode 100644 src/components/SharedComponents/Sheets/RadioButtonSheet.js create mode 100644 src/components/SharedComponents/Sheets/RadioButtonSheet.tsx diff --git a/patches/react-native-paper+5.12.3.patch b/patches/react-native-paper+5.12.3.patch new file mode 100644 index 000000000..ad62e40ae --- /dev/null +++ b/patches/react-native-paper+5.12.3.patch @@ -0,0 +1,12 @@ +diff --git a/node_modules/react-native-paper/src/components/RadioButton/RadioButtonAndroid.tsx b/node_modules/react-native-paper/src/components/RadioButton/RadioButtonAndroid.tsx +index 515efe5..67082de 100644 +--- a/node_modules/react-native-paper/src/components/RadioButton/RadioButtonAndroid.tsx ++++ b/node_modules/react-native-paper/src/components/RadioButton/RadioButtonAndroid.tsx +@@ -187,7 +187,6 @@ const styles = StyleSheet.create({ + height: 20, + width: 20, + borderRadius: 10, +- margin: 8, + }, + dot: { + height: 10, diff --git a/src/components/Explore/Modals/ExploreFiltersModal.js b/src/components/Explore/Modals/ExploreFiltersModal.js index 03a45076d..8375e6ff3 100644 --- a/src/components/Explore/Modals/ExploreFiltersModal.js +++ b/src/components/Explore/Modals/ExploreFiltersModal.js @@ -1,6 +1,6 @@ // @flow -import Modal from "components/SharedComponents/Modal"; +import Modal from "components/SharedComponents/Modal.tsx"; import type { Node } from "react"; import React from "react"; diff --git a/src/components/Explore/Modals/ExploreLocationSearchModal.tsx b/src/components/Explore/Modals/ExploreLocationSearchModal.tsx index 8a43616af..e6bdffeda 100644 --- a/src/components/Explore/Modals/ExploreLocationSearchModal.tsx +++ b/src/components/Explore/Modals/ExploreLocationSearchModal.tsx @@ -1,21 +1,19 @@ -// @flow - import ExploreLocationSearch from "components/Explore/SearchScreens/ExploreLocationSearch"; -import Modal from "components/SharedComponents/Modal"; -import type { Node } from "react"; +import Modal from "components/SharedComponents/Modal.tsx"; import React from "react"; interface Props { - showModal: boolean, - closeModal: Function, - updateLocation: Function + showModal: boolean; + closeModal: () => void; + // TODO: Param not typed yet, because ExploreLocationSearch is not typed yet + updateLocation: ( _location: any ) => void; } const ExploreLocationSearchModal = ( { showModal, closeModal, updateLocation -}: Props ): Node => ( +}: Props ) => ( void; + // TODO: Param not typed yet, because ExploreProjectSearch is not typed yet + updateProject: ( _project: any ) => void; } const ExploreProjectSearchModal = ( { showModal, closeModal, updateProject -}: Props ): Node => ( +}: Props ) => ( void; + // TODO: Param not typed yet, because ExploreUserSearch is not typed yet + updateUser: ( _user: any ) => void; } const ExploreUserSearchModal = ( { showModal, closeModal, updateUser -}: Props ): Node => ( +}: Props ) => ( void; + filterByIconicTaxonUnknown: () => void; + updateTaxon: ( _taxon: Object | null ) => void; + // TODO: Param not typed yet, because ExploreLocationSearch is not typed yet + updateLocation: ( _location: any ) => void; + // TODO: Param not typed yet, because ExploreUserSearch is not typed yet + updateUser: ( _user: any ) => void; + // TODO: Param not typed yet, because ExploreProjectSearch is not typed yet + updateProject: ( _project: any ) => void; } const FilterModal = ( { @@ -1084,75 +1087,84 @@ const FilterModal = ( { {/* Media section */} - + {t( "MEDIA" )} {Object.keys( mediaValues ).map( mediaKey => ( - dispatch( { - type: EXPLORE_ACTION.SET_MEDIA, - media: mediaValues[mediaKey].value - } )} - label={mediaValues[mediaKey].label} - /> + + dispatch( { + type: EXPLORE_ACTION.SET_MEDIA, + media: mediaValues[mediaKey].value + } )} + label={mediaValues[mediaKey].label} + /> + ) )} {/* Establishment Means section */} - + {t( "ESTABLISHMENT-MEANS" )} {Object.keys( establishmentValues ).map( establishmentKey => ( - dispatch( { - type: EXPLORE_ACTION.SET_ESTABLISHMENT_MEAN, - establishmentMean: + + + === establishmentMean + } + onPress={() => dispatch( { + type: EXPLORE_ACTION.SET_ESTABLISHMENT_MEAN, + establishmentMean: + establishmentValues[establishmentKey].value + } )} + label={establishmentValues[establishmentKey].label} + /> + ) )} {/* Wild Status section */} - + {t( "WILD-STATUS" )} {Object.keys( wildValues ).map( wildKey => ( - dispatch( { - type: EXPLORE_ACTION.SET_WILD_STATUS, - wildStatus: wildValues[wildKey].value - } )} - label={wildValues[wildKey].label} - /> + + dispatch( { + type: EXPLORE_ACTION.SET_WILD_STATUS, + wildStatus: wildValues[wildKey].value + } )} + label={wildValues[wildKey].label} + /> + ) )} {/* Reviewed section */} {currentUser && ( - + {t( "REVIEWED" )} {Object.keys( reviewedValues ).map( reviewedKey => ( - dispatch( { - type: EXPLORE_ACTION.SET_REVIEWED, - reviewedFilter: reviewedValues[reviewedKey].value - } )} - label={reviewedValues[reviewedKey].label} - /> + + dispatch( { + type: EXPLORE_ACTION.SET_REVIEWED, + reviewedFilter: reviewedValues[reviewedKey].value + } )} + label={reviewedValues[reviewedKey].label} + /> + ) )} )} diff --git a/src/components/MediaViewer/MediaViewerModal.js b/src/components/MediaViewer/MediaViewerModal.js index 2bce01a81..80fb3a042 100644 --- a/src/components/MediaViewer/MediaViewerModal.js +++ b/src/components/MediaViewer/MediaViewerModal.js @@ -1,7 +1,7 @@ // @flow import MediaViewer from "components/MediaViewer/MediaViewer"; -import Modal from "components/SharedComponents/Modal"; +import Modal from "components/SharedComponents/Modal.tsx"; import type { Node } from "react"; import React from "react"; diff --git a/src/components/MyObservations/MyObservationsEmpty.js b/src/components/MyObservations/MyObservationsEmpty.js index c6c27e3be..975f2b5cb 100644 --- a/src/components/MyObservations/MyObservationsEmpty.js +++ b/src/components/MyObservations/MyObservationsEmpty.js @@ -9,7 +9,7 @@ import { Heading2 } from "components/SharedComponents"; import GradientButton from "components/SharedComponents/Buttons/GradientButton"; -import Modal from "components/SharedComponents/Modal"; +import Modal from "components/SharedComponents/Modal.tsx"; import { View } from "components/styledComponents"; import type { Node } from "react"; import React, { useState } from "react"; diff --git a/src/components/Settings/Settings.js b/src/components/Settings/Settings.js index 928751618..ab2591e22 100644 --- a/src/components/Settings/Settings.js +++ b/src/components/Settings/Settings.js @@ -143,7 +143,7 @@ const Settings = ( ) => { <> {t( "OBSERVATION-BUTTON" )} {t( "When-tapping-the-green-observation-button" )} - + { label={t( "iNaturalist-AI-Camera" )} /> - + { <> {t( "TAXON-NAMES-DISPLAY" )} {t( "This-is-how-taxon-names-will-be-displayed" )} - + { label={t( "Common-Name-Scientific-Name" )} /> - + { label={t( "Scientific-Name-Common-Name" )} /> - + void; + modal: React.ReactNode, + backdropOpacity?: number; + fullScreen?: boolean; + onModalHide?: () => void, + style?: ViewStyle, + animationIn?: string; + animationOut?: string; + disableSwipeDirection?: boolean; } const modalStyle = { flex: 1, justifyContent: "flex-end" -}; +} as const; const fullScreenModalStyle = { ...modalStyle, margin: 0 -}; +} as const; // accessibility might not work on Android because of backdrop // https://github.com/react-native-modal/react-native-modal/issues/525 @@ -42,9 +41,9 @@ const Modal = ( { onModalHide, showModal, style -}: Props ): React.Node => { +}: Props ) => { const swipeDirection = disableSwipeDirection - ? null + ? undefined : "down"; return ( void; + checked: boolean; + value: string; } const RadioButtonRow = ( { @@ -30,7 +29,7 @@ const RadioButtonRow = ( { icon, value, smallLabel = false -}: Props ): Node => { +}: Props ) => { const theme = useTheme( ); const status = checked @@ -50,13 +49,13 @@ const RadioButtonRow = ( { status={status} accessibilityLabel={label} /> - - + + {icon && } {description && ( - {description} + {description} )} ); diff --git a/src/components/SharedComponents/Sheets/BottomSheetStandardBackdrop.js b/src/components/SharedComponents/Sheets/BottomSheetStandardBackdrop.tsx similarity index 67% rename from src/components/SharedComponents/Sheets/BottomSheetStandardBackdrop.js rename to src/components/SharedComponents/Sheets/BottomSheetStandardBackdrop.tsx index 98a3847c0..4d6ac8498 100644 --- a/src/components/SharedComponents/Sheets/BottomSheetStandardBackdrop.js +++ b/src/components/SharedComponents/Sheets/BottomSheetStandardBackdrop.tsx @@ -1,16 +1,14 @@ -// @flow - import { - BottomSheetBackdrop + BottomSheetBackdrop, + BottomSheetBackdropProps } from "@gorhom/bottom-sheet"; -import type { Node } from "react"; import React from "react"; type Props = { - props: Object + props: BottomSheetBackdropProps } -const BottomSheetStandardBackdrop = ( { props }: Props ): Node => ( +const BottomSheetStandardBackdrop = ( { props }: Props ) => ( { - const { t } = useTranslation( ); - const [checked, setChecked] = useState( selectedValue ); - - const radioButtonRow = radioRow => ( - setChecked( radioValues[radioRow].value )} - label={radioValues[radioRow].label} - description={radioValues[radioRow].text} - /> - ); - - return ( - - - {Object.keys( radioValues ).map( radioRow => radioButtonRow( radioRow ) )} -