Merge pull request Expensify#29763 from software-mansion-labs/ts-migr…

…ation/SwipeableView

[No QA][TS migration] Migrate 'SwipeableView' component to TypeScript

src/components/SwipeableView/index.native.js → src/components/SwipeableView/index.native.tsx

@@ -1,41 +1,34 @@
 import React, {useRef} from 'react';
 import {PanResponder, View} from 'react-native';
-import PropTypes from 'prop-types';
 import CONST from '../../CONST';
+import SwipeableViewProps from './types';
 
-const propTypes = {
-    children: PropTypes.element.isRequired,
-
-    /** Callback to fire when the user swipes down on the child content */
-    onSwipeDown: PropTypes.func.isRequired,
-};
-
-function SwipeableView(props) {
+function SwipeableView({children, onSwipeDown}: SwipeableViewProps) {
     const minimumPixelDistance = CONST.COMPOSER_MAX_HEIGHT;
     const oldYRef = useRef(0);
     const panResponder = useRef(
         PanResponder.create({
-            // The PanResponder gets focus only when the y-axis movement is over minimumPixelDistance
-            // & swipe direction is downwards
+            // The PanResponder gets focus only when the y-axis movement is over minimumPixelDistance & swipe direction is downwards
+            // eslint-disable-next-line @typescript-eslint/naming-convention
             onMoveShouldSetPanResponderCapture: (_event, gestureState) => {
                 if (gestureState.dy - oldYRef.current > 0 && gestureState.dy > minimumPixelDistance) {
                     return true;
                 }
                 oldYRef.current = gestureState.dy;
+                return false;
             },
 
             // Calls the callback when the swipe down is released; after the completion of the gesture
-            onPanResponderRelease: props.onSwipeDown,
+            onPanResponderRelease: onSwipeDown,
         }),
     ).current;
 
     return (
         // eslint-disable-next-line react/jsx-props-no-spreading
-        <View {...panResponder.panHandlers}>{props.children}</View>
+        <View {...panResponder.panHandlers}>{children}</View>
     );
 }
 
-SwipeableView.propTypes = propTypes;
 SwipeableView.displayName = 'SwipeableView';
 
 export default SwipeableView;

src/components/SwipeableView/index.tsx

@@ -0,0 +1,4 @@
+import SwipeableViewProps from './types';
+
+// Swipeable View is available just on Android/iOS for now.
+export default ({children}: SwipeableViewProps) => children;

src/components/SwipeableView/types.ts

@@ -0,0 +1,11 @@
+import {ReactNode} from 'react';
+
+type SwipeableViewProps = {
+    /** The content to be rendered within the SwipeableView */
+    children: ReactNode;
+
+    /** Callback to fire when the user swipes down on the child content */
+    onSwipeDown: () => void;
+};
+
+export default SwipeableViewProps;