From 9cf808512c9169b60c48776c0fcfb1df610906b3 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Tue, 17 Oct 2023 14:33:19 +0200 Subject: [PATCH 1/2] [TS migration] Migrate 'SwipeableView' component to TypeScript --- .eslintrc.js | 1 + src/components/SwipeableView/index.js | 3 --- .../{index.native.js => index.native.tsx} | 24 +++++++------------ src/components/SwipeableView/index.tsx | 8 +++++++ src/components/SwipeableView/types.ts | 15 ++++++++++++ 5 files changed, 33 insertions(+), 18 deletions(-) delete mode 100644 src/components/SwipeableView/index.js rename src/components/SwipeableView/{index.native.js => index.native.tsx} (65%) create mode 100644 src/components/SwipeableView/index.tsx create mode 100644 src/components/SwipeableView/types.ts diff --git a/.eslintrc.js b/.eslintrc.js index 75a74ed371c4..3143ecde4cbf 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -165,6 +165,7 @@ module.exports = { ], curly: 'error', 'you-dont-need-lodash-underscore/throttle': 'off', + 'react/prop-types': 'off', }, }, { diff --git a/src/components/SwipeableView/index.js b/src/components/SwipeableView/index.js deleted file mode 100644 index 96640b107608..000000000000 --- a/src/components/SwipeableView/index.js +++ /dev/null @@ -1,3 +0,0 @@ -export default ({children}) => children; - -// Swipeable View is available just on Android/iOS for now. diff --git a/src/components/SwipeableView/index.native.js b/src/components/SwipeableView/index.native.tsx similarity index 65% rename from src/components/SwipeableView/index.native.js rename to src/components/SwipeableView/index.native.tsx index 2f1148721af1..bc2c985ad559 100644 --- a/src/components/SwipeableView/index.native.js +++ b/src/components/SwipeableView/index.native.tsx @@ -1,41 +1,35 @@ import React, {useRef} from 'react'; import {PanResponder, View} from 'react-native'; -import PropTypes from 'prop-types'; import CONST from '../../CONST'; +import SwipeableViewComponent 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) { +// eslint-disable-next-line react/function-component-definition +const SwipeableView: SwipeableViewComponent = ({children, onSwipeDown}) => { 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 - {props.children} + {children} ); -} +}; -SwipeableView.propTypes = propTypes; SwipeableView.displayName = 'SwipeableView'; export default SwipeableView; diff --git a/src/components/SwipeableView/index.tsx b/src/components/SwipeableView/index.tsx new file mode 100644 index 000000000000..fb3beeb03d8e --- /dev/null +++ b/src/components/SwipeableView/index.tsx @@ -0,0 +1,8 @@ +import SwipeableViewComponent from './types'; + +// Swipeable View is available just on Android/iOS for now. +const SwipeableView: SwipeableViewComponent = ({children}) => children; + +SwipeableView.displayName = 'SwipeableView'; + +export default SwipeableView; diff --git a/src/components/SwipeableView/types.ts b/src/components/SwipeableView/types.ts new file mode 100644 index 000000000000..2aa396198f5e --- /dev/null +++ b/src/components/SwipeableView/types.ts @@ -0,0 +1,15 @@ +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; +}; + +type SwipeableViewComponent = React.FC; + +export default SwipeableViewComponent; + +export type {SwipeableViewProps}; From 742aa835baf705f5a0e4df390d670a3128199244 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Tue, 17 Oct 2023 14:44:15 +0200 Subject: [PATCH 2/2] Change common types according to the guidelines --- .eslintrc.js | 1 - src/components/SwipeableView/index.native.tsx | 7 +++---- src/components/SwipeableView/index.tsx | 8 ++------ src/components/SwipeableView/types.ts | 6 +----- 4 files changed, 6 insertions(+), 16 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 3143ecde4cbf..75a74ed371c4 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -165,7 +165,6 @@ module.exports = { ], curly: 'error', 'you-dont-need-lodash-underscore/throttle': 'off', - 'react/prop-types': 'off', }, }, { diff --git a/src/components/SwipeableView/index.native.tsx b/src/components/SwipeableView/index.native.tsx index bc2c985ad559..ac500f025016 100644 --- a/src/components/SwipeableView/index.native.tsx +++ b/src/components/SwipeableView/index.native.tsx @@ -1,10 +1,9 @@ import React, {useRef} from 'react'; import {PanResponder, View} from 'react-native'; import CONST from '../../CONST'; -import SwipeableViewComponent from './types'; +import SwipeableViewProps from './types'; -// eslint-disable-next-line react/function-component-definition -const SwipeableView: SwipeableViewComponent = ({children, onSwipeDown}) => { +function SwipeableView({children, onSwipeDown}: SwipeableViewProps) { const minimumPixelDistance = CONST.COMPOSER_MAX_HEIGHT; const oldYRef = useRef(0); const panResponder = useRef( @@ -28,7 +27,7 @@ const SwipeableView: SwipeableViewComponent = ({children, onSwipeDown}) => { // eslint-disable-next-line react/jsx-props-no-spreading {children} ); -}; +} SwipeableView.displayName = 'SwipeableView'; diff --git a/src/components/SwipeableView/index.tsx b/src/components/SwipeableView/index.tsx index fb3beeb03d8e..335c3e7dcf03 100644 --- a/src/components/SwipeableView/index.tsx +++ b/src/components/SwipeableView/index.tsx @@ -1,8 +1,4 @@ -import SwipeableViewComponent from './types'; +import SwipeableViewProps from './types'; // Swipeable View is available just on Android/iOS for now. -const SwipeableView: SwipeableViewComponent = ({children}) => children; - -SwipeableView.displayName = 'SwipeableView'; - -export default SwipeableView; +export default ({children}: SwipeableViewProps) => children; diff --git a/src/components/SwipeableView/types.ts b/src/components/SwipeableView/types.ts index 2aa396198f5e..560df7ef5a45 100644 --- a/src/components/SwipeableView/types.ts +++ b/src/components/SwipeableView/types.ts @@ -8,8 +8,4 @@ type SwipeableViewProps = { onSwipeDown: () => void; }; -type SwipeableViewComponent = React.FC; - -export default SwipeableViewComponent; - -export type {SwipeableViewProps}; +export default SwipeableViewProps;