From 802c7b2b28c1e06a2b540a8a3ade78a8a0a3fe88 Mon Sep 17 00:00:00 2001 From: AlexAlexandre Date: Thu, 15 Jul 2021 16:47:53 -0300 Subject: [PATCH] [IMPROVE] migrate the ActionSheet component --- .../{ActionSheet.js => ActionSheet.tsx} | 47 +++++++++---------- .../ActionSheet/{Button.js => Button.ts} | 0 .../ActionSheet/{Handle.js => Handle.tsx} | 6 +-- .../ActionSheet/{Item.js => Item.tsx} | 30 ++++++------ .../ActionSheet/{Provider.js => Provider.tsx} | 6 +-- .../ActionSheet/{index.js => index.ts} | 0 .../ActionSheet/{styles.js => styles.ts} | 0 app/dimensions.tsx | 4 +- 8 files changed, 43 insertions(+), 50 deletions(-) rename app/containers/ActionSheet/{ActionSheet.js => ActionSheet.tsx} (81%) rename app/containers/ActionSheet/{Button.js => Button.ts} (100%) rename app/containers/ActionSheet/{Handle.js => Handle.tsx} (73%) rename app/containers/ActionSheet/{Item.js => Item.tsx} (72%) rename app/containers/ActionSheet/{Provider.js => Provider.tsx} (86%) rename app/containers/ActionSheet/{index.js => index.ts} (100%) rename app/containers/ActionSheet/{styles.js => styles.ts} (100%) diff --git a/app/containers/ActionSheet/ActionSheet.js b/app/containers/ActionSheet/ActionSheet.tsx similarity index 81% rename from app/containers/ActionSheet/ActionSheet.js rename to app/containers/ActionSheet/ActionSheet.tsx index af98a75ce8..c465076c22 100644 --- a/app/containers/ActionSheet/ActionSheet.js +++ b/app/containers/ActionSheet/ActionSheet.tsx @@ -7,17 +7,11 @@ import React, { useCallback, isValidElement } from 'react'; -import PropTypes from 'prop-types'; import { Keyboard, Text } from 'react-native'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { TapGestureHandler, State } from 'react-native-gesture-handler'; import ScrollBottomSheet from 'react-native-scroll-bottom-sheet'; -import Animated, { - Extrapolate, - interpolate, - Value, - Easing -} from 'react-native-reanimated'; +import Animated, { Extrapolate, interpolate, Value, Easing} from 'react-native-reanimated'; import * as Haptics from 'expo-haptics'; import { useBackHandler } from '@react-native-community/hooks'; @@ -29,9 +23,16 @@ import styles, { ITEM_HEIGHT } from './styles'; import { isTablet, isIOS } from '../../utils/deviceInfo'; import * as List from '../List'; import I18n from '../../i18n'; -import { useOrientation, useDimensions } from '../../dimensions'; +import { useOrientation, useDimensions, IDimensionsContextProps } from '../../dimensions'; -const getItemLayout = (data, index) => ({ length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index }); +type TActionSheetData = { + options: any; + headerHeight?: number; + hasCancel?: boolean; + customHeader: any; +} + +const getItemLayout = (data: any, index: number) => ({ length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index }); const HANDLE_HEIGHT = isIOS ? 40 : 56; const MAX_SNAP_HEIGHT = 16; @@ -45,17 +46,17 @@ const ANIMATION_CONFIG = { easing: Easing.bezier(0.645, 0.045, 0.355, 1.0) }; -const ActionSheet = React.memo(forwardRef(({ children, theme }, ref) => { - const bottomSheetRef = useRef(); - const [data, setData] = useState({}); +const ActionSheet = React.memo(forwardRef(({ children, theme }: {children: JSX.Element; theme: string}, ref) => { + const bottomSheetRef: any = useRef(); + const [data, setData] = useState({} as TActionSheetData); const [isVisible, setVisible] = useState(false); - const { height } = useDimensions(); + const { height }: Partial = useDimensions(); const { isLandscape } = useOrientation(); const insets = useSafeAreaInsets(); const maxSnap = Math.max( ( - height + height! // Items height - (ITEM_HEIGHT * (data?.options?.length || 0)) // Handle height @@ -77,7 +78,7 @@ const ActionSheet = React.memo(forwardRef(({ children, theme }, ref) => { * we'll provide more one snap * that point 50% of the whole screen */ - const snaps = (height - maxSnap > height * 0.6) && !isLandscape ? [maxSnap, height * 0.5, height] : [maxSnap, height]; + const snaps: any = (height! - maxSnap > height! * 0.6) && !isLandscape ? [maxSnap, height! * 0.5, height] : [maxSnap, height]; const openedSnapIndex = snaps.length > 2 ? 1 : 0; const closedSnapIndex = snaps.length - 1; @@ -87,12 +88,12 @@ const ActionSheet = React.memo(forwardRef(({ children, theme }, ref) => { bottomSheetRef.current?.snapTo(closedSnapIndex); }; - const show = (options) => { + const show = (options: any) => { setData(options); toggleVisible(); }; - const onBackdropPressed = ({ nativeEvent }) => { + const onBackdropPressed = ({ nativeEvent }: any) => { if (nativeEvent.oldState === State.ACTIVE) { hide(); } @@ -128,7 +129,7 @@ const ActionSheet = React.memo(forwardRef(({ children, theme }, ref) => { {isValidElement(data?.customHeader) ? data.customHeader : null} - )); + ), [theme, data]); const renderFooter = useCallback(() => (data?.hasCancel ? ( - ) : null)); + ) : null), [theme, data, hide()]); - const renderItem = useCallback(({ item }) => ); + const renderItem = useCallback(({ item }) => , []); const animatedPosition = React.useRef(new Value(0)); const opacity = interpolate(animatedPosition.current, { @@ -168,7 +169,7 @@ const ActionSheet = React.memo(forwardRef(({ children, theme }, ref) => { ]} /> - testID='action-sheet' ref={bottomSheetRef} componentType='FlatList' @@ -200,9 +201,5 @@ const ActionSheet = React.memo(forwardRef(({ children, theme }, ref) => { ); })); -ActionSheet.propTypes = { - children: PropTypes.node, - theme: PropTypes.string -}; export default ActionSheet; diff --git a/app/containers/ActionSheet/Button.js b/app/containers/ActionSheet/Button.ts similarity index 100% rename from app/containers/ActionSheet/Button.js rename to app/containers/ActionSheet/Button.ts diff --git a/app/containers/ActionSheet/Handle.js b/app/containers/ActionSheet/Handle.tsx similarity index 73% rename from app/containers/ActionSheet/Handle.js rename to app/containers/ActionSheet/Handle.tsx index 0f19ce3f2f..1e00208463 100644 --- a/app/containers/ActionSheet/Handle.js +++ b/app/containers/ActionSheet/Handle.tsx @@ -1,15 +1,11 @@ import React from 'react'; -import PropTypes from 'prop-types'; import { View } from 'react-native'; import styles from './styles'; import { themes } from '../../constants/colors'; -export const Handle = React.memo(({ theme }) => ( +export const Handle = React.memo(({ theme }: {theme: string}) => ( )); -Handle.propTypes = { - theme: PropTypes.string -}; diff --git a/app/containers/ActionSheet/Item.js b/app/containers/ActionSheet/Item.tsx similarity index 72% rename from app/containers/ActionSheet/Item.js rename to app/containers/ActionSheet/Item.tsx index 2cacd0855b..aca9dc2152 100644 --- a/app/containers/ActionSheet/Item.js +++ b/app/containers/ActionSheet/Item.tsx @@ -1,13 +1,25 @@ import React from 'react'; -import PropTypes from 'prop-types'; import { Text, View } from 'react-native'; import { themes } from '../../constants/colors'; import { CustomIcon } from '../../lib/Icons'; -import styles from './styles'; import { Button } from './Button'; +import styles from './styles'; + +interface IActionSheetItem { + item: { + title: string; + icon: string; + danger: boolean; + testID: string; + onPress(): void; + right: Function; + }; + theme: string + hide(): void; +} -export const Item = React.memo(({ item, hide, theme }) => { +export const Item = React.memo(({ item, hide, theme }: IActionSheetItem) => { const onPress = () => { hide(); item?.onPress(); @@ -37,15 +49,3 @@ export const Item = React.memo(({ item, hide, theme }) => { ); }); -Item.propTypes = { - item: PropTypes.shape({ - title: PropTypes.string, - icon: PropTypes.string, - danger: PropTypes.bool, - onPress: PropTypes.func, - right: PropTypes.func, - testID: PropTypes.string - }), - hide: PropTypes.func, - theme: PropTypes.string -}; diff --git a/app/containers/ActionSheet/Provider.js b/app/containers/ActionSheet/Provider.tsx similarity index 86% rename from app/containers/ActionSheet/Provider.js rename to app/containers/ActionSheet/Provider.tsx index 3708e6744b..de2a64ebf5 100644 --- a/app/containers/ActionSheet/Provider.js +++ b/app/containers/ActionSheet/Provider.tsx @@ -13,18 +13,18 @@ export const useActionSheet = () => useContext(context); const { Provider, Consumer } = context; -export const withActionSheet = Component => forwardRef((props, ref) => ( +export const withActionSheet = (Component: any) => forwardRef((props, ref) => ( {contexts => } )); export const ActionSheetProvider = React.memo(({ children }) => { - const ref = useRef(); + const ref: any = useRef(); const { theme } = useTheme(); const getContext = () => ({ - showActionSheet: (options) => { + showActionSheet: (options: any) => { ref.current?.showActionSheet(options); }, hideActionSheet: () => { diff --git a/app/containers/ActionSheet/index.js b/app/containers/ActionSheet/index.ts similarity index 100% rename from app/containers/ActionSheet/index.js rename to app/containers/ActionSheet/index.ts diff --git a/app/containers/ActionSheet/styles.js b/app/containers/ActionSheet/styles.ts similarity index 100% rename from app/containers/ActionSheet/styles.js rename to app/containers/ActionSheet/styles.ts diff --git a/app/dimensions.tsx b/app/dimensions.tsx index 32ccb93c3a..a67cf0479e 100644 --- a/app/dimensions.tsx +++ b/app/dimensions.tsx @@ -2,9 +2,9 @@ import React from 'react'; import { Dimensions } from 'react-native'; import hoistNonReactStatics from 'hoist-non-react-statics'; -interface IDimensionsContextProps { +export interface IDimensionsContextProps { width: number; - height: number; + height?: number; scale: number; fontScale: number; setDimensions: ({ width, height, scale, fontScale }: { width: number; height: number; scale: number; fontScale: number; }) => void;