Skip to content

Commit 48bf2f5

Browse files
iwizniaiwiznia
authored
Merge pull request #4150 from Expensify/marcaaron-fixIpWithLocalize
2 parents c009187 + 67e0a87 commit 48bf2f5

File tree

5 files changed

+108
-45
lines changed

5 files changed

+108
-45
lines changed

‎src/components/withLocalize.js

Lines changed: 102 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React from 'react';
22
import PropTypes from 'prop-types';
33
import {withOnyx} from 'react-native-onyx';
44
import getComponentDisplayName from '../libs/getComponentDisplayName';
5-
import compose from '../libs/compose';
65
import ONYXKEYS from '../ONYXKEYS';
76
import {translate} from '../libs/translate';
87
import DateUtils from '../libs/DateUtils';
@@ -30,59 +29,123 @@ const withLocalizePropTypes = {
3029
fromLocalPhone: PropTypes.func.isRequired,
3130
};
3231

33-
function withLocalizeHOC(WrappedComponent) {
34-
const WithLocalize = (props) => {
35-
const translations = {
36-
translate: (phrase, variables) => translate(props.preferredLocale, phrase, variables),
37-
numberFormat: (number, options) => numberFormat(props.preferredLocale, number, options),
38-
timestampToRelative: timestamp => DateUtils.timestampToRelative(props.preferredLocale, timestamp),
39-
timestampToDateTime: (timestamp, includeTimezone) => DateUtils.timestampToDateTime(
40-
props.preferredLocale,
41-
timestamp,
42-
includeTimezone,
43-
),
44-
toLocalPhone: number => toLocalPhone(props.preferredLocale, number),
45-
fromLocalPhone: number => fromLocalPhone(props.preferredLocale, number),
46-
};
47-
return (
48-
<WrappedComponent
49-
// eslint-disable-next-line react/jsx-props-no-spreading
50-
{...props}
51-
ref={props.forwardedRef}
52-
translate={translations.translate}
53-
numberFormat={translations.numberFormat}
54-
timestampToRelative={translations.timestampToRelative}
55-
timestampToDateTime={translations.timestampToDateTime}
56-
toLocalPhone={translations.toLocalPhone}
57-
fromLocalPhone={translations.fromLocalPhone}
58-
/>
59-
);
60-
};
61-
WithLocalize.displayName = `WithLocalize(${getComponentDisplayName(WrappedComponent)})`;
62-
WithLocalize.propTypes = {
32+
export default (WrappedComponent) => {
33+
const propTypes = {
34+
/** The user's preferred locale e.g. 'en', 'es-ES' */
6335
preferredLocale: PropTypes.string,
36+
37+
/** Passed ref from whatever component is wrapped in the HOC */
6438
forwardedRef: PropTypes.oneOfType([
6539
PropTypes.func,
6640
PropTypes.shape({current: PropTypes.instanceOf(React.Component)}),
6741
]),
6842
};
69-
WithLocalize.defaultProps = {
43+
44+
const defaultProps = {
7045
preferredLocale: CONST.DEFAULT_LOCALE,
7146
forwardedRef: undefined,
7247
};
73-
return React.forwardRef((props, ref) => (
48+
49+
class WithLocalize extends React.Component {
50+
constructor(props) {
51+
super(props);
52+
53+
this.translate = this.translate.bind(this);
54+
this.numberFormat = this.numberFormat.bind(this);
55+
this.timestampToRelative = this.timestampToRelative.bind(this);
56+
this.timestampToDateTime = this.timestampToDateTime.bind(this);
57+
this.fromLocalPhone = this.fromLocalPhone.bind(this);
58+
this.toLocalPhone = this.toLocalPhone.bind(this);
59+
}
60+
61+
/**
62+
* @param {String} phrase
63+
* @param {Object} [variables]
64+
* @returns {String}
65+
*/
66+
translate(phrase, variables) {
67+
return translate(this.props.preferredLocale, phrase, variables);
68+
}
69+
70+
/**
71+
* @param {Number} number
72+
* @param {Intl.NumberFormatOptions} options
73+
* @returns {String}
74+
*/
75+
numberFormat(number, options) {
76+
return numberFormat(this.props.preferredLocale, number, options);
77+
}
78+
79+
/**
80+
* @param {Number} timestamp
81+
* @returns {String}
82+
*/
83+
timestampToRelative(timestamp) {
84+
return DateUtils.timestampToRelative(this.props.preferredLocale, timestamp);
85+
}
86+
87+
/**
88+
* @param {Number} timestamp
89+
* @param {Boolean} [includeTimezone]
90+
* @returns {String}
91+
*/
92+
timestampToDateTime(timestamp, includeTimezone) {
93+
return DateUtils.timestampToDateTime(
94+
this.props.preferredLocale,
95+
timestamp,
96+
includeTimezone,
97+
);
98+
}
99+
100+
/**
101+
* @param {Number} number
102+
* @returns {String}
103+
*/
104+
toLocalPhone(number) {
105+
return toLocalPhone(this.props.preferredLocale, number);
106+
}
107+
108+
/**
109+
* @param {Number} number
110+
* @returns {String}
111+
*/
112+
fromLocalPhone(number) {
113+
return fromLocalPhone(this.props.preferredLocale, number);
114+
}
115+
116+
render() {
117+
return (
118+
<WrappedComponent
119+
// eslint-disable-next-line react/jsx-props-no-spreading
120+
{...this.props}
121+
ref={this.props.forwardedRef}
122+
translate={this.translate}
123+
numberFormat={this.numberFormat}
124+
timestampToRelative={this.timestampToRelative}
125+
timestampToDateTime={this.timestampToDateTime}
126+
toLocalPhone={this.toLocalPhone}
127+
fromLocalPhone={this.fromLocalPhone}
128+
/>
129+
);
130+
}
131+
}
132+
133+
WithLocalize.propTypes = propTypes;
134+
WithLocalize.defaultProps = defaultProps;
135+
136+
const withForwardedRef = React.forwardRef((props, ref) => (
74137
// eslint-disable-next-line react/jsx-props-no-spreading
75138
<WithLocalize {...props} forwardedRef={ref} />
76139
));
77-
}
78-
export default compose(
79-
withOnyx({
140+
141+
withForwardedRef.displayName = `withLocalize(${getComponentDisplayName(WrappedComponent)})`;
142+
143+
return withOnyx({
80144
preferredLocale: {
81145
key: ONYXKEYS.NVP_PREFERRED_LOCALE,
82146
},
83-
}),
84-
withLocalizeHOC,
85-
);
147+
})(withForwardedRef);
148+
};
86149

87150
export {
88151
withLocalizePropTypes,

‎src/libs/LocalePhoneNumber.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import translations from '../languages/translations';
1010
*
1111
* @param {String} locale eg 'en', 'es-ES'
1212
* @param {String} number
13-
* @returns {string}
13+
* @returns {String}
1414
*/
1515
function toLocalPhone(locale, number) {
1616
const numString = lodashTrim(number);
@@ -31,7 +31,7 @@ function toLocalPhone(locale, number) {
3131
*
3232
* @param {String} locale eg 'en', 'es-ES'
3333
* @param {String} number
34-
* @returns {string}
34+
* @returns {String}
3535
*/
3636
function fromLocalPhone(locale, number) {
3737
const numString = lodashTrim(number);

‎src/pages/home/report/ReportActionContextMenu.js

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import {
1414
import ContextMenuItem from '../../../components/ContextMenuItem';
1515
import ReportActionPropTypes from './ReportActionPropTypes';
1616
import Clipboard from '../../../libs/Clipboard';
17-
import compose from '../../../libs/compose';
1817
import {isReportMessageAttachment, canEditReportAction, canDeleteReportAction} from '../../../libs/reportUtils';
1918
import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
2019
import ReportActionComposeFocusManager from '../../../libs/ReportActionComposeFocusManager';
@@ -197,6 +196,4 @@ class ReportActionContextMenu extends React.Component {
197196
ReportActionContextMenu.propTypes = propTypes;
198197
ReportActionContextMenu.defaultProps = defaultProps;
199198

200-
export default compose(
201-
withLocalize,
202-
)(ReportActionContextMenu);
199+
export default withLocalize(ReportActionContextMenu);

‎src/pages/home/report/ReportActionItemSingle.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,8 @@ const ReportActionItemSingle = ({
9595

9696
ReportActionItemSingle.propTypes = propTypes;
9797
ReportActionItemSingle.defaultProps = defaultProps;
98+
ReportActionItemSingle.displayName = 'ReportActionItemSingle';
99+
98100
export default compose(
99101
withLocalize,
100102
withOnyx({

‎src/pages/home/report/ReportView.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ const ReportView = ({reportID, session}) => (
4747

4848
ReportView.propTypes = propTypes;
4949
ReportView.defaultProps = defaultProps;
50+
ReportView.displayName = 'ReportView';
5051

5152
export default withOnyx({
5253
session: {

0 commit comments

Comments
 (0)