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

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 (62) hide show
  1. package/README.md +73 -69
  2. package/es/components/HOCI18N.js +33 -30
  3. package/es/components/UserTimeDiffFormat.js +6 -5
  4. package/es/components/__tests__/DateTimeDiffFormat.spec.js +177 -136
  5. package/es/components/__tests__/FormatText.spec.js +0 -1
  6. package/es/components/__tests__/HOCI18N.spec.js +0 -1
  7. package/es/components/__tests__/I18N.spec.js +0 -2
  8. package/es/components/__tests__/I18NProvider.spec.js +0 -1
  9. package/es/components/__tests__/PluralFormat.spec.js +0 -1
  10. package/es/components/__tests__/UserTimeDiffFormat.spec.js +287 -206
  11. package/es/components/__tests__/__snapshots__/DateTimeDiffFormat.spec.js.snap +258 -258
  12. package/es/components/__tests__/__snapshots__/FormatText.spec.js.snap +17 -17
  13. package/es/components/__tests__/__snapshots__/HOCI18N.spec.js.snap +15 -15
  14. package/es/components/__tests__/__snapshots__/I18N.spec.js.snap +17 -17
  15. package/es/components/__tests__/__snapshots__/I18NProvider.spec.js.snap +13 -13
  16. package/es/components/__tests__/__snapshots__/PluralFormat.spec.js.snap +17 -17
  17. package/es/components/__tests__/__snapshots__/UserTimeDiffFormat.spec.js.snap +366 -366
  18. package/es/index.js +1 -1
  19. package/es/utils.js +51 -12
  20. package/lib/components/DateTimeDiffFormat.js +3 -3
  21. package/lib/components/FormatText.js +3 -3
  22. package/lib/components/HOCI18N.js +3 -3
  23. package/lib/components/I18N.js +3 -3
  24. package/lib/components/I18NProvider.js +4 -4
  25. package/lib/components/PluralFormat.js +3 -3
  26. package/lib/components/UserTimeDiffFormat.js +3 -3
  27. package/lib/components/__tests__/I18NProvider.spec.js +1 -1
  28. package/lib/components/__tests__/UserTimeDiffFormat.spec.js +1 -1
  29. package/lib/components/__tests__/__snapshots__/DateTimeDiffFormat.spec.js.snap +258 -258
  30. package/lib/components/__tests__/__snapshots__/FormatText.spec.js.snap +17 -17
  31. package/lib/components/__tests__/__snapshots__/HOCI18N.spec.js.snap +15 -15
  32. package/lib/components/__tests__/__snapshots__/I18N.spec.js.snap +17 -17
  33. package/lib/components/__tests__/__snapshots__/I18NProvider.spec.js.snap +13 -13
  34. package/lib/components/__tests__/__snapshots__/PluralFormat.spec.js.snap +17 -17
  35. package/lib/components/__tests__/__snapshots__/UserTimeDiffFormat.spec.js.snap +366 -366
  36. package/lib/index.js +58 -52
  37. package/lib/utils.js +58 -20
  38. package/package.json +28 -28
  39. package/src/I18NContext.js +2 -2
  40. package/src/components/DateTimeDiffFormat.js +254 -254
  41. package/src/components/FormatText.js +14 -14
  42. package/src/components/HOCI18N.js +37 -37
  43. package/src/components/I18N.js +72 -72
  44. package/src/components/I18NProvider.js +106 -106
  45. package/src/components/PluralFormat.js +37 -37
  46. package/src/components/UserTimeDiffFormat.js +94 -94
  47. package/src/components/__tests__/DateTimeDiffFormat.spec.js +618 -618
  48. package/src/components/__tests__/FormatText.spec.js +26 -26
  49. package/src/components/__tests__/HOCI18N.spec.js +33 -33
  50. package/src/components/__tests__/I18N.spec.js +29 -29
  51. package/src/components/__tests__/I18NProvider.spec.js +65 -65
  52. package/src/components/__tests__/PluralFormat.spec.js +27 -27
  53. package/src/components/__tests__/UserTimeDiffFormat.spec.js +1076 -1076
  54. package/src/components/__tests__/__snapshots__/DateTimeDiffFormat.spec.js.snap +258 -258
  55. package/src/components/__tests__/__snapshots__/FormatText.spec.js.snap +17 -17
  56. package/src/components/__tests__/__snapshots__/HOCI18N.spec.js.snap +15 -15
  57. package/src/components/__tests__/__snapshots__/I18N.spec.js.snap +17 -17
  58. package/src/components/__tests__/__snapshots__/I18NProvider.spec.js.snap +13 -13
  59. package/src/components/__tests__/__snapshots__/PluralFormat.spec.js.snap +17 -17
  60. package/src/components/__tests__/__snapshots__/UserTimeDiffFormat.spec.js.snap +366 -366
  61. package/src/index.js +33 -32
  62. package/src/utils.js +527 -497
@@ -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,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
- 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
+ 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,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;