Merge pull request #29548 from software-mansion-labs/ts/withLocalize

[TS migration] Migrate 'withLocalize.js' HOC to TypeScript
Expensify · Nov 15, 2023 · 1eb1f72 · 1eb1f72
2 parents 1ca499c + 23ef35d
commit 1eb1f72
Showing 1 changed file with 24 additions and 18 deletions.
diff --git a/src/components/withLocalize.js → src/components/withLocalize.tsx b/src/components/withLocalize.js → src/components/withLocalize.tsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
-import React, {forwardRef} from 'react';
+import React, {ComponentType, ForwardedRef, forwardRef, ReactElement, RefAttributes} from 'react';
 import getComponentDisplayName from '@libs/getComponentDisplayName';
-import {LocaleContext} from './LocaleContextProvider';
+import {LocaleContext, LocaleContextProps} from './LocaleContextProvider';
 
 const withLocalizePropTypes = {
     /** Returns translated string for given locale and phrase */
@@ -30,24 +30,30 @@ const withLocalizePropTypes = {
     toLocaleDigit: PropTypes.func.isRequired,
 };
 
-export default function withLocalize(WrappedComponent) {
-    const WithLocalize = forwardRef((props, ref) => (
-        <LocaleContext.Consumer>
-            {(translateUtils) => (
-                <WrappedComponent
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...translateUtils}
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...props}
-                    ref={ref}
-                />
-            )}
-        </LocaleContext.Consumer>
-    ));
+type WithLocalizeProps = LocaleContextProps;
+
+export default function withLocalize<TProps extends WithLocalizeProps, TRef>(
+    WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>,
+): (props: Omit<TProps, keyof LocaleContextProps> & React.RefAttributes<TRef>) => ReactElement | null {
+    function WithLocalize(props: Omit<TProps, keyof WithLocalizeProps>, ref: ForwardedRef<TRef>) {
+        return (
+            <LocaleContext.Consumer>
+                {(translateUtils) => (
+                    <WrappedComponent
+                        // eslint-disable-next-line react/jsx-props-no-spreading
+                        {...translateUtils}
+                        // eslint-disable-next-line react/jsx-props-no-spreading
+                        {...(props as TProps)}
+                        ref={ref}
+                    />
+                )}
+            </LocaleContext.Consumer>
+        );
+    }
 
     WithLocalize.displayName = `withLocalize(${getComponentDisplayName(WrappedComponent)})`;
-
-    return WithLocalize;
+    return forwardRef(WithLocalize);
 }
 
 export {withLocalizePropTypes};
+export type {WithLocalizeProps};