From 4fb1a60e6b5680c355ade566a13370e1aff381e6 Mon Sep 17 00:00:00 2001
From: Blazej Kustra <blazej.kustra@swmansion.com>
Date: Fri, 13 Oct 2023 13:30:40 +0200
Subject: [PATCH] [TS migration] Migrate 'withLocalize.js' HOC to TypeScript

---
 .eslintrc.js                                  |  2 +-
 .../{withLocalize.js => withLocalize.tsx}     | 39 ++++++++++---------
 src/libs/getComponentDisplayName.ts           |  2 +-
 3 files changed, 23 insertions(+), 20 deletions(-)
 rename src/components/{withLocalize.js => withLocalize.tsx} (57%)

diff --git a/.eslintrc.js b/.eslintrc.js
index 75a74ed371c4..83e9479ce0c4 100644
--- 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/withLocalize.js b/src/components/withLocalize.tsx
similarity index 57%
rename from src/components/withLocalize.js
rename to src/components/withLocalize.tsx
index 65e98f78f312..e87a0c9984ad 100755
--- a/src/components/withLocalize.js
+++ b/src/components/withLocalize.tsx
@@ -1,6 +1,6 @@
-import React, {forwardRef} from 'react';
+import React, {ComponentType, ForwardedRef, RefAttributes, forwardRef} from 'react';
 import PropTypes from 'prop-types';
-import {LocaleContext} from './LocaleContextProvider';
+import {LocaleContext, LocaleContextProps} from './LocaleContextProvider';
 import getComponentDisplayName from '../libs/getComponentDisplayName';
 
 const withLocalizePropTypes = {
@@ -30,24 +30,27 @@ 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>>) {
+    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}
+                        ref={ref}
+                    />
+                )}
+            </LocaleContext.Consumer>
+        );
+    }
 
     WithLocalize.displayName = `withLocalize(${getComponentDisplayName(WrappedComponent)})`;
-
-    return WithLocalize;
+    return forwardRef(WithLocalize);
 }
 
 export {withLocalizePropTypes};
diff --git a/src/libs/getComponentDisplayName.ts b/src/libs/getComponentDisplayName.ts
index fd1bbcaea521..0bf52d543a84 100644
--- 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';
 }