@enact/i18n
Version:
Internationalization support for Enact using iLib
270 lines (264 loc) • 9.9 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "I18nContext", {
enumerable: true,
get: function get() {
return _useI18nContext.I18nContext;
}
});
exports["default"] = exports.I18nDecorator = exports.I18nContextDecorator = void 0;
Object.defineProperty(exports, "useI18n", {
enumerable: true,
get: function get() {
return _useI18n2["default"];
}
});
Object.defineProperty(exports, "useI18nContext", {
enumerable: true,
get: function get() {
return _useI18nContext.useI18nContext;
}
});
var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
var _propTypes = _interopRequireDefault(require("prop-types"));
require("../src/glue");
var _useI18n2 = _interopRequireDefault(require("./useI18n"));
var _useI18nContext = require("./useI18nContext");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["locale"],
_excluded2 = ["className"];
/**
* Adds Internationalization (I18N) support to an application using ilib.
*
* @module i18n/I18nDecorator
* @exports I18nDecorator
* @exports I18nContextDecorator
*/
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
var join = function join(a, b) {
return a && b ? a + ' ' + b : a || b || '';
};
/**
* Default config for `I18nDecorator`.
*
* @memberof i18n/I18nDecorator.I18nDecorator
* @hocconfig
*/
var defaultConfig = {
/**
* Array of locales that should be treated as latin regardless of their script.
*
* @type {String[]}
* @default null
* @public
* @memberof i18n/I18nDecorator.I18nDecorator.defaultConfig
*/
latinLanguageOverrides: null,
/**
* Array of locales that should be treated as non-latin regardless of their script.
*
* @type {String[]}
* @default null
* @public
* @memberof i18n/I18nDecorator.I18nDecorator.defaultConfig
*/
nonLatinLanguageOverrides: null,
/**
* Array of resource loaders to be invoked after a locale change.
*
* Each loader must be a function which accepts an object and returns either the resource when
* `options.sync` is `true` or a `Promise` for the resource when `options.sync` is `false`.
*
* ```
* resources: [
* (options) => new Promise((resolve, reject) => {
* fetchResource({onLoad: resolve, onError: reject});
* })
* ]
* ```
*
* If you need to handle the resource in some way on load, you can pass an object with an
* `onLoad` member that will be called once all resources have been loaded. This should be used
* if loading a resource has side effects that should only be applied once all loading has
* completed.
*
* ```
* resources: [
* {resource: (options) => { ... fetch ... }, onLoad: (res) => { ... apply side effect ... }}
* ]
* ```
*
* @type {Array<Function|Object>}
* @default null
* @public
* @memberof i18n/I18nDecorator.I18nDecorator.defaultConfig
*/
resources: null,
/**
* Retrieve i18n resource files synchronously.
*
* @type {Boolean}
* @default false
* @public
* @memberof i18n/I18nDecorator.I18nDecorator.defaultConfig
*/
sync: false
};
/**
* A higher-order component that is used to wrap the root element in an app. It provides an `rtl`
* member on the context of the wrapped component, allowing the children to check the current text
* directionality as well as an `updateLocale` method that can be used to update the current locale.
*
* There are no configurable options on this HOC.
*
* Note: This HoC passes `className` to the wrapped component. It must be passed to the main DOM
* node.
*
* @class I18nDecorator
* @memberof i18n/I18nDecorator
* @hoc
* @public
*/
var I18nDecorator = exports.I18nDecorator = (0, _hoc["default"])(defaultConfig, function (config, Wrapped) {
// eslint-disable-next-line no-shadow
function I18nDecorator(props) {
var locale = props.locale,
rest = _objectWithoutProperties(props, _excluded);
var _useI18n = (0, _useI18n2["default"])(_objectSpread({
locale: locale
}, config)),
i18nClassName = _useI18n.className,
i18n = _objectWithoutProperties(_useI18n, _excluded2);
var className = join(i18nClassName, props.className);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_useI18nContext.I18nContext, {
value: i18n,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread(_objectSpread({}, rest), {}, {
className: className
}))
});
}
I18nDecorator.propTypes = /** @lends i18n/I18nDecorator.I18nDecorator.prototype */{
/**
* Classes to apply to the wrapped component.
*
* @type {String}
* @public
*/
className: _propTypes["default"].string,
/**
* The locale to use.
*
* A string with a {@link https://tools.ietf.org/html/rfc5646|BCP 47 language tag}. The
* system locale will be used by default.
*
* @type {String}
* @public
*/
locale: _propTypes["default"].string
};
return I18nDecorator;
});
/**
* Default config for `I18nContextDecorator`.
*
* @memberof i18n/I18nDecorator.I18nContextDecorator
* @hocconfig
*/
var contextDefaultConfig = {
/**
* The prop name for `locale` property of i18nContext.
*
* @type {String}
* @default null
* @public
* @memberof i18n/I18nDecorator.I18nContextDecorator.contextDefaultConfig
*/
localeProp: null,
/**
* The prop name for `rtl` property of i18nContext.
*
* @type {String}
* @default null
* @public
* @memberof i18n/I18nDecorator.I18nContextDecorator.contextDefaultConfig
*/
rtlProp: null,
/**
* The prop name for `updateLocale` property of i18nContext.
*
* @type {String}
* @default null
* @public
* @memberof i18n/I18nDecorator.I18nContextDecorator.contextDefaultConfig
*/
updateLocaleProp: null
};
/**
* A higher-order component that provides access to the properties of the i18nContext via props.
* This is achieved by specifying the `localeProp`, `rtlProp`, and `updateLocaleProp` configuration options.
* Set the `localeProp` to a desired prop name to access the {@link /docs/developer-guide/i18n/#using-i18ndecorator|locale} property,
* set the `rtlProp` to a desired prop name to access the {@link /docs/developer-guide/i18n/#using-i18ndecorator|rtl} property,
* and set the `updateLocaleProp` to a desired prop name to access the {@link /docs/developer-guide/i18n/#using-i18ndecorator|updateLocale} function,
* which is used to update the current locale.
*
* Example:
* ```
* const Component = ({rtl, _updateLocale}) => {
* const handleClick = () => _updateLocale('ar-SA');
* return (
* <button onClick={handleClick}>{rtl ? 'rtl' : 'ltr'}</button>
* );
* };
*
* const SomeComponent = I18nContextDecorator(
* {rtlProp: 'rtl', updateLocaleProp: '_updateLocale'},
* Component
* )
*
* ```
*
* @class I18nContextDecorator
* @memberof i18n/I18nDecorator
* @hoc
* @public
*/
var I18nContextDecorator = exports.I18nContextDecorator = (0, _hoc["default"])(contextDefaultConfig, function (config, Wrapped) {
var loadedProp = config.loadedProp,
localeProp = config.localeProp,
rtlProp = config.rtlProp,
updateLocaleProp = config.updateLocaleProp;
// eslint-disable-next-line no-shadow
return function I18nContextDecorator(props) {
var i18nContext = (0, _useI18nContext.useI18nContext)();
if (i18nContext) {
var loaded = i18nContext.loaded,
locale = i18nContext.locale,
rtl = i18nContext.rtl,
updateLocale = i18nContext.updateLocale;
props = _objectSpread({}, props);
if (loadedProp) {
props[loadedProp] = loaded;
}
if (localeProp) {
props[localeProp] = locale;
}
if (rtlProp) {
props[rtlProp] = rtl;
}
if (updateLocaleProp) {
props[updateLocaleProp] = updateLocale;
}
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread({}, props));
};
});
var _default = exports["default"] = I18nDecorator;