From 67a29cad6b0dad186e8519882655d51845c053ae Mon Sep 17 00:00:00 2001 From: Viktoryia Kliushun Date: Fri, 17 Nov 2023 18:37:07 +0100 Subject: [PATCH 1/2] [TS migration] Migrate 'Banner.js' component --- src/components/{Banner.js => Banner.tsx} | 71 ++++++++++-------------- 1 file changed, 28 insertions(+), 43 deletions(-) rename src/components/{Banner.js => Banner.tsx} (61%) diff --git a/src/components/Banner.js b/src/components/Banner.tsx similarity index 61% rename from src/components/Banner.js rename to src/components/Banner.tsx index 2fcb866334e0..4499d0853999 100644 --- a/src/components/Banner.js +++ b/src/components/Banner.tsx @@ -1,7 +1,5 @@ -import PropTypes from 'prop-types'; import React, {memo} from 'react'; -import {View} from 'react-native'; -import compose from '@libs/compose'; +import {StyleProp, TextStyle, View, ViewStyle} from 'react-native'; import getButtonState from '@libs/getButtonState'; import * as StyleUtils from '@styles/StyleUtils'; import useThemeStyles from '@styles/useThemeStyles'; @@ -9,58 +7,46 @@ import CONST from '@src/CONST'; import Hoverable from './Hoverable'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; +import type {LocaleContextProps} from './LocaleContextProvider'; import PressableWithFeedback from './Pressable/PressableWithFeedback'; import RenderHTML from './RenderHTML'; import Text from './Text'; import Tooltip from './Tooltip'; -import withLocalize, {withLocalizePropTypes} from './withLocalize'; +import withLocalize from './withLocalize'; -const propTypes = { +type BannerProps = LocaleContextProps & { /** Text to display in the banner. */ - text: PropTypes.string.isRequired, + text: string; /** Should this component render the left-aligned exclamation icon? */ - shouldShowIcon: PropTypes.bool, + shouldShowIcon?: boolean; /** Should this component render a close button? */ - shouldShowCloseButton: PropTypes.bool, + shouldShowCloseButton?: boolean; /** Should this component render the text as HTML? */ - shouldRenderHTML: PropTypes.bool, + shouldRenderHTML?: boolean; /** Callback called when the close button is pressed */ - onClose: PropTypes.func, + onClose?: () => void; /** Callback called when the message is pressed */ - onPress: PropTypes.func, + onPress?: () => void; /** Styles to be assigned to the Banner container */ - // eslint-disable-next-line react/forbid-prop-types - containerStyles: PropTypes.arrayOf(PropTypes.object), + containerStyles?: StyleProp; /** Styles to be assigned to the Banner text */ - // eslint-disable-next-line react/forbid-prop-types - textStyles: PropTypes.arrayOf(PropTypes.object), - - ...withLocalizePropTypes, -}; - -const defaultProps = { - shouldRenderHTML: false, - shouldShowIcon: false, - shouldShowCloseButton: false, - onClose: undefined, - onPress: undefined, - containerStyles: [], - textStyles: [], + textStyles?: StyleProp; }; -function Banner(props) { +function Banner({text, translate, onClose, onPress, containerStyles, textStyles, shouldRenderHTML = false, shouldShowIcon = false, shouldShowCloseButton = false}: BannerProps) { const styles = useThemeStyles(); + return ( {(isHovered) => { - const isClickable = props.onClose || props.onPress; + const isClickable = onClose ?? onPress; const shouldHighlight = isClickable && isHovered; return ( - {props.shouldShowIcon && ( + {shouldShowIcon && ( )} - {props.shouldRenderHTML ? ( - + {shouldRenderHTML ? ( + ) : ( - {props.text} + {text} )} - {props.shouldShowCloseButton && ( - + {shouldShowCloseButton && !!onClose && ( + @@ -113,8 +99,7 @@ function Banner(props) { ); } -Banner.propTypes = propTypes; -Banner.defaultProps = defaultProps; Banner.displayName = 'Banner'; -export default compose(withLocalize, memo)(Banner); +// TODO: use `compose` function for HOCs composing once TypeScript issues are resolved. +export default memo(withLocalize(Banner)); From c4ca2d59745478bef1e82de8b0cbfe06bfa2138f Mon Sep 17 00:00:00 2001 From: Viktoryia Kliushun Date: Mon, 20 Nov 2023 09:11:35 +0100 Subject: [PATCH 2/2] Replace withLocalize HOC with hook usage --- src/components/Banner.tsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx index 4499d0853999..1c92208a7aa2 100644 --- a/src/components/Banner.tsx +++ b/src/components/Banner.tsx @@ -1,5 +1,6 @@ import React, {memo} from 'react'; import {StyleProp, TextStyle, View, ViewStyle} from 'react-native'; +import useLocalize from '@hooks/useLocalize'; import getButtonState from '@libs/getButtonState'; import * as StyleUtils from '@styles/StyleUtils'; import useThemeStyles from '@styles/useThemeStyles'; @@ -7,14 +8,12 @@ import CONST from '@src/CONST'; import Hoverable from './Hoverable'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; -import type {LocaleContextProps} from './LocaleContextProvider'; import PressableWithFeedback from './Pressable/PressableWithFeedback'; import RenderHTML from './RenderHTML'; import Text from './Text'; import Tooltip from './Tooltip'; -import withLocalize from './withLocalize'; -type BannerProps = LocaleContextProps & { +type BannerProps = { /** Text to display in the banner. */ text: string; @@ -40,8 +39,9 @@ type BannerProps = LocaleContextProps & { textStyles?: StyleProp; }; -function Banner({text, translate, onClose, onPress, containerStyles, textStyles, shouldRenderHTML = false, shouldShowIcon = false, shouldShowCloseButton = false}: BannerProps) { +function Banner({text, onClose, onPress, containerStyles, textStyles, shouldRenderHTML = false, shouldShowIcon = false, shouldShowCloseButton = false}: BannerProps) { const styles = useThemeStyles(); + const {translate} = useLocalize(); return ( @@ -101,5 +101,4 @@ function Banner({text, translate, onClose, onPress, containerStyles, textStyles, Banner.displayName = 'Banner'; -// TODO: use `compose` function for HOCs composing once TypeScript issues are resolved. -export default memo(withLocalize(Banner)); +export default memo(Banner);