Merge pull request #29449 from VickyStash/ts-migration/withNavigation…

…Fallback-hoc Remove 'withNavigationFallback.js' HOC
Expensify · Oct 17, 2023 · 9390cf1 · 9390cf1
2 parents 332ddc4 + bdf5836
commit 9390cf1
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 65 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -116,7 +116,7 @@ module.exports = {
                     },
                     {
                         selector: ['parameter', 'method'],
-                        format: ['camelCase'],
+                        format: ['camelCase', 'PascalCase'],
                     },
                 ],
                 '@typescript-eslint/ban-types': [

diff --git a/src/components/Button/index.js b/src/components/Button/index.js
@@ -9,8 +9,6 @@ import Icon from '../Icon';
 import CONST from '../../CONST';
 import * as StyleUtils from '../../styles/StyleUtils';
 import HapticFeedback from '../../libs/HapticFeedback';
-import withNavigationFallback from '../withNavigationFallback';
-import compose from '../../libs/compose';
 import * as Expensicons from '../Icon/Expensicons';
 import withNavigationFocus from '../withNavigationFocus';
 import validateSubmitShortcut from './validateSubmitShortcut';
@@ -328,10 +326,7 @@ class Button extends Component {
 Button.propTypes = propTypes;
 Button.defaultProps = defaultProps;
 
-export default compose(
-    withNavigationFallback,
-    withNavigationFocus,
-)(
+export default withNavigationFocus(
     React.forwardRef((props, ref) => (
         <Button
             // eslint-disable-next-line react/jsx-props-no-spreading

diff --git a/src/components/withNavigationFallback.js b/src/components/withNavigationFallback.js
diff --git a/src/libs/getComponentDisplayName.ts b/src/libs/getComponentDisplayName.ts
@@ -1,6 +1,6 @@
 import {ComponentType} from 'react';
 
 /** Returns the display name of a component */
-export default function getComponentDisplayName(component: ComponentType): string {
+export default function getComponentDisplayName<TProps>(component: ComponentType<TProps>): string {
     return component.displayName ?? component.name ?? 'Component';
 }
diff --git a/src/stories/Composer.stories.js b/src/stories/Composer.stories.js
@@ -1,16 +1,14 @@
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
-import React, {useState} from 'react';
+import React, {useMemo, useState} from 'react';
 import {View, Image} from 'react-native';
+import {NavigationContext} from '@react-navigation/core';
 import Composer from '../components/Composer';
 import RenderHTML from '../components/RenderHTML';
 import Text from '../components/Text';
 import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
 import * as StyleUtils from '../styles/StyleUtils';
 import CONST from '../CONST';
-import withNavigationFallback from '../components/withNavigationFallback';
-
-const ComposerWithNavigation = withNavigationFallback(Composer);
 
 /**
  * We use the Component Story Format for writing stories. Follow the docs here:
@@ -19,7 +17,7 @@ const ComposerWithNavigation = withNavigationFallback(Composer);
  */
 const story = {
     title: 'Components/Composer',
-    component: ComposerWithNavigation,
+    component: Composer,
 };
 
 const parser = new ExpensiMark();
@@ -28,19 +26,22 @@ function Default(args) {
     const [pastedFile, setPastedFile] = useState(null);
     const [comment, setComment] = useState(args.defaultValue);
     const renderedHTML = parser.replace(comment);
+    const navigationContextValue = useMemo(() => ({addListener: () => () => {}, removeListener: () => () => {}}), []);
 
     return (
         <View>
             <View style={[styles.border, styles.p4]}>
-                <ComposerWithNavigation
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...args}
-                    multiline
-                    textAlignVertical="top"
-                    onChangeText={setComment}
-                    onPasteFile={setPastedFile}
-                    style={[styles.textInputCompose, styles.w100]}
-                />
+                <NavigationContext.Provider value={navigationContextValue}>
+                    <Composer
+                        // eslint-disable-next-line react/jsx-props-no-spreading
+                        {...args}
+                        multiline
+                        textAlignVertical="top"
+                        onChangeText={setComment}
+                        onPasteFile={setPastedFile}
+                        style={[styles.textInputCompose, styles.w100]}
+                    />
+                </NavigationContext.Provider>
             </View>
             <View style={[styles.flexRow, styles.mv5, styles.flexWrap, styles.w100]}>
                 <View