@zohodesk/i18n 1.0.0-beta.23 → 1.0.0-beta.24

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 (44) hide show
  1. package/README.md +97 -92
  2. package/es/components/__tests__/__snapshots__/DateTimeDiffFormat.spec.js.snap +258 -258
  3. package/es/components/__tests__/__snapshots__/FormatText.spec.js.snap +17 -17
  4. package/es/components/__tests__/__snapshots__/HOCI18N.spec.js.snap +15 -15
  5. package/es/components/__tests__/__snapshots__/I18N.spec.js.snap +17 -17
  6. package/es/components/__tests__/__snapshots__/I18NProvider.spec.js.snap +13 -13
  7. package/es/components/__tests__/__snapshots__/PluralFormat.spec.js.snap +17 -17
  8. package/es/components/__tests__/__snapshots__/UserTimeDiffFormat.spec.js.snap +366 -366
  9. package/es/index.js +1 -1
  10. package/es/utils.js +62 -9
  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/lib/index.js +18 -0
  19. package/lib/utils.js +65 -9
  20. package/package.json +29 -29
  21. package/src/I18NContext.js +2 -2
  22. package/src/components/DateTimeDiffFormat.js +256 -256
  23. package/src/components/FormatText.js +14 -14
  24. package/src/components/HOCI18N.js +37 -37
  25. package/src/components/I18N.js +74 -74
  26. package/src/components/I18NProvider.js +110 -110
  27. package/src/components/PluralFormat.js +37 -37
  28. package/src/components/UserTimeDiffFormat.js +97 -97
  29. package/src/components/__tests__/DateTimeDiffFormat.spec.js +618 -618
  30. package/src/components/__tests__/FormatText.spec.js +26 -26
  31. package/src/components/__tests__/HOCI18N.spec.js +33 -33
  32. package/src/components/__tests__/I18N.spec.js +29 -29
  33. package/src/components/__tests__/I18NProvider.spec.js +65 -65
  34. package/src/components/__tests__/PluralFormat.spec.js +27 -27
  35. package/src/components/__tests__/UserTimeDiffFormat.spec.js +1076 -1076
  36. package/src/components/__tests__/__snapshots__/DateTimeDiffFormat.spec.js.snap +258 -258
  37. package/src/components/__tests__/__snapshots__/FormatText.spec.js.snap +17 -17
  38. package/src/components/__tests__/__snapshots__/HOCI18N.spec.js.snap +15 -15
  39. package/src/components/__tests__/__snapshots__/I18N.spec.js.snap +17 -17
  40. package/src/components/__tests__/__snapshots__/I18NProvider.spec.js.snap +13 -13
  41. package/src/components/__tests__/__snapshots__/PluralFormat.spec.js.snap +17 -17
  42. package/src/components/__tests__/__snapshots__/UserTimeDiffFormat.spec.js.snap +366 -366
  43. package/src/index.js +36 -33
  44. package/src/utils.js +585 -527
