[TS migration] Migrate 'GrowlNotification' component to TypeScript

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 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 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,9 @@
+import {Animated} from 'react-native';
+
+type GrowlNotificationContainerProps = {
+    children: React.ReactNode;
+
+    translateY: Animated.Value;
+};
+
+export default GrowlNotificationContainerProps;

src/components/GrowlNotification/index.js → 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,22 @@ import * as Growl 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;
 
-function GrowlNotification(_, ref) {
+// eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/no-unused-vars
+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<number | undefined>();
     const theme = useTheme();
     const styles = useThemeStyles();
 
-    const types = {
+    const types: Record<string, {icon: React.FC<SvgProps>; iconColor: string}> = {
         [CONST.GROWL.SUCCESS]: {
             icon: Expensicons.Checkmark,
             iconColor: theme.success,
@@ -46,7 +49,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 +61,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],
     );
 

src/components/GrowlNotification/types.ts

@@ -0,0 +1,14 @@
+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<GrowlRef>;
+};
+
+export type {GrowlRef, GrowlNotificationProps};

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<GrowlRef>();
 let resolveIsReadyPromise: undefined | ((value?: unknown) => void);
 const isReadyPromise = new Promise((resolve) => {