From 844d909934dd01ca6b6a1cbf42916acb48a142d3 Mon Sep 17 00:00:00 2001 From: Rory Abraham Date: Wed, 30 Jun 2021 18:36:29 -0700 Subject: [PATCH 1/6] Replace almost all uses of RNText with custom text component --- .../BaseAnchorForCommentsOnly/index.js | 3 ++- .../BaseAnchorForCommentsOnly/index.native.js | 3 ++- src/components/AttachmentView.js | 3 ++- src/components/Button.js | 3 ++- src/components/ConfirmModal.js | 3 ++- src/components/CreateMenu/BaseCreateMenu.js | 3 ++- src/components/DisplayNames/index.js | 2 +- src/components/DisplayNames/index.native.js | 2 +- src/components/EnvironmentBadge.js | 3 ++- src/components/GrowlNotification/index.js | 3 ++- src/components/IOUBadge.js | 3 ++- src/components/InlineCodeBlock/WrappedText.js | 3 ++- src/components/MenuItem.js | 3 ++- src/components/OptionsList.js | 3 ++- src/components/ReportActionItem/IOUQuote.js | 3 ++- src/components/ReportTransaction.js | 3 ++- src/components/Text.js | 8 ++++---- src/components/TextInputAutoWidth.js | 3 ++- src/components/Tooltip/TooltipRenderedOnPageBody.js | 3 ++- src/components/WelcomeText.js | 2 +- src/pages/EnablePayments/ActivateStep.js | 3 ++- src/pages/EnablePayments/AdditionalDetailsStep.js | 3 ++- src/pages/EnablePayments/OnfidoStep.js | 3 ++- src/pages/ReportDetailsPage.js | 3 ++- src/pages/RequestCallPage.js | 3 ++- src/pages/home/HeaderView.js | 3 ++- src/pages/home/report/EmojiPickerMenu/index.js | 3 ++- src/pages/home/report/EmojiPickerMenu/index.native.js | 3 ++- src/pages/home/report/EmojiPickerMenuItem.js | 3 ++- src/pages/home/report/ReportActionItemDate.js | 2 +- src/pages/home/report/ReportTypingIndicator.js | 3 ++- .../iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js | 3 ++- src/pages/signin/ChangeExpensifyLoginLink.js | 3 ++- src/pages/signin/PasswordForm.js | 3 ++- src/pages/signin/ResendValidationForm.js | 3 ++- src/pages/signin/SignInPage.js | 3 ++- src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js | 3 ++- src/pages/signin/TermsAndLicenses/TermsOnly.js | 3 ++- src/pages/signin/TermsAndLicenses/TermsWithLicenses.js | 3 ++- src/pages/workspace/NewWorkspacePage.js | 3 ++- 40 files changed, 78 insertions(+), 43 deletions(-) diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.js index 9082f8ad396b..8e3d5a904a14 100644 --- a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.js +++ b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.js @@ -1,5 +1,6 @@ import React from 'react'; -import {StyleSheet, Text} from 'react-native'; +import {StyleSheet} from 'react-native'; +import Text from '../../Text'; import {propTypes, defaultProps} from '../anchorForCommentsOnlyPropTypes'; /* diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.native.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.native.js index 9a63b54b1804..1fcc7b181700 100644 --- a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.native.js +++ b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.native.js @@ -1,7 +1,8 @@ import React from 'react'; -import {Linking, StyleSheet, Text} from 'react-native'; +import {Linking, StyleSheet} from 'react-native'; import {propTypes, defaultProps} from '../anchorForCommentsOnlyPropTypes'; import fileDownload from '../../../libs/fileDownload'; +import Text from '../../Text'; /* * This is a default anchor component for regular links. diff --git a/src/components/AttachmentView.js b/src/components/AttachmentView.js index 41d41425abcc..2186e14479af 100755 --- a/src/components/AttachmentView.js +++ b/src/components/AttachmentView.js @@ -1,5 +1,5 @@ import React, {memo} from 'react'; -import {View, Text} from 'react-native'; +import {View} from 'react-native'; import PropTypes from 'prop-types'; import Str from 'expensify-common/lib/str'; import styles from '../styles/styles'; @@ -9,6 +9,7 @@ import Icon from './Icon'; import {Paperclip} from './Icon/Expensicons'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; import compose from '../libs/compose'; +import Text from './Text'; const propTypes = { /** URL to full-sized attachment */ diff --git a/src/components/Button.js b/src/components/Button.js index 6ec8633a20f9..3952922cdfc1 100644 --- a/src/components/Button.js +++ b/src/components/Button.js @@ -2,11 +2,12 @@ import _ from 'underscore'; import React from 'react'; import PropTypes from 'prop-types'; import { - Text, Pressable, ActivityIndicator, + Pressable, ActivityIndicator, } from 'react-native'; import styles from '../styles/styles'; import themeColors from '../styles/themes/default'; import OpacityView from './OpacityView'; +import Text from './Text'; const propTypes = { /** The text for the button label */ diff --git a/src/components/ConfirmModal.js b/src/components/ConfirmModal.js index bb2a2a9ea1f2..138c31778934 100755 --- a/src/components/ConfirmModal.js +++ b/src/components/ConfirmModal.js @@ -1,5 +1,5 @@ import React from 'react'; -import {Text, View} from 'react-native'; +import {View} from 'react-native'; import PropTypes from 'prop-types'; import Header from './Header'; import Modal from './Modal'; @@ -9,6 +9,7 @@ import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimen import withLocalize, {withLocalizePropTypes} from './withLocalize'; import compose from '../libs/compose'; import Button from './Button'; +import Text from './Text'; const propTypes = { /** Title of the modal */ diff --git a/src/components/CreateMenu/BaseCreateMenu.js b/src/components/CreateMenu/BaseCreateMenu.js index 8d35c218081a..fed7e3aa3ede 100644 --- a/src/components/CreateMenu/BaseCreateMenu.js +++ b/src/components/CreateMenu/BaseCreateMenu.js @@ -1,5 +1,5 @@ import React, {PureComponent} from 'react'; -import {View, Text} from 'react-native'; +import {View} from 'react-native'; import PropTypes from 'prop-types'; import Popover from '../Popover'; import styles from '../../styles/styles'; @@ -9,6 +9,7 @@ import { propTypes as createMenuPropTypes, defaultProps as defaultCreateMenuPropTypes, } from './CreateMenuPropTypes'; +import Text from '../Text'; const propTypes = { /** Callback fired when the menu is completely closed */ diff --git a/src/components/DisplayNames/index.js b/src/components/DisplayNames/index.js index 007408324f79..6e5d02aca790 100644 --- a/src/components/DisplayNames/index.js +++ b/src/components/DisplayNames/index.js @@ -83,7 +83,7 @@ class DisplayNames extends PureComponent { // Tokenization of string only support 1 numberOfLines on Web this.containerRef = el} diff --git a/src/components/DisplayNames/index.native.js b/src/components/DisplayNames/index.native.js index 8a882f8eb576..a3862e5eb147 100644 --- a/src/components/DisplayNames/index.native.js +++ b/src/components/DisplayNames/index.native.js @@ -1,6 +1,6 @@ import React from 'react'; -import {Text} from 'react-native'; import {propTypes, defaultProps} from './displayNamesPropTypes'; +import Text from '../Text'; // As we don't have to show tooltips of the Native platform so we simply render the full display names list. const DisplayNames = ({ diff --git a/src/components/EnvironmentBadge.js b/src/components/EnvironmentBadge.js index d46e08ae2090..f7bde09733a5 100644 --- a/src/components/EnvironmentBadge.js +++ b/src/components/EnvironmentBadge.js @@ -1,7 +1,8 @@ import React from 'react'; -import {Text, View} from 'react-native'; +import {View} from 'react-native'; import styles from '../styles/styles'; import CONST from '../CONST'; +import Text from './Text'; import withEnvironment, {environmentPropTypes} from './withEnvironment'; const EnvironmentBadge = (props) => { diff --git a/src/components/GrowlNotification/index.js b/src/components/GrowlNotification/index.js index c15ed036e5cf..49675a10e3c6 100644 --- a/src/components/GrowlNotification/index.js +++ b/src/components/GrowlNotification/index.js @@ -1,11 +1,12 @@ import React, {Component} from 'react'; import { - Text, View, Animated, + View, Animated, } from 'react-native'; import { Directions, FlingGestureHandler, State, TouchableWithoutFeedback, } from 'react-native-gesture-handler'; import colors from '../../styles/colors'; +import Text from '../Text'; import Icon from '../Icon'; import {Checkmark, Exclamation} from '../Icon/Expensicons'; import styles from '../../styles/styles'; diff --git a/src/components/IOUBadge.js b/src/components/IOUBadge.js index 7d46e6050b11..ebc9852d5401 100644 --- a/src/components/IOUBadge.js +++ b/src/components/IOUBadge.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import {Text, Pressable} from 'react-native'; +import {Pressable} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import ONYXKEYS from '../ONYXKEYS'; import styles, {getBadgeColorStyle} from '../styles/styles'; @@ -9,6 +9,7 @@ import ROUTES from '../ROUTES'; import compose from '../libs/compose'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; import CONST from '../CONST'; +import Text from './Text'; const propTypes = { /** IOU Report data object */ diff --git a/src/components/InlineCodeBlock/WrappedText.js b/src/components/InlineCodeBlock/WrappedText.js index df0957f1e344..ddd49fb1330b 100644 --- a/src/components/InlineCodeBlock/WrappedText.js +++ b/src/components/InlineCodeBlock/WrappedText.js @@ -1,8 +1,9 @@ import _ from 'underscore'; import React, {Fragment} from 'react'; -import {Text, View} from 'react-native'; +import {View} from 'react-native'; import PropTypes from 'prop-types'; import styles from '../../styles/styles'; +import Text from '../Text'; /** * Breaks the text into matrix diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index 8807e4679d43..5abe2eb00b79 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -1,8 +1,9 @@ import React from 'react'; import { - View, Text, Pressable, + View, Pressable, } from 'react-native'; import PropTypes from 'prop-types'; +import Text from './Text'; import styles, {getButtonBackgroundColorStyle, getIconFillColor} from '../styles/styles'; import Icon from './Icon'; import {ArrowRight} from './Icon/Expensicons'; diff --git a/src/components/OptionsList.js b/src/components/OptionsList.js index 9f21639d82bd..dbb6e968da42 100644 --- a/src/components/OptionsList.js +++ b/src/components/OptionsList.js @@ -1,11 +1,12 @@ import _ from 'underscore'; import React, {forwardRef, Component} from 'react'; -import {View, Text} from 'react-native'; +import {View} from 'react-native'; import PropTypes from 'prop-types'; import styles from '../styles/styles'; import OptionRow from '../pages/home/sidebar/OptionRow'; import optionPropTypes from './optionPropTypes'; import SectionList from './SectionList'; +import Text from './Text'; const propTypes = { /** option Background Color */ diff --git a/src/components/ReportActionItem/IOUQuote.js b/src/components/ReportActionItem/IOUQuote.js index 671238cdea41..c7e091d2dc71 100644 --- a/src/components/ReportActionItem/IOUQuote.js +++ b/src/components/ReportActionItem/IOUQuote.js @@ -1,7 +1,8 @@ import React from 'react'; -import {View, Text} from 'react-native'; +import {View} from 'react-native'; import PropTypes from 'prop-types'; import _ from 'underscore'; +import Text from '../Text'; import styles from '../../styles/styles'; import ReportActionPropTypes from '../../pages/home/report/ReportActionPropTypes'; import withLocalize, {withLocalizePropTypes} from '../withLocalize'; diff --git a/src/components/ReportTransaction.js b/src/components/ReportTransaction.js index cec3b823cd1d..197e2fedb812 100644 --- a/src/components/ReportTransaction.js +++ b/src/components/ReportTransaction.js @@ -2,7 +2,7 @@ import React, {Component} from 'react'; import PropTypes from 'prop-types'; import lodashGet from 'lodash/get'; import { - Text, View, Pressable, ActivityIndicator, + View, Pressable, ActivityIndicator, } from 'react-native'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; @@ -12,6 +12,7 @@ import themeColors from '../styles/themes/default'; import {rejectTransaction} from '../libs/actions/IOU'; import ReportActionPropTypes from '../pages/home/report/ReportActionPropTypes'; import ReportActionItemSingle from '../pages/home/report/ReportActionItemSingle'; +import Text from './Text'; const propTypes = { /** The chatReport which the transaction is associated with */ diff --git a/src/components/Text.js b/src/components/Text.js index c50f754010d0..e48a6631a330 100644 --- a/src/components/Text.js +++ b/src/components/Text.js @@ -35,7 +35,7 @@ const defaultProps = { style: {}, }; -const Text = ({ +const Text = React.forwardRef(({ color, fontSize, textAlign, @@ -43,7 +43,7 @@ const Text = ({ family, style, ...props -}) => { +}, ref) => { // If the style prop is an array of styles, we need to mix them all together const mergedStyles = !_.isArray(style) ? style : _.reduce(style, (finalStyles, s) => ({ ...finalStyles, @@ -61,9 +61,9 @@ const Text = ({ return ( // eslint-disable-next-line react/jsx-props-no-spreading - {children} + {children} ); -}; +}); Text.propTypes = propTypes; Text.defaultProps = defaultProps; diff --git a/src/components/TextInputAutoWidth.js b/src/components/TextInputAutoWidth.js index 4ece1b42f62f..9dbc83537cd6 100644 --- a/src/components/TextInputAutoWidth.js +++ b/src/components/TextInputAutoWidth.js @@ -1,8 +1,9 @@ import React from 'react'; -import {View, Text} from 'react-native'; +import {View} from 'react-native'; import PropTypes from 'prop-types'; import _ from 'underscore'; import styles, {getAutoGrowTextInputStyle} from '../styles/styles'; +import Text from './Text'; import TextInputFocusable from './TextInputFocusable'; const propTypes = { diff --git a/src/components/Tooltip/TooltipRenderedOnPageBody.js b/src/components/Tooltip/TooltipRenderedOnPageBody.js index 47203372cf03..3ed7c472883b 100644 --- a/src/components/Tooltip/TooltipRenderedOnPageBody.js +++ b/src/components/Tooltip/TooltipRenderedOnPageBody.js @@ -1,8 +1,9 @@ import React, {memo} from 'react'; import PropTypes from 'prop-types'; -import {Animated, Text, View} from 'react-native'; +import {Animated, View} from 'react-native'; import ReactDOM from 'react-dom'; import getTooltipStyles from '../../styles/getTooltipStyles'; +import Text from '../Text'; const propTypes = { /** Window width */ diff --git a/src/components/WelcomeText.js b/src/components/WelcomeText.js index 08afbd0b8a8d..28117380962a 100755 --- a/src/components/WelcomeText.js +++ b/src/components/WelcomeText.js @@ -1,8 +1,8 @@ import React from 'react'; -import {Text} from 'react-native'; import PropTypes from 'prop-types'; import styles from '../styles/styles'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; +import Text from './Text'; const propTypes = { diff --git a/src/pages/EnablePayments/ActivateStep.js b/src/pages/EnablePayments/ActivateStep.js index e6ab3b805547..e57a44f66bb7 100644 --- a/src/pages/EnablePayments/ActivateStep.js +++ b/src/pages/EnablePayments/ActivateStep.js @@ -1,5 +1,5 @@ import React from 'react'; -import {View, Text} from 'react-native'; +import {View} from 'react-native'; import ScreenWrapper from '../../components/ScreenWrapper'; import HeaderWithCloseButton from '../../components/HeaderWithCloseButton'; import Navigation from '../../libs/Navigation/Navigation'; @@ -7,6 +7,7 @@ import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize import styles from '../../styles/styles'; import userWalletPropTypes from './userWalletPropTypes'; import CONST from '../../CONST'; +import Text from '../../components/Text'; const propTypes = { ...withLocalizePropTypes, diff --git a/src/pages/EnablePayments/AdditionalDetailsStep.js b/src/pages/EnablePayments/AdditionalDetailsStep.js index ae761852eb0a..e647bb1f3d80 100644 --- a/src/pages/EnablePayments/AdditionalDetailsStep.js +++ b/src/pages/EnablePayments/AdditionalDetailsStep.js @@ -3,7 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; import { - View, Text, ScrollView, KeyboardAvoidingView, + View, ScrollView, KeyboardAvoidingView, } from 'react-native'; import ScreenWrapper from '../../components/ScreenWrapper'; import HeaderWithCloseButton from '../../components/HeaderWithCloseButton'; @@ -11,6 +11,7 @@ import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize import Navigation from '../../libs/Navigation/Navigation'; import styles from '../../styles/styles'; import Button from '../../components/Button'; +import Text from '../../components/Text'; import TextInputWithLabel from '../../components/TextInputWithLabel'; import {activateWallet} from '../../libs/actions/BankAccounts'; import CONST from '../../CONST'; diff --git a/src/pages/EnablePayments/OnfidoStep.js b/src/pages/EnablePayments/OnfidoStep.js index 49c9000a807d..a1b7cb6f697a 100644 --- a/src/pages/EnablePayments/OnfidoStep.js +++ b/src/pages/EnablePayments/OnfidoStep.js @@ -1,5 +1,5 @@ import React from 'react'; -import {View, Text} from 'react-native'; +import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; import Onfido from '../../components/Onfido'; @@ -14,6 +14,7 @@ import styles from '../../styles/styles'; import TextLink from '../../components/TextLink'; import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; import compose from '../../libs/compose'; +import Text from '../../components/Text'; const propTypes = { /** Stores various information used to build the UI and call any APIs */ diff --git a/src/pages/ReportDetailsPage.js b/src/pages/ReportDetailsPage.js index 01c7ff98d9fe..e0446641d6a2 100644 --- a/src/pages/ReportDetailsPage.js +++ b/src/pages/ReportDetailsPage.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; import Str from 'expensify-common/lib/str'; import _ from 'underscore'; -import {Image, Text, View} from 'react-native'; +import {Image, View} from 'react-native'; import lodashGet from 'lodash/get'; import compose from '../libs/compose'; import withLocalize, {withLocalizePropTypes} from '../components/withLocalize'; @@ -21,6 +21,7 @@ import {updateNotificationPreference} from '../libs/actions/Report'; import {Users} from '../components/Icon/Expensicons'; import ROUTES from '../ROUTES'; import MenuItem from '../components/MenuItem'; +import Text from '../components/Text'; const propTypes = { ...withLocalizePropTypes, diff --git a/src/pages/RequestCallPage.js b/src/pages/RequestCallPage.js index d8a0d887259f..e072c32a2e77 100644 --- a/src/pages/RequestCallPage.js +++ b/src/pages/RequestCallPage.js @@ -1,5 +1,5 @@ import React, {Component} from 'react'; -import {View, Text, TextInput} from 'react-native'; +import {View, TextInput} from 'react-native'; import _ from 'underscore'; import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; @@ -19,6 +19,7 @@ import Growl from '../libs/Growl'; import {requestConciergeDMCall} from '../libs/actions/Inbox'; import {fetchOrCreateChatReport} from '../libs/actions/Report'; import personalDetailsPropType from './personalDetailsPropType'; +import Text from '../components/Text'; const propTypes = { ...withLocalizePropTypes, diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js index 212542039e79..1a3e131a5ec0 100644 --- a/src/pages/home/HeaderView.js +++ b/src/pages/home/HeaderView.js @@ -1,6 +1,6 @@ import _ from 'underscore'; import React from 'react'; -import {View, Pressable, Text} from 'react-native'; +import {View, Pressable} from 'react-native'; import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; import lodashGet from 'lodash/get'; @@ -24,6 +24,7 @@ import IOUBadge from '../../components/IOUBadge'; import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; import CONST from '../../CONST'; import {isDefaultRoom} from '../../libs/reportUtils'; +import Text from '../../components/Text'; const propTypes = { /** Toggles the navigationMenu open and closed */ diff --git a/src/pages/home/report/EmojiPickerMenu/index.js b/src/pages/home/report/EmojiPickerMenu/index.js index d7d19762a1b6..59cf98e7648e 100755 --- a/src/pages/home/report/EmojiPickerMenu/index.js +++ b/src/pages/home/report/EmojiPickerMenu/index.js @@ -1,5 +1,5 @@ import React, {Component} from 'react'; -import {View, FlatList, Text} from 'react-native'; +import {View, FlatList} from 'react-native'; import PropTypes from 'prop-types'; import _ from 'underscore'; import CONST from '../../../../CONST'; @@ -7,6 +7,7 @@ import styles, {getEmojiPickerStyle} from '../../../../styles/styles'; import themeColors from '../../../../styles/themes/default'; import emojis from '../../../../../assets/emojis'; import EmojiPickerMenuItem from '../EmojiPickerMenuItem'; +import Text from '../../../../components/Text'; import TextInputFocusable from '../../../../components/TextInputFocusable'; import withWindowDimensions, {windowDimensionsPropTypes} from '../../../../components/withWindowDimensions'; import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize'; diff --git a/src/pages/home/report/EmojiPickerMenu/index.native.js b/src/pages/home/report/EmojiPickerMenu/index.native.js index 573ce27817ac..c6f9a1ac958c 100644 --- a/src/pages/home/report/EmojiPickerMenu/index.native.js +++ b/src/pages/home/report/EmojiPickerMenu/index.native.js @@ -1,10 +1,11 @@ import React, {Component} from 'react'; -import {View, FlatList, Text} from 'react-native'; +import {View, FlatList} from 'react-native'; import PropTypes from 'prop-types'; import CONST from '../../../../CONST'; import styles from '../../../../styles/styles'; import emojis from '../../../../../assets/emojis'; import EmojiPickerMenuItem from '../EmojiPickerMenuItem'; +import Text from '../../../../components/Text'; const propTypes = { /** Function to add the selected emoji to the main compose text input */ diff --git a/src/pages/home/report/EmojiPickerMenuItem.js b/src/pages/home/report/EmojiPickerMenuItem.js index 5fc698a51203..cff8c281c7af 100644 --- a/src/pages/home/report/EmojiPickerMenuItem.js +++ b/src/pages/home/report/EmojiPickerMenuItem.js @@ -1,9 +1,10 @@ import React from 'react'; import PropTypes from 'prop-types'; -import {Pressable, Text} from 'react-native'; +import {Pressable} from 'react-native'; import styles, {getButtonBackgroundColorStyle} from '../../../styles/styles'; import getButtonState from '../../../libs/getButtonState'; import Hoverable from '../../../components/Hoverable'; +import Text from '../../../components/Text'; const propTypes = { /** The unicode that is used to display the emoji */ diff --git a/src/pages/home/report/ReportActionItemDate.js b/src/pages/home/report/ReportActionItemDate.js index d1417735ae18..2133e28417c4 100644 --- a/src/pages/home/report/ReportActionItemDate.js +++ b/src/pages/home/report/ReportActionItemDate.js @@ -1,11 +1,11 @@ import React, {memo} from 'react'; import PropTypes from 'prop-types'; -import {Text} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import styles from '../../../styles/styles'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; import compose from '../../../libs/compose'; import ONYXKEYS from '../../../ONYXKEYS'; +import Text from '../../../components/Text'; const propTypes = { /** UTC timestamp for when the action was created */ diff --git a/src/pages/home/report/ReportTypingIndicator.js b/src/pages/home/report/ReportTypingIndicator.js index 530b590238f8..65d70e39b8b9 100755 --- a/src/pages/home/report/ReportTypingIndicator.js +++ b/src/pages/home/report/ReportTypingIndicator.js @@ -1,5 +1,5 @@ import React from 'react'; -import {View, Text} from 'react-native'; +import {View} from 'react-native'; import PropTypes from 'prop-types'; import _ from 'underscore'; import {withOnyx} from 'react-native-onyx'; @@ -8,6 +8,7 @@ import ONYXKEYS from '../../../ONYXKEYS'; import styles from '../../../styles/styles'; import {getDisplayName} from '../../../libs/actions/PersonalDetails'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; +import Text from '../../../components/Text'; const propTypes = { /** Key-value pairs of user logins and whether or not they are typing. Keys are logins. */ diff --git a/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js b/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js index 42a100d00e5c..b2a312a7a000 100755 --- a/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js +++ b/src/pages/iou/steps/IOUParticipantsPage/IOUParticipantsSplit.js @@ -1,5 +1,5 @@ import React, {Component} from 'react'; -import {View, Text} from 'react-native'; +import {View} from 'react-native'; import PropTypes from 'prop-types'; import _ from 'underscore'; import {withOnyx} from 'react-native-onyx'; @@ -11,6 +11,7 @@ import CONST from '../../../../CONST'; import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize'; import compose from '../../../../libs/compose'; import Button from '../../../../components/Button'; +import Text from '../../../../components/Text'; import FixedFooter from '../../../../components/FixedFooter'; const personalDetailsPropTypes = PropTypes.shape({ diff --git a/src/pages/signin/ChangeExpensifyLoginLink.js b/src/pages/signin/ChangeExpensifyLoginLink.js index 713474eba45e..ebc8cd40d6d3 100755 --- a/src/pages/signin/ChangeExpensifyLoginLink.js +++ b/src/pages/signin/ChangeExpensifyLoginLink.js @@ -1,8 +1,9 @@ import React from 'react'; -import {Text, TouchableOpacity, View} from 'react-native'; +import {TouchableOpacity, View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; import Str from 'expensify-common/lib/str'; +import Text from '../../components/Text'; import styles from '../../styles/styles'; import {restartSignin} from '../../libs/actions/Session'; import themeColors from '../../styles/themes/default'; diff --git a/src/pages/signin/PasswordForm.js b/src/pages/signin/PasswordForm.js index 40f7311feed9..319a3900571c 100755 --- a/src/pages/signin/PasswordForm.js +++ b/src/pages/signin/PasswordForm.js @@ -1,11 +1,12 @@ import React from 'react'; import { - Text, TextInput, TouchableOpacity, View, + TextInput, TouchableOpacity, View, } from 'react-native'; import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; import styles from '../../styles/styles'; import Button from '../../components/Button'; +import Text from '../../components/Text'; import themeColors from '../../styles/themes/default'; import {signIn, resetPassword} from '../../libs/actions/Session'; import ONYXKEYS from '../../ONYXKEYS'; diff --git a/src/pages/signin/ResendValidationForm.js b/src/pages/signin/ResendValidationForm.js index a939d8b17927..a3c1a919f4cf 100755 --- a/src/pages/signin/ResendValidationForm.js +++ b/src/pages/signin/ResendValidationForm.js @@ -1,10 +1,11 @@ import React from 'react'; -import {Text, View} from 'react-native'; +import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; import _ from 'underscore'; import styles from '../../styles/styles'; import Button from '../../components/Button'; +import Text from '../../components/Text'; import {reopenAccount, resendValidationLink, resetPassword} from '../../libs/actions/Session'; import ONYXKEYS from '../../ONYXKEYS'; import ChangeExpensifyLoginLink from './ChangeExpensifyLoginLink'; diff --git a/src/pages/signin/SignInPage.js b/src/pages/signin/SignInPage.js index def61d34414d..bab1ccdd3564 100644 --- a/src/pages/signin/SignInPage.js +++ b/src/pages/signin/SignInPage.js @@ -1,10 +1,11 @@ import React, {Component} from 'react'; import { - SafeAreaView, Text, View, + SafeAreaView, View, } from 'react-native'; import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; +import Text from '../../components/Text'; import ONYXKEYS from '../../ONYXKEYS'; import styles from '../../styles/styles'; import updateUnread from '../../libs/UnreadIndicatorUpdater/updateUnread/index'; diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js index a4aba8457ced..69b818826611 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js +++ b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js @@ -1,6 +1,6 @@ import React from 'react'; import { - Image, Text, View, + Image, View, } from 'react-native'; import PropTypes from 'prop-types'; import styles from '../../../styles/styles'; @@ -8,6 +8,7 @@ import ExpensifyCashLogo from '../../../components/ExpensifyCashLogo'; import welcomeScreenshot from '../../../../assets/images/welcome-screenshot-wide.png'; import variables from '../../../styles/variables'; import TermsAndLicenses from '../TermsAndLicenses'; +import Text from '../../../components/Text'; import WelcomeText from '../../../components/WelcomeText'; import TextLink from '../../../components/TextLink'; import CONST from '../../../CONST'; diff --git a/src/pages/signin/TermsAndLicenses/TermsOnly.js b/src/pages/signin/TermsAndLicenses/TermsOnly.js index d39bd81c6ff1..877768bbf449 100755 --- a/src/pages/signin/TermsAndLicenses/TermsOnly.js +++ b/src/pages/signin/TermsAndLicenses/TermsOnly.js @@ -1,7 +1,8 @@ import React from 'react'; -import {Text, View} from 'react-native'; +import {View} from 'react-native'; import styles from '../../../styles/styles'; import CONST from '../../../CONST'; +import Text from '../../../components/Text'; import TextLink from '../../../components/TextLink'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; diff --git a/src/pages/signin/TermsAndLicenses/TermsWithLicenses.js b/src/pages/signin/TermsAndLicenses/TermsWithLicenses.js index 03f447154b8d..69ddbc246cd0 100755 --- a/src/pages/signin/TermsAndLicenses/TermsWithLicenses.js +++ b/src/pages/signin/TermsAndLicenses/TermsWithLicenses.js @@ -1,9 +1,10 @@ import React from 'react'; -import {Text, View} from 'react-native'; +import {View} from 'react-native'; import styles from '../../../styles/styles'; import CONST from '../../../CONST'; import TextLink from '../../../components/TextLink'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; +import Text from '../../../components/Text'; const TermsWithLicenses = ({translate}) => ( diff --git a/src/pages/workspace/NewWorkspacePage.js b/src/pages/workspace/NewWorkspacePage.js index 4d747e5f9fa9..670847db48b4 100644 --- a/src/pages/workspace/NewWorkspacePage.js +++ b/src/pages/workspace/NewWorkspacePage.js @@ -1,5 +1,5 @@ import React from 'react'; -import {View, Text} from 'react-native'; +import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; import ONYXKEYS from '../../ONYXKEYS'; @@ -12,6 +12,7 @@ import styles from '../../styles/styles'; import WorkspaceDefaultAvatar from '../../../assets/images/workspace-default-avatar.svg'; import TextInputWithLabel from '../../components/TextInputWithLabel'; import Button from '../../components/Button'; +import Text from '../../components/Text'; import compose from '../../libs/compose'; import {create} from '../../libs/actions/Policy'; import defaultTheme from '../../styles/themes/default'; From 47175711968b9715e287f4028b633856babfbb2b Mon Sep 17 00:00:00 2001 From: Rory Abraham Date: Wed, 30 Jun 2021 18:45:09 -0700 Subject: [PATCH 2/6] Kill styles.textP --- src/components/AttachmentView.js | 2 +- src/components/CheckboxWithLabel.js | 2 +- src/components/ConfirmModal.js | 2 +- src/components/Text.js | 3 +- src/components/WelcomeText.js | 31 +++++++++++---------- src/pages/DetailsPage.js | 6 ++-- src/pages/RequestCallPage.js | 4 +-- src/pages/home/report/ReportActionsView.js | 2 +- src/pages/settings/AboutPage.js | 2 +- src/pages/settings/AddSecondaryLoginPage.js | 2 +- src/pages/settings/PasswordPage.js | 2 +- src/pages/settings/PaymentsPage.js | 2 +- src/pages/settings/Profile/LoginField.js | 2 +- src/pages/settings/Profile/ProfilePage.js | 2 +- src/pages/signin/ResendValidationForm.js | 2 +- src/pages/workspace/NewWorkspacePage.js | 2 +- src/pages/workspace/WorkspaceInvitePage.js | 6 ++-- src/styles/styles.js | 7 ----- 18 files changed, 39 insertions(+), 42 deletions(-) diff --git a/src/components/AttachmentView.js b/src/components/AttachmentView.js index 2186e14479af..6e2d7c03225f 100755 --- a/src/components/AttachmentView.js +++ b/src/components/AttachmentView.js @@ -57,7 +57,7 @@ const AttachmentView = (props) => { - {props.file && props.file.name} + {props.file && props.file.name} ); }; diff --git a/src/components/CheckboxWithLabel.js b/src/components/CheckboxWithLabel.js index 8285d7c41c89..3d5c40ecfc22 100644 --- a/src/components/CheckboxWithLabel.js +++ b/src/components/CheckboxWithLabel.js @@ -58,7 +58,7 @@ const CheckboxWithLabel = ({ ]} > {label && ( - + {label} )} diff --git a/src/components/ConfirmModal.js b/src/components/ConfirmModal.js index 138c31778934..218878ca53d5 100755 --- a/src/components/ConfirmModal.js +++ b/src/components/ConfirmModal.js @@ -58,7 +58,7 @@ const ConfirmModal = props => (
- + {props.prompt} diff --git a/src/components/Text.js b/src/components/Text.js index e48a6631a330..f2c1c62b7d78 100644 --- a/src/components/Text.js +++ b/src/components/Text.js @@ -4,6 +4,7 @@ import _ from 'underscore'; import {Text as RNText} from 'react-native'; import fontFamily from '../styles/fontFamily'; import themeColors from '../styles/themes/default'; +import variables from '../styles/variables'; const propTypes = { /** The color of the text */ @@ -28,7 +29,7 @@ const propTypes = { }; const defaultProps = { color: themeColors.text, - fontSize: 15, + fontSize: variables.fontSizeNormal, family: 'GTA', textAlign: null, children: null, diff --git a/src/components/WelcomeText.js b/src/components/WelcomeText.js index 28117380962a..1180b5df2e3a 100755 --- a/src/components/WelcomeText.js +++ b/src/components/WelcomeText.js @@ -7,27 +7,30 @@ import Text from './Text'; const propTypes = { /** Fontsize */ - textSize: PropTypes.oneOf(['default', 'large']), + smallFontSize: PropTypes.bool, ...withLocalizePropTypes, }; const defaultProps = { - textSize: 'default', + smallFontSize: false, }; -const WelcomeText = props => ( - <> - - {props.translate('welcomeText.phrase1')} - - - {props.translate('welcomeText.phrase2')} - {' '} - {props.translate('welcomeText.phrase3')} - - -); +const WelcomeText = (props) => { + const textSize = props.smallFontSize ? styles.textLabel : undefined; + return ( + <> + + {props.translate('welcomeText.phrase1')} + + + {props.translate('welcomeText.phrase2')} + {' '} + {props.translate('welcomeText.phrase3')} + + + ); +}; WelcomeText.displayName = 'WelcomeText'; WelcomeText.propTypes = propTypes; diff --git a/src/pages/DetailsPage.js b/src/pages/DetailsPage.js index 937e8f0dbc93..548bf136a921 100755 --- a/src/pages/DetailsPage.js +++ b/src/pages/DetailsPage.js @@ -103,7 +103,7 @@ const DetailsPage = ({ ? 'common.phoneNumber' : 'common.email')} - + {isSMSLogin ? toLocalPhone(getPhoneNumber(details)) : details.login} @@ -115,7 +115,7 @@ const DetailsPage = ({ {translate('profilePage.preferredPronouns')} - + {details.pronouns} @@ -125,7 +125,7 @@ const DetailsPage = ({ {translate('detailsPage.localTime')} - + {timezone.format('LT')} {' '} {currentTime} diff --git a/src/pages/RequestCallPage.js b/src/pages/RequestCallPage.js index e072c32a2e77..ac7574f99ffa 100644 --- a/src/pages/RequestCallPage.js +++ b/src/pages/RequestCallPage.js @@ -111,10 +111,10 @@ class RequestCallPage extends Component { onCloseButtonPress={() => Navigation.dismissModal(true)} /> - + {this.props.translate('requestCallPage.description')} - + {this.props.translate('requestCallPage.instructions')} - + {this.props.translate('reportActionsView.beFirstPersonToComment')} diff --git a/src/pages/settings/AboutPage.js b/src/pages/settings/AboutPage.js index f337c2bae552..6b5e35a1730d 100644 --- a/src/pages/settings/AboutPage.js +++ b/src/pages/settings/AboutPage.js @@ -101,7 +101,7 @@ const AboutPage = ({translate, session}) => { v {version} - + {translate('initialSettingsPage.aboutPage.description')} diff --git a/src/pages/settings/AddSecondaryLoginPage.js b/src/pages/settings/AddSecondaryLoginPage.js index cf65b4b4ad65..3731aa043e3c 100755 --- a/src/pages/settings/AddSecondaryLoginPage.js +++ b/src/pages/settings/AddSecondaryLoginPage.js @@ -120,7 +120,7 @@ class AddSecondaryLoginPage extends Component { onCloseButtonPress={() => Navigation.dismissModal()} /> - + {this.props.translate(this.formType === CONST.LOGIN_TYPE.PHONE ? 'addSecondaryLoginPage.enterPreferredPhoneNumberToSendValidationLink' : 'addSecondaryLoginPage.enterPreferredEmailToSendValidationLink')} diff --git a/src/pages/settings/PasswordPage.js b/src/pages/settings/PasswordPage.js index bc2fce9526a4..8162c3e57f66 100755 --- a/src/pages/settings/PasswordPage.js +++ b/src/pages/settings/PasswordPage.js @@ -78,7 +78,7 @@ class PasswordPage extends Component { onCloseButtonPress={() => Navigation.dismissModal(true)} /> - + {this.props.translate('passwordPage.changingYourPasswordPrompt')} diff --git a/src/pages/settings/PaymentsPage.js b/src/pages/settings/PaymentsPage.js index 98081371e25d..b0a5f35d4c4f 100755 --- a/src/pages/settings/PaymentsPage.js +++ b/src/pages/settings/PaymentsPage.js @@ -72,7 +72,7 @@ class PaymentsPage extends React.Component { /> - + {this.props.translate('paymentsPage.enterYourUsernameToGetPaidViaPayPal')} diff --git a/src/pages/settings/Profile/LoginField.js b/src/pages/settings/Profile/LoginField.js index a5f83debc8ad..bd2d336cf529 100755 --- a/src/pages/settings/Profile/LoginField.js +++ b/src/pages/settings/Profile/LoginField.js @@ -102,7 +102,7 @@ class LoginField extends Component { ) : ( - + {this.props.type === CONST.LOGIN_TYPE.PHONE ? this.props.toLocalPhone(this.props.login.partnerUserID) : this.props.login.partnerUserID} diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js index 52df9d412468..ea2546553279 100755 --- a/src/pages/settings/Profile/ProfilePage.js +++ b/src/pages/settings/Profile/ProfilePage.js @@ -304,7 +304,7 @@ class ProfilePage extends Component { )} - + {this.props.translate('profilePage.tellUsAboutYourself')} - + {this.props.translate('resendValidationForm.weSentYouMagicSignInLink')} diff --git a/src/pages/workspace/NewWorkspacePage.js b/src/pages/workspace/NewWorkspacePage.js index 670847db48b4..987ec974a7c5 100644 --- a/src/pages/workspace/NewWorkspacePage.js +++ b/src/pages/workspace/NewWorkspacePage.js @@ -63,7 +63,7 @@ class NewWorkspacePage extends React.Component { value={this.state.name} onChangeText={name => this.setState({name})} /> - {this.props.translate('workspace.new.helpText')} + {this.props.translate('workspace.new.helpText')}