From d5f1f4189f36ea0cbc811bc92466d9af7f415372 Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Fri, 27 Oct 2023 11:54:59 +0200 Subject: [PATCH 1/7] Migrate 'FormHelpMessage.js' component to TypeScript --- src/components/FormHelpMessage.js | 59 ------------------------------ src/components/FormHelpMessage.tsx | 46 +++++++++++++++++++++++ 2 files changed, 46 insertions(+), 59 deletions(-) delete mode 100644 src/components/FormHelpMessage.js create mode 100644 src/components/FormHelpMessage.tsx diff --git a/src/components/FormHelpMessage.js b/src/components/FormHelpMessage.js deleted file mode 100644 index f7366f8dfef6..000000000000 --- a/src/components/FormHelpMessage.js +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react'; -import _ from 'underscore'; -import PropTypes from 'prop-types'; -import {View} from 'react-native'; -import Icon from './Icon'; -import * as Expensicons from './Icon/Expensicons'; -import Text from './Text'; -import themeColors from '../styles/themes/default'; -import styles from '../styles/styles'; -import stylePropTypes from '../styles/stylePropTypes'; -import * as Localize from '../libs/Localize'; - -const propTypes = { - /** Error or hint text. Ignored when children is not empty */ - message: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object]))]), - - /** Children to render next to dot indicator */ - children: PropTypes.node, - - /** Indicates whether to show error or hint */ - isError: PropTypes.bool, - - /** Container style props */ - style: stylePropTypes, -}; - -const defaultProps = { - message: '', - children: null, - isError: true, - style: [], -}; - -function FormHelpMessage(props) { - if (_.isEmpty(props.message) && _.isEmpty(props.children)) { - return null; - } - - const translatedMessage = Localize.translateIfPhraseKey(props.message); - return ( - - {props.isError && ( - - )} - - {props.children || {translatedMessage}} - - - ); -} - -FormHelpMessage.propTypes = propTypes; -FormHelpMessage.defaultProps = defaultProps; -FormHelpMessage.displayName = 'FormHelpMessage'; - -export default FormHelpMessage; diff --git a/src/components/FormHelpMessage.tsx b/src/components/FormHelpMessage.tsx new file mode 100644 index 000000000000..aa9b17288fbb --- /dev/null +++ b/src/components/FormHelpMessage.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import {View, ViewStyle, StyleProp} from 'react-native'; +import isEmpty from 'lodash/isEmpty'; +import Icon from './Icon'; +import * as Expensicons from './Icon/Expensicons'; +import Text from './Text'; +import themeColors from '../styles/themes/default'; +import styles from '../styles/styles'; +import * as Localize from '../libs/Localize'; + +type FormHelpMessageProps = { + /** Error or hint text. Ignored when children is not empty */ + message?: string | Array>; + + /** Children to render next to dot indicator */ + children?: React.ReactNode; + + /** Indicates whether to show error or hint */ + isError?: boolean; + + /** Container style props */ + style?: Array>; +}; + +function FormHelpMessage({message = '', children, isError = true, style = []}: FormHelpMessageProps) { + if (isEmpty(message) && isEmpty(children)) { + return null; + } + + const translatedMessage = Localize.translateIfPhraseKey(message); + return ( + + {isError && ( + + )} + {children ?? {translatedMessage}} + + ); +} + +FormHelpMessage.displayName = 'FormHelpMessage'; + +export default FormHelpMessage; From 1eb479ac34d7c029645e5141e7a18239a393e796 Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Tue, 31 Oct 2023 13:08:42 +0100 Subject: [PATCH 2/7] update imports --- src/components/FormHelpMessage.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/FormHelpMessage.tsx b/src/components/FormHelpMessage.tsx index aa9b17288fbb..826420c5fe12 100644 --- a/src/components/FormHelpMessage.tsx +++ b/src/components/FormHelpMessage.tsx @@ -1,12 +1,12 @@ -import React from 'react'; -import {View, ViewStyle, StyleProp} from 'react-native'; import isEmpty from 'lodash/isEmpty'; +import React from 'react'; +import {StyleProp, View, ViewStyle} from 'react-native'; +import * as Localize from '@libs/Localize'; +import styles from '@styles/styles'; +import themeColors from '@styles/themes/default'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; import Text from './Text'; -import themeColors from '../styles/themes/default'; -import styles from '../styles/styles'; -import * as Localize from '../libs/Localize'; type FormHelpMessageProps = { /** Error or hint text. Ignored when children is not empty */ From 007a6bc8872dfddb2ad2e7e393e578eac717e43c Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Tue, 31 Oct 2023 13:44:48 +0100 Subject: [PATCH 3/7] remove array for style prop --- src/components/FormHelpMessage.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/FormHelpMessage.tsx b/src/components/FormHelpMessage.tsx index 826420c5fe12..50548356ff77 100644 --- a/src/components/FormHelpMessage.tsx +++ b/src/components/FormHelpMessage.tsx @@ -19,17 +19,17 @@ type FormHelpMessageProps = { isError?: boolean; /** Container style props */ - style?: Array>; + style?: StyleProp; }; -function FormHelpMessage({message = '', children, isError = true, style = []}: FormHelpMessageProps) { +function FormHelpMessage({message = '', children, isError = true, style}: FormHelpMessageProps) { if (isEmpty(message) && isEmpty(children)) { return null; } const translatedMessage = Localize.translateIfPhraseKey(message); return ( - + {isError && ( Date: Wed, 8 Nov 2023 12:22:15 +0100 Subject: [PATCH 4/7] replace lodash isEmpty with helper --- src/components/FormHelpMessage.tsx | 8 +++++--- src/libs/ErrorUtils.ts | 1 + src/libs/Localize/index.js | 2 +- src/types/utils/EmptyObject.ts | 15 +++++++++++++++ src/types/utils/Falsy.ts | 3 +++ 5 files changed, 25 insertions(+), 4 deletions(-) create mode 100644 src/types/utils/EmptyObject.ts create mode 100644 src/types/utils/Falsy.ts diff --git a/src/components/FormHelpMessage.tsx b/src/components/FormHelpMessage.tsx index 50548356ff77..2e47a224fd03 100644 --- a/src/components/FormHelpMessage.tsx +++ b/src/components/FormHelpMessage.tsx @@ -1,16 +1,17 @@ -import isEmpty from 'lodash/isEmpty'; import React from 'react'; import {StyleProp, View, ViewStyle} from 'react-native'; import * as Localize from '@libs/Localize'; import styles from '@styles/styles'; import themeColors from '@styles/themes/default'; +import {ErrorsList} from '@src/libs/ErrorUtils'; +import {isEmptyObjectOrString} from '@src/types/utils/EmptyObject'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; import Text from './Text'; type FormHelpMessageProps = { /** Error or hint text. Ignored when children is not empty */ - message?: string | Array>; + message?: string | ErrorsList; /** Children to render next to dot indicator */ children?: React.ReactNode; @@ -23,11 +24,12 @@ type FormHelpMessageProps = { }; function FormHelpMessage({message = '', children, isError = true, style}: FormHelpMessageProps) { - if (isEmpty(message) && isEmpty(children)) { + if (isEmptyObjectOrString(message) && isEmptyObjectOrString(children)) { return null; } const translatedMessage = Localize.translateIfPhraseKey(message); + return ( {isError && ( diff --git a/src/libs/ErrorUtils.ts b/src/libs/ErrorUtils.ts index 99cd8f34b1e7..9a22d4483563 100644 --- a/src/libs/ErrorUtils.ts +++ b/src/libs/ErrorUtils.ts @@ -111,4 +111,5 @@ function addErrorMessage(errors: ErrorsList, inputID?: string, message?: string) } } +export type {ErrorsList}; export {getAuthenticateErrorMessage, getMicroSecondOnyxError, getLatestErrorMessage, getLatestErrorField, getEarliestErrorField, addErrorMessage}; diff --git a/src/libs/Localize/index.js b/src/libs/Localize/index.js index f2f8cfa1f8b0..51edfde43ae4 100644 --- a/src/libs/Localize/index.js +++ b/src/libs/Localize/index.js @@ -112,7 +112,7 @@ function translateLocal(phrase, variables) { /** * Return translated string for given error. * - * @param {String|Array} message + * @param {String|Array|Object} message * @returns {String} */ function translateIfPhraseKey(message) { diff --git a/src/types/utils/EmptyObject.ts b/src/types/utils/EmptyObject.ts new file mode 100644 index 000000000000..09f32239d6c7 --- /dev/null +++ b/src/types/utils/EmptyObject.ts @@ -0,0 +1,15 @@ +import Falsy from './Falsy'; + +type EmptyObject = Record; + +// eslint-disable-next-line rulesdir/no-negated-variables +function isNotEmptyObject | Falsy>(arg: T | EmptyObject): arg is T { + return Object.keys(arg ?? {}).length > 0; +} + +function isEmptyObjectOrString(obj: T): boolean { + return Object.keys(obj ?? {}).length === 0; +} + +export {isNotEmptyObject, isEmptyObjectOrString}; +export type {EmptyObject}; diff --git a/src/types/utils/Falsy.ts b/src/types/utils/Falsy.ts new file mode 100644 index 000000000000..c1bd7527a223 --- /dev/null +++ b/src/types/utils/Falsy.ts @@ -0,0 +1,3 @@ +type Falsy = undefined | null | false; + +export default Falsy; From abe189c11754f8731fc67632e1a9a33a682422d1 Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Wed, 8 Nov 2023 18:10:07 +0100 Subject: [PATCH 5/7] update type using --- src/components/FormHelpMessage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/FormHelpMessage.tsx b/src/components/FormHelpMessage.tsx index 2e47a224fd03..53f95c34c5de 100644 --- a/src/components/FormHelpMessage.tsx +++ b/src/components/FormHelpMessage.tsx @@ -11,7 +11,7 @@ import Text from './Text'; type FormHelpMessageProps = { /** Error or hint text. Ignored when children is not empty */ - message?: string | ErrorsList; + message?: string | [string, ErrorsList]; /** Children to render next to dot indicator */ children?: React.ReactNode; From de60770ad59fcc6337606b062bec78d7d0917a97 Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Mon, 27 Nov 2023 13:57:29 +0100 Subject: [PATCH 6/7] revert isEmpty replacement --- src/components/FormHelpMessage.tsx | 4 ++-- src/types/utils/EmptyObject.ts | 15 --------------- src/types/utils/Falsy.ts | 3 --- 3 files changed, 2 insertions(+), 20 deletions(-) delete mode 100644 src/types/utils/EmptyObject.ts delete mode 100644 src/types/utils/Falsy.ts diff --git a/src/components/FormHelpMessage.tsx b/src/components/FormHelpMessage.tsx index b5f7d0795211..e4d3b8a73e8c 100644 --- a/src/components/FormHelpMessage.tsx +++ b/src/components/FormHelpMessage.tsx @@ -1,10 +1,10 @@ +import isEmpty from 'lodash/isEmpty'; import React from 'react'; import {StyleProp, View, ViewStyle} from 'react-native'; import * as Localize from '@libs/Localize'; import useTheme from '@styles/themes/useTheme'; import useThemeStyles from '@styles/useThemeStyles'; import {ErrorsList} from '@src/libs/ErrorUtils'; -import {isEmptyObjectOrString} from '@src/types/utils/EmptyObject'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; import Text from './Text'; @@ -26,7 +26,7 @@ type FormHelpMessageProps = { function FormHelpMessage({message = '', children, isError = true, style}: FormHelpMessageProps) { const theme = useTheme(); const styles = useThemeStyles(); - if (isEmptyObjectOrString(message) && isEmptyObjectOrString(children)) { + if (isEmpty(message) && isEmpty(children)) { return null; } diff --git a/src/types/utils/EmptyObject.ts b/src/types/utils/EmptyObject.ts deleted file mode 100644 index 09f32239d6c7..000000000000 --- a/src/types/utils/EmptyObject.ts +++ /dev/null @@ -1,15 +0,0 @@ -import Falsy from './Falsy'; - -type EmptyObject = Record; - -// eslint-disable-next-line rulesdir/no-negated-variables -function isNotEmptyObject | Falsy>(arg: T | EmptyObject): arg is T { - return Object.keys(arg ?? {}).length > 0; -} - -function isEmptyObjectOrString(obj: T): boolean { - return Object.keys(obj ?? {}).length === 0; -} - -export {isNotEmptyObject, isEmptyObjectOrString}; -export type {EmptyObject}; diff --git a/src/types/utils/Falsy.ts b/src/types/utils/Falsy.ts deleted file mode 100644 index c1bd7527a223..000000000000 --- a/src/types/utils/Falsy.ts +++ /dev/null @@ -1,3 +0,0 @@ -type Falsy = undefined | null | false; - -export default Falsy; From 2bfa28d710273d5869938807e83d358fb62954ab Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Tue, 5 Dec 2023 15:00:39 +0100 Subject: [PATCH 7/7] update error type to use Localize --- src/components/FormHelpMessage.tsx | 3 +-- src/components/SingleChoiceQuestion.tsx | 3 ++- src/libs/ErrorUtils.ts | 1 - 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/FormHelpMessage.tsx b/src/components/FormHelpMessage.tsx index e4d3b8a73e8c..27a1f5827d75 100644 --- a/src/components/FormHelpMessage.tsx +++ b/src/components/FormHelpMessage.tsx @@ -4,14 +4,13 @@ import {StyleProp, View, ViewStyle} from 'react-native'; import * as Localize from '@libs/Localize'; import useTheme from '@styles/themes/useTheme'; import useThemeStyles from '@styles/useThemeStyles'; -import {ErrorsList} from '@src/libs/ErrorUtils'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; import Text from './Text'; type FormHelpMessageProps = { /** Error or hint text. Ignored when children is not empty */ - message?: string | [string, ErrorsList]; + message?: Localize.MaybePhraseKey; /** Children to render next to dot indicator */ children?: React.ReactNode; diff --git a/src/components/SingleChoiceQuestion.tsx b/src/components/SingleChoiceQuestion.tsx index 07d4dfe817dd..6a3a3d87ee8a 100644 --- a/src/components/SingleChoiceQuestion.tsx +++ b/src/components/SingleChoiceQuestion.tsx @@ -1,5 +1,6 @@ import React, {ForwardedRef, forwardRef} from 'react'; import {Text as RNText} from 'react-native'; +import type {MaybePhraseKey} from '@libs/Localize'; import useThemeStyles from '@styles/useThemeStyles'; import FormHelpMessage from './FormHelpMessage'; import RadioButtons, {Choice} from './RadioButtons'; @@ -7,7 +8,7 @@ import Text from './Text'; type SingleChoiceQuestionProps = { prompt: string; - errorText?: string | string[]; + errorText?: MaybePhraseKey; possibleAnswers: Choice[]; currentQuestionIndex: number; onInputChange: (value: string) => void; diff --git a/src/libs/ErrorUtils.ts b/src/libs/ErrorUtils.ts index 6ecc16d277bd..46bdd510f5c4 100644 --- a/src/libs/ErrorUtils.ts +++ b/src/libs/ErrorUtils.ts @@ -119,5 +119,4 @@ function addErrorMessage(errors: ErrorsList, inpu } } -export type {ErrorsList}; export {getAuthenticateErrorMessage, getMicroSecondOnyxError, getMicroSecondOnyxErrorObject, getLatestErrorMessage, getLatestErrorField, getEarliestErrorField, addErrorMessage};