From 4b34152e13a430a6475c43867b84a85a2ece7c25 Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Wed, 18 Oct 2023 14:20:49 +0200 Subject: [PATCH 1/5] Rename TestToolRow --- src/components/{TestToolRow.js => TestToolRow.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/components/{TestToolRow.js => TestToolRow.tsx} (100%) diff --git a/src/components/TestToolRow.js b/src/components/TestToolRow.tsx similarity index 100% rename from src/components/TestToolRow.js rename to src/components/TestToolRow.tsx From 0b166798d6c8dbdf0d88f985ffeded54c876839d Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Wed, 18 Oct 2023 14:26:21 +0200 Subject: [PATCH 2/5] Rename Text.js --- src/components/{Text.js => Text.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/components/{Text.js => Text.tsx} (100%) diff --git a/src/components/Text.js b/src/components/Text.tsx similarity index 100% rename from src/components/Text.js rename to src/components/Text.tsx From 95ca6c93c597fa9cfac64d05912e915866a26580 Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Wed, 18 Oct 2023 15:48:40 +0200 Subject: [PATCH 3/5] Migrate TestToolRow & Text to TS --- src/components/TestToolRow.tsx | 14 ++++----- src/components/Text.tsx | 53 ++++++++++++++-------------------- 2 files changed, 28 insertions(+), 39 deletions(-) diff --git a/src/components/TestToolRow.tsx b/src/components/TestToolRow.tsx index 8dcd1ba35f43..540c9dbc5068 100644 --- a/src/components/TestToolRow.tsx +++ b/src/components/TestToolRow.tsx @@ -1,29 +1,27 @@ import React from 'react'; -import PropTypes from 'prop-types'; import {View} from 'react-native'; import styles from '../styles/styles'; import Text from './Text'; -const propTypes = { +type TestToolRowProps = { /** Title of control */ - title: PropTypes.string.isRequired, + title: string; /** Control component jsx */ - children: PropTypes.node.isRequired, + children: React.ReactNode; }; -function TestToolRow(props) { +function TestToolRow({title, children}: TestToolRowProps) { return ( - {props.title} + {title} - {props.children} + {children} ); } -TestToolRow.propTypes = propTypes; TestToolRow.displayName = 'TestToolRow'; export default TestToolRow; diff --git a/src/components/Text.tsx b/src/components/Text.tsx index 83b6be8fffb0..f88d2d077ea2 100644 --- a/src/components/Text.tsx +++ b/src/components/Text.tsx @@ -1,59 +1,52 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import _ from 'underscore'; +import React, {ForwardedRef} from 'react'; // eslint-disable-next-line no-restricted-imports -import {Text as RNText} from 'react-native'; +import {Text as RNText, StyleProp} from 'react-native'; +import type {TextStyle} from 'react-native'; import fontFamily from '../styles/fontFamily'; import themeColors from '../styles/themes/default'; import variables from '../styles/variables'; -const propTypes = { +type TextProps = { /** The color of the text */ - color: PropTypes.string, + color?: string; /** The size of the text */ - fontSize: PropTypes.number, + fontSize?: number; /** The alignment of the text */ - textAlign: PropTypes.string, + textAlign?: 'left' | 'right' | 'auto' | 'center' | 'justify' | undefined; /** Any children to display */ - children: PropTypes.node, + children: React.ReactNode; /** The family of the font to use */ - family: PropTypes.string, + family?: keyof typeof fontFamily; /** Any additional styles to apply */ // eslint-disable-next-line react/forbid-prop-types - style: PropTypes.any, -}; -const defaultProps = { - color: themeColors.text, - fontSize: variables.fontSizeNormal, - family: 'EXP_NEUE', - textAlign: 'left', - children: null, - style: {}, + style?: StyleProp; }; -const Text = React.forwardRef(({color, fontSize, textAlign, children, family, style, ...props}, ref) => { +function Text( + {color = themeColors.text, fontSize = variables.fontSizeNormal, textAlign = 'left', children = null, family = 'EXP_NEUE', style = {}, ...props}: TextProps, + ref: ForwardedRef, +) { // If the style prop is an array of styles, we need to mix them all together - const mergedStyles = !_.isArray(style) + const mergedStyles = !Array.isArray(style) ? style - : _.reduce( - style, - (finalStyles, s) => ({ + : style.reduce( + (finalStyles: TextStyle, s) => ({ ...finalStyles, - ...s, + ...(s as TextStyle), }), {}, ); - const componentStyle = { + const componentStyle: TextStyle = { color, fontSize, textAlign, fontFamily: fontFamily[family], - ...mergedStyles, + ...(typeof mergedStyles === 'object' ? mergedStyles : {}), }; if (!componentStyle.lineHeight && componentStyle.fontSize === variables.fontSizeNormal) { @@ -71,10 +64,8 @@ const Text = React.forwardRef(({color, fontSize, textAlign, children, family, st {children} ); -}); +} -Text.propTypes = propTypes; -Text.defaultProps = defaultProps; Text.displayName = 'Text'; -export default Text; +export default React.forwardRef(Text); From 58b93289cfaeba9ef145174e5e45110ba254f4cc Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Fri, 20 Oct 2023 17:32:31 +0200 Subject: [PATCH 4/5] Fixes --- src/components/Text.tsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/Text.tsx b/src/components/Text.tsx index f88d2d077ea2..f3bc55554a30 100644 --- a/src/components/Text.tsx +++ b/src/components/Text.tsx @@ -1,6 +1,6 @@ import React, {ForwardedRef} from 'react'; // eslint-disable-next-line no-restricted-imports -import {Text as RNText, StyleProp} from 'react-native'; +import {Text as RNText} from 'react-native'; import type {TextStyle} from 'react-native'; import fontFamily from '../styles/fontFamily'; import themeColors from '../styles/themes/default'; @@ -14,7 +14,7 @@ type TextProps = { fontSize?: number; /** The alignment of the text */ - textAlign?: 'left' | 'right' | 'auto' | 'center' | 'justify' | undefined; + textAlign?: 'left' | 'right' | 'auto' | 'center' | 'justify'; /** Any children to display */ children: React.ReactNode; @@ -23,8 +23,7 @@ type TextProps = { family?: keyof typeof fontFamily; /** Any additional styles to apply */ - // eslint-disable-next-line react/forbid-prop-types - style?: StyleProp; + style?: TextStyle | TextStyle[]; }; function Text( @@ -35,9 +34,9 @@ function Text( const mergedStyles = !Array.isArray(style) ? style : style.reduce( - (finalStyles: TextStyle, s) => ({ + (finalStyles, s) => ({ ...finalStyles, - ...(s as TextStyle), + ...s, }), {}, ); From 15e76abb87aef7f31402da83e3e7eafb0b8bcc40 Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Fri, 20 Oct 2023 17:33:12 +0200 Subject: [PATCH 5/5] Remove unnecessary check --- src/components/Text.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Text.tsx b/src/components/Text.tsx index f3bc55554a30..60a59aae1520 100644 --- a/src/components/Text.tsx +++ b/src/components/Text.tsx @@ -45,7 +45,7 @@ function Text( fontSize, textAlign, fontFamily: fontFamily[family], - ...(typeof mergedStyles === 'object' ? mergedStyles : {}), + ...mergedStyles, }; if (!componentStyle.lineHeight && componentStyle.fontSize === variables.fontSizeNormal) {