react-intl
Version:
Internationalize React apps. This library provides React components and an API to format dates, numbers, and strings, including pluralization and handling translations.
113 lines (112 loc) • 4.5 kB
JavaScript
/*
* Copyright 2015, Yahoo Inc.
* Copyrights licensed under the New BSD License.
* See the accompanying LICENSE file for terms.
*/
import { __assign, __extends, __rest, __spreadArray } from "tslib";
import { createIntl as coreCreateIntl, formatMessage as coreFormatMessage, createIntlCache, } from '@formatjs/intl';
import * as React from 'react';
import { DEFAULT_INTL_CONFIG, assignUniqueKeysToParts, invariantIntlContext, shallowEqual, } from '../utils';
import { Provider } from './injectIntl';
import { isFormatXMLElementFn, } from 'intl-messageformat';
function processIntlConfig(config) {
return {
locale: config.locale,
timeZone: config.timeZone,
fallbackOnEmptyString: config.fallbackOnEmptyString,
formats: config.formats,
textComponent: config.textComponent,
messages: config.messages,
defaultLocale: config.defaultLocale,
defaultFormats: config.defaultFormats,
onError: config.onError,
onWarn: config.onWarn,
wrapRichTextChunksInFragment: config.wrapRichTextChunksInFragment,
defaultRichTextElements: config.defaultRichTextElements,
};
}
function assignUniqueKeysToFormatXMLElementFnArgument(values) {
if (!values) {
return values;
}
return Object.keys(values).reduce(function (acc, k) {
var v = values[k];
acc[k] = isFormatXMLElementFn(v)
? assignUniqueKeysToParts(v)
: v;
return acc;
}, {});
}
var formatMessage = function (config, formatters, descriptor, rawValues) {
var rest = [];
for (var _i = 4; _i < arguments.length; _i++) {
rest[_i - 4] = arguments[_i];
}
var values = assignUniqueKeysToFormatXMLElementFnArgument(rawValues);
var chunks = coreFormatMessage.apply(void 0, __spreadArray([config,
formatters,
descriptor,
values], rest, false));
if (Array.isArray(chunks)) {
return React.Children.toArray(chunks);
}
return chunks;
};
/**
* Create intl object
* @param config intl config
* @param cache cache for formatter instances to prevent memory leak
*/
export var createIntl = function (_a, cache) {
var rawDefaultRichTextElements = _a.defaultRichTextElements, config = __rest(_a, ["defaultRichTextElements"]);
var defaultRichTextElements = assignUniqueKeysToFormatXMLElementFnArgument(rawDefaultRichTextElements);
var coreIntl = coreCreateIntl(__assign(__assign(__assign({}, DEFAULT_INTL_CONFIG), config), { defaultRichTextElements: defaultRichTextElements }), cache);
var resolvedConfig = {
locale: coreIntl.locale,
timeZone: coreIntl.timeZone,
fallbackOnEmptyString: coreIntl.fallbackOnEmptyString,
formats: coreIntl.formats,
defaultLocale: coreIntl.defaultLocale,
defaultFormats: coreIntl.defaultFormats,
messages: coreIntl.messages,
onError: coreIntl.onError,
defaultRichTextElements: defaultRichTextElements,
};
return __assign(__assign({}, coreIntl), { formatMessage: formatMessage.bind(null, resolvedConfig,
// @ts-expect-error fix this
coreIntl.formatters),
// @ts-expect-error fix this
$t: formatMessage.bind(null, resolvedConfig, coreIntl.formatters) });
};
var IntlProvider = /** @class */ (function (_super) {
__extends(IntlProvider, _super);
function IntlProvider() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.cache = createIntlCache();
_this.state = {
cache: _this.cache,
intl: createIntl(processIntlConfig(_this.props), _this.cache),
prevConfig: processIntlConfig(_this.props),
};
return _this;
}
IntlProvider.getDerivedStateFromProps = function (props, _a) {
var prevConfig = _a.prevConfig, cache = _a.cache;
var config = processIntlConfig(props);
if (!shallowEqual(prevConfig, config)) {
return {
intl: createIntl(config, cache),
prevConfig: config,
};
}
return null;
};
IntlProvider.prototype.render = function () {
invariantIntlContext(this.state.intl);
return React.createElement(Provider, { value: this.state.intl }, this.props.children);
};
IntlProvider.displayName = 'IntlProvider';
IntlProvider.defaultProps = DEFAULT_INTL_CONFIG;
return IntlProvider;
}(React.PureComponent));
export default IntlProvider;