@@ -1,74 +1,74 @@
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
- props['data-test-id'] = this.props.dataId;
45
- }
46
- if (this.props.isHtml) {
47
- let dangerouslySetInnerHTML = {
48
- __html: HTMLPurifier.sanitize(this.getI18NValue())
49
- };
50
-
51
- return React.createElement(
52
- this.props.tag,
53
- Object.assign(props, { dangerouslySetInnerHTML })
54
- );
55
- }
56
- return React.createElement(this.props.tag, props, this.getI18NValue());
57
- }
58
-
59
- render() {
60
- return this.createElement();
61
- }
62
- }
63
- I18N.propTypes = {
64
- i18NKey: PropTypes.string.isRequired,
65
- isHtml: PropTypes.bool,
66
- tag: PropTypes.string,
67
- dataId: PropTypes.string,
68
- values: PropTypes.oneOfType([PropTypes.string, PropTypes.array])
69
- };
70
- I18N.defaultProps = {
71
- tag: 'span',
72
- isHtml: false
73
- };
74
- 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
+ props['data-test-id'] = this.props.dataId;
45
+ }
46
+ if (this.props.isHtml) {
47
+ let dangerouslySetInnerHTML = {
48
+ __html: HTMLPurifier.sanitize(this.getI18NValue())
49
+ };
50
+
51
+ return React.createElement(
52
+ this.props.tag,
53
+ Object.assign(props, { dangerouslySetInnerHTML })
54
+ );
55
+ }
56
+ return React.createElement(this.props.tag, props, this.getI18NValue());
57
+ }
58
+
59
+ render() {
60
+ return this.createElement();
61
+ }
62
+ }
63
+ I18N.propTypes = {
64
+ i18NKey: PropTypes.string.isRequired,
65
+ isHtml: PropTypes.bool,
66
+ tag: PropTypes.string,
67
+ dataId: PropTypes.string,
68
+ values: PropTypes.oneOfType([PropTypes.string, PropTypes.array])
69
+ };
70
+ I18N.defaultProps = {
71
+ tag: 'span',
72
+ isHtml: false
73
+ };
74
+ I18N.contextType = I18NContext;
@@ -1,110 +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
- 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
+ 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,97 +1,97 @@
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
- isDateField
28
- } = this.props;
29
- let { tzData, timeFormat, datePattern, isEnabledCurrentYear } =
30
- this.context || {};
31
-
32
- if (!format && !others) {
33
- format = ({ dateTimeFormat, dateFormat, timeFormat }) => {
34
- displayType === 'dateTime'
35
- ? dateTimeFormat
36
- : displayType === 'date'
37
- ? dateFormat
38
- : timeFormat;
39
- };
40
- }
41
-
42
- return (
43
- <DateTimeDiffFormat
44
- type={type}
45
- page={page}
46
- isNeedTime={isNeedTime}
47
- from={currentTimeUTCString}
48
- fromTzData={tzData}
49
- to={to}
50
- toTzData={tzData}
51
- today={today}
52
- yesterday={yesterday}
53
- tomorrow={tomorrow}
54
- others={others}
55
- ago={ago}
56
- later={later}
57
- format={format}
58
- title={title}
59
- className={className}
60
- dataId={dataId}
61
- isOverdue={isOverdue}
62
- timeFormat={timeFormat}
63
- datePattern={datePattern}
64
- isEnabledCurrentYear={isEnabledCurrentYear}
65
- isDateField={isDateField}
66
- />
67
- );
68
- }
69
- }
70
- UserTimeDiffFormat.propTypes = {
71
- ago: PropTypes.string,
72
- className: PropTypes.string,
73
- dataId: PropTypes.string,
74
- displayType: PropTypes.oneOf(['date', 'time', 'dateTime']),
75
- format: PropTypes.func,
76
- isDateField: PropTypes.bool,
77
- later: PropTypes.string,
78
- others: PropTypes.func,
79
- title: PropTypes.string,
80
- to: PropTypes.string,
81
- today: PropTypes.oneOfType([
82
- PropTypes.string,
83
- PropTypes.object,
84
- PropTypes.func,
85
- ]),
86
- tomorrow: PropTypes.oneOfType([
87
- PropTypes.string,
88
- PropTypes.object,
89
- PropTypes.func,
90
- ]),
91
- yesterday: PropTypes.oneOfType([
92
- PropTypes.string,
93
- PropTypes.object,
94
- PropTypes.func,
95
- ]),
96
- };
97
- 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
+ isDateField
28
+ } = this.props;
29
+ let { tzData, timeFormat, datePattern, isEnabledCurrentYear } =
30
+ this.context || {};
31
+
32
+ if (!format && !others) {
33
+ format = ({ dateTimeFormat, dateFormat, timeFormat }) => {
34
+ displayType === 'dateTime'
35
+ ? dateTimeFormat
36
+ : displayType === 'date'
37
+ ? dateFormat
38
+ : timeFormat;
39
+ };
40
+ }
41
+
42
+ return (
43
+ <DateTimeDiffFormat
44
+ type={type}
45
+ page={page}
46
+ isNeedTime={isNeedTime}
47
+ from={currentTimeUTCString}
48
+ fromTzData={tzData}
49
+ to={to}
50
+ toTzData={tzData}
51
+ today={today}
52
+ yesterday={yesterday}
53
+ tomorrow={tomorrow}
54
+ others={others}
55
+ ago={ago}
56
+ later={later}
57
+ format={format}
58
+ title={title}
59
+ className={className}
60
+ dataId={dataId}
61
+ isOverdue={isOverdue}
62
+ timeFormat={timeFormat}
63
+ datePattern={datePattern}
64
+ isEnabledCurrentYear={isEnabledCurrentYear}
65
+ isDateField={isDateField}
66
+ />
67
+ );
68
+ }
69
+ }
70
+ UserTimeDiffFormat.propTypes = {
71
+ ago: PropTypes.string,
72
+ className: PropTypes.string,
73
+ dataId: PropTypes.string,
74
+ displayType: PropTypes.oneOf(['date', 'time', 'dateTime']),
75
+ format: PropTypes.func,
76
+ isDateField: PropTypes.bool,
77
+ later: PropTypes.string,
78
+ others: PropTypes.func,
79
+ title: PropTypes.string,
80
+ to: PropTypes.string,
81
+ today: PropTypes.oneOfType([
82
+ PropTypes.string,
83
+ PropTypes.object,
84
+ PropTypes.func,
85
+ ]),
86
+ tomorrow: PropTypes.oneOfType([
87
+ PropTypes.string,
88
+ PropTypes.object,
89
+ PropTypes.func,
90
+ ]),
91
+ yesterday: PropTypes.oneOfType([
92
+ PropTypes.string,
93
+ PropTypes.object,
94
+ PropTypes.func,
95
+ ]),
96
+ };
97
+ UserTimeDiffFormat.contextType = I18NContext;