@zohodesk/i18n 1.0.0-beta.18 → 1.0.0-beta.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/README.md +76 -73
  2. package/es/components/I18NProvider.js +9 -2
  3. package/es/components/__tests__/__snapshots__/DateTimeDiffFormat.spec.js.snap +258 -258
  4. package/es/components/__tests__/__snapshots__/FormatText.spec.js.snap +17 -17
  5. package/es/components/__tests__/__snapshots__/HOCI18N.spec.js.snap +15 -15
  6. package/es/components/__tests__/__snapshots__/I18N.spec.js.snap +17 -17
  7. package/es/components/__tests__/__snapshots__/I18NProvider.spec.js.snap +13 -13
  8. package/es/components/__tests__/__snapshots__/PluralFormat.spec.js.snap +17 -17
  9. package/es/components/__tests__/__snapshots__/UserTimeDiffFormat.spec.js.snap +366 -366
  10. package/lib/components/I18NProvider.js +10 -2
  11. package/lib/components/__tests__/__snapshots__/DateTimeDiffFormat.spec.js.snap +258 -258
  12. package/lib/components/__tests__/__snapshots__/FormatText.spec.js.snap +17 -17
  13. package/lib/components/__tests__/__snapshots__/HOCI18N.spec.js.snap +15 -15
  14. package/lib/components/__tests__/__snapshots__/I18N.spec.js.snap +17 -17
  15. package/lib/components/__tests__/__snapshots__/I18NProvider.spec.js.snap +13 -13
  16. package/lib/components/__tests__/__snapshots__/PluralFormat.spec.js.snap +17 -17
  17. package/lib/components/__tests__/__snapshots__/UserTimeDiffFormat.spec.js.snap +366 -366
  18. package/package.json +28 -28
  19. package/src/I18NContext.js +2 -2
  20. package/src/components/DateTimeDiffFormat.js +254 -254
  21. package/src/components/FormatText.js +14 -14
  22. package/src/components/HOCI18N.js +37 -37
  23. package/src/components/I18N.js +72 -72
  24. package/src/components/I18NProvider.js +110 -106
  25. package/src/components/PluralFormat.js +37 -37
  26. package/src/components/UserTimeDiffFormat.js +94 -94
  27. package/src/components/__tests__/DateTimeDiffFormat.spec.js +618 -618
  28. package/src/components/__tests__/FormatText.spec.js +26 -26
  29. package/src/components/__tests__/HOCI18N.spec.js +33 -33
  30. package/src/components/__tests__/I18N.spec.js +29 -29
  31. package/src/components/__tests__/I18NProvider.spec.js +65 -65
  32. package/src/components/__tests__/PluralFormat.spec.js +27 -27
  33. package/src/components/__tests__/UserTimeDiffFormat.spec.js +1076 -1076
  34. package/src/components/__tests__/__snapshots__/DateTimeDiffFormat.spec.js.snap +258 -258
  35. package/src/components/__tests__/__snapshots__/FormatText.spec.js.snap +17 -17
  36. package/src/components/__tests__/__snapshots__/HOCI18N.spec.js.snap +15 -15
  37. package/src/components/__tests__/__snapshots__/I18N.spec.js.snap +17 -17
  38. package/src/components/__tests__/__snapshots__/I18NProvider.spec.js.snap +13 -13
  39. package/src/components/__tests__/__snapshots__/PluralFormat.spec.js.snap +17 -17
  40. package/src/components/__tests__/__snapshots__/UserTimeDiffFormat.spec.js.snap +366 -366
  41. package/src/index.js +33 -33
  42. package/src/utils.js +527 -527
