react-intl 7.1.13 → 8.0.0
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/index.d.ts +15 -15
- package/index.js +21 -46
- package/package.json +23 -21
- package/react-intl.iife.js +113 -111
- package/src/components/createFormattedComponent.d.ts +1 -1
- package/src/components/createFormattedComponent.js +17 -24
- package/src/components/createIntl.d.ts +1 -1
- package/src/components/createIntl.js +12 -16
- package/src/components/dateTimeRange.js +6 -8
- package/src/components/injectIntl.d.ts +1 -1
- package/src/components/injectIntl.js +14 -16
- package/src/components/message.js +10 -12
- package/src/components/plural.js +4 -7
- package/src/components/provider.d.ts +2 -2
- package/src/components/provider.js +15 -17
- package/src/components/relative.js +10 -12
- package/src/components/useIntl.d.ts +1 -1
- package/src/components/useIntl.js +6 -10
- package/src/types.d.ts +1 -1
- package/src/types.js +1 -2
- package/src/utils.d.ts +2 -1
- package/src/utils.js +21 -29
- package/lib/index.d.ts +0 -46
- package/lib/index.js +0 -26
- package/lib/src/components/createFormattedComponent.d.ts +0 -27
- package/lib/src/components/createFormattedComponent.js +0 -62
- package/lib/src/components/createIntl.d.ts +0 -9
- package/lib/src/components/createIntl.js +0 -58
- package/lib/src/components/dateTimeRange.d.ts +0 -9
- package/lib/src/components/dateTimeRange.js +0 -15
- package/lib/src/components/injectIntl.d.ts +0 -39
- package/lib/src/components/injectIntl.js +0 -35
- package/lib/src/components/message.d.ts +0 -11
- package/lib/src/components/message.js +0 -35
- package/lib/src/components/plural.d.ts +0 -14
- package/lib/src/components/plural.js +0 -23
- package/lib/src/components/provider.d.ts +0 -29
- package/lib/src/components/provider.js +0 -59
- package/lib/src/components/relative.d.ts +0 -10
- package/lib/src/components/relative.js +0 -125
- package/lib/src/components/useIntl.d.ts +0 -2
- package/lib/src/components/useIntl.js +0 -8
- package/lib/src/types.d.ts +0 -14
- package/lib/src/types.js +0 -1
- package/lib/src/utils.d.ts +0 -25
- package/lib/src/utils.js +0 -69
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { FormatDateOptions, FormatDisplayNameOptions, FormatListOptions, FormatNumberOptions } from '@formatjs/intl';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import { IntlShape } from '../types';
|
|
3
|
+
import { IntlShape } from '../types.js';
|
|
4
4
|
type Formatter = {
|
|
5
5
|
formatDate: FormatDateOptions;
|
|
6
6
|
formatTime: FormatDateOptions;
|
|
@@ -1,11 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
exports.createFormattedDateTimePartsComponent = createFormattedDateTimePartsComponent;
|
|
5
|
-
exports.createFormattedComponent = createFormattedComponent;
|
|
6
|
-
var tslib_1 = require("tslib");
|
|
7
|
-
var React = tslib_1.__importStar(require("react"));
|
|
8
|
-
var useIntl_1 = tslib_1.__importDefault(require("./useIntl"));
|
|
1
|
+
import { __rest } from "tslib";
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import useIntl from './useIntl.js';
|
|
9
4
|
var DisplayName;
|
|
10
5
|
(function (DisplayName) {
|
|
11
6
|
DisplayName["formatDate"] = "FormattedDate";
|
|
@@ -23,24 +18,22 @@ var DisplayNameParts;
|
|
|
23
18
|
DisplayNameParts["formatNumber"] = "FormattedNumberParts";
|
|
24
19
|
DisplayNameParts["formatList"] = "FormattedListParts";
|
|
25
20
|
})(DisplayNameParts || (DisplayNameParts = {}));
|
|
26
|
-
var FormattedNumberParts = function (props) {
|
|
27
|
-
var intl = (
|
|
28
|
-
var value = props.value, children = props.children, formatProps =
|
|
21
|
+
export var FormattedNumberParts = function (props) {
|
|
22
|
+
var intl = useIntl();
|
|
23
|
+
var value = props.value, children = props.children, formatProps = __rest(props, ["value", "children"]);
|
|
29
24
|
return children(intl.formatNumberToParts(value, formatProps));
|
|
30
25
|
};
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
var
|
|
34
|
-
var
|
|
35
|
-
var value = props.value, children = props.children, formatProps = tslib_1.__rest(props, ["value", "children"]);
|
|
26
|
+
FormattedNumberParts.displayName = 'FormattedNumberParts';
|
|
27
|
+
export var FormattedListParts = function (props) {
|
|
28
|
+
var intl = useIntl();
|
|
29
|
+
var value = props.value, children = props.children, formatProps = __rest(props, ["value", "children"]);
|
|
36
30
|
return children(intl.formatListToParts(value, formatProps));
|
|
37
31
|
};
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
function createFormattedDateTimePartsComponent(name) {
|
|
32
|
+
FormattedNumberParts.displayName = 'FormattedNumberParts';
|
|
33
|
+
export function createFormattedDateTimePartsComponent(name) {
|
|
41
34
|
var ComponentParts = function (props) {
|
|
42
|
-
var intl = (
|
|
43
|
-
var value = props.value, children = props.children, formatProps =
|
|
35
|
+
var intl = useIntl();
|
|
36
|
+
var value = props.value, children = props.children, formatProps = __rest(props, ["value", "children"]);
|
|
44
37
|
var date = typeof value === 'string' ? new Date(value || 0) : value;
|
|
45
38
|
var formattedParts = name === 'formatDate'
|
|
46
39
|
? intl.formatDateToParts(date, formatProps)
|
|
@@ -50,10 +43,10 @@ function createFormattedDateTimePartsComponent(name) {
|
|
|
50
43
|
ComponentParts.displayName = DisplayNameParts[name];
|
|
51
44
|
return ComponentParts;
|
|
52
45
|
}
|
|
53
|
-
function createFormattedComponent(name) {
|
|
46
|
+
export function createFormattedComponent(name) {
|
|
54
47
|
var Component = function (props) {
|
|
55
|
-
var intl = (
|
|
56
|
-
var value = props.value, children = props.children, formatProps =
|
|
48
|
+
var intl = useIntl();
|
|
49
|
+
var value = props.value, children = props.children, formatProps = __rest(props
|
|
57
50
|
// TODO: fix TS type definition for localeMatcher upstream
|
|
58
51
|
, ["value", "children"]);
|
|
59
52
|
// TODO: fix TS type definition for localeMatcher upstream
|
|
@@ -1,23 +1,20 @@
|
|
|
1
|
-
"use strict";
|
|
2
1
|
/*
|
|
3
2
|
* Copyright 2015, Yahoo Inc.
|
|
4
3
|
* Copyrights licensed under the New BSD License.
|
|
5
4
|
* See the accompanying LICENSE file for terms.
|
|
6
5
|
*/
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
var intl_messageformat_1 = require("intl-messageformat");
|
|
12
|
-
var utils_1 = require("../utils");
|
|
6
|
+
import { __assign, __rest, __spreadArray } from "tslib";
|
|
7
|
+
import { createIntl as coreCreateIntl, formatMessage as coreFormatMessage, } from '@formatjs/intl';
|
|
8
|
+
import { isFormatXMLElementFn, } from 'intl-messageformat';
|
|
9
|
+
import { DEFAULT_INTL_CONFIG, assignUniqueKeysToParts, toKeyedReactNodeArray, } from '../utils.js';
|
|
13
10
|
function assignUniqueKeysToFormatXMLElementFnArgument(values) {
|
|
14
11
|
if (!values) {
|
|
15
12
|
return values;
|
|
16
13
|
}
|
|
17
14
|
return Object.keys(values).reduce(function (acc, k) {
|
|
18
15
|
var v = values[k];
|
|
19
|
-
acc[k] =
|
|
20
|
-
?
|
|
16
|
+
acc[k] = isFormatXMLElementFn(v)
|
|
17
|
+
? assignUniqueKeysToParts(v)
|
|
21
18
|
: v;
|
|
22
19
|
return acc;
|
|
23
20
|
}, {});
|
|
@@ -28,12 +25,12 @@ var formatMessage = function (config, formatters, descriptor, rawValues) {
|
|
|
28
25
|
rest[_i - 4] = arguments[_i];
|
|
29
26
|
}
|
|
30
27
|
var values = assignUniqueKeysToFormatXMLElementFnArgument(rawValues);
|
|
31
|
-
var chunks =
|
|
28
|
+
var chunks = coreFormatMessage.apply(void 0, __spreadArray([config,
|
|
32
29
|
formatters,
|
|
33
30
|
descriptor,
|
|
34
31
|
values], rest, false));
|
|
35
32
|
if (Array.isArray(chunks)) {
|
|
36
|
-
return
|
|
33
|
+
return toKeyedReactNodeArray(chunks);
|
|
37
34
|
}
|
|
38
35
|
return chunks;
|
|
39
36
|
};
|
|
@@ -42,10 +39,10 @@ var formatMessage = function (config, formatters, descriptor, rawValues) {
|
|
|
42
39
|
* @param config intl config
|
|
43
40
|
* @param cache cache for formatter instances to prevent memory leak
|
|
44
41
|
*/
|
|
45
|
-
var createIntl = function (_a, cache) {
|
|
46
|
-
var rawDefaultRichTextElements = _a.defaultRichTextElements, config =
|
|
42
|
+
export var createIntl = function (_a, cache) {
|
|
43
|
+
var rawDefaultRichTextElements = _a.defaultRichTextElements, config = __rest(_a, ["defaultRichTextElements"]);
|
|
47
44
|
var defaultRichTextElements = assignUniqueKeysToFormatXMLElementFnArgument(rawDefaultRichTextElements);
|
|
48
|
-
var coreIntl = (
|
|
45
|
+
var coreIntl = coreCreateIntl(__assign(__assign(__assign({}, DEFAULT_INTL_CONFIG), config), { defaultRichTextElements: defaultRichTextElements }), cache);
|
|
49
46
|
var resolvedConfig = {
|
|
50
47
|
locale: coreIntl.locale,
|
|
51
48
|
timeZone: coreIntl.timeZone,
|
|
@@ -57,6 +54,5 @@ var createIntl = function (_a, cache) {
|
|
|
57
54
|
onError: coreIntl.onError,
|
|
58
55
|
defaultRichTextElements: defaultRichTextElements,
|
|
59
56
|
};
|
|
60
|
-
return
|
|
57
|
+
return __assign(__assign({}, coreIntl), { formatMessage: formatMessage.bind(null, resolvedConfig, coreIntl.formatters), $t: formatMessage.bind(null, resolvedConfig, coreIntl.formatters) });
|
|
61
58
|
};
|
|
62
|
-
exports.createIntl = createIntl;
|
|
@@ -1,11 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
var React = tslib_1.__importStar(require("react"));
|
|
5
|
-
var useIntl_1 = tslib_1.__importDefault(require("./useIntl"));
|
|
1
|
+
import { __rest } from "tslib";
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import useIntl from './useIntl.js';
|
|
6
4
|
var FormattedDateTimeRange = function (props) {
|
|
7
|
-
var intl = (
|
|
8
|
-
var from = props.from, to = props.to, children = props.children, formatProps =
|
|
5
|
+
var intl = useIntl();
|
|
6
|
+
var from = props.from, to = props.to, children = props.children, formatProps = __rest(props, ["from", "to", "children"]);
|
|
9
7
|
var formattedValue = intl.formatDateTimeRange(from, to, formatProps);
|
|
10
8
|
if (typeof children === 'function') {
|
|
11
9
|
return children(formattedValue);
|
|
@@ -14,4 +12,4 @@ var FormattedDateTimeRange = function (props) {
|
|
|
14
12
|
return React.createElement(Text, null, formattedValue);
|
|
15
13
|
};
|
|
16
14
|
FormattedDateTimeRange.displayName = 'FormattedDateTimeRange';
|
|
17
|
-
|
|
15
|
+
export default FormattedDateTimeRange;
|
|
@@ -1,11 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
var
|
|
7
|
-
var React = tslib_1.__importStar(require("react"));
|
|
8
|
-
var utils_1 = require("../utils");
|
|
1
|
+
var _a;
|
|
2
|
+
import { __assign } from "tslib";
|
|
3
|
+
import * as hoistNonReactStaticsNs from 'hoist-non-react-statics';
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import { invariantIntlContext } from '../utils.js';
|
|
6
|
+
var hoistNonReactStatics = (_a = hoistNonReactStaticsNs.default) !== null && _a !== void 0 ? _a : hoistNonReactStaticsNs;
|
|
9
7
|
function getDisplayName(Component) {
|
|
10
8
|
return Component.displayName || Component.name || 'Component';
|
|
11
9
|
}
|
|
@@ -16,24 +14,24 @@ var IntlContext = typeof window !== 'undefined' && !window.__REACT_INTL_BYPASS_G
|
|
|
16
14
|
(window.__REACT_INTL_CONTEXT__ = React.createContext(null))
|
|
17
15
|
: React.createContext(null);
|
|
18
16
|
var IntlConsumer = IntlContext.Consumer, IntlProvider = IntlContext.Provider;
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
function injectIntl(WrappedComponent, options) {
|
|
17
|
+
export var Provider = IntlProvider;
|
|
18
|
+
export var Context = IntlContext;
|
|
19
|
+
export default function injectIntl(WrappedComponent, options) {
|
|
22
20
|
var _a = options || {}, _b = _a.intlPropName, intlPropName = _b === void 0 ? 'intl' : _b, _c = _a.forwardRef, forwardRef = _c === void 0 ? false : _c, _d = _a.enforceContext, enforceContext = _d === void 0 ? true : _d;
|
|
23
21
|
var WithIntl = function (props) { return (React.createElement(IntlConsumer, null, function (intl) {
|
|
24
22
|
var _a;
|
|
25
23
|
if (enforceContext) {
|
|
26
|
-
|
|
24
|
+
invariantIntlContext(intl);
|
|
27
25
|
}
|
|
28
26
|
var intlProp = (_a = {}, _a[intlPropName] = intl, _a);
|
|
29
|
-
return (React.createElement(WrappedComponent,
|
|
27
|
+
return (React.createElement(WrappedComponent, __assign({}, props, intlProp, { ref: forwardRef ? props.forwardedRef : null })));
|
|
30
28
|
})); };
|
|
31
29
|
WithIntl.displayName = "injectIntl(".concat(getDisplayName(WrappedComponent), ")");
|
|
32
30
|
WithIntl.WrappedComponent = WrappedComponent;
|
|
33
31
|
if (forwardRef) {
|
|
34
|
-
return (
|
|
32
|
+
return hoistNonReactStatics(
|
|
35
33
|
// @ts-expect-error
|
|
36
|
-
React.forwardRef(function (props, ref) { return (React.createElement(WithIntl,
|
|
34
|
+
React.forwardRef(function (props, ref) { return (React.createElement(WithIntl, __assign({}, props, { forwardedRef: ref }))); }), WrappedComponent);
|
|
37
35
|
}
|
|
38
|
-
return (
|
|
36
|
+
return hoistNonReactStatics(WithIntl, WrappedComponent);
|
|
39
37
|
}
|
|
@@ -1,22 +1,20 @@
|
|
|
1
|
-
"use strict";
|
|
2
1
|
/*
|
|
3
2
|
* Copyright 2015, Yahoo Inc.
|
|
4
3
|
* Copyrights licensed under the New BSD License.
|
|
5
4
|
* See the accompanying LICENSE file for terms.
|
|
6
5
|
*/
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
var useIntl_1 = tslib_1.__importDefault(require("./useIntl"));
|
|
6
|
+
import { __rest } from "tslib";
|
|
7
|
+
import * as React from 'react';
|
|
8
|
+
import { shallowEqual } from '../utils.js';
|
|
9
|
+
import useIntl from './useIntl.js';
|
|
12
10
|
function areEqual(prevProps, nextProps) {
|
|
13
|
-
var values = prevProps.values, otherProps =
|
|
14
|
-
var nextValues = nextProps.values, nextOtherProps =
|
|
15
|
-
return (
|
|
16
|
-
|
|
11
|
+
var values = prevProps.values, otherProps = __rest(prevProps, ["values"]);
|
|
12
|
+
var nextValues = nextProps.values, nextOtherProps = __rest(nextProps, ["values"]);
|
|
13
|
+
return (shallowEqual(nextValues, values) &&
|
|
14
|
+
shallowEqual(otherProps, nextOtherProps));
|
|
17
15
|
}
|
|
18
16
|
function FormattedMessage(props) {
|
|
19
|
-
var intl = (
|
|
17
|
+
var intl = useIntl();
|
|
20
18
|
var formatMessage = intl.formatMessage, _a = intl.textComponent, Text = _a === void 0 ? React.Fragment : _a;
|
|
21
19
|
var id = props.id, description = props.description, defaultMessage = props.defaultMessage, values = props.values, children = props.children, _b = props.tagName, Component = _b === void 0 ? Text : _b, ignoreTag = props.ignoreTag;
|
|
22
20
|
var descriptor = { id: id, description: description, defaultMessage: defaultMessage };
|
|
@@ -34,4 +32,4 @@ function FormattedMessage(props) {
|
|
|
34
32
|
FormattedMessage.displayName = 'FormattedMessage';
|
|
35
33
|
var MemoizedFormattedMessage = React.memo(FormattedMessage, areEqual);
|
|
36
34
|
MemoizedFormattedMessage.displayName = 'MemoizedFormattedMessage';
|
|
37
|
-
|
|
35
|
+
export default MemoizedFormattedMessage;
|
package/src/components/plural.js
CHANGED
|
@@ -1,15 +1,12 @@
|
|
|
1
|
-
"use strict";
|
|
2
1
|
/*
|
|
3
2
|
* Copyright 2015, Yahoo Inc.
|
|
4
3
|
* Copyrights licensed under the New BSD License.
|
|
5
4
|
* See the accompanying LICENSE file for terms.
|
|
6
5
|
*/
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
var React = tslib_1.__importStar(require("react"));
|
|
10
|
-
var useIntl_1 = tslib_1.__importDefault(require("./useIntl"));
|
|
6
|
+
import * as React from 'react';
|
|
7
|
+
import useIntl from './useIntl.js';
|
|
11
8
|
var FormattedPlural = function (props) {
|
|
12
|
-
var _a = (
|
|
9
|
+
var _a = useIntl(), formatPlural = _a.formatPlural, Text = _a.textComponent;
|
|
13
10
|
var value = props.value, other = props.other, children = props.children;
|
|
14
11
|
var pluralCategory = formatPlural(value, props);
|
|
15
12
|
var formattedPlural = props[pluralCategory] || other;
|
|
@@ -23,4 +20,4 @@ var FormattedPlural = function (props) {
|
|
|
23
20
|
return formattedPlural;
|
|
24
21
|
};
|
|
25
22
|
FormattedPlural.displayName = 'FormattedPlural';
|
|
26
|
-
|
|
23
|
+
export default FormattedPlural;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { IntlCache } from '@formatjs/intl';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import type { IntlConfig, IntlShape } from '../types';
|
|
4
|
-
import { DefaultIntlConfig } from '../utils';
|
|
3
|
+
import type { IntlConfig, IntlShape } from '../types.js';
|
|
4
|
+
import { DefaultIntlConfig } from '../utils.js';
|
|
5
5
|
interface State {
|
|
6
6
|
/**
|
|
7
7
|
* Explicit intl cache to prevent memory leaks
|
|
@@ -1,16 +1,14 @@
|
|
|
1
|
-
"use strict";
|
|
2
1
|
/*
|
|
3
2
|
* Copyright 2015, Yahoo Inc.
|
|
4
3
|
* Copyrights licensed under the New BSD License.
|
|
5
4
|
* See the accompanying LICENSE file for terms.
|
|
6
5
|
*/
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
var injectIntl_1 = require("./injectIntl");
|
|
6
|
+
import { __extends } from "tslib";
|
|
7
|
+
import { createIntlCache } from '@formatjs/intl';
|
|
8
|
+
import * as React from 'react';
|
|
9
|
+
import { DEFAULT_INTL_CONFIG, invariantIntlContext, shallowEqual, } from '../utils.js';
|
|
10
|
+
import { createIntl } from './createIntl.js';
|
|
11
|
+
import { Provider } from './injectIntl.js';
|
|
14
12
|
function processIntlConfig(config) {
|
|
15
13
|
return {
|
|
16
14
|
locale: config.locale,
|
|
@@ -28,13 +26,13 @@ function processIntlConfig(config) {
|
|
|
28
26
|
};
|
|
29
27
|
}
|
|
30
28
|
var IntlProvider = /** @class */ (function (_super) {
|
|
31
|
-
|
|
29
|
+
__extends(IntlProvider, _super);
|
|
32
30
|
function IntlProvider() {
|
|
33
31
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
34
|
-
_this.cache =
|
|
32
|
+
_this.cache = createIntlCache();
|
|
35
33
|
_this.state = {
|
|
36
34
|
cache: _this.cache,
|
|
37
|
-
intl:
|
|
35
|
+
intl: createIntl(processIntlConfig(_this.props), _this.cache),
|
|
38
36
|
prevConfig: processIntlConfig(_this.props),
|
|
39
37
|
};
|
|
40
38
|
return _this;
|
|
@@ -42,20 +40,20 @@ var IntlProvider = /** @class */ (function (_super) {
|
|
|
42
40
|
IntlProvider.getDerivedStateFromProps = function (props, _a) {
|
|
43
41
|
var prevConfig = _a.prevConfig, cache = _a.cache;
|
|
44
42
|
var config = processIntlConfig(props);
|
|
45
|
-
if (!
|
|
43
|
+
if (!shallowEqual(prevConfig, config)) {
|
|
46
44
|
return {
|
|
47
|
-
intl:
|
|
45
|
+
intl: createIntl(config, cache),
|
|
48
46
|
prevConfig: config,
|
|
49
47
|
};
|
|
50
48
|
}
|
|
51
49
|
return null;
|
|
52
50
|
};
|
|
53
51
|
IntlProvider.prototype.render = function () {
|
|
54
|
-
|
|
55
|
-
return React.createElement(
|
|
52
|
+
invariantIntlContext(this.state.intl);
|
|
53
|
+
return React.createElement(Provider, { value: this.state.intl }, this.props.children);
|
|
56
54
|
};
|
|
57
55
|
IntlProvider.displayName = 'IntlProvider';
|
|
58
|
-
IntlProvider.defaultProps =
|
|
56
|
+
IntlProvider.defaultProps = DEFAULT_INTL_CONFIG;
|
|
59
57
|
return IntlProvider;
|
|
60
58
|
}(React.PureComponent));
|
|
61
|
-
|
|
59
|
+
export default IntlProvider;
|
|
@@ -1,14 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
var tslib_1 = require("tslib");
|
|
1
|
+
import { __assign, __rest } from "tslib";
|
|
4
2
|
/*
|
|
5
3
|
* Copyright 2015, Yahoo Inc.
|
|
6
4
|
* Copyrights licensed under the New BSD License.
|
|
7
5
|
* See the accompanying LICENSE file for terms.
|
|
8
6
|
*/
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
7
|
+
import * as React from 'react';
|
|
8
|
+
import { invariant } from '../utils.js';
|
|
9
|
+
import useIntl from './useIntl.js';
|
|
12
10
|
var MINUTE = 60;
|
|
13
11
|
var HOUR = 60 * 60;
|
|
14
12
|
var DAY = 60 * 60 * 24;
|
|
@@ -60,8 +58,8 @@ function canIncrement(unit) {
|
|
|
60
58
|
return INCREMENTABLE_UNITS.indexOf(unit) > -1;
|
|
61
59
|
}
|
|
62
60
|
var SimpleFormattedRelativeTime = function (props) {
|
|
63
|
-
var _a = (
|
|
64
|
-
var children = props.children, value = props.value, unit = props.unit, otherProps =
|
|
61
|
+
var _a = useIntl(), formatRelativeTime = _a.formatRelativeTime, Text = _a.textComponent;
|
|
62
|
+
var children = props.children, value = props.value, unit = props.unit, otherProps = __rest(props, ["children", "value", "unit"]);
|
|
65
63
|
var formattedRelativeTime = formatRelativeTime(value || 0, unit, otherProps);
|
|
66
64
|
if (typeof children === 'function') {
|
|
67
65
|
return children(formattedRelativeTime);
|
|
@@ -72,8 +70,8 @@ var SimpleFormattedRelativeTime = function (props) {
|
|
|
72
70
|
return React.createElement(React.Fragment, null, formattedRelativeTime);
|
|
73
71
|
};
|
|
74
72
|
var FormattedRelativeTime = function (_a) {
|
|
75
|
-
var _b = _a.value, value = _b === void 0 ? 0 : _b, _c = _a.unit, unit = _c === void 0 ? 'second' : _c, updateIntervalInSeconds = _a.updateIntervalInSeconds, otherProps =
|
|
76
|
-
|
|
73
|
+
var _b = _a.value, value = _b === void 0 ? 0 : _b, _c = _a.unit, unit = _c === void 0 ? 'second' : _c, updateIntervalInSeconds = _a.updateIntervalInSeconds, otherProps = __rest(_a, ["value", "unit", "updateIntervalInSeconds"]);
|
|
74
|
+
invariant(!updateIntervalInSeconds ||
|
|
77
75
|
!!(updateIntervalInSeconds && canIncrement(unit)), 'Cannot schedule update with unit longer than hour');
|
|
78
76
|
var _d = React.useState(), prevUnit = _d[0], setPrevUnit = _d[1];
|
|
79
77
|
var _e = React.useState(0), prevValue = _e[0], setPrevValue = _e[1];
|
|
@@ -121,7 +119,7 @@ var FormattedRelativeTime = function (_a) {
|
|
|
121
119
|
var unitDuration = getDurationInSeconds(currentUnit);
|
|
122
120
|
currentValue = Math.round(currentValueInSeconds / unitDuration);
|
|
123
121
|
}
|
|
124
|
-
return (React.createElement(SimpleFormattedRelativeTime,
|
|
122
|
+
return (React.createElement(SimpleFormattedRelativeTime, __assign({ value: currentValue, unit: currentUnit }, otherProps)));
|
|
125
123
|
};
|
|
126
124
|
FormattedRelativeTime.displayName = 'FormattedRelativeTime';
|
|
127
|
-
|
|
125
|
+
export default FormattedRelativeTime;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { IntlShape } from '../types';
|
|
1
|
+
import { IntlShape } from '../types.js';
|
|
2
2
|
export default function useIntl(this: void): IntlShape;
|
|
@@ -1,12 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
|
|
7
|
-
var injectIntl_1 = require("./injectIntl");
|
|
8
|
-
function useIntl() {
|
|
9
|
-
var intl = React.useContext(injectIntl_1.Context);
|
|
10
|
-
(0, utils_1.invariantIntlContext)(intl);
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { invariantIntlContext } from '../utils.js';
|
|
3
|
+
import { Context } from './injectIntl.js';
|
|
4
|
+
export default function useIntl() {
|
|
5
|
+
var intl = React.useContext(Context);
|
|
6
|
+
invariantIntlContext(intl);
|
|
11
7
|
return intl;
|
|
12
8
|
}
|
package/src/types.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ResolvedIntlConfig as CoreResolvedIntlConfig, Formatters, IntlFormatters, MessageDescriptor } from '@formatjs/intl';
|
|
2
2
|
import { FormatXMLElementFn, Options as IntlMessageFormatOptions, PrimitiveType } from 'intl-messageformat';
|
|
3
3
|
import * as React from 'react';
|
|
4
|
-
import { DEFAULT_INTL_CONFIG } from './utils';
|
|
4
|
+
import { DEFAULT_INTL_CONFIG } from './utils.js';
|
|
5
5
|
export type IntlConfig = Omit<ResolvedIntlConfig, keyof typeof DEFAULT_INTL_CONFIG> & Partial<typeof DEFAULT_INTL_CONFIG>;
|
|
6
6
|
export interface ResolvedIntlConfig extends CoreResolvedIntlConfig<React.ReactNode> {
|
|
7
7
|
textComponent?: React.ComponentType | keyof React.JSX.IntrinsicElements;
|
package/src/types.js
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
1
|
+
export {};
|
package/src/utils.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { FormatXMLElementFn } from 'intl-messageformat';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import { ResolvedIntlConfig } from './types';
|
|
3
|
+
import { ResolvedIntlConfig } from './types.js';
|
|
4
4
|
export declare function invariant(condition: boolean, message: string, Err?: any): asserts condition;
|
|
5
5
|
export declare function invariantIntlContext(intl?: any): asserts intl;
|
|
6
6
|
export type DefaultIntlConfig = Pick<ResolvedIntlConfig, 'fallbackOnEmptyString' | 'formats' | 'messages' | 'timeZone' | 'textComponent' | 'defaultLocale' | 'defaultFormats' | 'onError'>;
|
|
@@ -13,6 +13,7 @@ export declare const DEFAULT_INTL_CONFIG: DefaultIntlConfig;
|
|
|
13
13
|
* React doesn't recommend doing this because it makes reordering inefficient,
|
|
14
14
|
* but we mostly need this for message chunks, which don't tend to reorder to
|
|
15
15
|
* begin with.
|
|
16
|
+
*
|
|
16
17
|
*/
|
|
17
18
|
export declare const toKeyedReactNodeArray: typeof React.Children.toArray;
|
|
18
19
|
/**
|
package/src/utils.js
CHANGED
|
@@ -1,29 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
exports.invariantIntlContext = invariantIntlContext;
|
|
6
|
-
exports.assignUniqueKeysToParts = assignUniqueKeysToParts;
|
|
7
|
-
exports.shallowEqual = shallowEqual;
|
|
8
|
-
var tslib_1 = require("tslib");
|
|
9
|
-
var React = tslib_1.__importStar(require("react"));
|
|
10
|
-
var intl_1 = require("@formatjs/intl");
|
|
11
|
-
function invariant(condition, message, Err) {
|
|
1
|
+
import { __assign } from "tslib";
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { DEFAULT_INTL_CONFIG as CORE_DEFAULT_INTL_CONFIG } from '@formatjs/intl';
|
|
4
|
+
export function invariant(condition, message, Err) {
|
|
12
5
|
if (Err === void 0) { Err = Error; }
|
|
13
6
|
if (!condition) {
|
|
14
7
|
throw new Err(message);
|
|
15
8
|
}
|
|
16
9
|
}
|
|
17
|
-
function invariantIntlContext(intl) {
|
|
10
|
+
export function invariantIntlContext(intl) {
|
|
18
11
|
invariant(intl, '[React Intl] Could not find required `intl` object. ' +
|
|
19
12
|
'<IntlProvider> needs to exist in the component ancestry.');
|
|
20
13
|
}
|
|
21
|
-
|
|
22
|
-
var toKeyedReactNode = function (reactNode, key) {
|
|
23
|
-
return React.isValidElement(reactNode)
|
|
24
|
-
? React.cloneElement(reactNode, { key: key })
|
|
25
|
-
: reactNode;
|
|
26
|
-
};
|
|
14
|
+
export var DEFAULT_INTL_CONFIG = __assign(__assign({}, CORE_DEFAULT_INTL_CONFIG), { textComponent: React.Fragment });
|
|
27
15
|
/**
|
|
28
16
|
* Builds an array of {@link React.ReactNode}s with index-based keys, similar to
|
|
29
17
|
* {@link React.Children.toArray}. However, this function tells React that it
|
|
@@ -32,28 +20,32 @@ var toKeyedReactNode = function (reactNode, key) {
|
|
|
32
20
|
* React doesn't recommend doing this because it makes reordering inefficient,
|
|
33
21
|
* but we mostly need this for message chunks, which don't tend to reorder to
|
|
34
22
|
* begin with.
|
|
23
|
+
*
|
|
35
24
|
*/
|
|
36
|
-
var toKeyedReactNodeArray = function (children) {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
return (
|
|
43
|
-
|
|
25
|
+
export var toKeyedReactNodeArray = function (children) {
|
|
26
|
+
var childrenArray = React.Children.toArray(children);
|
|
27
|
+
return childrenArray.map(function (child, index) {
|
|
28
|
+
// For React elements, wrap in a keyed Fragment
|
|
29
|
+
// This creates a new element with a key rather than trying to add one after creation
|
|
30
|
+
if (React.isValidElement(child)) {
|
|
31
|
+
return React.createElement(React.Fragment, { key: index }, child);
|
|
32
|
+
}
|
|
33
|
+
return child;
|
|
34
|
+
});
|
|
35
|
+
};
|
|
44
36
|
/**
|
|
45
37
|
* Takes a `formatXMLElementFn`, and composes it in function, which passes
|
|
46
38
|
* argument `parts` through, assigning unique key to each part, to prevent
|
|
47
39
|
* "Each child in a list should have a unique "key"" React error.
|
|
48
40
|
* @param formatXMLElementFn
|
|
49
41
|
*/
|
|
50
|
-
function assignUniqueKeysToParts(formatXMLElementFn) {
|
|
42
|
+
export function assignUniqueKeysToParts(formatXMLElementFn) {
|
|
51
43
|
return function (parts) {
|
|
52
44
|
// eslint-disable-next-line prefer-rest-params
|
|
53
|
-
return formatXMLElementFn(
|
|
45
|
+
return formatXMLElementFn(toKeyedReactNodeArray(parts));
|
|
54
46
|
};
|
|
55
47
|
}
|
|
56
|
-
function shallowEqual(objA, objB) {
|
|
48
|
+
export function shallowEqual(objA, objB) {
|
|
57
49
|
if (objA === objB) {
|
|
58
50
|
return true;
|
|
59
51
|
}
|
package/lib/index.d.ts
DELETED
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import { NumberFormatOptions } from '@formatjs/ecma402-abstract';
|
|
2
|
-
import { CustomFormatConfig, FormatDateOptions, MessageDescriptor } from '@formatjs/intl';
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
import { createIntl } from './src/components/createIntl';
|
|
5
|
-
import FormattedDateTimeRange from './src/components/dateTimeRange';
|
|
6
|
-
import injectIntl, { Context as IntlContext, Provider as RawIntlProvider, WithIntlProps, WrappedComponentProps } from './src/components/injectIntl';
|
|
7
|
-
import FormattedMessage from './src/components/message';
|
|
8
|
-
import FormattedPlural from './src/components/plural';
|
|
9
|
-
import IntlProvider from './src/components/provider';
|
|
10
|
-
import FormattedRelativeTime from './src/components/relative';
|
|
11
|
-
import useIntl from './src/components/useIntl';
|
|
12
|
-
import { IntlShape } from './src/types';
|
|
13
|
-
export { createIntlCache, CustomFormatConfig, CustomFormats, FormatDateOptions, FormatDisplayNameOptions, FormatListOptions, FormatNumberOptions, FormatPluralOptions, FormatRelativeTimeOptions, Formatters, IntlCache, IntlFormatters, InvalidConfigError, MessageDescriptor, MessageFormatError, MissingDataError, MissingTranslationError, IntlError as ReactIntlError, IntlErrorCode as ReactIntlErrorCode, UnsupportedFormatterError, } from '@formatjs/intl';
|
|
14
|
-
export { IntlConfig, IntlShape, ResolvedIntlConfig } from './src/types';
|
|
15
|
-
export { createIntl, FormattedDateTimeRange, FormattedMessage, FormattedPlural, FormattedRelativeTime, injectIntl, IntlContext, IntlProvider, RawIntlProvider, useIntl, WithIntlProps, WrappedComponentProps, };
|
|
16
|
-
export declare function defineMessages<K extends keyof any, T = MessageDescriptor, U extends Record<K, T> = Record<K, T>>(msgs: U): U;
|
|
17
|
-
export declare function defineMessage<T extends MessageDescriptor>(msg: T): T;
|
|
18
|
-
export declare const FormattedDate: React.FC<Intl.DateTimeFormatOptions & CustomFormatConfig & {
|
|
19
|
-
value: string | number | Date | undefined;
|
|
20
|
-
children?(formattedDate: string): React.ReactElement | null;
|
|
21
|
-
}>;
|
|
22
|
-
export declare const FormattedTime: React.FC<Intl.DateTimeFormatOptions & CustomFormatConfig & {
|
|
23
|
-
value: string | number | Date | undefined;
|
|
24
|
-
children?(formattedTime: string): React.ReactElement | null;
|
|
25
|
-
}>;
|
|
26
|
-
export declare const FormattedNumber: React.FC<Omit<NumberFormatOptions, 'localeMatcher'> & CustomFormatConfig<'number'> & {
|
|
27
|
-
value: Parameters<IntlShape['formatNumber']>[0];
|
|
28
|
-
children?(formattedNumber: string): React.ReactElement | null;
|
|
29
|
-
}>;
|
|
30
|
-
export declare const FormattedList: React.FC<Intl.ListFormatOptions & {
|
|
31
|
-
value: readonly React.ReactNode[];
|
|
32
|
-
}>;
|
|
33
|
-
export declare const FormattedDisplayName: React.FC<Intl.DisplayNamesOptions & {
|
|
34
|
-
value: string;
|
|
35
|
-
}>;
|
|
36
|
-
export declare const FormattedDateParts: React.FC<FormatDateOptions & {
|
|
37
|
-
value: Parameters<Intl.DateTimeFormat['format']>[0] | string;
|
|
38
|
-
children(val: Intl.DateTimeFormatPart[]): React.ReactElement | null;
|
|
39
|
-
}>;
|
|
40
|
-
export declare const FormattedTimeParts: React.FC<FormatDateOptions & {
|
|
41
|
-
value: Parameters<Intl.DateTimeFormat['format']>[0] | string;
|
|
42
|
-
children(val: Intl.DateTimeFormatPart[]): React.ReactElement | null;
|
|
43
|
-
}>;
|
|
44
|
-
export type { MessageFormatElement } from '@formatjs/icu-messageformat-parser';
|
|
45
|
-
export type { PrimitiveType } from 'intl-messageformat';
|
|
46
|
-
export { FormattedListParts, FormattedNumberParts, } from './src/components/createFormattedComponent';
|