From f5575a773678586ea7cc49766ffe606b76f7fb4d Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Tue, 12 Dec 2023 19:41:26 +0100 Subject: [PATCH 01/16] migrate GrowlNotification and related components to TypeScript --- .../growlNotificationContainerPropTypes.js | 12 ------- .../GrowlNotificationContainer/index.js | 31 ------------------- .../index.native.js | 27 ---------------- .../index.native.tsx | 18 +++++++++++ .../GrowlNotificationContainer/index.tsx | 22 +++++++++++++ .../GrowlNotificationContainer/types.ts | 9 ++++++ .../GrowlNotification/{index.js => index.tsx} | 16 +++++----- src/components/GrowlNotification/types.ts | 9 ++++++ src/libs/Growl.ts | 7 ++--- 9 files changed, 69 insertions(+), 82 deletions(-) delete mode 100644 src/components/GrowlNotification/GrowlNotificationContainer/growlNotificationContainerPropTypes.js delete mode 100644 src/components/GrowlNotification/GrowlNotificationContainer/index.js delete mode 100644 src/components/GrowlNotification/GrowlNotificationContainer/index.native.js create mode 100644 src/components/GrowlNotification/GrowlNotificationContainer/index.native.tsx create mode 100644 src/components/GrowlNotification/GrowlNotificationContainer/index.tsx create mode 100644 src/components/GrowlNotification/GrowlNotificationContainer/types.ts rename src/components/GrowlNotification/{index.js => index.tsx} (88%) create mode 100644 src/components/GrowlNotification/types.ts diff --git a/src/components/GrowlNotification/GrowlNotificationContainer/growlNotificationContainerPropTypes.js b/src/components/GrowlNotification/GrowlNotificationContainer/growlNotificationContainerPropTypes.js deleted file mode 100644 index 2432d1b1748c..000000000000 --- a/src/components/GrowlNotification/GrowlNotificationContainer/growlNotificationContainerPropTypes.js +++ /dev/null @@ -1,12 +0,0 @@ -import PropTypes from 'prop-types'; -import {Animated} from 'react-native'; - -const propTypes = { - /** GrowlNotification content */ - children: PropTypes.node.isRequired, - - /** GrowlNotification Y postion, required to show or hide with fling animation */ - translateY: PropTypes.instanceOf(Animated.Value).isRequired, -}; - -export default propTypes; diff --git a/src/components/GrowlNotification/GrowlNotificationContainer/index.js b/src/components/GrowlNotification/GrowlNotificationContainer/index.js deleted file mode 100644 index 82672edb14c2..000000000000 --- a/src/components/GrowlNotification/GrowlNotificationContainer/index.js +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; -import {Animated} from 'react-native'; -import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; -import useThemeStyles from '@styles/useThemeStyles'; -import growlNotificationContainerPropTypes from './growlNotificationContainerPropTypes'; - -const propTypes = { - ...growlNotificationContainerPropTypes, - ...windowDimensionsPropTypes, -}; - -function GrowlNotificationContainer(props) { - const styles = useThemeStyles(); - return ( - - {props.children} - - ); -} - -GrowlNotificationContainer.propTypes = propTypes; -GrowlNotificationContainer.displayName = 'GrowlNotificationContainer'; - -export default withWindowDimensions(GrowlNotificationContainer); diff --git a/src/components/GrowlNotification/GrowlNotificationContainer/index.native.js b/src/components/GrowlNotification/GrowlNotificationContainer/index.native.js deleted file mode 100644 index 457a9dce66d9..000000000000 --- a/src/components/GrowlNotification/GrowlNotificationContainer/index.native.js +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import {Animated} from 'react-native'; -import useSafeAreaInsets from '@hooks/useSafeAreaInsets'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; -import growlNotificationContainerPropTypes from './growlNotificationContainerPropTypes'; - -const propTypes = { - ...growlNotificationContainerPropTypes, -}; - -function GrowlNotificationContainer(props) { - const styles = useThemeStyles(); - const StyleUtils = useStyleUtils(); - const insets = useSafeAreaInsets; - - return ( - - {props.children} - - ); -} - -GrowlNotificationContainer.propTypes = propTypes; -GrowlNotificationContainer.displayName = 'GrowlNotificationContainer'; - -export default GrowlNotificationContainer; diff --git a/src/components/GrowlNotification/GrowlNotificationContainer/index.native.tsx b/src/components/GrowlNotification/GrowlNotificationContainer/index.native.tsx new file mode 100644 index 000000000000..0fd7167ba492 --- /dev/null +++ b/src/components/GrowlNotification/GrowlNotificationContainer/index.native.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import {Animated} from 'react-native'; +import useSafeAreaInsets from '@hooks/useSafeAreaInsets'; +import useStyleUtils from '@styles/useStyleUtils'; +import useThemeStyles from '@styles/useThemeStyles'; +import GrowlNotificationContainerProps from './types'; + +function GrowlNotificationContainer({children, translateY}: GrowlNotificationContainerProps) { + const styles = useThemeStyles(); + const StyleUtils = useStyleUtils(); + const insets = useSafeAreaInsets(); + + return {children}; +} + +GrowlNotificationContainer.displayName = 'GrowlNotificationContainer'; + +export default GrowlNotificationContainer; diff --git a/src/components/GrowlNotification/GrowlNotificationContainer/index.tsx b/src/components/GrowlNotification/GrowlNotificationContainer/index.tsx new file mode 100644 index 000000000000..9f65e269ee96 --- /dev/null +++ b/src/components/GrowlNotification/GrowlNotificationContainer/index.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import {Animated} from 'react-native'; +import withWindowDimensions from '@components/withWindowDimensions'; +import {WindowDimensionsProps} from '@components/withWindowDimensions/types'; +import useThemeStyles from '@styles/useThemeStyles'; +import GrowlNotificationContainerProps from './types'; + +function GrowlNotificationContainer({children, translateY, isSmallScreenWidth}: GrowlNotificationContainerProps & WindowDimensionsProps) { + const styles = useThemeStyles(); + + return ( + + {children} + + ); +} + +GrowlNotificationContainer.displayName = 'GrowlNotificationContainer'; + +export default withWindowDimensions(GrowlNotificationContainer); diff --git a/src/components/GrowlNotification/GrowlNotificationContainer/types.ts b/src/components/GrowlNotification/GrowlNotificationContainer/types.ts new file mode 100644 index 000000000000..9a8ea4c76958 --- /dev/null +++ b/src/components/GrowlNotification/GrowlNotificationContainer/types.ts @@ -0,0 +1,9 @@ +import {Animated} from 'react-native'; + +type GrowlNotificationContainerProps = { + children: React.ReactNode; + + translateY: Animated.Value; +}; + +export default GrowlNotificationContainerProps; diff --git a/src/components/GrowlNotification/index.js b/src/components/GrowlNotification/index.tsx similarity index 88% rename from src/components/GrowlNotification/index.js rename to src/components/GrowlNotification/index.tsx index faf1ec9cfa16..84a56594943e 100644 --- a/src/components/GrowlNotification/index.js +++ b/src/components/GrowlNotification/index.tsx @@ -1,6 +1,7 @@ import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react'; import {Animated, View} from 'react-native'; import {Directions, FlingGestureHandler, State} from 'react-native-gesture-handler'; +import {SvgProps} from 'react-native-svg'; import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import * as Pressables from '@components/Pressable'; @@ -11,20 +12,21 @@ import useTheme from '@styles/themes/useTheme'; import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; import GrowlNotificationContainer from './GrowlNotificationContainer'; +import {GrowlNotificationProps} from './types'; const INACTIVE_POSITION_Y = -255; const PressableWithoutFeedback = Pressables.PressableWithoutFeedback; -function GrowlNotification(_, ref) { +function GrowlNotification({ref}: GrowlNotificationProps) { const translateY = useRef(new Animated.Value(INACTIVE_POSITION_Y)).current; const [bodyText, setBodyText] = useState(''); const [type, setType] = useState('success'); - const [duration, setDuration] = useState(); + const [duration, setDuration] = useState(); const theme = useTheme(); const styles = useThemeStyles(); - const types = { + const types: Record; iconColor: string}> = { [CONST.GROWL.SUCCESS]: { icon: Expensicons.Checkmark, iconColor: theme.success, @@ -46,7 +48,7 @@ function GrowlNotification(_, ref) { * @param {String} type * @param {Number} duration */ - const show = useCallback((text, growlType, growlDuration) => { + const show = useCallback((text: string, growlType: string, growlDuration: number) => { setBodyText(text); setType(growlType); setDuration(growlDuration); @@ -58,13 +60,11 @@ function GrowlNotification(_, ref) { * @param {Number} val */ const fling = useCallback( - (val = INACTIVE_POSITION_Y) => { + (val = INACTIVE_POSITION_Y) => Animated.spring(translateY, { toValue: val, - duration: 80, useNativeDriver, - }).start(); - }, + }).start(), [translateY], ); diff --git a/src/components/GrowlNotification/types.ts b/src/components/GrowlNotification/types.ts new file mode 100644 index 000000000000..edee6ce6b37a --- /dev/null +++ b/src/components/GrowlNotification/types.ts @@ -0,0 +1,9 @@ +type GrowlRef = { + show?: (bodyText: string, type: string, duration: number) => void; +}; + +type GrowlNotificationProps = { + ref: React.RefObject; +}; + +export type {GrowlRef, GrowlNotificationProps}; diff --git a/src/libs/Growl.ts b/src/libs/Growl.ts index 55bcf88206e9..b55ae5512c69 100644 --- a/src/libs/Growl.ts +++ b/src/libs/Growl.ts @@ -1,10 +1,7 @@ import React from 'react'; +import {GrowlRef} from '@components/GrowlNotification/types'; import CONST from '@src/CONST'; -type GrowlRef = { - show?: (bodyText: string, type: string, duration: number) => void; -}; - const growlRef = React.createRef(); let resolveIsReadyPromise: undefined | ((value?: unknown) => void); const isReadyPromise = new Promise((resolve) => { @@ -50,4 +47,6 @@ export default { success, }; +export type {GrowlRef}; + export {growlRef, setIsReady}; From 236b050889c9a3535bd65ff603d8071c05f88687 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Tue, 12 Dec 2023 19:44:40 +0100 Subject: [PATCH 02/16] remove omitted type export --- src/libs/Growl.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/libs/Growl.ts b/src/libs/Growl.ts index b55ae5512c69..59cadc7073f3 100644 --- a/src/libs/Growl.ts +++ b/src/libs/Growl.ts @@ -47,6 +47,4 @@ export default { success, }; -export type {GrowlRef}; - export {growlRef, setIsReady}; From f6828ab5c83a59082c9fc658540265c8dba54244 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Thu, 14 Dec 2023 00:58:41 +0100 Subject: [PATCH 03/16] add review nitpicks and changes --- .../GrowlNotificationContainer/index.tsx | 8 ++++---- src/components/GrowlNotification/index.tsx | 3 ++- src/components/GrowlNotification/types.ts | 7 ++++++- 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/components/GrowlNotification/GrowlNotificationContainer/index.tsx b/src/components/GrowlNotification/GrowlNotificationContainer/index.tsx index 9f65e269ee96..07530c117f60 100644 --- a/src/components/GrowlNotification/GrowlNotificationContainer/index.tsx +++ b/src/components/GrowlNotification/GrowlNotificationContainer/index.tsx @@ -1,12 +1,12 @@ import React from 'react'; import {Animated} from 'react-native'; -import withWindowDimensions from '@components/withWindowDimensions'; -import {WindowDimensionsProps} from '@components/withWindowDimensions/types'; +import useWindowDimensions from '@hooks/useWindowDimensions'; import useThemeStyles from '@styles/useThemeStyles'; import GrowlNotificationContainerProps from './types'; -function GrowlNotificationContainer({children, translateY, isSmallScreenWidth}: GrowlNotificationContainerProps & WindowDimensionsProps) { +function GrowlNotificationContainer({children, translateY}: GrowlNotificationContainerProps) { const styles = useThemeStyles(); + const {isSmallScreenWidth} = useWindowDimensions(); return ( void; }; type GrowlNotificationProps = { - ref: React.RefObject; + // eslint-disable-next-line @typescript-eslint/naming-convention + _: unknown; + + ref: ForwardedRef; }; export type {GrowlRef, GrowlNotificationProps}; From b11c5c838c7db58e91f9038e9b02c7385bf056d8 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Thu, 14 Dec 2023 13:03:27 +0100 Subject: [PATCH 04/16] change up ts errors --- src/components/GrowlNotification/index.tsx | 8 ++++---- src/components/GrowlNotification/types.ts | 14 -------------- src/libs/Growl.ts | 7 ++++++- 3 files changed, 10 insertions(+), 19 deletions(-) delete mode 100644 src/components/GrowlNotification/types.ts diff --git a/src/components/GrowlNotification/index.tsx b/src/components/GrowlNotification/index.tsx index 780a97924354..f52a6083f4e6 100644 --- a/src/components/GrowlNotification/index.tsx +++ b/src/components/GrowlNotification/index.tsx @@ -1,4 +1,4 @@ -import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react'; +import React, {ForwardedRef, forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react'; import {Animated, View} from 'react-native'; import {Directions, FlingGestureHandler, State} from 'react-native-gesture-handler'; import {SvgProps} from 'react-native-svg'; @@ -9,17 +9,17 @@ import Text from '@components/Text'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import * as Growl from '@libs/Growl'; +import type {GrowlRef} from '@libs/Growl'; import useNativeDriver from '@libs/useNativeDriver'; import CONST from '@src/CONST'; import GrowlNotificationContainer from './GrowlNotificationContainer'; -import {GrowlNotificationProps} from './types'; const INACTIVE_POSITION_Y = -255; const PressableWithoutFeedback = Pressables.PressableWithoutFeedback; -// eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/no-unused-vars -function GrowlNotification({_, ref}: GrowlNotificationProps) { +// eslint-disable-next-line @typescript-eslint/naming-convention +function GrowlNotification(_: unknown, ref: ForwardedRef) { const translateY = useRef(new Animated.Value(INACTIVE_POSITION_Y)).current; const [bodyText, setBodyText] = useState(''); const [type, setType] = useState('success'); diff --git a/src/components/GrowlNotification/types.ts b/src/components/GrowlNotification/types.ts deleted file mode 100644 index a984008978ed..000000000000 --- a/src/components/GrowlNotification/types.ts +++ /dev/null @@ -1,14 +0,0 @@ -import {ForwardedRef} from 'react'; - -type GrowlRef = { - show?: (bodyText: string, type: string, duration: number) => void; -}; - -type GrowlNotificationProps = { - // eslint-disable-next-line @typescript-eslint/naming-convention - _: unknown; - - ref: ForwardedRef; -}; - -export type {GrowlRef, GrowlNotificationProps}; diff --git a/src/libs/Growl.ts b/src/libs/Growl.ts index 59cadc7073f3..3812a155ba1f 100644 --- a/src/libs/Growl.ts +++ b/src/libs/Growl.ts @@ -1,7 +1,10 @@ import React from 'react'; -import {GrowlRef} from '@components/GrowlNotification/types'; import CONST from '@src/CONST'; +type GrowlRef = { + show?: (bodyText: string, type: string, duration: number) => void; +}; + const growlRef = React.createRef(); let resolveIsReadyPromise: undefined | ((value?: unknown) => void); const isReadyPromise = new Promise((resolve) => { @@ -47,4 +50,6 @@ export default { success, }; +export type {GrowlRef}; + export {growlRef, setIsReady}; From ac6b737f32def157b2efdaff3ca6fac045c24f3a Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Thu, 14 Dec 2023 13:12:20 +0100 Subject: [PATCH 05/16] add ChildrenProps to types --- .../GrowlNotification/GrowlNotificationContainer/types.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/GrowlNotification/GrowlNotificationContainer/types.ts b/src/components/GrowlNotification/GrowlNotificationContainer/types.ts index 9a8ea4c76958..69e5d11745c6 100644 --- a/src/components/GrowlNotification/GrowlNotificationContainer/types.ts +++ b/src/components/GrowlNotification/GrowlNotificationContainer/types.ts @@ -1,8 +1,7 @@ import {Animated} from 'react-native'; +import ChildrenProps from '@src/types/utils/ChildrenProps'; -type GrowlNotificationContainerProps = { - children: React.ReactNode; - +type GrowlNotificationContainerProps = ChildrenProps & { translateY: Animated.Value; }; From 5d024d763bde660513aaad091ccce1d39fe06662 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Tue, 19 Dec 2023 22:28:51 +0100 Subject: [PATCH 06/16] separate icon types --- src/components/GrowlNotification/index.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/components/GrowlNotification/index.tsx b/src/components/GrowlNotification/index.tsx index f52a6083f4e6..0ab515bf3032 100644 --- a/src/components/GrowlNotification/index.tsx +++ b/src/components/GrowlNotification/index.tsx @@ -27,7 +27,18 @@ function GrowlNotification(_: unknown, ref: ForwardedRef) { const theme = useTheme(); const styles = useThemeStyles(); - const types: Record; iconColor: string}> = { + type GrowlIconTypes = Record< + string, + { + /** Expensicon for the page */ + icon: React.FC; + + /** Color for the icon (should be from theme) */ + iconColor: string; + } + >; + + const types: GrowlIconTypes = { [CONST.GROWL.SUCCESS]: { icon: Expensicons.Checkmark, iconColor: theme.success, From 472b9089335abe38d7583e8230d4e9d5028ea26e Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Tue, 27 Feb 2024 10:26:07 +0100 Subject: [PATCH 07/16] fix lint errors --- .../GrowlNotificationContainer/index.native.tsx | 2 +- .../GrowlNotification/GrowlNotificationContainer/index.tsx | 2 +- .../GrowlNotification/GrowlNotificationContainer/types.ts | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/GrowlNotification/GrowlNotificationContainer/index.native.tsx b/src/components/GrowlNotification/GrowlNotificationContainer/index.native.tsx index c395bec7770c..efd143c9487c 100644 --- a/src/components/GrowlNotification/GrowlNotificationContainer/index.native.tsx +++ b/src/components/GrowlNotification/GrowlNotificationContainer/index.native.tsx @@ -3,7 +3,7 @@ import {Animated} from 'react-native'; import useSafeAreaInsets from '@hooks/useSafeAreaInsets'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; -import GrowlNotificationContainerProps from './types'; +import type GrowlNotificationContainerProps from './types'; function GrowlNotificationContainer({children, translateY}: GrowlNotificationContainerProps) { const styles = useThemeStyles(); diff --git a/src/components/GrowlNotification/GrowlNotificationContainer/index.tsx b/src/components/GrowlNotification/GrowlNotificationContainer/index.tsx index 7d3701c7a87c..3bbd0303906d 100644 --- a/src/components/GrowlNotification/GrowlNotificationContainer/index.tsx +++ b/src/components/GrowlNotification/GrowlNotificationContainer/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import {Animated} from 'react-native'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; -import GrowlNotificationContainerProps from './types'; +import type GrowlNotificationContainerProps from './types'; function GrowlNotificationContainer({children, translateY}: GrowlNotificationContainerProps) { const styles = useThemeStyles(); diff --git a/src/components/GrowlNotification/GrowlNotificationContainer/types.ts b/src/components/GrowlNotification/GrowlNotificationContainer/types.ts index 69e5d11745c6..91a48437dbd9 100644 --- a/src/components/GrowlNotification/GrowlNotificationContainer/types.ts +++ b/src/components/GrowlNotification/GrowlNotificationContainer/types.ts @@ -1,5 +1,5 @@ -import {Animated} from 'react-native'; -import ChildrenProps from '@src/types/utils/ChildrenProps'; +import type {Animated} from 'react-native'; +import type ChildrenProps from '@src/types/utils/ChildrenProps'; type GrowlNotificationContainerProps = ChildrenProps & { translateY: Animated.Value; From 011b031cb41019a777fb620d64c2b8567a309638 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Tue, 27 Feb 2024 10:56:54 +0100 Subject: [PATCH 08/16] fix prettier --- src/components/GrowlNotification/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/GrowlNotification/index.tsx b/src/components/GrowlNotification/index.tsx index 42e16b8068cb..83d76704a27a 100644 --- a/src/components/GrowlNotification/index.tsx +++ b/src/components/GrowlNotification/index.tsx @@ -1,7 +1,8 @@ import type {ForwardedRef} from 'react'; -import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react'; +import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react'; import {Animated, View} from 'react-native'; import {Directions, Gesture, GestureDetector} from 'react-native-gesture-handler'; +import type {SvgProps} from 'react-native-svg'; import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import * as Pressables from '@components/Pressable'; @@ -12,7 +13,6 @@ import * as Growl from '@libs/Growl'; import type {GrowlRef} from '@libs/Growl'; import useNativeDriver from '@libs/useNativeDriver'; import CONST from '@src/CONST'; -import type { SvgProps } from 'react-native-svg'; import GrowlNotificationContainer from './GrowlNotificationContainer'; const INACTIVE_POSITION_Y = -255; From daf98e72615bfad7024835c84b4d3581bfd9ccc2 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Mon, 4 Mar 2024 12:50:27 +0100 Subject: [PATCH 09/16] return wrapper braces --- src/components/GrowlNotification/index.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/GrowlNotification/index.tsx b/src/components/GrowlNotification/index.tsx index 83d76704a27a..041de836bbd7 100644 --- a/src/components/GrowlNotification/index.tsx +++ b/src/components/GrowlNotification/index.tsx @@ -73,11 +73,12 @@ function GrowlNotification(_: unknown, ref: ForwardedRef) { * @param {Number} val */ const fling = useCallback( - (val = INACTIVE_POSITION_Y) => + (val = INACTIVE_POSITION_Y) => { Animated.spring(translateY, { toValue: val, useNativeDriver, - }).start(), + }).start(); + }, [translateY], ); From 67244ff1a146b4d4b263b169ad90359adf95e5fa Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Mon, 4 Mar 2024 13:08:32 +0100 Subject: [PATCH 10/16] fix prettier --- src/components/GrowlNotification/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/GrowlNotification/index.tsx b/src/components/GrowlNotification/index.tsx index 041de836bbd7..ac385133ea30 100644 --- a/src/components/GrowlNotification/index.tsx +++ b/src/components/GrowlNotification/index.tsx @@ -77,7 +77,7 @@ function GrowlNotification(_: unknown, ref: ForwardedRef) { Animated.spring(translateY, { toValue: val, useNativeDriver, - }).start(); + }).start(); }, [translateY], ); From 355ef47d571bcf2a3ec713860ae238ca6efefc33 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Tue, 5 Mar 2024 11:40:29 +0100 Subject: [PATCH 11/16] update eslint rules to allow leading underscore for method parameters --- .eslintrc.js | 1 + src/components/GrowlNotification/index.tsx | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/.eslintrc.js b/.eslintrc.js index 281f8269804e..276272026d98 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -191,6 +191,7 @@ module.exports = { { selector: ['parameter', 'method'], format: ['camelCase', 'PascalCase'], + leadingUnderscore: 'allow', }, ], '@typescript-eslint/ban-types': [ diff --git a/src/components/GrowlNotification/index.tsx b/src/components/GrowlNotification/index.tsx index ac385133ea30..68f00d608d98 100644 --- a/src/components/GrowlNotification/index.tsx +++ b/src/components/GrowlNotification/index.tsx @@ -19,7 +19,6 @@ const INACTIVE_POSITION_Y = -255; const PressableWithoutFeedback = Pressables.PressableWithoutFeedback; -// eslint-disable-next-line @typescript-eslint/naming-convention function GrowlNotification(_: unknown, ref: ForwardedRef) { const translateY = useRef(new Animated.Value(INACTIVE_POSITION_Y)).current; const [bodyText, setBodyText] = useState(''); From c84a8189d6c1e61ab84a94841a3d762ba7e1cc59 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Tue, 5 Mar 2024 11:41:12 +0100 Subject: [PATCH 12/16] remove unnecessary eslint-disables for leading underscore parameters --- src/components/MultiGestureCanvas/usePanGesture.ts | 1 - src/components/MultiGestureCanvas/usePinchGesture.ts | 1 - src/components/MultiGestureCanvas/useTapGestures.ts | 2 -- src/components/OptionsList/BaseOptionsList.tsx | 1 - src/components/ScreenWrapper.tsx | 2 -- src/components/SwipeableView/index.native.tsx | 1 - .../home/report/ContextMenu/PopoverReportActionContextMenu.tsx | 1 - src/pages/settings/Wallet/WalletPage/WalletPage.tsx | 1 - src/styles/utils/addOutlineWidth/index.native.ts | 1 - src/utils/times.ts | 1 - 10 files changed, 12 deletions(-) diff --git a/src/components/MultiGestureCanvas/usePanGesture.ts b/src/components/MultiGestureCanvas/usePanGesture.ts index a3f9c7d62df0..8184f7ead66f 100644 --- a/src/components/MultiGestureCanvas/usePanGesture.ts +++ b/src/components/MultiGestureCanvas/usePanGesture.ts @@ -125,7 +125,6 @@ const usePanGesture = ({ const panGesture = Gesture.Pan() .manualActivation(true) .averageTouches(true) - // eslint-disable-next-line @typescript-eslint/naming-convention .onTouchesMove((_evt, state) => { // We only allow panning when the content is zoomed in if (zoomScale.value <= 1 || shouldDisableTransformationGestures.value) { diff --git a/src/components/MultiGestureCanvas/usePinchGesture.ts b/src/components/MultiGestureCanvas/usePinchGesture.ts index 74a2326748a1..87d3bdada6a2 100644 --- a/src/components/MultiGestureCanvas/usePinchGesture.ts +++ b/src/components/MultiGestureCanvas/usePinchGesture.ts @@ -98,7 +98,6 @@ const usePinchGesture = ({ const pinchGesture = Gesture.Pinch() .enabled(pinchEnabled) // The first argument is not used, but must be defined - // eslint-disable-next-line @typescript-eslint/naming-convention .onTouchesDown((_evt, state) => { // We don't want to activate pinch gesture when we are swiping in the pager if (!shouldDisableTransformationGestures.value) { diff --git a/src/components/MultiGestureCanvas/useTapGestures.ts b/src/components/MultiGestureCanvas/useTapGestures.ts index a28333725d6e..f550e93d6be2 100644 --- a/src/components/MultiGestureCanvas/useTapGestures.ts +++ b/src/components/MultiGestureCanvas/useTapGestures.ts @@ -121,7 +121,6 @@ const useTapGestures = ({ const doubleTapGesture = Gesture.Tap() // The first argument is not used, but must be defined - // eslint-disable-next-line @typescript-eslint/naming-convention .onTouchesDown((_evt, state) => { if (!shouldDisableTransformationGestures.value) { return; @@ -156,7 +155,6 @@ const useTapGestures = ({ .onBegin(() => { stopAnimation(); }) - // eslint-disable-next-line @typescript-eslint/naming-convention .onFinalize((_evt, success) => { if (!success || onTap === undefined) { return; diff --git a/src/components/OptionsList/BaseOptionsList.tsx b/src/components/OptionsList/BaseOptionsList.tsx index 575df128894a..3844080c6f5d 100644 --- a/src/components/OptionsList/BaseOptionsList.tsx +++ b/src/components/OptionsList/BaseOptionsList.tsx @@ -133,7 +133,6 @@ function BaseOptionsList( * * [{header}, {sectionHeader}, {item}, {item}, {sectionHeader}, {item}, {item}, {footer}] */ - // eslint-disable-next-line @typescript-eslint/naming-convention const getItemLayout = (_data: OptionsListData[] | null, flatDataArrayIndex: number) => { if (!flattenedData.current[flatDataArrayIndex]) { flattenedData.current = buildFlatSectionArray(); diff --git a/src/components/ScreenWrapper.tsx b/src/components/ScreenWrapper.tsx index 198b47cb4259..d45f9a5c8e8d 100644 --- a/src/components/ScreenWrapper.tsx +++ b/src/components/ScreenWrapper.tsx @@ -144,7 +144,6 @@ function ScreenWrapper( const panResponder = useRef( PanResponder.create({ - // eslint-disable-next-line @typescript-eslint/naming-convention onStartShouldSetPanResponderCapture: (_e, gestureState) => gestureState.numberActiveTouches === CONST.TEST_TOOL.NUMBER_OF_TAPS, onPanResponderRelease: toggleTestToolsModal, }), @@ -152,7 +151,6 @@ function ScreenWrapper( const keyboardDissmissPanResponder = useRef( PanResponder.create({ - // eslint-disable-next-line @typescript-eslint/naming-convention onMoveShouldSetPanResponderCapture: (_e, gestureState) => { const isHorizontalSwipe = Math.abs(gestureState.dx) > Math.abs(gestureState.dy); const shouldDismissKeyboard = shouldDismissKeyboardBeforeClose && isKeyboardShown && Browser.isMobile(); diff --git a/src/components/SwipeableView/index.native.tsx b/src/components/SwipeableView/index.native.tsx index 67c6695c1a7f..e5b6d371e606 100644 --- a/src/components/SwipeableView/index.native.tsx +++ b/src/components/SwipeableView/index.native.tsx @@ -9,7 +9,6 @@ function SwipeableView({children, onSwipeDown}: SwipeableViewProps) { const panResponder = useRef( PanResponder.create({ // 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; diff --git a/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.tsx b/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.tsx index 0b4154a15e80..5a3153ac1ef5 100644 --- a/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.tsx +++ b/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.tsx @@ -30,7 +30,6 @@ function extractPointerEvent(event: GestureResponderEvent | MouseEvent): MouseEv return event; } -// eslint-disable-next-line @typescript-eslint/naming-convention function PopoverReportActionContextMenu(_props: never, ref: ForwardedRef) { const {translate} = useLocalize(); const reportIDRef = useRef('0'); diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.tsx b/src/pages/settings/Wallet/WalletPage/WalletPage.tsx index 13e2877d3ec7..41f423ae6abf 100644 --- a/src/pages/settings/Wallet/WalletPage/WalletPage.tsx +++ b/src/pages/settings/Wallet/WalletPage/WalletPage.tsx @@ -396,7 +396,6 @@ function WalletPage({bankAccountList = {}, cardList = {}, fundList = {}, isLoadi )} navigateToWalletOrTransferBalancePage(source)} onSelectPaymentMethod={(selectedPaymentMethod: string) => { if (hasActivatedWallet || selectedPaymentMethod !== CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT) { diff --git a/src/styles/utils/addOutlineWidth/index.native.ts b/src/styles/utils/addOutlineWidth/index.native.ts index 9a9942951cd0..fdc338caaffd 100644 --- a/src/styles/utils/addOutlineWidth/index.native.ts +++ b/src/styles/utils/addOutlineWidth/index.native.ts @@ -4,7 +4,6 @@ */ import type AddOutlineWidth from './types'; -// eslint-disable-next-line @typescript-eslint/naming-convention const addOutlineWidth: AddOutlineWidth = (_theme, obj) => obj; export default addOutlineWidth; diff --git a/src/utils/times.ts b/src/utils/times.ts index 1dc97eb74659..0f2a0766a8c3 100644 --- a/src/utils/times.ts +++ b/src/utils/times.ts @@ -1,5 +1,4 @@ function times(n: number, func: (index: number) => TReturnType = (i) => i as TReturnType): TReturnType[] { - // eslint-disable-next-line @typescript-eslint/naming-convention return Array.from({length: n}).map((_, i) => func(i)); } From 4156b073ea5ebbe911cc921b0fdb66726264d61e Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Tue, 12 Mar 2024 16:21:51 +0100 Subject: [PATCH 13/16] add review suggestions --- src/components/GrowlNotification/index.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/GrowlNotification/index.tsx b/src/components/GrowlNotification/index.tsx index 68f00d608d98..558cd16ea7f5 100644 --- a/src/components/GrowlNotification/index.tsx +++ b/src/components/GrowlNotification/index.tsx @@ -19,15 +19,18 @@ const INACTIVE_POSITION_Y = -255; const PressableWithoutFeedback = Pressables.PressableWithoutFeedback; -function GrowlNotification(_: unknown, ref: ForwardedRef) { +function GrowlNotification(_: never, ref: ForwardedRef) { const translateY = useRef(new Animated.Value(INACTIVE_POSITION_Y)).current; const [bodyText, setBodyText] = useState(''); const [type, setType] = useState('success'); - const [duration, setDuration] = useState(); + const [duration, setDuration] = useState(); const theme = useTheme(); const styles = useThemeStyles(); type GrowlIconTypes = Record< + /** String representing the growl type, all type strings + * for growl notifications are stored in CONST.GROWL + */ string, { /** Expensicon for the page */ @@ -38,6 +41,7 @@ function GrowlNotification(_: unknown, ref: ForwardedRef) { } >; + // const types: GrowlIconTypes = { [CONST.GROWL.SUCCESS]: { icon: Expensicons.Checkmark, From 6c09bd1dcec86c8d3c5500654d38e11d38aa4e8b Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Tue, 12 Mar 2024 16:25:30 +0100 Subject: [PATCH 14/16] clear up unused comment --- src/components/GrowlNotification/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/GrowlNotification/index.tsx b/src/components/GrowlNotification/index.tsx index 558cd16ea7f5..531fe50941fc 100644 --- a/src/components/GrowlNotification/index.tsx +++ b/src/components/GrowlNotification/index.tsx @@ -41,7 +41,6 @@ function GrowlNotification(_: never, ref: ForwardedRef) { } >; - // const types: GrowlIconTypes = { [CONST.GROWL.SUCCESS]: { icon: Expensicons.Checkmark, From 9603f70ee583da8adb31e38b57f6f938a94ad02b Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Tue, 12 Mar 2024 16:29:55 +0100 Subject: [PATCH 15/16] revert the typechange for underscore --- src/components/GrowlNotification/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/GrowlNotification/index.tsx b/src/components/GrowlNotification/index.tsx index 531fe50941fc..3160ae3830dd 100644 --- a/src/components/GrowlNotification/index.tsx +++ b/src/components/GrowlNotification/index.tsx @@ -19,7 +19,7 @@ const INACTIVE_POSITION_Y = -255; const PressableWithoutFeedback = Pressables.PressableWithoutFeedback; -function GrowlNotification(_: never, ref: ForwardedRef) { +function GrowlNotification(_: undefined, ref: ForwardedRef) { const translateY = useRef(new Animated.Value(INACTIVE_POSITION_Y)).current; const [bodyText, setBodyText] = useState(''); const [type, setType] = useState('success'); From 1d65728d40f5ec9b59e1359092c405ffadd03e81 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Tue, 12 Mar 2024 16:38:50 +0100 Subject: [PATCH 16/16] fix typecheck issues --- src/components/GrowlNotification/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/GrowlNotification/index.tsx b/src/components/GrowlNotification/index.tsx index 3160ae3830dd..d0846dcf7a42 100644 --- a/src/components/GrowlNotification/index.tsx +++ b/src/components/GrowlNotification/index.tsx @@ -19,7 +19,7 @@ const INACTIVE_POSITION_Y = -255; const PressableWithoutFeedback = Pressables.PressableWithoutFeedback; -function GrowlNotification(_: undefined, ref: ForwardedRef) { +function GrowlNotification(_: unknown, ref: ForwardedRef) { const translateY = useRef(new Animated.Value(INACTIVE_POSITION_Y)).current; const [bodyText, setBodyText] = useState(''); const [type, setType] = useState('success');