From 508056da58bad5064766404d4cf12df81f86d0f6 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Thu, 19 Oct 2023 10:05:34 +0200 Subject: [PATCH 1/6] migrate all files to TypeScript --- .../AnimatedStep/AnimatedStepContext.js | 5 --- .../AnimatedStep/AnimatedStepContext.ts | 15 +++++++ .../AnimatedStep/AnimatedStepProvider.js | 17 -------- .../AnimatedStep/AnimatedStepProvider.tsx | 15 +++++++ .../AnimatedStep/{index.js => index.tsx} | 40 +++++++------------ ...epContext.js => useAnimatedStepContext.ts} | 4 +- 6 files changed, 47 insertions(+), 49 deletions(-) delete mode 100644 src/components/AnimatedStep/AnimatedStepContext.js create mode 100644 src/components/AnimatedStep/AnimatedStepContext.ts delete mode 100644 src/components/AnimatedStep/AnimatedStepProvider.js create mode 100644 src/components/AnimatedStep/AnimatedStepProvider.tsx rename src/components/AnimatedStep/{index.js => index.tsx} (54%) rename src/components/AnimatedStep/{useAnimatedStepContext.js => useAnimatedStepContext.ts} (69%) diff --git a/src/components/AnimatedStep/AnimatedStepContext.js b/src/components/AnimatedStep/AnimatedStepContext.js deleted file mode 100644 index 30377147fdb8..000000000000 --- a/src/components/AnimatedStep/AnimatedStepContext.js +++ /dev/null @@ -1,5 +0,0 @@ -import {createContext} from 'react'; - -const AnimatedStepContext = createContext(); - -export default AnimatedStepContext; diff --git a/src/components/AnimatedStep/AnimatedStepContext.ts b/src/components/AnimatedStep/AnimatedStepContext.ts new file mode 100644 index 000000000000..eb68f67953c3 --- /dev/null +++ b/src/components/AnimatedStep/AnimatedStepContext.ts @@ -0,0 +1,15 @@ +import React, {createContext} from 'react'; +import {ValueOf} from 'type-fest'; +import CONST from '../../CONST'; + +type AnimationDirection = ValueOf; + +type StepContext = { + animationDirection: AnimationDirection; + setAnimationDirection: React.Dispatch>>; +}; + +const AnimatedStepContext = createContext(null); + +export default AnimatedStepContext; +export type {StepContext, AnimationDirection}; diff --git a/src/components/AnimatedStep/AnimatedStepProvider.js b/src/components/AnimatedStep/AnimatedStepProvider.js deleted file mode 100644 index 280fbd1a2776..000000000000 --- a/src/components/AnimatedStep/AnimatedStepProvider.js +++ /dev/null @@ -1,17 +0,0 @@ -import React, {useState} from 'react'; -import PropTypes from 'prop-types'; -import AnimatedStepContext from './AnimatedStepContext'; -import CONST from '../../CONST'; - -const propTypes = { - children: PropTypes.node.isRequired, -}; - -function AnimatedStepProvider({children}) { - const [animationDirection, setAnimationDirection] = useState(CONST.ANIMATION_DIRECTION.IN); - - return {children}; -} - -AnimatedStepProvider.propTypes = propTypes; -export default AnimatedStepProvider; diff --git a/src/components/AnimatedStep/AnimatedStepProvider.tsx b/src/components/AnimatedStep/AnimatedStepProvider.tsx new file mode 100644 index 000000000000..ea114c3e87b8 --- /dev/null +++ b/src/components/AnimatedStep/AnimatedStepProvider.tsx @@ -0,0 +1,15 @@ +import React, {useState} from 'react'; +import AnimatedStepContext, {AnimationDirection} from './AnimatedStepContext'; +import CONST from '../../CONST'; +import ChildrenProps from '../../types/utils/ChildrenProps'; + +type AnimatedStepProviderProps = ChildrenProps; + +function AnimatedStepProvider({children}: AnimatedStepProviderProps): React.ReactNode { + const [animationDirection, setAnimationDirection] = useState(CONST.ANIMATION_DIRECTION.IN); + + return {children}; +} + +AnimatedStepProvider.displayName = 'AnimatedStepProvider'; +export default AnimatedStepProvider; diff --git a/src/components/AnimatedStep/index.js b/src/components/AnimatedStep/index.tsx similarity index 54% rename from src/components/AnimatedStep/index.js rename to src/components/AnimatedStep/index.tsx index 5b0dc8bc78fa..45078b193ed1 100644 --- a/src/components/AnimatedStep/index.js +++ b/src/components/AnimatedStep/index.tsx @@ -1,62 +1,52 @@ import React from 'react'; -import PropTypes from 'prop-types'; import * as Animatable from 'react-native-animatable'; +import {StyleProp, ViewStyle} from 'react-native'; import CONST from '../../CONST'; import styles from '../../styles/styles'; import useNativeDriver from '../../libs/useNativeDriver'; +import {AnimationDirection} from './AnimatedStepContext'; +import ChildrenProps from '../../types/utils/ChildrenProps'; -const propTypes = { - /** Children to wrap in AnimatedStep. */ - children: PropTypes.node.isRequired, - +type AnimatedStepProps = ChildrenProps & { /** Styles to be assigned to Container */ - // eslint-disable-next-line react/forbid-prop-types - style: PropTypes.arrayOf(PropTypes.object), + style: StyleProp; /** Whether we're animating the step in or out */ - direction: PropTypes.oneOf(['in', 'out']), + direction: AnimationDirection; /** Callback to fire when the animation ends */ - onAnimationEnd: PropTypes.func, -}; - -const defaultProps = { - direction: 'in', - style: [], - onAnimationEnd: () => {}, + onAnimationEnd: () => void; }; -function getAnimationStyle(direction) { +function getAnimationStyle(direction: AnimationDirection) { let transitionValue; if (direction === 'in') { transitionValue = CONST.ANIMATED_TRANSITION_FROM_VALUE; - } else if (direction === 'out') { + } else { transitionValue = -CONST.ANIMATED_TRANSITION_FROM_VALUE; } return styles.makeSlideInTranslation('translateX', transitionValue); } -function AnimatedStep(props) { +function AnimatedStep({onAnimationEnd, direction = 'in', style = [], children}: AnimatedStepProps) { return ( { - if (!props.onAnimationEnd) { + if (!onAnimationEnd) { return; } - props.onAnimationEnd(); + onAnimationEnd(); }} duration={CONST.ANIMATED_TRANSITION} - animation={getAnimationStyle(props.direction)} + animation={getAnimationStyle(direction)} useNativeDriver={useNativeDriver} - style={props.style} + style={style} > - {props.children} + {children} ); } -AnimatedStep.propTypes = propTypes; -AnimatedStep.defaultProps = defaultProps; AnimatedStep.displayName = 'AnimatedStep'; export default AnimatedStep; diff --git a/src/components/AnimatedStep/useAnimatedStepContext.js b/src/components/AnimatedStep/useAnimatedStepContext.ts similarity index 69% rename from src/components/AnimatedStep/useAnimatedStepContext.js rename to src/components/AnimatedStep/useAnimatedStepContext.ts index e2af9514e20e..3edc71e5289e 100644 --- a/src/components/AnimatedStep/useAnimatedStepContext.js +++ b/src/components/AnimatedStep/useAnimatedStepContext.ts @@ -1,7 +1,7 @@ import {useContext} from 'react'; -import AnimatedStepContext from './AnimatedStepContext'; +import AnimatedStepContext, {StepContext} from './AnimatedStepContext'; -function useAnimatedStepContext() { +function useAnimatedStepContext(): StepContext { const context = useContext(AnimatedStepContext); if (!context) { throw new Error('useAnimatedStepContext must be used within an AnimatedStepContextProvider'); From e2a294e2826c72df37825050950f2b1a2a484305 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Thu, 19 Oct 2023 11:23:22 +0200 Subject: [PATCH 2/6] minor style changes --- src/components/AnimatedStep/AnimatedStepProvider.tsx | 4 +--- src/components/AnimatedStep/index.tsx | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/AnimatedStep/AnimatedStepProvider.tsx b/src/components/AnimatedStep/AnimatedStepProvider.tsx index ea114c3e87b8..a6896e76298d 100644 --- a/src/components/AnimatedStep/AnimatedStepProvider.tsx +++ b/src/components/AnimatedStep/AnimatedStepProvider.tsx @@ -3,9 +3,7 @@ import AnimatedStepContext, {AnimationDirection} from './AnimatedStepContext'; import CONST from '../../CONST'; import ChildrenProps from '../../types/utils/ChildrenProps'; -type AnimatedStepProviderProps = ChildrenProps; - -function AnimatedStepProvider({children}: AnimatedStepProviderProps): React.ReactNode { +function AnimatedStepProvider({children}: ChildrenProps): React.ReactNode { const [animationDirection, setAnimationDirection] = useState(CONST.ANIMATION_DIRECTION.IN); return {children}; diff --git a/src/components/AnimatedStep/index.tsx b/src/components/AnimatedStep/index.tsx index 45078b193ed1..f843768ed630 100644 --- a/src/components/AnimatedStep/index.tsx +++ b/src/components/AnimatedStep/index.tsx @@ -29,7 +29,7 @@ function getAnimationStyle(direction: AnimationDirection) { return styles.makeSlideInTranslation('translateX', transitionValue); } -function AnimatedStep({onAnimationEnd, direction = 'in', style = [], children}: AnimatedStepProps) { +function AnimatedStep({onAnimationEnd, direction = CONST.ANIMATION_DIRECTION.IN, style = [], children}: AnimatedStepProps) { return ( { From 6bd4978a272f7581d92ea7b97d85cab817634450 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Fri, 20 Oct 2023 13:43:11 +0200 Subject: [PATCH 3/6] use AnimationDirection type --- src/components/AnimatedStep/AnimatedStepContext.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AnimatedStep/AnimatedStepContext.ts b/src/components/AnimatedStep/AnimatedStepContext.ts index eb68f67953c3..e1bf35dd31c9 100644 --- a/src/components/AnimatedStep/AnimatedStepContext.ts +++ b/src/components/AnimatedStep/AnimatedStepContext.ts @@ -6,7 +6,7 @@ type AnimationDirection = ValueOf; type StepContext = { animationDirection: AnimationDirection; - setAnimationDirection: React.Dispatch>>; + setAnimationDirection: React.Dispatch>; }; const AnimatedStepContext = createContext(null); From 6b0cd8f3f3cc4343f25a2a3d711a5820cc579a39 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 31 Oct 2023 14:56:56 +0100 Subject: [PATCH 4/6] fix linting --- src/components/AnimatedStep/AnimatedStepProvider.tsx | 2 +- src/components/AnimatedStep/index.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/AnimatedStep/AnimatedStepProvider.tsx b/src/components/AnimatedStep/AnimatedStepProvider.tsx index 830876f28c56..0e9e61514810 100644 --- a/src/components/AnimatedStep/AnimatedStepProvider.tsx +++ b/src/components/AnimatedStep/AnimatedStepProvider.tsx @@ -1,7 +1,7 @@ import React, {useMemo, useState} from 'react'; -import AnimatedStepContext, {AnimationDirection} from './AnimatedStepContext'; import CONST from '../../CONST'; import ChildrenProps from '../../types/utils/ChildrenProps'; +import AnimatedStepContext, {AnimationDirection} from './AnimatedStepContext'; function AnimatedStepProvider({children}: ChildrenProps): React.ReactNode { const [animationDirection, setAnimationDirection] = useState(CONST.ANIMATION_DIRECTION.IN); diff --git a/src/components/AnimatedStep/index.tsx b/src/components/AnimatedStep/index.tsx index f843768ed630..d5b3ee2d5fec 100644 --- a/src/components/AnimatedStep/index.tsx +++ b/src/components/AnimatedStep/index.tsx @@ -1,11 +1,11 @@ import React from 'react'; -import * as Animatable from 'react-native-animatable'; import {StyleProp, ViewStyle} from 'react-native'; +import * as Animatable from 'react-native-animatable'; import CONST from '../../CONST'; -import styles from '../../styles/styles'; import useNativeDriver from '../../libs/useNativeDriver'; -import {AnimationDirection} from './AnimatedStepContext'; +import styles from '../../styles/styles'; import ChildrenProps from '../../types/utils/ChildrenProps'; +import {AnimationDirection} from './AnimatedStepContext'; type AnimatedStepProps = ChildrenProps & { /** Styles to be assigned to Container */ From a12e7a77a152ae81d18861f8ccd6606461518e18 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 31 Oct 2023 15:23:09 +0100 Subject: [PATCH 5/6] fix imports --- src/components/AnimatedStep/AnimatedStepContext.ts | 2 +- src/components/AnimatedStep/index.tsx | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/AnimatedStep/AnimatedStepContext.ts b/src/components/AnimatedStep/AnimatedStepContext.ts index e1bf35dd31c9..3b4c5f79a34f 100644 --- a/src/components/AnimatedStep/AnimatedStepContext.ts +++ b/src/components/AnimatedStep/AnimatedStepContext.ts @@ -1,6 +1,6 @@ import React, {createContext} from 'react'; import {ValueOf} from 'type-fest'; -import CONST from '../../CONST'; +import CONST from '@src/CONST'; type AnimationDirection = ValueOf; diff --git a/src/components/AnimatedStep/index.tsx b/src/components/AnimatedStep/index.tsx index d5b3ee2d5fec..607f4f0a4b11 100644 --- a/src/components/AnimatedStep/index.tsx +++ b/src/components/AnimatedStep/index.tsx @@ -1,10 +1,10 @@ import React from 'react'; import {StyleProp, ViewStyle} from 'react-native'; import * as Animatable from 'react-native-animatable'; -import CONST from '../../CONST'; -import useNativeDriver from '../../libs/useNativeDriver'; -import styles from '../../styles/styles'; -import ChildrenProps from '../../types/utils/ChildrenProps'; +import useNativeDriver from '@libs/useNativeDriver'; +import styles from '@styles/styles'; +import CONST from '@src/CONST'; +import ChildrenProps from '@src/types/utils/ChildrenProps'; import {AnimationDirection} from './AnimatedStepContext'; type AnimatedStepProps = ChildrenProps & { From b721afce53950b60c29edd91fa593ef8add687e0 Mon Sep 17 00:00:00 2001 From: Julian Kobrynski Date: Tue, 31 Oct 2023 15:24:36 +0100 Subject: [PATCH 6/6] fix imports in AnimatedStepProvider --- src/components/AnimatedStep/AnimatedStepProvider.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/AnimatedStep/AnimatedStepProvider.tsx b/src/components/AnimatedStep/AnimatedStepProvider.tsx index 0e9e61514810..53b3a0e0a53d 100644 --- a/src/components/AnimatedStep/AnimatedStepProvider.tsx +++ b/src/components/AnimatedStep/AnimatedStepProvider.tsx @@ -1,6 +1,6 @@ import React, {useMemo, useState} from 'react'; -import CONST from '../../CONST'; -import ChildrenProps from '../../types/utils/ChildrenProps'; +import CONST from '@src/CONST'; +import ChildrenProps from '@src/types/utils/ChildrenProps'; import AnimatedStepContext, {AnimationDirection} from './AnimatedStepContext'; function AnimatedStepProvider({children}: ChildrenProps): React.ReactNode {