From 4a18a1ffe6d075fc3688c9f36948b8f6c2f62ba6 Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Fri, 13 Oct 2023 15:04:17 +0200 Subject: [PATCH 1/6] [TS migration] Migrate 'withToggleVisibilityView.js' HOC to TypeScript --- .eslintrc.js | 2 +- src/components/withToggleVisibilityView.js | 47 --------------------- src/components/withToggleVisibilityView.tsx | 27 ++++++++++++ src/libs/getComponentDisplayName.ts | 2 +- src/pages/signin/LoginForm/BaseLoginForm.js | 6 +-- 5 files changed, 32 insertions(+), 52 deletions(-) delete mode 100644 src/components/withToggleVisibilityView.js create mode 100644 src/components/withToggleVisibilityView.tsx 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/withToggleVisibilityView.js b/src/components/withToggleVisibilityView.js deleted file mode 100644 index eef5135d02b6..000000000000 --- a/src/components/withToggleVisibilityView.js +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react'; -import {View} from 'react-native'; -import PropTypes from 'prop-types'; -import styles from '../styles/styles'; -import getComponentDisplayName from '../libs/getComponentDisplayName'; -import refPropTypes from './refPropTypes'; - -const toggleVisibilityViewPropTypes = { - /** Whether the content is visible. */ - isVisible: PropTypes.bool, -}; - -export default function (WrappedComponent) { - function WithToggleVisibilityView(props) { - return ( - - - - ); - } - - WithToggleVisibilityView.displayName = `WithToggleVisibilityView(${getComponentDisplayName(WrappedComponent)})`; - WithToggleVisibilityView.propTypes = { - forwardedRef: refPropTypes, - - /** Whether the content is visible. */ - isVisible: PropTypes.bool, - }; - WithToggleVisibilityView.defaultProps = { - forwardedRef: undefined, - isVisible: false, - }; - return React.forwardRef((props, ref) => ( - - )); -} - -export {toggleVisibilityViewPropTypes}; diff --git a/src/components/withToggleVisibilityView.tsx b/src/components/withToggleVisibilityView.tsx new file mode 100644 index 000000000000..bdff40be3deb --- /dev/null +++ b/src/components/withToggleVisibilityView.tsx @@ -0,0 +1,27 @@ +import React, {ComponentType, ForwardedRef, RefAttributes} from 'react'; +import {View} from 'react-native'; +import styles from '../styles/styles'; +import getComponentDisplayName from '../libs/getComponentDisplayName'; + +type ToggleVisibilityViewPropTypes = { + /** Whether the content is visible. */ + isVisible: boolean; +}; + +export default function withToggleVisibilityView(WrappedComponent: ComponentType>): ComponentType { + function WithToggleVisibilityView(props: Omit, ref: ForwardedRef) { + return ( + + + + ); + } + + WithToggleVisibilityView.displayName = `WithToggleVisibilityView(${getComponentDisplayName(WrappedComponent)})`; + return React.forwardRef(WithToggleVisibilityView); +} 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(component: ComponentType): string { return component.displayName ?? component.name ?? 'Component'; } diff --git a/src/pages/signin/LoginForm/BaseLoginForm.js b/src/pages/signin/LoginForm/BaseLoginForm.js index 2c65b5ff5d37..14d9ee3f5dfc 100644 --- a/src/pages/signin/LoginForm/BaseLoginForm.js +++ b/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, }; From 659831b526af983f91d76e3393465c2e0f6cf8e6 Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Fri, 13 Oct 2023 15:07:41 +0200 Subject: [PATCH 2/6] Add default value for isVisible --- src/components/withToggleVisibilityView.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/withToggleVisibilityView.tsx b/src/components/withToggleVisibilityView.tsx index bdff40be3deb..b3c8d9bfb221 100644 --- a/src/components/withToggleVisibilityView.tsx +++ b/src/components/withToggleVisibilityView.tsx @@ -11,12 +11,12 @@ type ToggleVisibilityViewPropTypes = { export default function withToggleVisibilityView(WrappedComponent: ComponentType>): ComponentType { function WithToggleVisibilityView(props: Omit, ref: ForwardedRef) { return ( - + ); From a53c07a5122eafd4c85dc10315ad61d04fcd3da9 Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Mon, 16 Oct 2023 19:28:46 +0200 Subject: [PATCH 3/6] Fixes --- src/components/withToggleVisibilityView.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/components/withToggleVisibilityView.tsx b/src/components/withToggleVisibilityView.tsx index b3c8d9bfb221..3f5524913874 100644 --- a/src/components/withToggleVisibilityView.tsx +++ b/src/components/withToggleVisibilityView.tsx @@ -1,22 +1,25 @@ -import React, {ComponentType, ForwardedRef, RefAttributes} from 'react'; +import React, {ComponentType, ForwardedRef, ReactElement, RefAttributes} from 'react'; import {View} from 'react-native'; import styles from '../styles/styles'; import getComponentDisplayName from '../libs/getComponentDisplayName'; +import {SetOptional} from 'type-fest'; type ToggleVisibilityViewPropTypes = { /** Whether the content is visible. */ isVisible: boolean; }; -export default function withToggleVisibilityView(WrappedComponent: ComponentType>): ComponentType { - function WithToggleVisibilityView(props: Omit, ref: ForwardedRef) { +export default function withToggleVisibilityView( + WrappedComponent: ComponentType>, +): (props: TProps & RefAttributes) => ReactElement | null { + function WithToggleVisibilityView({isVisible = false, ...rest}: SetOptional, ref: ForwardedRef) { return ( - + ); From f3dfe0a606237a0af01fd2ee1282d722923c5358 Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Mon, 16 Oct 2023 19:29:13 +0200 Subject: [PATCH 4/6] Rename propTypes --- src/components/withToggleVisibilityView.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/withToggleVisibilityView.tsx b/src/components/withToggleVisibilityView.tsx index 3f5524913874..5cabdc5ffc0e 100644 --- a/src/components/withToggleVisibilityView.tsx +++ b/src/components/withToggleVisibilityView.tsx @@ -4,12 +4,12 @@ import styles from '../styles/styles'; import getComponentDisplayName from '../libs/getComponentDisplayName'; import {SetOptional} from 'type-fest'; -type ToggleVisibilityViewPropTypes = { +type ToggleVisibilityViewProp = { /** Whether the content is visible. */ isVisible: boolean; }; -export default function withToggleVisibilityView( +export default function withToggleVisibilityView( WrappedComponent: ComponentType>, ): (props: TProps & RefAttributes) => ReactElement | null { function WithToggleVisibilityView({isVisible = false, ...rest}: SetOptional, ref: ForwardedRef) { From b9316bf5e22eecaf3136ef0f955436d27c8cf478 Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Fri, 20 Oct 2023 09:52:35 +0200 Subject: [PATCH 5/6] Fix prettier --- src/components/withToggleVisibilityView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/withToggleVisibilityView.tsx b/src/components/withToggleVisibilityView.tsx index 5cabdc5ffc0e..066cbae223b1 100644 --- a/src/components/withToggleVisibilityView.tsx +++ b/src/components/withToggleVisibilityView.tsx @@ -1,8 +1,8 @@ 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'; -import {SetOptional} from 'type-fest'; type ToggleVisibilityViewProp = { /** Whether the content is visible. */ From c51de4fe58d18936fcc52d51f9534c110fd1d855 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Thu, 2 Nov 2023 17:26:15 +0100 Subject: [PATCH 6/6] Fix type name --- src/components/withToggleVisibilityView.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/withToggleVisibilityView.tsx b/src/components/withToggleVisibilityView.tsx index 4eb5e970af91..5e0204f6e06f 100644 --- a/src/components/withToggleVisibilityView.tsx +++ b/src/components/withToggleVisibilityView.tsx @@ -4,12 +4,12 @@ import {SetOptional} from 'type-fest'; import getComponentDisplayName from '@libs/getComponentDisplayName'; import styles from '@styles/styles'; -type ToggleVisibilityViewProp = { +type ToggleVisibilityViewProps = { /** Whether the content is visible. */ isVisible: boolean; }; -export default function withToggleVisibilityView( +export default function withToggleVisibilityView( WrappedComponent: ComponentType>, ): (props: TProps & RefAttributes) => ReactElement | null { function WithToggleVisibilityView({isVisible = false, ...rest}: SetOptional, ref: ForwardedRef) {