Merge pull request #32942 from software-mansion-labs/ts-migration/gro…

…wl-notification

[TS migration] Migrate 'GrowlNotification' component to TypeScript

.eslintrc.js

@@ -194,6 +194,7 @@ module.exports = {
                     {
                         selector: ['parameter', 'method'],
                         format: ['camelCase', 'PascalCase'],
+                        leadingUnderscore: 'allow',
                     },
                 ],
                 '@typescript-eslint/ban-types': [

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 '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
+import type GrowlNotificationContainerProps from './types';
+
+function GrowlNotificationContainer({children, translateY}: GrowlNotificationContainerProps) {
+    const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
+    const insets = useSafeAreaInsets();
+
+    return <Animated.View style={[StyleUtils.getSafeAreaPadding(insets), styles.growlNotificationContainer, styles.growlNotificationTranslateY(translateY)]}>{children}</Animated.View>;
+}
+
+GrowlNotificationContainer.displayName = 'GrowlNotificationContainer';
+
+export default GrowlNotificationContainer;

src/components/GrowlNotification/GrowlNotificationContainer/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import {Animated} from 'react-native';
+import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import type GrowlNotificationContainerProps from './types';
+
+function GrowlNotificationContainer({children, translateY}: GrowlNotificationContainerProps) {
+    const styles = useThemeStyles();
+    const {isSmallScreenWidth} = useWindowDimensions();
+
+    return (
+        <Animated.View
+            style={[styles.growlNotificationContainer, styles.growlNotificationDesktopContainer, styles.growlNotificationTranslateY(translateY), isSmallScreenWidth && styles.mwn]}
+        >
+            {children}
+        </Animated.View>
+    );
+}
+
+GrowlNotificationContainer.displayName = 'GrowlNotificationContainer';
+
+export default GrowlNotificationContainer;

src/components/GrowlNotification/GrowlNotificationContainer/types.ts

@@ -0,0 +1,8 @@
+import type {Animated} from 'react-native';
+import type ChildrenProps from '@src/types/utils/ChildrenProps';
+
+type GrowlNotificationContainerProps = ChildrenProps & {
+    translateY: Animated.Value;
+};
+
+export default GrowlNotificationContainerProps;

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

@@ -1,13 +1,16 @@
+import type {ForwardedRef} 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';
 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';
@@ -16,15 +19,29 @@ const INACTIVE_POSITION_Y = -255;
 
 const PressableWithoutFeedback = Pressables.PressableWithoutFeedback;
 
-function GrowlNotification(_, ref) {
+function GrowlNotification(_: unknown, ref: ForwardedRef<GrowlRef>) {
     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<number>();
     const theme = useTheme();
     const styles = useThemeStyles();
 
-    const types = {
+    type GrowlIconTypes = Record<
+        /** String representing the growl type, all type strings
+         *  for growl notifications are stored in CONST.GROWL
+         */
+        string,
+        {
+            /** Expensicon for the page */
+            icon: React.FC<SvgProps>;
+
+            /** Color for the icon (should be from theme) */
+            iconColor: string;
+        }
+    >;
+
+    const types: GrowlIconTypes = {
         [CONST.GROWL.SUCCESS]: {
             icon: Expensicons.Checkmark,
             iconColor: theme.success,
@@ -46,7 +63,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);
@@ -61,7 +78,6 @@ function GrowlNotification(_, ref) {
         (val = INACTIVE_POSITION_Y) => {
             Animated.spring(translateY, {
                 toValue: val,
-                duration: 80,
                 useNativeDriver,
             }).start();
         },

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) {

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;

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();

src/components/ScreenWrapper.tsx

@@ -148,15 +148,13 @@ 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,
         }),
     ).current;
 
     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();

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;

src/libs/Growl.ts

@@ -50,4 +50,6 @@ export default {
     success,
 };
 
+export type {GrowlRef};
+
 export {growlRef, setIsReady};

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: unknown, ref: ForwardedRef<ReportActionContextMenu>) {
     const {translate} = useLocalize();
     const reportIDRef = useRef('0');

src/pages/settings/Wallet/WalletPage/WalletPage.tsx

@@ -396,7 +396,6 @@ function WalletPage({bankAccountList = {}, cardList = {}, fundList = {}, isLoadi
                                             )}
 
                                             <KYCWall
-                                                // eslint-disable-next-line @typescript-eslint/naming-convention
                                                 onSuccessfulKYC={(_iouPaymentType?: PaymentMethodType, source?: Source) => navigateToWalletOrTransferBalancePage(source)}
                                                 onSelectPaymentMethod={(selectedPaymentMethod: string) => {
                                                     if (hasActivatedWallet || selectedPaymentMethod !== CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT) {

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;

src/utils/times.ts

@@ -1,5 +1,4 @@
 function times<TReturnType>(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));
 }