@@ -1,72 +1,72 @@
1
- import React, { Children } from 'react';
2
- import PropTypes from 'prop-types';
3
- import { replaceI18NValuesWithRegex, unescapeUnicode } from '../utils';
4
- import { HTMLPurifier } from '@zoho/SecurityJS';
5
- import { I18NContext } from '../I18NContext';
6
-
7
- export default class I18N extends React.Component {
8
- constructor(props) {
9
- super(props);
10
- this.getI18NValue = this.getI18NValue.bind(this);
11
- this.createElement = this.createElement.bind(this);
12
- }
13
-
14
- getI18NValue() {
15
- const { i18NKey: key, values } = this.props;
16
- const { i18n } = this.context || {};
17
- if (typeof i18n === 'undefined') {
18
- return key;
19
- }
20
- let i18nStr = i18n[key];
21
- if (i18nStr === undefined) {
22
- return key;
23
- }
24
- i18nStr = replaceI18NValuesWithRegex(i18nStr, values);
25
- return unescapeUnicode(i18nStr);
26
- }
27
-
28
- createElement() {
29
- const props = Object.keys(this.props).reduce((result, nextKey) => {
30
- if (
31
- nextKey != 'i18NKey' &&
32
- nextKey != 'tag' &&
33
- nextKey != 'values' &&
34
- nextKey != 'isHtml' &&
35
- nextKey != 'dataId'
36
- ) {
37
- result[nextKey] = this.props[nextKey];
38
- }
39
- return result;
40
- }, {});
41
- //const child=this.getI18NValue();
42
- if (this.props.dataId) {
43
- props['data-id'] = this.props.dataId;
44
- }
45
- if (this.props.isHtml) {
46
- let dangerouslySetInnerHTML = {
47
- __html: HTMLPurifier.sanitize(this.getI18NValue())
48
- };
49
-
50
- return React.createElement(
51
- this.props.tag,
52
- Object.assign(props, { dangerouslySetInnerHTML })
53
- );
54
- }
55
- return React.createElement(this.props.tag, props, this.getI18NValue());
56
- }
57
-
58
- render() {
59
- return this.createElement();
60
- }
61
- }
62
- I18N.propTypes = {
63
- i18NKey: PropTypes.string.isRequired,
64
- isHtml: PropTypes.bool,
65
- tag: PropTypes.string,
66
- values: PropTypes.oneOfType([PropTypes.string, PropTypes.array])
67
- };
68
- I18N.defaultProps = {
69
- tag: 'span',
70
- isHtml: false
71
- };
72
- I18N.contextType = I18NContext;
1
+ import React, { Children } from 'react';
2
+ import PropTypes from 'prop-types';
3
+ import { replaceI18NValuesWithRegex, unescapeUnicode } from '../utils';
4
+ import { HTMLPurifier } from '@zoho/SecurityJS';
5
+ import { I18NContext } from '../I18NContext';
6
+
7
+ export default class I18N extends React.Component {
8
+ constructor(props) {
9
+ super(props);
10
+ this.getI18NValue = this.getI18NValue.bind(this);
11
+ this.createElement = this.createElement.bind(this);
12
+ }
13
+
14
+ getI18NValue() {
15
+ const { i18NKey: key, values } = this.props;
16
+ const { i18n } = this.context || {};
17
+ if (typeof i18n === 'undefined') {
18
+ return key;
19
+ }
20
+ let i18nStr = i18n[key];
21
+ if (i18nStr === undefined) {
22
+ return key;
23
+ }
24
+ i18nStr = replaceI18NValuesWithRegex(i18nStr, values);
25
+ return unescapeUnicode(i18nStr);
26
+ }
27
+
28
+ createElement() {
29
+ const props = Object.keys(this.props).reduce((result, nextKey) => {
30
+ if (
31
+ nextKey != 'i18NKey' &&
32
+ nextKey != 'tag' &&
33
+ nextKey != 'values' &&
34
+ nextKey != 'isHtml' &&
35
+ nextKey != 'dataId'
36
+ ) {
37
+ result[nextKey] = this.props[nextKey];
38
+ }
39
+ return result;
40
+ }, {});
41
+ //const child=this.getI18NValue();
42
+ if (this.props.dataId) {
43
+ props['data-id'] = this.props.dataId;
44
+ }
45
+ if (this.props.isHtml) {
46
+ let dangerouslySetInnerHTML = {
47
+ __html: HTMLPurifier.sanitize(this.getI18NValue())
48
+ };
49
+
50
+ return React.createElement(
51
+ this.props.tag,
52
+ Object.assign(props, { dangerouslySetInnerHTML })
53
+ );
54
+ }
55
+ return React.createElement(this.props.tag, props, this.getI18NValue());
56
+ }
57
+
58
+ render() {
59
+ return this.createElement();
60
+ }
61
+ }
62
+ I18N.propTypes = {
63
+ i18NKey: PropTypes.string.isRequired,
64
+ isHtml: PropTypes.bool,
65
+ tag: PropTypes.string,
66
+ values: PropTypes.oneOfType([PropTypes.string, PropTypes.array])
67
+ };
68
+ I18N.defaultProps = {
69
+ tag: 'span',
70
+ isHtml: false
71
+ };
72
+ I18N.contextType = I18NContext;
@@ -1,106 +1,110 @@
1
- import React from 'react';
2
- import PropTypes from 'prop-types';
3
- import { getI18NValue, userDateFormat } from '../utils';
4
- import { I18NContext } from '../I18NContext';
5
-
6
- const emptyObj = {};
7
- const dummy = (key, values) => key;
8
-
9
- export const i18NProviderUtils = {
10
- getI18NValue: dummy,
11
- userDateFormat: dummy,
12
- };
13
-
14
- export default class I18NProvider extends React.Component {
15
- constructor(props, context) {
16
- super(props, context);
17
- i18NProviderUtils.getI18NValue = getI18NValue(props.i18n);
18
- i18NProviderUtils.userDateFormat = userDateFormat(
19
- i18NProviderUtils.getI18NValue,
20
- props.tzData,
21
- props.timeFormat,
22
- props.datePattern,
23
- props.isEnabledCurrentYear
24
- );
25
- }
26
-
27
- componentDidUpdate(next) {
28
- let {
29
- i18n,
30
- timeZone,
31
- datePattern,
32
- timeFormat,
33
- direction,
34
- onChange,
35
- tzData,
36
- } = this.props;
37
- if (
38
- i18n !== next.i18n ||
39
- timeZone !== next.timeZone ||
40
- datePattern !== next.datePattern ||
41
- timeFormat !== next.timeFormat ||
42
- direction !== next.direction ||
43
- tzData !== next.tzData
44
- ) {
45
- this.promise = new Promise((res, rej) => {
46
- this.resolve = res;
47
- this.reject = rej;
48
- }).then(
49
- () => {
50
- i18NProviderUtils.getI18NValue = getI18NValue(nextProps.i18n);
51
- i18NProviderUtils.userDateFormat = userDateFormat(
52
- i18NProviderUtils.getI18NValue,
53
- props.tzData,
54
- props.timeFormat,
55
- props.datePattern,
56
- this.props.isEnabledCurrentYear
57
- );
58
- this.promise = null;
59
- },
60
- () => {
61
- this.promise = null;
62
- }
63
- );
64
- onChange && onChange(this.resolve, this.reject);
65
- }
66
- }
67
-
68
- render() {
69
- return (
70
- <I18NContext.Provider
71
- value={{
72
- i18n: this.props.i18n,
73
- direction: this.props.direction,
74
- timeZone: this.props.timeZone,
75
- datePattern: this.props.datePattern,
76
- timeFormat: this.props.timeFormat,
77
- isEnabledCurrentYear: this.props.isEnabledCurrentYear,
78
- tzData: this.props.tzData,
79
- }}
80
- >
81
- {this.props.children}
82
- </I18NContext.Provider>
83
- );
84
- }
85
- }
86
-
87
- I18NProvider.defaultProps = {
88
- i18n: emptyObj,
89
- timeZone: '',
90
- datePattern: '',
91
- timeFormat: '',
92
- isEnabledCurrentYear: '',
93
- direction: 'ltr',
94
- };
95
-
96
- I18NProvider.propTypes = {
97
- children: PropTypes.element.isRequired,
98
- datePattern: PropTypes.string,
99
- isEnabledCurrentYear: PropTypes.string,
100
- direction: PropTypes.string,
101
- i18n: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
102
- onChange: PropTypes.func,
103
- timeFormat: PropTypes.string,
104
- timeZone: PropTypes.string,
105
- tzData: PropTypes.object,
106
- };
1
+ import React from 'react';
2
+ import PropTypes from 'prop-types';
3
+ import { getI18NValue, userDateFormat } from '../utils';
4
+ import { I18NContext } from '../I18NContext';
5
+
6
+ const emptyObj = {};
7
+ const dummy = (key, values) => key;
8
+
9
+ export const i18NProviderUtils = {
10
+ getI18NValue: dummy,
11
+ userDateFormat: dummy,
12
+ };
13
+
14
+ export default class I18NProvider extends React.Component {
15
+ constructor(props, context) {
16
+ super(props, context);
17
+ i18NProviderUtils.getI18NValue = getI18NValue(props.i18n);
18
+ if(props.tzData){
19
+ i18NProviderUtils.userDateFormat = userDateFormat(
20
+ i18NProviderUtils.getI18NValue,
21
+ props.tzData,
22
+ props.timeFormat,
23
+ props.datePattern,
24
+ props.isEnabledCurrentYear
25
+ );
26
+ }
27
+ }
28
+
29
+ componentDidUpdate(next) {
30
+ let {
31
+ i18n,
32
+ timeZone,
33
+ datePattern,
34
+ timeFormat,
35
+ direction,
36
+ onChange,
37
+ tzData,
38
+ } = this.props;
39
+ if (
40
+ i18n !== next.i18n ||
41
+ timeZone !== next.timeZone ||
42
+ datePattern !== next.datePattern ||
43
+ timeFormat !== next.timeFormat ||
44
+ direction !== next.direction ||
45
+ tzData !== next.tzData
46
+ ) {
47
+ this.promise = new Promise((res, rej) => {
48
+ this.resolve = res;
49
+ this.reject = rej;
50
+ }).then(
51
+ () => {
52
+ i18NProviderUtils.getI18NValue = getI18NValue(nextProps.i18n);
53
+ if(props.tzData){
54
+ i18NProviderUtils.userDateFormat = userDateFormat(
55
+ i18NProviderUtils.getI18NValue,
56
+ props.tzData,
57
+ props.timeFormat,
58
+ props.datePattern,
59
+ this.props.isEnabledCurrentYear
60
+ );
61
+ }
62
+ this.promise = null;
63
+ },
64
+ () => {
65
+ this.promise = null;
66
+ }
67
+ );
68
+ onChange && onChange(this.resolve, this.reject);
69
+ }
70
+ }
71
+
72
+ render() {
73
+ return (
74
+ <I18NContext.Provider
75
+ value={{
76
+ i18n: this.props.i18n,
77
+ direction: this.props.direction,
78
+ timeZone: this.props.timeZone,
79
+ datePattern: this.props.datePattern,
80
+ timeFormat: this.props.timeFormat,
81
+ isEnabledCurrentYear: this.props.isEnabledCurrentYear,
82
+ tzData: this.props.tzData,
83
+ }}
84
+ >
85
+ {this.props.children}
86
+ </I18NContext.Provider>
87
+ );
88
+ }
89
+ }
90
+
91
+ I18NProvider.defaultProps = {
92
+ i18n: emptyObj,
93
+ timeZone: '',
94
+ datePattern: '',
95
+ timeFormat: '',
96
+ isEnabledCurrentYear: '',
97
+ direction: 'ltr',
98
+ };
99
+
100
+ I18NProvider.propTypes = {
101
+ children: PropTypes.element.isRequired,
102
+ datePattern: PropTypes.string,
103
+ isEnabledCurrentYear: PropTypes.string,
104
+ direction: PropTypes.string,
105
+ i18n: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
106
+ onChange: PropTypes.func,
107
+ timeFormat: PropTypes.string,
108
+ timeZone: PropTypes.string,
109
+ tzData: PropTypes.object,
110
+ };
@@ -1,37 +1,37 @@
1
- import React from 'react';
2
- import PropTypes from 'prop-types';
3
- import FormatText from './FormatText';
4
-
5
- export default class PluralFormat extends React.Component {
6
- render() {
7
- const { one, many, zero, value } = this.props;
8
- let key = '',
9
- values = '';
10
- if (value > 1) {
11
- key = many;
12
- } else if (value == 1) {
13
- key = one;
14
- } else if (value == 0) {
15
- key = zero;
16
- }
17
- values = `${value}`;
18
-
19
- return (
20
- <FormatText
21
- {...this.props}
22
- i18NKey={key}
23
- values={values}
24
- one={null}
25
- many={null}
26
- zero={null}
27
- />
28
- );
29
- }
30
- }
31
- PluralFormat.propTypes = {
32
- many: PropTypes.string,
33
- one: PropTypes.string,
34
- tag: PropTypes.string,
35
- value: PropTypes.number,
36
- zero: PropTypes.string
37
- };
1
+ import React from 'react';
2
+ import PropTypes from 'prop-types';
3
+ import FormatText from './FormatText';
4
+
5
+ export default class PluralFormat extends React.Component {
6
+ render() {
7
+ const { one, many, zero, value } = this.props;
8
+ let key = '',
9
+ values = '';
10
+ if (value > 1) {
11
+ key = many;
12
+ } else if (value == 1) {
13
+ key = one;
14
+ } else if (value == 0) {
15
+ key = zero;
16
+ }
17
+ values = `${value}`;
18
+
19
+ return (
20
+ <FormatText
21
+ {...this.props}
22
+ i18NKey={key}
23
+ values={values}
24
+ one={null}
25
+ many={null}
26
+ zero={null}
27
+ />
28
+ );
29
+ }
30
+ }
31
+ PluralFormat.propTypes = {
32
+ many: PropTypes.string,
33
+ one: PropTypes.string,
34
+ tag: PropTypes.string,
35
+ value: PropTypes.number,
36
+ zero: PropTypes.string
37
+ };
@@ -1,94 +1,94 @@
1
- import React, { Component } from 'react';
2
- import PropTypes from 'prop-types';
3
- import DateTimeDiffFormat from './DateTimeDiffFormat';
4
- import { I18NContext } from '../I18NContext';
5
-
6
- export default class UserTimeDiffFormat extends Component {
7
- render() {
8
- let currentTime = new Date();
9
- let currentTimeUTCString = currentTime.toISOString();
10
- let {
11
- type,
12
- page,
13
- isNeedTime,
14
- to,
15
- today,
16
- yesterday,
17
- tomorrow,
18
- others,
19
- ago,
20
- later,
21
- format,
22
- title,
23
- className,
24
- displayType,
25
- dataId,
26
- isOverdue,
27
- } = this.props;
28
- let { tzData, timeFormat, datePattern, isEnabledCurrentYear } =
29
- this.context || {};
30
-
31
- if (!format && !others) {
32
- format = ({ dateTimeFormat, dateFormat, timeFormat }) => {
33
- displayType === 'dateTime'
34
- ? dateTimeFormat
35
- : displayType === 'date'
36
- ? dateFormat
37
- : timeFormat;
38
- };
39
- }
40
-
41
- return (
42
- <DateTimeDiffFormat
43
- type={type}
44
- page={page}
45
- isNeedTime={isNeedTime}
46
- from={currentTimeUTCString}
47
- fromTzData={tzData}
48
- to={to}
49
- toTzData={tzData}
50
- today={today}
51
- yesterday={yesterday}
52
- tomorrow={tomorrow}
53
- others={others}
54
- ago={ago}
55
- later={later}
56
- format={format}
57
- title={title}
58
- className={className}
59
- dataId={dataId}
60
- isOverdue={isOverdue}
61
- timeFormat={timeFormat}
62
- datePattern={datePattern}
63
- isEnabledCurrentYear={isEnabledCurrentYear}
64
- />
65
- );
66
- }
67
- }
68
- UserTimeDiffFormat.propTypes = {
69
- ago: PropTypes.string,
70
- className: PropTypes.string,
71
- dataId: PropTypes.string,
72
- displayType: PropTypes.oneOf(['date', 'time', 'dateTime']),
73
- format: PropTypes.func,
74
- later: PropTypes.string,
75
- others: PropTypes.func,
76
- title: PropTypes.string,
77
- to: PropTypes.string,
78
- today: PropTypes.oneOfType([
79
- PropTypes.string,
80
- PropTypes.object,
81
- PropTypes.func,
82
- ]),
83
- tomorrow: PropTypes.oneOfType([
84
- PropTypes.string,
85
- PropTypes.object,
86
- PropTypes.func,
87
- ]),
88
- yesterday: PropTypes.oneOfType([
89
- PropTypes.string,
90
- PropTypes.object,
91
- PropTypes.func,
92
- ]),
93
- };
94
- UserTimeDiffFormat.contextType = I18NContext;
1
+ import React, { Component } from 'react';
2
+ import PropTypes from 'prop-types';
3
+ import DateTimeDiffFormat from './DateTimeDiffFormat';
4
+ import { I18NContext } from '../I18NContext';
5
+
6
+ export default class UserTimeDiffFormat extends Component {
7
+ render() {
8
+ let currentTime = new Date();
9
+ let currentTimeUTCString = currentTime.toISOString();
10
+ let {
11
+ type,
12
+ page,
13
+ isNeedTime,
14
+ to,
15
+ today,
16
+ yesterday,
17
+ tomorrow,
18
+ others,
19
+ ago,
20
+ later,
21
+ format,
22
+ title,
23
+ className,
24
+ displayType,
25
+ dataId,
26
+ isOverdue,
27
+ } = this.props;
28
+ let { tzData, timeFormat, datePattern, isEnabledCurrentYear } =
29
+ this.context || {};
30
+
31
+ if (!format && !others) {
32
+ format = ({ dateTimeFormat, dateFormat, timeFormat }) => {
33
+ displayType === 'dateTime'
34
+ ? dateTimeFormat
35
+ : displayType === 'date'
36
+ ? dateFormat
37
+ : timeFormat;
38
+ };
39
+ }
40
+
41
+ return (
42
+ <DateTimeDiffFormat
43
+ type={type}
44
+ page={page}
45
+ isNeedTime={isNeedTime}
46
+ from={currentTimeUTCString}
47
+ fromTzData={tzData}
48
+ to={to}
49
+ toTzData={tzData}
50
+ today={today}
51
+ yesterday={yesterday}
52
+ tomorrow={tomorrow}
53
+ others={others}
54
+ ago={ago}
55
+ later={later}
56
+ format={format}
57
+ title={title}
58
+ className={className}
59
+ dataId={dataId}
60
+ isOverdue={isOverdue}
61
+ timeFormat={timeFormat}
62
+ datePattern={datePattern}
63
+ isEnabledCurrentYear={isEnabledCurrentYear}
64
+ />
65
+ );
66
+ }
67
+ }
68
+ UserTimeDiffFormat.propTypes = {
69
+ ago: PropTypes.string,
70
+ className: PropTypes.string,
71
+ dataId: PropTypes.string,
72
+ displayType: PropTypes.oneOf(['date', 'time', 'dateTime']),
73
+ format: PropTypes.func,
74
+ later: PropTypes.string,
75
+ others: PropTypes.func,
76
+ title: PropTypes.string,
77
+ to: PropTypes.string,
78
+ today: PropTypes.oneOfType([
79
+ PropTypes.string,
80
+ PropTypes.object,
81
+ PropTypes.func,
82
+ ]),
83
+ tomorrow: PropTypes.oneOfType([
84
+ PropTypes.string,
85
+ PropTypes.object,
86
+ PropTypes.func,
87
+ ]),
88
+ yesterday: PropTypes.oneOfType([
89
+ PropTypes.string,
90
+ PropTypes.object,
91
+ PropTypes.func,
92
+ ]),
93
+ };
94
+ UserTimeDiffFormat.contextType = I18NContext;