Merge pull request #29945 from JKobrynski/migrateAnimatedStepToTypeSc…

…ript

[No QA] [TS Migration] migrate AnimatedStep directory's files to TypeScript

src/components/AnimatedStep/AnimatedStepContext.ts

@@ -0,0 +1,15 @@
+import React, {createContext} from 'react';
+import {ValueOf} from 'type-fest';
+import CONST from '@src/CONST';
+
+type AnimationDirection = ValueOf<typeof CONST.ANIMATION_DIRECTION>;
+
+type StepContext = {
+    animationDirection: AnimationDirection;
+    setAnimationDirection: React.Dispatch<React.SetStateAction<AnimationDirection>>;
+};
+
+const AnimatedStepContext = createContext<StepContext | null>(null);
+
+export default AnimatedStepContext;
+export type {StepContext, AnimationDirection};

src/components/AnimatedStep/AnimatedStepProvider.js → src/components/AnimatedStep/AnimatedStepProvider.tsx

@@ -1,18 +1,14 @@
-import PropTypes from 'prop-types';
 import React, {useMemo, useState} from 'react';
 import CONST from '@src/CONST';
-import AnimatedStepContext from './AnimatedStepContext';
+import ChildrenProps from '@src/types/utils/ChildrenProps';
+import AnimatedStepContext, {AnimationDirection} from './AnimatedStepContext';
 
-const propTypes = {
-    children: PropTypes.node.isRequired,
-};
-
-function AnimatedStepProvider({children}) {
-    const [animationDirection, setAnimationDirection] = useState(CONST.ANIMATION_DIRECTION.IN);
+function AnimatedStepProvider({children}: ChildrenProps): React.ReactNode {
+    const [animationDirection, setAnimationDirection] = useState<AnimationDirection>(CONST.ANIMATION_DIRECTION.IN);
     const contextValue = useMemo(() => ({animationDirection, setAnimationDirection}), [animationDirection, setAnimationDirection]);
 
     return <AnimatedStepContext.Provider value={contextValue}>{children}</AnimatedStepContext.Provider>;
 }
 
-AnimatedStepProvider.propTypes = propTypes;
+AnimatedStepProvider.displayName = 'AnimatedStepProvider';
 export default AnimatedStepProvider;

src/components/AnimatedStep/index.js → src/components/AnimatedStep/index.tsx

@@ -1,62 +1,52 @@
-import PropTypes from 'prop-types';
 import React from 'react';
+import {StyleProp, ViewStyle} from 'react-native';
 import * as Animatable from 'react-native-animatable';
 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';
 
-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<ViewStyle>;
 
     /** 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 = CONST.ANIMATION_DIRECTION.IN, style = [], children}: AnimatedStepProps) {
     return (
         <Animatable.View
             onAnimationEnd={() => {
-                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}
         </Animatable.View>
     );
 }
 
-AnimatedStep.propTypes = propTypes;
-AnimatedStep.defaultProps = defaultProps;
 AnimatedStep.displayName = 'AnimatedStep';
 export default AnimatedStep;

src/components/AnimatedStep/useAnimatedStepContext.js → 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');