orc-shared 1.1.2 → 1.1.3
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.
- package/dist/components/Culture.js +106 -0
- package/dist/components/I18n.js +5 -2
- package/dist/components/MaterialUI/Inputs/DatePicker.js +10 -37
- package/dist/components/Provision.js +3 -1
- package/dist/utils/localizationHelper.js +11 -1
- package/package.json +1 -1
- package/src/components/Culture.js +25 -0
- package/src/components/Culture.test.js +86 -0
- package/src/components/I18n.js +4 -2
- package/src/components/I18n.test.js +32 -3
- package/src/components/MaterialUI/Inputs/DatePicker.js +5 -27
- package/src/components/MaterialUI/Inputs/DatePicker.test.js +6 -34
- package/src/components/Provision.js +2 -0
- package/src/utils/localizationHelper.js +12 -0
- package/src/utils/localizationHelper.test.js +64 -0
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.default = void 0;
|
|
5
|
+
|
|
6
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
7
|
+
|
|
8
|
+
var _reactRedux = require("react-redux");
|
|
9
|
+
|
|
10
|
+
var _locale = require("../selectors/locale");
|
|
11
|
+
|
|
12
|
+
var _reactDatepicker = require("react-datepicker");
|
|
13
|
+
|
|
14
|
+
var date_fns_locale = _interopRequireWildcard(require("date-fns/locale"));
|
|
15
|
+
|
|
16
|
+
var _localizationHelper = require("../utils/localizationHelper");
|
|
17
|
+
|
|
18
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
19
|
+
|
|
20
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
21
|
+
|
|
22
|
+
(function () {
|
|
23
|
+
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
|
|
24
|
+
enterModule && enterModule(module);
|
|
25
|
+
})();
|
|
26
|
+
|
|
27
|
+
(function () {
|
|
28
|
+
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
|
|
29
|
+
enterModule && enterModule(module);
|
|
30
|
+
})();
|
|
31
|
+
|
|
32
|
+
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
|
|
33
|
+
return a;
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
|
|
37
|
+
return a;
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
var Culture = function Culture() {
|
|
41
|
+
var _navigator$language;
|
|
42
|
+
|
|
43
|
+
var locale = (0, _reactRedux.useSelector)(_locale.currentLocaleOrDefault);
|
|
44
|
+
var language = (_navigator$language = navigator.language) != null ? _navigator$language : locale;
|
|
45
|
+
(0, _react.useMemo)(function () {
|
|
46
|
+
var fnsLocale = (0, _localizationHelper.findCorrespondingLocale)(date_fns_locale, language);
|
|
47
|
+
|
|
48
|
+
if (fnsLocale != null) {
|
|
49
|
+
(0, _reactDatepicker.registerLocale)(language, fnsLocale);
|
|
50
|
+
(0, _reactDatepicker.setDefaultLocale)(language);
|
|
51
|
+
}
|
|
52
|
+
}, [language]);
|
|
53
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
__signature__(Culture, "useSelector{locale}\nuseMemo{}", function () {
|
|
57
|
+
return [_reactRedux.useSelector];
|
|
58
|
+
});
|
|
59
|
+
|
|
60
|
+
__signature__(Culture, "useSelector{locale}\nuseMemo{}", function () {
|
|
61
|
+
return [_reactRedux.useSelector];
|
|
62
|
+
});
|
|
63
|
+
|
|
64
|
+
var _default = Culture;
|
|
65
|
+
var _default2 = _default;
|
|
66
|
+
var _default3 = _default2;
|
|
67
|
+
exports.default = _default3;
|
|
68
|
+
;
|
|
69
|
+
|
|
70
|
+
(function () {
|
|
71
|
+
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
|
|
72
|
+
|
|
73
|
+
if (!reactHotLoader) {
|
|
74
|
+
return;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
reactHotLoader.register(Culture, "Culture", "/home/vsts/work/1/s/src/components/Culture.js");
|
|
78
|
+
reactHotLoader.register(_default, "default", "/home/vsts/work/1/s/src/components/Culture.js");
|
|
79
|
+
})();
|
|
80
|
+
|
|
81
|
+
;
|
|
82
|
+
|
|
83
|
+
(function () {
|
|
84
|
+
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
|
|
85
|
+
leaveModule && leaveModule(module);
|
|
86
|
+
})();
|
|
87
|
+
|
|
88
|
+
;
|
|
89
|
+
|
|
90
|
+
(function () {
|
|
91
|
+
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
|
|
92
|
+
|
|
93
|
+
if (!reactHotLoader) {
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
reactHotLoader.register(Culture, "Culture", "/home/vsts/work/1/s/src/components/Culture.js");
|
|
98
|
+
reactHotLoader.register(_default2, "default", "/home/vsts/work/1/s/src/components/Culture.js");
|
|
99
|
+
})();
|
|
100
|
+
|
|
101
|
+
;
|
|
102
|
+
|
|
103
|
+
(function () {
|
|
104
|
+
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
|
|
105
|
+
leaveModule && leaveModule(module);
|
|
106
|
+
})();
|
package/dist/components/I18n.js
CHANGED
|
@@ -34,14 +34,17 @@ var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoader
|
|
|
34
34
|
};
|
|
35
35
|
|
|
36
36
|
var I18n = function I18n(props) {
|
|
37
|
+
var _navigator$language;
|
|
38
|
+
|
|
37
39
|
var locale = (0, _reactRedux.useSelector)(_locale.currentLocaleOrDefault);
|
|
38
40
|
|
|
39
41
|
var messages = require("translations/" + locale + ".json");
|
|
40
42
|
|
|
43
|
+
var language = (_navigator$language = navigator.language) != null ? _navigator$language : locale;
|
|
41
44
|
return /*#__PURE__*/_react.default.createElement(_reactIntl.IntlProvider, _extends({
|
|
42
|
-
key:
|
|
45
|
+
key: language // TODO: Remove this when react-intl suports new React context API
|
|
43
46
|
,
|
|
44
|
-
locale:
|
|
47
|
+
locale: language,
|
|
45
48
|
messages: messages
|
|
46
49
|
}, props));
|
|
47
50
|
};
|
|
@@ -9,7 +9,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
|
9
9
|
|
|
10
10
|
var _Icon = _interopRequireDefault(require("../DataDisplay/Icon"));
|
|
11
11
|
|
|
12
|
-
var _reactDatepicker =
|
|
12
|
+
var _reactDatepicker = _interopRequireDefault(require("react-datepicker"));
|
|
13
13
|
|
|
14
14
|
require("react-datepicker/dist/react-datepicker.css");
|
|
15
15
|
|
|
@@ -17,16 +17,8 @@ var _TimePicker = _interopRequireDefault(require("./TimePicker"));
|
|
|
17
17
|
|
|
18
18
|
var _styles = require("@material-ui/core/styles");
|
|
19
19
|
|
|
20
|
-
var _reactIntl = require("react-intl");
|
|
21
|
-
|
|
22
|
-
var _locale = require("date-fns/locale");
|
|
23
|
-
|
|
24
20
|
var _excluded = ["value", "useTime", "useDate", "onChange", "dateFormat", "showTimeZone", "timeInputLabel", "readOnly", "showTimeSelectOnly", "metadata", "timePickerTimeZone", "error"];
|
|
25
21
|
|
|
26
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
27
|
-
|
|
28
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
29
|
-
|
|
30
22
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
31
23
|
|
|
32
24
|
(function () {
|
|
@@ -55,9 +47,6 @@ var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoader
|
|
|
55
47
|
return a;
|
|
56
48
|
};
|
|
57
49
|
|
|
58
|
-
(0, _reactDatepicker.registerLocale)("fr-CA", _locale.frCA);
|
|
59
|
-
(0, _reactDatepicker.registerLocale)("en-US", _locale.enUS);
|
|
60
|
-
(0, _reactDatepicker.registerLocale)("it-IT", _locale.it);
|
|
61
50
|
var useStyles = (0, _styles.makeStyles)(function (theme) {
|
|
62
51
|
return {
|
|
63
52
|
container: {
|
|
@@ -164,23 +153,14 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
|
|
|
164
153
|
}
|
|
165
154
|
};
|
|
166
155
|
});
|
|
167
|
-
var AMPMLocales = ["en-US", "en-CA"];
|
|
168
156
|
|
|
169
|
-
var createFormat = function createFormat(useDate, useTime
|
|
157
|
+
var createFormat = function createFormat(useDate, useTime) {
|
|
170
158
|
if (useDate && !useTime) {
|
|
171
159
|
return "P";
|
|
172
160
|
} else if (useTime && !useDate) {
|
|
173
|
-
|
|
174
|
-
return "p";
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
return "HH:mm";
|
|
161
|
+
return "p";
|
|
178
162
|
} else {
|
|
179
|
-
|
|
180
|
-
return "P p";
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
return "P HH:mm";
|
|
163
|
+
return "P p";
|
|
184
164
|
}
|
|
185
165
|
};
|
|
186
166
|
|
|
@@ -202,9 +182,6 @@ var WrappedDatePicker = function WrappedDatePicker(_ref) {
|
|
|
202
182
|
error = _ref.error,
|
|
203
183
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
204
184
|
|
|
205
|
-
var _useIntl = (0, _reactIntl.useIntl)(),
|
|
206
|
-
locale = _useIntl.locale;
|
|
207
|
-
|
|
208
185
|
var classes = useStyles({
|
|
209
186
|
readOnly: readOnly
|
|
210
187
|
});
|
|
@@ -224,7 +201,7 @@ var WrappedDatePicker = function WrappedDatePicker(_ref) {
|
|
|
224
201
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
225
202
|
className: classes.datePickerContainer
|
|
226
203
|
}, /*#__PURE__*/_react.default.createElement(_reactDatepicker.default, _extends({}, props, {
|
|
227
|
-
dateFormat: dateFormat || createFormat(useDate, useTime
|
|
204
|
+
dateFormat: dateFormat || createFormat(useDate, useTime),
|
|
228
205
|
selected: startDate,
|
|
229
206
|
onChange: function onChange(date) {
|
|
230
207
|
return updateDate(date, metadata);
|
|
@@ -233,13 +210,11 @@ var WrappedDatePicker = function WrappedDatePicker(_ref) {
|
|
|
233
210
|
useTime: useTime != null ? useTime : false,
|
|
234
211
|
customTimeInput: useTime ? /*#__PURE__*/_react.default.createElement(_TimePicker.default, {
|
|
235
212
|
showTimeZone: showTimeZone,
|
|
236
|
-
showAMPM: AMPMLocales.includes(locale),
|
|
237
213
|
requestedTimeZone: timePickerTimeZone
|
|
238
214
|
}) : null,
|
|
239
215
|
timeInputLabel: timeInputLabel != null ? timeInputLabel : "",
|
|
240
216
|
readOnly: readOnly,
|
|
241
|
-
showTimeSelectOnly: showTimeSelectOnly
|
|
242
|
-
locale: locale
|
|
217
|
+
showTimeSelectOnly: showTimeSelectOnly
|
|
243
218
|
}))), !readOnly ? /*#__PURE__*/_react.default.createElement("div", {
|
|
244
219
|
className: classes.iconContainer
|
|
245
220
|
}, /*#__PURE__*/_react.default.createElement(_Icon.default, {
|
|
@@ -250,12 +225,12 @@ var WrappedDatePicker = function WrappedDatePicker(_ref) {
|
|
|
250
225
|
}, error));
|
|
251
226
|
};
|
|
252
227
|
|
|
253
|
-
__signature__(WrappedDatePicker, "
|
|
254
|
-
return [
|
|
228
|
+
__signature__(WrappedDatePicker, "useStyles{classes}", function () {
|
|
229
|
+
return [useStyles];
|
|
255
230
|
});
|
|
256
231
|
|
|
257
|
-
__signature__(WrappedDatePicker, "
|
|
258
|
-
return [
|
|
232
|
+
__signature__(WrappedDatePicker, "useStyles{classes}", function () {
|
|
233
|
+
return [useStyles];
|
|
259
234
|
});
|
|
260
235
|
|
|
261
236
|
var _default = WrappedDatePicker;
|
|
@@ -272,7 +247,6 @@ exports.default = _default3;
|
|
|
272
247
|
}
|
|
273
248
|
|
|
274
249
|
reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/DatePicker.js");
|
|
275
|
-
reactHotLoader.register(AMPMLocales, "AMPMLocales", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/DatePicker.js");
|
|
276
250
|
reactHotLoader.register(createFormat, "createFormat", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/DatePicker.js");
|
|
277
251
|
reactHotLoader.register(WrappedDatePicker, "WrappedDatePicker", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/DatePicker.js");
|
|
278
252
|
reactHotLoader.register(_default, "default", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/DatePicker.js");
|
|
@@ -295,7 +269,6 @@ exports.default = _default3;
|
|
|
295
269
|
}
|
|
296
270
|
|
|
297
271
|
reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/DatePicker.js");
|
|
298
|
-
reactHotLoader.register(AMPMLocales, "AMPMLocales", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/DatePicker.js");
|
|
299
272
|
reactHotLoader.register(createFormat, "createFormat", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/DatePicker.js");
|
|
300
273
|
reactHotLoader.register(WrappedDatePicker, "WrappedDatePicker", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/DatePicker.js");
|
|
301
274
|
reactHotLoader.register(_default2, "default", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/DatePicker.js");
|
|
@@ -27,6 +27,8 @@ var _I18n = _interopRequireDefault(require("./I18n"));
|
|
|
27
27
|
|
|
28
28
|
var _InternetExplorerWarningMessage = _interopRequireDefault(require("./InternetExplorerWarningMessage"));
|
|
29
29
|
|
|
30
|
+
var _Culture = _interopRequireDefault(require("./Culture"));
|
|
31
|
+
|
|
30
32
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
31
33
|
|
|
32
34
|
(function () {
|
|
@@ -64,7 +66,7 @@ var Provision = function Provision(_ref) {
|
|
|
64
66
|
theme: theme
|
|
65
67
|
}, /*#__PURE__*/_react.default.createElement(_styles.MuiThemeProvider, {
|
|
66
68
|
theme: muiTheme
|
|
67
|
-
}, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Head.default, null), /*#__PURE__*/_react.default.createElement(GlobalStyle, null), /*#__PURE__*/_react.default.createElement(_Authenticate.default, null, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Fonts, null), /*#__PURE__*/_react.default.createElement(_DevPages.default, null, /*#__PURE__*/_react.default.createElement(_I18n.default, null, _react.default.Children.only(children), /*#__PURE__*/_react.default.createElement(_InternetExplorerWarningMessage.default, null))))))))));
|
|
69
|
+
}, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Head.default, null), /*#__PURE__*/_react.default.createElement(_Culture.default, null), /*#__PURE__*/_react.default.createElement(GlobalStyle, null), /*#__PURE__*/_react.default.createElement(_Authenticate.default, null, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Fonts, null), /*#__PURE__*/_react.default.createElement(_DevPages.default, null, /*#__PURE__*/_react.default.createElement(_I18n.default, null, _react.default.Children.only(children), /*#__PURE__*/_react.default.createElement(_InternetExplorerWarningMessage.default, null))))))))));
|
|
68
70
|
};
|
|
69
71
|
|
|
70
72
|
var _default = Provision;
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
exports.__esModule = true;
|
|
4
4
|
exports.default = void 0;
|
|
5
|
+
exports.findCorrespondingLocale = findCorrespondingLocale;
|
|
5
6
|
exports.getLocalization = getLocalization;
|
|
6
7
|
exports.getNotLocalizedString = getNotLocalizedString;
|
|
7
8
|
|
|
@@ -51,9 +52,16 @@ function getNotLocalizedString(value) {
|
|
|
51
52
|
return value && "[".concat(value, "]");
|
|
52
53
|
}
|
|
53
54
|
|
|
55
|
+
function findCorrespondingLocale(locales, language) {
|
|
56
|
+
var _ref, _ref2, _ref3, _ref4, _locales$language;
|
|
57
|
+
|
|
58
|
+
return (_ref = (_ref2 = (_ref3 = (_ref4 = (_locales$language = locales[language]) != null ? _locales$language : locales[language.replace(/-/g, "")]) != null ? _ref4 : locales[language.toLowerCase()]) != null ? _ref3 : locales[language.toLowerCase().replace(/-/g, "")]) != null ? _ref2 : locales[language.substring(0, 2).toLowerCase()]) != null ? _ref : null;
|
|
59
|
+
}
|
|
60
|
+
|
|
54
61
|
var _default = {
|
|
55
62
|
getLocalization: getLocalization,
|
|
56
|
-
getNotLocalizedString: getNotLocalizedString
|
|
63
|
+
getNotLocalizedString: getNotLocalizedString,
|
|
64
|
+
findCorrespondingLocale: findCorrespondingLocale
|
|
57
65
|
};
|
|
58
66
|
var _default2 = _default;
|
|
59
67
|
var _default3 = _default2;
|
|
@@ -69,6 +77,7 @@ exports.default = _default3;
|
|
|
69
77
|
|
|
70
78
|
reactHotLoader.register(getLocalization, "getLocalization", "/home/vsts/work/1/s/src/utils/localizationHelper.js");
|
|
71
79
|
reactHotLoader.register(getNotLocalizedString, "getNotLocalizedString", "/home/vsts/work/1/s/src/utils/localizationHelper.js");
|
|
80
|
+
reactHotLoader.register(findCorrespondingLocale, "findCorrespondingLocale", "/home/vsts/work/1/s/src/utils/localizationHelper.js");
|
|
72
81
|
reactHotLoader.register(_default, "default", "/home/vsts/work/1/s/src/utils/localizationHelper.js");
|
|
73
82
|
})();
|
|
74
83
|
|
|
@@ -90,6 +99,7 @@ exports.default = _default3;
|
|
|
90
99
|
|
|
91
100
|
reactHotLoader.register(getLocalization, "getLocalization", "/home/vsts/work/1/s/src/utils/localizationHelper.js");
|
|
92
101
|
reactHotLoader.register(getNotLocalizedString, "getNotLocalizedString", "/home/vsts/work/1/s/src/utils/localizationHelper.js");
|
|
102
|
+
reactHotLoader.register(findCorrespondingLocale, "findCorrespondingLocale", "/home/vsts/work/1/s/src/utils/localizationHelper.js");
|
|
93
103
|
reactHotLoader.register(_default2, "default", "/home/vsts/work/1/s/src/utils/localizationHelper.js");
|
|
94
104
|
})();
|
|
95
105
|
|
package/package.json
CHANGED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { useMemo } from "react";
|
|
3
|
+
import { useSelector } from "react-redux";
|
|
4
|
+
import { currentLocaleOrDefault } from "../selectors/locale";
|
|
5
|
+
import { registerLocale, setDefaultLocale } from "react-datepicker";
|
|
6
|
+
import * as date_fns_locale from "date-fns/locale";
|
|
7
|
+
import { findCorrespondingLocale } from "../utils/localizationHelper";
|
|
8
|
+
|
|
9
|
+
const Culture = () => {
|
|
10
|
+
const locale = useSelector(currentLocaleOrDefault);
|
|
11
|
+
const language = navigator.language ?? locale;
|
|
12
|
+
|
|
13
|
+
useMemo(() => {
|
|
14
|
+
const fnsLocale = findCorrespondingLocale(date_fns_locale, language);
|
|
15
|
+
|
|
16
|
+
if (fnsLocale != null) {
|
|
17
|
+
registerLocale(language, fnsLocale);
|
|
18
|
+
setDefaultLocale(language);
|
|
19
|
+
}
|
|
20
|
+
}, [language]);
|
|
21
|
+
|
|
22
|
+
return <React.Fragment />;
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
export default Culture;
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import Immutable from "immutable";
|
|
3
|
+
import { Provider } from "react-redux";
|
|
4
|
+
import { getDefaultLocale } from "react-datepicker";
|
|
5
|
+
import Culture from "./Culture";
|
|
6
|
+
|
|
7
|
+
describe("Culture", () => {
|
|
8
|
+
let state, store, languageGetter;
|
|
9
|
+
|
|
10
|
+
beforeEach(() => {
|
|
11
|
+
languageGetter = jest.spyOn(window.navigator, "language", "get");
|
|
12
|
+
|
|
13
|
+
state = Immutable.fromJS({
|
|
14
|
+
requests: {},
|
|
15
|
+
settings: {
|
|
16
|
+
defaultScope: "aDefaultScope",
|
|
17
|
+
},
|
|
18
|
+
locale: {
|
|
19
|
+
supportedLocales: [
|
|
20
|
+
{ language: "English", cultureIso: "en" },
|
|
21
|
+
{ language: "Français", cultureIso: "fr" },
|
|
22
|
+
],
|
|
23
|
+
},
|
|
24
|
+
});
|
|
25
|
+
store = {
|
|
26
|
+
subscribe: () => {},
|
|
27
|
+
getState: () => state,
|
|
28
|
+
dispatch: () => {},
|
|
29
|
+
};
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
afterEach(() => {
|
|
33
|
+
languageGetter.mockReset();
|
|
34
|
+
jest.clearAllMocks();
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
it("shows the wrapped component if authenticated and default scope is known", () => {
|
|
38
|
+
languageGetter.mockReturnValue(null);
|
|
39
|
+
|
|
40
|
+
const component = (
|
|
41
|
+
<Provider store={store}>
|
|
42
|
+
<Culture />
|
|
43
|
+
</Provider>
|
|
44
|
+
);
|
|
45
|
+
|
|
46
|
+
expect(component, "when mounted", "to satisfy", null);
|
|
47
|
+
|
|
48
|
+
expect(getDefaultLocale(), "to be", undefined); // Default behavior for react-datepicker
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
it("shows the wrapped component if authenticated and default scope is known 222", () => {
|
|
52
|
+
state = state.setIn(["locale", "supportedLocales"], [{ language: "English", cultureIso: "en" }]);
|
|
53
|
+
languageGetter.mockReturnValue("en-GB");
|
|
54
|
+
|
|
55
|
+
const component = (
|
|
56
|
+
<Provider store={store}>
|
|
57
|
+
<Culture />
|
|
58
|
+
</Provider>
|
|
59
|
+
);
|
|
60
|
+
|
|
61
|
+
expect(component, "when mounted", "to satisfy", null);
|
|
62
|
+
|
|
63
|
+
expect(getDefaultLocale(), "to equal", "en-GB");
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
it("shows the wrapped component if authenticated and default scope is known 333", () => {
|
|
67
|
+
state = state.setIn(
|
|
68
|
+
["locale", "supportedLocales"],
|
|
69
|
+
[
|
|
70
|
+
{ language: "French", cultureIso: "fr" },
|
|
71
|
+
{ language: "EnglishMy", cultureIso: "enMy" },
|
|
72
|
+
],
|
|
73
|
+
);
|
|
74
|
+
languageGetter.mockReturnValue("fr-FR");
|
|
75
|
+
|
|
76
|
+
const component = (
|
|
77
|
+
<Provider store={store}>
|
|
78
|
+
<Culture />
|
|
79
|
+
</Provider>
|
|
80
|
+
);
|
|
81
|
+
|
|
82
|
+
expect(component, "when mounted", "to satisfy", null);
|
|
83
|
+
|
|
84
|
+
expect(getDefaultLocale(), "to equal", "fr-FR");
|
|
85
|
+
});
|
|
86
|
+
});
|
package/src/components/I18n.js
CHANGED
|
@@ -6,10 +6,12 @@ import { currentLocaleOrDefault } from "../selectors/locale";
|
|
|
6
6
|
const I18n = props => {
|
|
7
7
|
const locale = useSelector(currentLocaleOrDefault);
|
|
8
8
|
const messages = require("translations/" + locale + ".json");
|
|
9
|
+
const language = navigator.language ?? locale;
|
|
10
|
+
|
|
9
11
|
return (
|
|
10
12
|
<IntlProvider
|
|
11
|
-
key={
|
|
12
|
-
locale={
|
|
13
|
+
key={language} // TODO: Remove this when react-intl suports new React context API
|
|
14
|
+
locale={language}
|
|
13
15
|
messages={messages}
|
|
14
16
|
{...props}
|
|
15
17
|
/>
|
|
@@ -9,10 +9,13 @@ import I18n from "./I18n";
|
|
|
9
9
|
jest.mock("translations/en-US.json", () => ({
|
|
10
10
|
WORD: "Word",
|
|
11
11
|
}));
|
|
12
|
+
jest.mock("translations/fr-CA.json", () => ({
|
|
13
|
+
WORD: "Mots",
|
|
14
|
+
}));
|
|
12
15
|
|
|
13
16
|
describe("I18n", () => {
|
|
14
17
|
spyOnConsole();
|
|
15
|
-
let store, state;
|
|
18
|
+
let store, state, languageGetter;
|
|
16
19
|
beforeEach(() => {
|
|
17
20
|
state = Immutable.fromJS({
|
|
18
21
|
locale: {
|
|
@@ -25,9 +28,16 @@ describe("I18n", () => {
|
|
|
25
28
|
dispatch: () => {},
|
|
26
29
|
getState: () => state,
|
|
27
30
|
};
|
|
31
|
+
|
|
32
|
+
languageGetter = jest.spyOn(window.navigator, "language", "get");
|
|
28
33
|
});
|
|
29
34
|
|
|
30
|
-
|
|
35
|
+
afterEach(() => {
|
|
36
|
+
languageGetter.mockReset();
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
it("renders a react-intl IntlProvider with locale data provided", () => {
|
|
40
|
+
languageGetter.mockReturnValue(null);
|
|
31
41
|
expect(
|
|
32
42
|
<Provider store={store}>
|
|
33
43
|
<MemoryRouter>
|
|
@@ -39,5 +49,24 @@ describe("I18n", () => {
|
|
|
39
49
|
"when mounted",
|
|
40
50
|
"to satisfy",
|
|
41
51
|
"Word",
|
|
42
|
-
).then(() => expect(console.error, "was not called"))
|
|
52
|
+
).then(() => expect(console.error, "was not called"));
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
it("renders a react-intl IntlProvider with navigator language provided", () => {
|
|
56
|
+
languageGetter.mockReturnValue("fr-CA");
|
|
57
|
+
state = state.setIn(["locale", "locale"], "fr-CA");
|
|
58
|
+
|
|
59
|
+
expect(
|
|
60
|
+
<Provider store={store}>
|
|
61
|
+
<MemoryRouter>
|
|
62
|
+
<I18n>
|
|
63
|
+
<FormattedMessage id="WORD" defaultMessage="Failure" />
|
|
64
|
+
</I18n>
|
|
65
|
+
</MemoryRouter>
|
|
66
|
+
</Provider>,
|
|
67
|
+
"when mounted",
|
|
68
|
+
"to satisfy",
|
|
69
|
+
"Mots",
|
|
70
|
+
).then(() => expect(console.error, "was not called"));
|
|
71
|
+
});
|
|
43
72
|
});
|
|
@@ -5,12 +5,6 @@ import DatePicker from "react-datepicker";
|
|
|
5
5
|
import "react-datepicker/dist/react-datepicker.css";
|
|
6
6
|
import TimePicker from "./TimePicker";
|
|
7
7
|
import { makeStyles } from "@material-ui/core/styles";
|
|
8
|
-
import { useIntl } from "react-intl";
|
|
9
|
-
import { registerLocale } from "react-datepicker";
|
|
10
|
-
import { frCA, enUS, it } from "date-fns/locale";
|
|
11
|
-
registerLocale("fr-CA", frCA);
|
|
12
|
-
registerLocale("en-US", enUS);
|
|
13
|
-
registerLocale("it-IT", it);
|
|
14
8
|
|
|
15
9
|
const useStyles = makeStyles(theme => ({
|
|
16
10
|
container: {
|
|
@@ -111,21 +105,13 @@ const useStyles = makeStyles(theme => ({
|
|
|
111
105
|
},
|
|
112
106
|
}));
|
|
113
107
|
|
|
114
|
-
const
|
|
115
|
-
|
|
116
|
-
export const createFormat = (useDate, useTime, selectedLocale) => {
|
|
108
|
+
export const createFormat = (useDate, useTime) => {
|
|
117
109
|
if (useDate && !useTime) {
|
|
118
110
|
return "P";
|
|
119
111
|
} else if (useTime && !useDate) {
|
|
120
|
-
|
|
121
|
-
return "p";
|
|
122
|
-
}
|
|
123
|
-
return "HH:mm";
|
|
112
|
+
return "p";
|
|
124
113
|
} else {
|
|
125
|
-
|
|
126
|
-
return "P p";
|
|
127
|
-
}
|
|
128
|
-
return "P HH:mm";
|
|
114
|
+
return "P p";
|
|
129
115
|
}
|
|
130
116
|
};
|
|
131
117
|
|
|
@@ -144,7 +130,6 @@ const WrappedDatePicker = ({
|
|
|
144
130
|
error,
|
|
145
131
|
...props
|
|
146
132
|
}) => {
|
|
147
|
-
const { locale } = useIntl();
|
|
148
133
|
const classes = useStyles({ readOnly });
|
|
149
134
|
const startDate = value ? new Date(value) : null;
|
|
150
135
|
const disabledCls = classNames({ [classes.disabled]: props.disabled });
|
|
@@ -161,24 +146,17 @@ const WrappedDatePicker = ({
|
|
|
161
146
|
<div className={classes.datePickerContainer}>
|
|
162
147
|
<DatePicker
|
|
163
148
|
{...props}
|
|
164
|
-
dateFormat={dateFormat || createFormat(useDate, useTime
|
|
149
|
+
dateFormat={dateFormat || createFormat(useDate, useTime)}
|
|
165
150
|
selected={startDate}
|
|
166
151
|
onChange={date => updateDate(date, metadata)}
|
|
167
152
|
showTimeInput={useTime ?? false}
|
|
168
153
|
useTime={useTime ?? false}
|
|
169
154
|
customTimeInput={
|
|
170
|
-
useTime ?
|
|
171
|
-
<TimePicker
|
|
172
|
-
showTimeZone={showTimeZone}
|
|
173
|
-
showAMPM={AMPMLocales.includes(locale)}
|
|
174
|
-
requestedTimeZone={timePickerTimeZone}
|
|
175
|
-
/>
|
|
176
|
-
) : null
|
|
155
|
+
useTime ? <TimePicker showTimeZone={showTimeZone} requestedTimeZone={timePickerTimeZone} /> : null
|
|
177
156
|
}
|
|
178
157
|
timeInputLabel={timeInputLabel ?? ""}
|
|
179
158
|
readOnly={readOnly}
|
|
180
159
|
showTimeSelectOnly={showTimeSelectOnly}
|
|
181
|
-
locale={locale}
|
|
182
160
|
/>
|
|
183
161
|
</div>
|
|
184
162
|
{!readOnly ? (
|
|
@@ -314,43 +314,15 @@ describe("DatePicker", () => {
|
|
|
314
314
|
});
|
|
315
315
|
|
|
316
316
|
describe("createFormat", () => {
|
|
317
|
-
it("Retrieves proper format
|
|
318
|
-
|
|
319
|
-
const locale2 = "en-US";
|
|
320
|
-
|
|
321
|
-
expect(createFormat(true, true, locale1), "to equal", "P p");
|
|
322
|
-
expect(createFormat(true, true, locale2), "to equal", "P p");
|
|
323
|
-
});
|
|
324
|
-
|
|
325
|
-
it("Retrieves proper format if locale is in AMPMLocales list for date", () => {
|
|
326
|
-
const locale1 = "en-CA";
|
|
327
|
-
const locale2 = "en-US";
|
|
328
|
-
|
|
329
|
-
expect(createFormat(true, false, locale1), "to equal", "P");
|
|
330
|
-
expect(createFormat(true, false, locale2), "to equal", "P");
|
|
331
|
-
});
|
|
332
|
-
|
|
333
|
-
it("Retrieves proper format if locale is in AMPMLocales list for time", () => {
|
|
334
|
-
const locale1 = "en-CA";
|
|
335
|
-
const locale2 = "en-US";
|
|
336
|
-
|
|
337
|
-
expect(createFormat(false, true, locale1), "to equal", "p");
|
|
338
|
-
expect(createFormat(false, true, locale2), "to equal", "p");
|
|
339
|
-
});
|
|
340
|
-
|
|
341
|
-
it("Retrieves proper format if locale is not in AMPMLocales list for date and time", () => {
|
|
342
|
-
expect(createFormat(true, true, "fr-CA"), "to equal", "P HH:mm");
|
|
343
|
-
});
|
|
344
|
-
|
|
345
|
-
it("Retrieves proper format if locale is not in AMPMLocales list for date", () => {
|
|
346
|
-
expect(createFormat(true, false, "fr-CA"), "to equal", "P");
|
|
317
|
+
it("Retrieves proper format for date and time", () => {
|
|
318
|
+
expect(createFormat(true, true), "to equal", "P p");
|
|
347
319
|
});
|
|
348
320
|
|
|
349
|
-
it("Retrieves proper format
|
|
350
|
-
expect(createFormat(
|
|
321
|
+
it("Retrieves proper format for date only", () => {
|
|
322
|
+
expect(createFormat(true, false), "to equal", "P");
|
|
351
323
|
});
|
|
352
324
|
|
|
353
|
-
it("Retrieves
|
|
354
|
-
expect(createFormat(), "to equal", "
|
|
325
|
+
it("Retrieves proper format for date only", () => {
|
|
326
|
+
expect(createFormat(false, true), "to equal", "p");
|
|
355
327
|
});
|
|
356
328
|
});
|
|
@@ -10,6 +10,7 @@ import DevPages from "./DevPages";
|
|
|
10
10
|
import Head from "./Head";
|
|
11
11
|
import I18n from "./I18n";
|
|
12
12
|
import InternetExplorerWarningMessage from "./InternetExplorerWarningMessage";
|
|
13
|
+
import Culture from "./Culture";
|
|
13
14
|
|
|
14
15
|
const GlobalStyle = createGlobalStyle`
|
|
15
16
|
html {
|
|
@@ -41,6 +42,7 @@ const Provision = ({ store, theme = {}, muiTheme, children }) => {
|
|
|
41
42
|
<MuiThemeProvider theme={muiTheme}>
|
|
42
43
|
<React.Fragment>
|
|
43
44
|
<Head />
|
|
45
|
+
<Culture />
|
|
44
46
|
<GlobalStyle />
|
|
45
47
|
<Authenticate>
|
|
46
48
|
<React.Fragment>
|
|
@@ -22,7 +22,19 @@ export function getNotLocalizedString(value) {
|
|
|
22
22
|
return value && `[${value}]`;
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
+
export function findCorrespondingLocale(locales, language) {
|
|
26
|
+
return (
|
|
27
|
+
locales[language] ??
|
|
28
|
+
locales[language.replace(/-/g, "")] ??
|
|
29
|
+
locales[language.toLowerCase()] ??
|
|
30
|
+
locales[language.toLowerCase().replace(/-/g, "")] ??
|
|
31
|
+
locales[language.substring(0, 2).toLowerCase()] ??
|
|
32
|
+
null
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
|
+
|
|
25
36
|
export default {
|
|
26
37
|
getLocalization,
|
|
27
38
|
getNotLocalizedString,
|
|
39
|
+
findCorrespondingLocale,
|
|
28
40
|
};
|
|
@@ -76,3 +76,67 @@ describe("<localizationHelper.getLocalization>", () => {
|
|
|
76
76
|
expect(localizationHelper.getLocalization(defaultLocalizations, "it", "fallback"), "to equal", fallbackValue);
|
|
77
77
|
});
|
|
78
78
|
});
|
|
79
|
+
|
|
80
|
+
describe("findCorrespondingLocale", () => {
|
|
81
|
+
const locales = {
|
|
82
|
+
fr: "FR",
|
|
83
|
+
enGB: "GB",
|
|
84
|
+
enNZ: "NZ",
|
|
85
|
+
"en-in": "IN",
|
|
86
|
+
enau: "AU",
|
|
87
|
+
"en-IE": "IE",
|
|
88
|
+
frCa: "CA",
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
it("findCorrespondingLocale should return null for en-US", () => {
|
|
92
|
+
expect(localizationHelper.findCorrespondingLocale(locales, "en-US"), "to equal", null);
|
|
93
|
+
});
|
|
94
|
+
|
|
95
|
+
it("findCorrespondingLocale should return FR for fr-FR", () => {
|
|
96
|
+
expect(localizationHelper.findCorrespondingLocale(locales, "fr-FR"), "to equal", "FR");
|
|
97
|
+
});
|
|
98
|
+
|
|
99
|
+
it("findCorrespondingLocale should return FR for fr-fr", () => {
|
|
100
|
+
expect(localizationHelper.findCorrespondingLocale(locales, "fr-fr"), "to equal", "FR");
|
|
101
|
+
});
|
|
102
|
+
|
|
103
|
+
it("findCorrespondingLocale should return FR for frFR", () => {
|
|
104
|
+
expect(localizationHelper.findCorrespondingLocale(locales, "frFR"), "to equal", "FR");
|
|
105
|
+
});
|
|
106
|
+
|
|
107
|
+
it("findCorrespondingLocale should return FR for frfr", () => {
|
|
108
|
+
expect(localizationHelper.findCorrespondingLocale(locales, "frfr"), "to equal", "FR");
|
|
109
|
+
});
|
|
110
|
+
|
|
111
|
+
it("findCorrespondingLocale should return IE for en-IE", () => {
|
|
112
|
+
expect(localizationHelper.findCorrespondingLocale(locales, "en-IE"), "to equal", "IE");
|
|
113
|
+
});
|
|
114
|
+
|
|
115
|
+
it("findCorrespondingLocale should return GB for en-GB", () => {
|
|
116
|
+
expect(localizationHelper.findCorrespondingLocale(locales, "en-GB"), "to equal", "GB");
|
|
117
|
+
});
|
|
118
|
+
|
|
119
|
+
it("findCorrespondingLocale should return GB for en-NZ", () => {
|
|
120
|
+
expect(localizationHelper.findCorrespondingLocale(locales, "en-NZ"), "to equal", "NZ");
|
|
121
|
+
});
|
|
122
|
+
|
|
123
|
+
it("findCorrespondingLocale should return AU for en-AU", () => {
|
|
124
|
+
expect(localizationHelper.findCorrespondingLocale(locales, "en-AU"), "to equal", "AU");
|
|
125
|
+
});
|
|
126
|
+
|
|
127
|
+
it("findCorrespondingLocale should return AU for en-au", () => {
|
|
128
|
+
expect(localizationHelper.findCorrespondingLocale(locales, "en-au"), "to equal", "AU");
|
|
129
|
+
});
|
|
130
|
+
|
|
131
|
+
it("findCorrespondingLocale should return AU for enAU", () => {
|
|
132
|
+
expect(localizationHelper.findCorrespondingLocale(locales, "enAU"), "to equal", "AU");
|
|
133
|
+
});
|
|
134
|
+
|
|
135
|
+
it("findCorrespondingLocale should return IN for en-IN", () => {
|
|
136
|
+
expect(localizationHelper.findCorrespondingLocale(locales, "en-IN"), "to equal", "IN");
|
|
137
|
+
});
|
|
138
|
+
|
|
139
|
+
it("findCorrespondingLocale should return CA for frCa", () => {
|
|
140
|
+
expect(localizationHelper.findCorrespondingLocale(locales, "frCa"), "to equal", "CA");
|
|
141
|
+
});
|
|
142
|
+
});
|