From fce7b22ccc4af341243cd68e2ee811b62c50b748 Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Tue, 20 Jul 2021 07:36:23 -1000 Subject: [PATCH 1/7] Fix localize displayname --- .../InvertedFlatList/BaseInvertedFlatList.js | 5 +- src/components/withLocalize.js | 103 +++++++++++------- .../home/report/ReportActionContextMenu.js | 4 +- .../home/report/ReportActionItemSingle.js | 2 + src/pages/home/report/ReportView.js | 1 + 5 files changed, 70 insertions(+), 45 deletions(-) diff --git a/src/components/InvertedFlatList/BaseInvertedFlatList.js b/src/components/InvertedFlatList/BaseInvertedFlatList.js index 4e3c91ee0704..36bcd6c2e88f 100644 --- a/src/components/InvertedFlatList/BaseInvertedFlatList.js +++ b/src/components/InvertedFlatList/BaseInvertedFlatList.js @@ -150,10 +150,7 @@ class BaseInvertedFlatList extends Component { // Web requires that items be measured or else crazy things happen when scrolling. getItemLayout={this.props.shouldMeasureItems ? this.getItemLayout : undefined} bounces={false} - - // We keep this property very low so that chat switching remains fast - maxToRenderPerBatch={1} - windowSize={15} + windowSize={5} removeClippedSubviews={this.props.shouldRemoveClippedSubviews} /> ); diff --git a/src/components/withLocalize.js b/src/components/withLocalize.js index 28b9409796d3..69bc1667da35 100755 --- a/src/components/withLocalize.js +++ b/src/components/withLocalize.js @@ -2,7 +2,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; import getComponentDisplayName from '../libs/getComponentDisplayName'; -import compose from '../libs/compose'; import ONYXKEYS from '../ONYXKEYS'; import {translate} from '../libs/translate'; import DateUtils from '../libs/DateUtils'; @@ -30,35 +29,65 @@ const withLocalizePropTypes = { fromLocalPhone: PropTypes.func.isRequired, }; -function withLocalizeHOC(WrappedComponent) { - const WithLocalize = (props) => { - const translations = { - translate: (phrase, variables) => translate(props.preferredLocale, phrase, variables), - numberFormat: (number, options) => numberFormat(props.preferredLocale, number, options), - timestampToRelative: timestamp => DateUtils.timestampToRelative(props.preferredLocale, timestamp), - timestampToDateTime: (timestamp, includeTimezone) => DateUtils.timestampToDateTime( - props.preferredLocale, +const withLocalizeHOC = (WrappedComponent) => { + class WithLocalize extends React.Component { + constructor(props) { + super(props); + + this.translate = this.translate.bind(this); + this.numberFormat = this.numberFormat.bind(this); + this.timestampToRelative = this.timestampToRelative.bind(this); + this.timestampToDateTime = this.timestampToDateTime.bind(this); + this.fromLocalPhone = this.fromLocalPhone.bind(this); + this.toLocalPhone = this.toLocalPhone.bind(this); + this.preferredLocale = 'en'; + } + + translate(phrase, variables) { + return translate(this.preferredLocale, phrase, variables); + } + + numberFormat(number, options) { + return numberFormat(this.preferredLocale, number, options); + } + + timestampToRelative(timestamp) { + return DateUtils.timestampToRelative(this.preferredLocale, timestamp); + } + + timestampToDateTime(timestamp, includeTimezone) { + return DateUtils.timestampToDateTime( + this.preferredLocale, timestamp, includeTimezone, - ), - toLocalPhone: number => toLocalPhone(props.preferredLocale, number), - fromLocalPhone: number => fromLocalPhone(props.preferredLocale, number), - }; - return ( - - ); - }; - WithLocalize.displayName = `WithLocalize(${getComponentDisplayName(WrappedComponent)})`; + ); + } + + toLocalPhone(number) { + return toLocalPhone(this.preferredLocale, number); + } + + fromLocalPhone(number) { + return fromLocalPhone(this.preferredLocale, number); + } + + render() { + return ( + + ); + } + } + WithLocalize.propTypes = { preferredLocale: PropTypes.string, forwardedRef: PropTypes.oneOfType([ @@ -70,19 +99,17 @@ function withLocalizeHOC(WrappedComponent) { preferredLocale: CONST.DEFAULT_LOCALE, forwardedRef: undefined, }; - return React.forwardRef((props, ref) => ( + + const withForwardedRef = React.forwardRef((props, ref) => ( // eslint-disable-next-line react/jsx-props-no-spreading )); -} -export default compose( - withOnyx({ - preferredLocale: { - key: ONYXKEYS.PREFERRED_LOCALE, - }, - }), - withLocalizeHOC, -); + + withForwardedRef.displayName = `WithLocalize(${getComponentDisplayName(WrappedComponent)})`; + return withForwardedRef; +}; + +export default withLocalizeHOC; export { withLocalizePropTypes, diff --git a/src/pages/home/report/ReportActionContextMenu.js b/src/pages/home/report/ReportActionContextMenu.js index ca8fcc35b04f..7386c9cd9f62 100755 --- a/src/pages/home/report/ReportActionContextMenu.js +++ b/src/pages/home/report/ReportActionContextMenu.js @@ -197,6 +197,4 @@ class ReportActionContextMenu extends React.Component { ReportActionContextMenu.propTypes = propTypes; ReportActionContextMenu.defaultProps = defaultProps; -export default compose( - withLocalize, -)(ReportActionContextMenu); +export default withLocalize(ReportActionContextMenu); diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.js index 1cf5bf99fce8..84befd28f4c8 100644 --- a/src/pages/home/report/ReportActionItemSingle.js +++ b/src/pages/home/report/ReportActionItemSingle.js @@ -95,6 +95,8 @@ const ReportActionItemSingle = ({ ReportActionItemSingle.propTypes = propTypes; ReportActionItemSingle.defaultProps = defaultProps; +ReportActionItemSingle.displayName = 'ReportActionItemSingle'; + export default compose( withLocalize, withOnyx({ diff --git a/src/pages/home/report/ReportView.js b/src/pages/home/report/ReportView.js index 8481be201ed8..1eb4ea57589a 100644 --- a/src/pages/home/report/ReportView.js +++ b/src/pages/home/report/ReportView.js @@ -47,6 +47,7 @@ const ReportView = ({reportID, session}) => ( ReportView.propTypes = propTypes; ReportView.defaultProps = defaultProps; +ReportView.displayName = 'ReportView'; export default withOnyx({ session: { From b00c34b91a1f36077a6104ee56fcf7119cc8561d Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Tue, 20 Jul 2021 07:40:30 -1000 Subject: [PATCH 2/7] add Onyx back in --- src/components/withLocalize.js | 53 +++++++++++++++++++--------------- 1 file changed, 30 insertions(+), 23 deletions(-) diff --git a/src/components/withLocalize.js b/src/components/withLocalize.js index 69bc1667da35..b0abd481162f 100755 --- a/src/components/withLocalize.js +++ b/src/components/withLocalize.js @@ -29,7 +29,20 @@ const withLocalizePropTypes = { fromLocalPhone: PropTypes.func.isRequired, }; -const withLocalizeHOC = (WrappedComponent) => { +export default (WrappedComponent) => { + const propTypes = { + preferredLocale: PropTypes.string, + forwardedRef: PropTypes.oneOfType([ + PropTypes.func, + PropTypes.shape({current: PropTypes.instanceOf(React.Component)}), + ]), + }; + + const defaultProps = { + preferredLocale: CONST.DEFAULT_LOCALE, + forwardedRef: undefined, + }; + class WithLocalize extends React.Component { constructor(props) { super(props); @@ -40,35 +53,34 @@ const withLocalizeHOC = (WrappedComponent) => { this.timestampToDateTime = this.timestampToDateTime.bind(this); this.fromLocalPhone = this.fromLocalPhone.bind(this); this.toLocalPhone = this.toLocalPhone.bind(this); - this.preferredLocale = 'en'; } translate(phrase, variables) { - return translate(this.preferredLocale, phrase, variables); + return translate(this.props.preferredLocale, phrase, variables); } numberFormat(number, options) { - return numberFormat(this.preferredLocale, number, options); + return numberFormat(this.props.preferredLocale, number, options); } timestampToRelative(timestamp) { - return DateUtils.timestampToRelative(this.preferredLocale, timestamp); + return DateUtils.timestampToRelative(this.props.preferredLocale, timestamp); } timestampToDateTime(timestamp, includeTimezone) { return DateUtils.timestampToDateTime( - this.preferredLocale, + this.props.preferredLocale, timestamp, includeTimezone, ); } toLocalPhone(number) { - return toLocalPhone(this.preferredLocale, number); + return toLocalPhone(this.props.preferredLocale, number); } fromLocalPhone(number) { - return fromLocalPhone(this.preferredLocale, number); + return fromLocalPhone(this.props.preferredLocale, number); } render() { @@ -88,28 +100,23 @@ const withLocalizeHOC = (WrappedComponent) => { } } - WithLocalize.propTypes = { - preferredLocale: PropTypes.string, - forwardedRef: PropTypes.oneOfType([ - PropTypes.func, - PropTypes.shape({current: PropTypes.instanceOf(React.Component)}), - ]), - }; - WithLocalize.defaultProps = { - preferredLocale: CONST.DEFAULT_LOCALE, - forwardedRef: undefined, - }; + WithLocalize.propTypes = propTypes; + + WithLocalize.defaultProps = defaultProps; const withForwardedRef = React.forwardRef((props, ref) => ( // eslint-disable-next-line react/jsx-props-no-spreading )); - withForwardedRef.displayName = `WithLocalize(${getComponentDisplayName(WrappedComponent)})`; - return withForwardedRef; -}; + withForwardedRef.displayName = `withLocalize(${getComponentDisplayName(WrappedComponent)})`; -export default withLocalizeHOC; + return withOnyx({ + preferredLocale: { + key: ONYXKEYS.PREFERRED_LOCALE, + }, + })(withForwardedRef); +}; export { withLocalizePropTypes, From 82bb5dd55e30e8132d089fb21abb0d30c5df0e3f Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Tue, 20 Jul 2021 07:47:40 -1000 Subject: [PATCH 3/7] remove bad change --- src/components/InvertedFlatList/BaseInvertedFlatList.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/InvertedFlatList/BaseInvertedFlatList.js b/src/components/InvertedFlatList/BaseInvertedFlatList.js index 36bcd6c2e88f..4e3c91ee0704 100644 --- a/src/components/InvertedFlatList/BaseInvertedFlatList.js +++ b/src/components/InvertedFlatList/BaseInvertedFlatList.js @@ -150,7 +150,10 @@ class BaseInvertedFlatList extends Component { // Web requires that items be measured or else crazy things happen when scrolling. getItemLayout={this.props.shouldMeasureItems ? this.getItemLayout : undefined} bounces={false} - windowSize={5} + + // We keep this property very low so that chat switching remains fast + maxToRenderPerBatch={1} + windowSize={15} removeClippedSubviews={this.props.shouldRemoveClippedSubviews} /> ); From b15b302b41927fd2b1e7bfc8e0c7af14e27e048e Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Tue, 20 Jul 2021 08:00:37 -1000 Subject: [PATCH 4/7] add docs --- src/components/withLocalize.js | 28 +++++++++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/src/components/withLocalize.js b/src/components/withLocalize.js index b0abd481162f..5b2714be8c6c 100755 --- a/src/components/withLocalize.js +++ b/src/components/withLocalize.js @@ -55,18 +55,37 @@ export default (WrappedComponent) => { this.toLocalPhone = this.toLocalPhone.bind(this); } + /** + * @param {String} phrase + * @param {Object} [variables] + * @returns {String} + */ translate(phrase, variables) { return translate(this.props.preferredLocale, phrase, variables); } + /** + * @param {Number} number + * @param {Intl.NumberFormatOptions} options + * @returns {String} + */ numberFormat(number, options) { return numberFormat(this.props.preferredLocale, number, options); } + /** + * @param {Number} timestamp + * @returns {String} + */ timestampToRelative(timestamp) { return DateUtils.timestampToRelative(this.props.preferredLocale, timestamp); } + /** + * @param {Number} timestamp + * @param {Boolean} [includeTimezone] + * @returns {String} + */ timestampToDateTime(timestamp, includeTimezone) { return DateUtils.timestampToDateTime( this.props.preferredLocale, @@ -75,10 +94,18 @@ export default (WrappedComponent) => { ); } + /** + * @param {Number} number + * @returns {String} + */ toLocalPhone(number) { return toLocalPhone(this.props.preferredLocale, number); } + /** + * @param {Number} number + * @returns {String} + */ fromLocalPhone(number) { return fromLocalPhone(this.props.preferredLocale, number); } @@ -101,7 +128,6 @@ export default (WrappedComponent) => { } WithLocalize.propTypes = propTypes; - WithLocalize.defaultProps = defaultProps; const withForwardedRef = React.forwardRef((props, ref) => ( From 4fc6270e2095f05fa703909ffa6ad2aaa8d4c493 Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Tue, 20 Jul 2021 08:03:59 -1000 Subject: [PATCH 5/7] fix style --- src/pages/home/report/ReportActionContextMenu.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/home/report/ReportActionContextMenu.js b/src/pages/home/report/ReportActionContextMenu.js index 7386c9cd9f62..f7e0b7f63d71 100755 --- a/src/pages/home/report/ReportActionContextMenu.js +++ b/src/pages/home/report/ReportActionContextMenu.js @@ -14,7 +14,6 @@ import { import ContextMenuItem from '../../../components/ContextMenuItem'; import ReportActionPropTypes from './ReportActionPropTypes'; import Clipboard from '../../../libs/Clipboard'; -import compose from '../../../libs/compose'; import {isReportMessageAttachment, canEditReportAction, canDeleteReportAction} from '../../../libs/reportUtils'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; import ReportActionComposeFocusManager from '../../../libs/ReportActionComposeFocusManager'; From 79931f7ea412c44d02bafd66dc9a9b827a0dbb6f Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Tue, 20 Jul 2021 08:12:26 -1000 Subject: [PATCH 6/7] add missing docs to propTypes --- src/components/withLocalize.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/withLocalize.js b/src/components/withLocalize.js index 5b2714be8c6c..1bf30d50e5db 100755 --- a/src/components/withLocalize.js +++ b/src/components/withLocalize.js @@ -31,7 +31,10 @@ const withLocalizePropTypes = { export default (WrappedComponent) => { const propTypes = { + /** The user's preferred locale e.g. en or es */ preferredLocale: PropTypes.string, + + /** Passed ref from whatever component is wrapped in the HOC */ forwardedRef: PropTypes.oneOfType([ PropTypes.func, PropTypes.shape({current: PropTypes.instanceOf(React.Component)}), From 67e0a87183f96c005ed7af7f05bcd0d13f549ddb Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Tue, 20 Jul 2021 08:13:15 -1000 Subject: [PATCH 7/7] fix docs --- src/components/withLocalize.js | 2 +- src/libs/LocalePhoneNumber.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/withLocalize.js b/src/components/withLocalize.js index 1bf30d50e5db..daa35a12c41d 100755 --- a/src/components/withLocalize.js +++ b/src/components/withLocalize.js @@ -31,7 +31,7 @@ const withLocalizePropTypes = { export default (WrappedComponent) => { const propTypes = { - /** The user's preferred locale e.g. en or es */ + /** The user's preferred locale e.g. 'en', 'es-ES' */ preferredLocale: PropTypes.string, /** Passed ref from whatever component is wrapped in the HOC */ diff --git a/src/libs/LocalePhoneNumber.js b/src/libs/LocalePhoneNumber.js index 4d51e711d705..3d47e7c6a5a9 100644 --- a/src/libs/LocalePhoneNumber.js +++ b/src/libs/LocalePhoneNumber.js @@ -10,7 +10,7 @@ import translations from '../languages/translations'; * * @param {String} locale eg 'en', 'es-ES' * @param {String} number - * @returns {string} + * @returns {String} */ function toLocalPhone(locale, number) { const numString = lodashTrim(number); @@ -31,7 +31,7 @@ function toLocalPhone(locale, number) { * * @param {String} locale eg 'en', 'es-ES' * @param {String} number - * @returns {string} + * @returns {String} */ function fromLocalPhone(locale, number) { const numString = lodashTrim(number);