* {'Hello, { $username }!'}
*
*
* It's recommended that the contents of the wrapped component be a string
* expression. The string will be used as the ultimate fallback if no
* translation is available. It also makes it easy to grep for strings in the
* source code.
*/
class localized_Localized extends external__React_["Component"] {
componentDidMount() {
const { l10n } = this.context;
if (l10n) {
l10n.subscribe(this);
}
}
componentWillUnmount() {
const { l10n } = this.context;
if (l10n) {
l10n.unsubscribe(this);
}
}
/*
* Rerender this component in a new language.
*/
relocalize() {
// When the `ReactLocalization`'s fallback chain changes, update the
// component.
this.forceUpdate();
}
render() {
const { l10n } = this.context;
const { id, attrs, children } = this.props;
const elem = external__React_["Children"].only(children);
if (!l10n) {
// Use the wrapped component as fallback.
return elem;
}
const mcx = l10n.getMessageContext(id);
if (mcx === null) {
// Use the wrapped component as fallback.
return elem;
}
const msg = mcx.getMessage(id);
const [args, elems] = toArguments(this.props);
const {
value: messageValue,
attrs: messageAttrs
} = l10n.formatCompound(mcx, msg, args);
// The default is to forbid all message attributes. If the attrs prop exists
// on the Localized instance, only set message attributes which have been
// explicitly allowed by the developer.
if (attrs && messageAttrs) {
var localizedProps = {};
for (const [name, value] of Object.entries(messageAttrs)) {
if (attrs[name]) {
localizedProps[name] = value;
}
}
}
// If the wrapped component is a known void element, explicitly dismiss the
// message value and do not pass it to cloneElement in order to avoid the
// "void element tags must neither have `children` nor use
// `dangerouslySetInnerHTML`" error.
if (elem.type in vendor_voidElementTags) {
return Object(external__React_["cloneElement"])(elem, localizedProps);
}
// If the message has a null value, we're only interested in its attributes.
// Do not pass the null value to cloneElement as it would nuke all children
// of the wrapped component.
if (messageValue === null) {
return Object(external__React_["cloneElement"])(elem, localizedProps);
}
// If the message value doesn't contain any markup nor any HTML entities,
// insert it as the only child of the wrapped component.
if (!reMarkup.test(messageValue)) {
return Object(external__React_["cloneElement"])(elem, localizedProps, messageValue);
}
// If the message contains markup, parse it and try to match the children
// found in the translation with the props passed to this Localized.
const translationNodes = Array.from(parseMarkup(messageValue).childNodes);
const translatedChildren = translationNodes.map(childNode => {
if (childNode.nodeType === childNode.TEXT_NODE) {
return childNode.textContent;
}
// If the child is not expected just take its textContent.
if (!elems.hasOwnProperty(childNode.localName)) {
return childNode.textContent;
}
const sourceChild = elems[childNode.localName];
// If the element passed as a prop to