[No QA][TS migration] Migrate 'withToggleVisibilityView.js' HOC to TypeScript

.eslintrc.js

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

src/components/withToggleVisibilityView.tsx

@@ -0,0 +1,30 @@
+import React, {ComponentType, ForwardedRef, ReactElement, RefAttributes} from 'react';
+import {SetOptional} from 'type-fest';
+import {View} from 'react-native';
+import styles from '../styles/styles';
+import getComponentDisplayName from '../libs/getComponentDisplayName';
+
+type ToggleVisibilityViewProp = {
+    /** Whether the content is visible. */
+    isVisible: boolean;
+};
+
+export default function withToggleVisibilityView<TProps extends ToggleVisibilityViewProp, TRef>(
+    WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>,
+): (props: TProps & RefAttributes<TRef>) => ReactElement | null {
+    function WithToggleVisibilityView({isVisible = false, ...rest}: SetOptional<TProps, 'isVisible'>, ref: ForwardedRef<TRef>) {
+        return (
+            <View style={!isVisible && styles.visuallyHidden}>
+                <WrappedComponent
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...(rest as TProps)}
+                    ref={ref}
+                    isVisible={isVisible}
+                />
+            </View>
+        );
+    }
+
+    WithToggleVisibilityView.displayName = `WithToggleVisibilityView(${getComponentDisplayName(WrappedComponent)})`;
+    return React.forwardRef(WithToggleVisibilityView);
+}

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';
 }

src/pages/signin/LoginForm/BaseLoginForm.js

@@ -16,7 +16,7 @@ import withLocalize, {withLocalizePropTypes} from '../../../components/withLocal
 import TextInput from '../../../components/TextInput';
 import * as ValidationUtils from '../../../libs/ValidationUtils';
 import * as LoginUtils from '../../../libs/LoginUtils';
-import withToggleVisibilityView, {toggleVisibilityViewPropTypes} from '../../../components/withToggleVisibilityView';
+import withToggleVisibilityView from '../../../components/withToggleVisibilityView';
 import FormAlertWithSubmitButton from '../../../components/FormAlertWithSubmitButton';
 import {withNetwork} from '../../../components/OnyxProvider';
 import networkPropTypes from '../../../components/networkPropTypes';
@@ -66,12 +66,12 @@ const propTypes = {
     /** Whether or not the sign in page is being rendered in the RHP modal */
     isInModal: PropTypes.bool,
 
+    isVisible: PropTypes.bool.isRequired,
+
     ...windowDimensionsPropTypes,
 
     ...withLocalizePropTypes,
 
-    ...toggleVisibilityViewPropTypes,
-
     ...withNavigationFocusPropTypes,
 };