diff --git a/CHANGELOG.md b/CHANGELOG.md index 677708c7b..f14293d4d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +### 7.5.0 +- passes down tReady from translate hoc for cases you prefer showing a placeholder instead of default return null in case of wait: true and not yet loaded translations [PR400](https://github.com/i18next/react-i18next/pull/400) +- I18n render prop calls with ready as third param + ### 7.4.0 - enables setting prop `ns` on Trans component to override namespace passed by render prop or hoc - allows trans component with no children just returning the string getting from translations diff --git a/package.json b/package.json index 886bbce18..a65cbf0db 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-i18next", - "version": "7.4.0", + "version": "7.5.0", "description": "Internationalization for react done right. Using the i18next i18n ecosystem.", "main": "dist/commonjs/index.js", "jsnext:main": "dist/es/index.js", diff --git a/react-i18next.js b/react-i18next.js index b031240d1..6dc792672 100644 --- a/react-i18next.js +++ b/react-i18next.js @@ -551,7 +551,7 @@ var I18n = function (_Component) { if (!this.mounted) return; this.t = this.getI18nTranslate(); - this.setState({ i18nLoadedAt: new Date() }); + this.setState({ i18nLoadedAt: new Date() }); // rerender } }, { key: 'getI18nTranslate', @@ -577,7 +577,11 @@ var I18n = function (_Component) { }, 100); } - return children(this.t, { i18n: this.i18n, t: this.t }); + return children(this.t, { + i18n: this.i18n, + t: this.t, + ready: ready + }); } }]); return I18n; @@ -653,8 +657,12 @@ function translate(namespaceArg) { }; } - return React__default.createElement(I18n, _extends({ ns: this.namespaces }, this.options, this.props, { i18n: this.i18n }), function (t, context) { - return React__default.createElement(WrappedComponent, _extends({}, _this2.props, extraProps, context)); + return React__default.createElement(I18n, _extends({ ns: this.namespaces }, this.options, this.props, { i18n: this.i18n }), function (t, _ref) { + var ready = _ref.ready, + context = objectWithoutProperties(_ref, ['ready']); + return React__default.createElement(WrappedComponent, _extends({ + tReady: ready + }, _this2.props, extraProps, context)); }); } }]); diff --git a/react-i18next.min.js b/react-i18next.min.js index d76f2a4b2..ff0c38027 100644 --- a/react-i18next.min.js +++ b/react-i18next.min.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["exports","react","prop-types"],t):t(e.reactI18next={},e.React,e.PropTypes)}(this,function(e,t,n){"use strict";function i(e,t){return e===t?0!==e||0!==t||1/e==1/t:e!==e&&t!==t}function r(e,t){if(i(e,t))return!0;if("object"!==(void 0===e?"undefined":C(e))||null===e||"object"!==(void 0===t?"undefined":C(t))||null===t)return!1;var n=Object.keys(e),r=Object.keys(t);if(n.length!==r.length)return!1;for(var o=0;o1&&void 0!==arguments[1]?arguments[1]:{};return function(o){var s=function(t){function n(t,r){E(this,n);var o=W(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,t,r));o.i18n=t.i18n||i.i18n||r.i18n||c(),o.namespaces="function"==typeof e?e(t):e||o.i18n.options&&o.i18n.options.defaultNS,"string"==typeof o.namespaces&&(o.namespaces=[o.namespaces]);var s=o.i18n&&o.i18n.options&&o.i18n.options.react||{};return o.options=N({},a(),s,i),o.getWrappedInstance=o.getWrappedInstance.bind(o),o}return A(n,t),R(n,[{key:"shouldComponentUpdate",value:function(e){return!this.options.usePureComponent||!r(this.props,e)}},{key:"getWrappedInstance",value:function(){return this.options.withRef||console.error("To access the wrapped instance, you need to specify { withRef: true } as the second argument of the translate() call."),this.wrappedInstance}},{key:"render",value:function(){var e=this,t={};return this.options.withRef&&(t.ref=function(t){e.wrappedInstance=t}),j.createElement(H,N({ns:this.namespaces},this.options,this.props,{i18n:this.i18n}),function(n,i){return j.createElement(o,N({},e.props,t,i))})}}]),n}(t.Component);return s.WrappedComponent=o,s.contextTypes={i18n:n.object},s.displayName="Translate("+p(o)+")",s.namespaces=e,_(s,o)}}function l(e,t,n,i,r){var o=t.indexOf("<",i),a=t.slice(i,-1===o?void 0:o);/^\s*$/.test(a)&&(a=" "),(!r&&o>-1&&n+e.length>=0||" "!==a)&&e.push({type:"text",content:a})}function f(e){var t=[];for(var n in e)t.push(n+'="'+e[n]+'"');return t.length?" "+t.join(" "):""}function h(e,t){switch(t.type){case"text":return e+t.content;case"tag":return e+="<"+t.name+(t.attrs?f(t.attrs):"")+(t.voidElement?"/>":">"),t.voidElement?e:e+t.children.reduce(h,"")+""}}function d(e){return e&&(e.children||e.props&&e.props.children)}function y(e){return e&&e.children?e.children:e.props&&e.props.children}function v(e,t,n){return t?("[object Array]"!==Object.prototype.toString.call(t)&&(t=[t]),t.forEach(function(t,n){var i=""+n;if("string"==typeof t)e=""+e+t;else if(d(t))e=e+"<"+i+">"+v("",y(t),n+1)+"";else if(j.isValidElement(t))e=e+"<"+i+">";else if("object"===(void 0===t?"undefined":C(t))){var r=N({},t),o=r.format;delete r.format;var a=Object.keys(r);o&&1===a.length?e=e+"<"+i+">{{"+a[0]+", "+o+"}}":1===a.length?e=e+"<"+i+">{{"+a[0]+"}}":console&&console.warn&&console.warn("react-i18next: the passed in object contained more than one variable - the object should look like {{ value, format }} where format is optional.",t)}else console&&console.warn&&console.warn("react-i18next: the passed in value is invalid - seems you passed in a variable like {number} - please pass in variables for interpolation as full objects like {{number}}.",t)}),e):""}function m(e,t,n){function i(e,t){return"[object Array]"!==Object.prototype.toString.call(e)&&(e=[e]),"[object Array]"!==Object.prototype.toString.call(t)&&(t=[t]),t.reduce(function(t,r,o){if("tag"===r.type){var a=e[parseInt(r.name,10)]||{},s=j.isValidElement(a);if("string"==typeof a)t.push(a);else if(d(a)){var c=i(y(a),r.children);a.dummy&&(a.children=c),t.push(j.cloneElement(a,N({},a.props,{key:o}),c))}else if("object"!==(void 0===a?"undefined":C(a))||s)t.push(a);else{var p=n.services.interpolator.interpolate(r.children[0].content,a,n.language);t.push(p)}}else"text"===r.type&&t.push(r.content);return t},[])}return""===t?[]:e?y(i([{dummy:!0,children:e}],Q.parse("<0>"+t+""))[0]):[t]}function g(e,t){for(var n=0,i=e.length;n=0||Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i]);return n},W=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},q=function(){function e(e,t){var n=[],i=!0,r=!1,o=void 0;try{for(var a,s=e[Symbol.iterator]();!(i=(a=s.next()).done)&&(n.push(a.value),!t||n.length!==t);i=!0);}catch(e){r=!0,o=e}finally{try{!i&&s.return&&s.return()}finally{if(r)throw o}}return n}return function(t,n){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return e(t,n);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),M=Object.prototype.hasOwnProperty,D={wait:!1,withRef:!1,bindI18n:"languageChanged loaded",bindStore:"added removed",translateFuncName:"t",nsMode:"default",usePureComponent:!1},K=void 0,$={type:"3rdParty",init:function(e){o(e.options.react),s(e)}},z=!1,H=function(e){function t(e,n){E(this,t);var i=W(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e,n));i.i18n=e.i18n||n.i18n||c(),i.namespaces=i.props.ns||i.i18n.options&&i.i18n.options.defaultNS,"string"==typeof i.namespaces&&(i.namespaces=[i.namespaces]);var r=i.i18n&&i.i18n.options&&i.i18n.options.react||{};i.options=N({},a(),r,e),e.initialI18nStore&&(i.i18n.services.resourceStore.data=e.initialI18nStore,i.options.wait=!1),e.initialLanguage&&i.i18n.changeLanguage(e.initialLanguage),i.i18n.options&&i.i18n.options.isInitialSSR&&(i.options.wait=!1);var o=i.i18n.languages&&i.i18n.languages[0],s=!!o&&i.namespaces.every(function(e){return i.i18n.hasResourceBundle(o,e)});return i.state={i18nLoadedAt:null,ready:s},i.onI18nChanged=i.onI18nChanged.bind(i),i.getI18nTranslate=i.getI18nTranslate.bind(i),i}return A(t,e),R(t,[{key:"getChildContext",value:function(){return{t:this.t,i18n:this.i18n}}},{key:"componentWillMount",value:function(){this.t=this.getI18nTranslate()}},{key:"componentDidMount",value:function(){var e=this,t=function(){e.options.bindI18n&&e.i18n&&e.i18n.on(e.options.bindI18n,e.onI18nChanged),e.options.bindStore&&e.i18n.store&&e.i18n.store.on(e.options.bindStore,e.onI18nChanged)};this.mounted=!0,this.i18n.loadNamespaces(this.namespaces,function(){var n=function(){e.mounted&&!e.state.ready&&e.setState({ready:!0}),e.options.wait&&e.mounted&&t()};if(e.i18n.isInitialized)n();else{e.i18n.on("initialized",function t(){setTimeout(function(){e.i18n.off("initialized",t)},1e3),n()})}}),this.options.wait||t()}},{key:"componentWillUnmount",value:function(){var e=this;this.mounted=!1,this.onI18nChanged&&(this.options.bindI18n&&this.options.bindI18n.split(" ").forEach(function(t){return e.i18n.off(t,e.onI18nChanged)}),this.options.bindStore&&this.options.bindStore.split(" ").forEach(function(t){return e.i18n.store&&e.i18n.store.off(t,e.onI18nChanged)}))}},{key:"onI18nChanged",value:function(){this.mounted&&(this.t=this.getI18nTranslate(),this.setState({i18nLoadedAt:new Date}))}},{key:"getI18nTranslate",value:function(){return this.i18n.getFixedT(null,"fallback"===this.options.nsMode?this.namespaces:this.namespaces[0])}},{key:"render",value:function(){var e=this,t=this.props.children;return!this.state.ready&&this.options.wait?null:(this.i18n.options&&this.i18n.options.isInitialSSR&&!z&&(z=!0,setTimeout(function(){delete e.i18n.options.isInitialSSR},100)),t(this.t,{i18n:this.i18n,t:this.t}))}}]),t}(t.Component);H.contextTypes={i18n:n.object},H.childContextTypes={t:n.func.isRequired,i18n:n.object},u.setDefaults=o,u.setI18n=s;var V=function(e){function t(e,n){E(this,t);var i=W(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e,n));return i.i18n=e.i18n||n.i18n,i.t=e.t||n.t,i}return A(t,e),R(t,[{key:"render",value:function(){var e=this,t=this.props.parent||"span",n=this.props.regexp||this.i18n.services.interpolator.regexp,i=this.props,r=i.className,o=i.style,a=this.props.useDangerouslySetInnerHTML||!1,s=this.props.dangerouslySetInnerHTMLPartElement||"span",c=N({},this.props.options,{interpolation:{prefix:"#$?",suffix:"?$#"}}),p=this.t(this.props.i18nKey,c);if(!p||"string"!=typeof p)return j.createElement("noscript",null);var u=[],l=function(t,n){if(t.indexOf(e.i18n.options.interpolation.formatSeparator)<0)return void 0===n[t]&&e.i18n.services.logger.warn("interpolator: missed to pass in variable "+t+" for interpolating "+p),n[t];var i=t.split(e.i18n.options.interpolation.formatSeparator),r=i.shift().trim(),o=i.join(e.i18n.options.interpolation.formatSeparator).trim();return void 0===n[r]&&e.i18n.services.logger.warn("interpolator: missed to pass in variable "+r+" for interpolating "+p),e.i18n.options.interpolation.format(n[r],o,e.i18n.language)};p.split(n).reduce(function(t,n,i){var r=void 0;if(i%2==0){if(0===n.length)return t;r=a?j.createElement(s,{dangerouslySetInnerHTML:{__html:n}}):n}else r=l(n,e.props);return t.push(r),t},u);var f={};if(this.i18n.options.react&&this.i18n.options.react.exposeNamespace){var h="string"==typeof this.t.ns?this.t.ns:this.t.ns[0];this.props.i18nKey&&this.i18n.options.nsSeparator&&this.props.i18nKey.indexOf(this.i18n.options.nsSeparator)>-1&&(h=this.props.i18nKey.split(this.i18n.options.nsSeparator)[0]),this.t.ns&&(f["data-i18next-options"]=JSON.stringify({ns:h}))}return r&&(f.className=r),o&&(f.style=o),j.createElement.apply(this,[t,f].concat(u))}}]),t}(t.Component);V.propTypes={className:n.string},V.defaultProps={className:""},V.contextTypes={i18n:n.object.isRequired,t:n.func.isRequired};var F={area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,menuitem:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0},J=/([\w-]+)|=|(['"])([.\s\S]*?)\2/g,U=function(e){var t,n=0,i=!0,r={type:"tag",name:"",voidElement:!1,attrs:{},children:[]};return e.replace(J,function(o){if("="===o)return i=!0,void n++;i?0===n?((F[o]||"/"===e.charAt(e.length-2))&&(r.voidElement=!0),r.name=o):(r.attrs[t]=o.replace(/^['"]|['"]$/g,""),t=void 0):(t&&(r.attrs[t]=t),t=o),n++,i=!1}),r},B=/(?:|<(?:"[^"]*"['"]*|'[^']*'['"]*|[^'">])+>)/g,G=Object.create?Object.create(null):{},Q={parse:function(e,t){t||(t={}),t.components||(t.components=G);var n,i=[],r=-1,o=[],a=!1;return e.replace(B,function(s,c){if(a){if(s!=="")return;a=!1}var p,u="/"!==s.charAt(1),f=0===s.indexOf("\x3c!--"),h=c+s.length,d=e.charAt(h);u&&!f&&(r++,"tag"===(n=U(s)).type&&t.components[n.name]&&(n.type="component",a=!0),n.voidElement||a||!d||"<"===d||l(n.children,e,r,h,t.ignoreWhitespace),0===r&&i.push(n),(p=o[r-1])&&p.children.push(n),o[r]=n),(f||!u||n.voidElement)&&(f||r--,!a&&"<"!==d&&d&&l(p=-1===r?i:o[r].children,e,r,h,t.ignoreWhitespace))}),!i.length&&e.length&&l(i,e,0,0,t.ignoreWhitespace),i},stringify:function(e){return e.reduce(function(e,t){return e+h("",t)},"")}},X=function(e){function t(){return E(this,t),W(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return A(t,e),R(t,[{key:"render",value:function(){var e=N({i18n:this.context.i18n,t:this.context.t},this.props),t=e.children,n=e.count,i=e.parent,r=e.i18nKey,o=e.ns,a=e.i18n,s=e.t,c=L(e,["children","count","parent","i18nKey","ns","i18n","t"]),p=s||a.t.bind(a),u=a.options&&a.options.react||{},l=void 0!==i?i:u.defaultTransParent,f=v("",t,0),h=u.hashTransKey,d=r||(h?h(f):f),y=d?p(d,{interpolation:{prefix:"#$?",suffix:"?$#"},defaultValue:f,count:n,ns:o}):f;if(u.exposeNamespace){var g="string"==typeof p.ns?p.ns:p.ns[0];r&&a.options&&a.options.nsSeparator&&r.indexOf(a.options.nsSeparator)>-1&&(g=r.split(a.options.nsSeparator)[0]),p.ns&&(c["data-i18next-options"]=JSON.stringify({ns:g}))}return l?j.createElement(l,c,m(t,y,a)):m(t,y,a)}}]),t}(j.Component);X.propTypes={count:n.number,parent:n.node,i18nKey:n.string,i18n:n.object,t:n.func},X.contextTypes={i18n:n.object.isRequired,t:n.func};var Y=function(e){function n(e,t){E(this,n);var i=W(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e,t));return i.i18n=e.i18n,e.initialI18nStore&&(i.i18n.services.resourceStore.data=e.initialI18nStore,i.i18n.options.isInitialSSR=!0),e.initialLanguage&&i.i18n.changeLanguage(e.initialLanguage),i}return A(n,e),R(n,[{key:"getChildContext",value:function(){return{i18n:this.i18n}}},{key:"componentWillReceiveProps",value:function(e){if(this.props.i18n!==e.i18n)throw new Error("[react-i18next][I18nextProvider]does not support changing the i18n object.")}},{key:"render",value:function(){var e=this.props.children;return t.Children.only(e)}}]),n}(t.Component);Y.propTypes={i18n:n.object.isRequired,children:n.element.isRequired},Y.childContextTypes={i18n:n.object.isRequired},Object.entries||(Object.entries=function(e){for(var t=Object.keys(e),n=t.length,i=new Array(n);n--;)i[n]=[t[n],e[t[n]]];return i}),e.translate=u,e.I18n=H,e.Interpolate=V,e.Trans=X,e.I18nextProvider=Y,e.loadNamespaces=function(e){var t=e.components,n=e.i18n,i=b(t);return new Promise(function(e){n.loadNamespaces(i,e)})},e.reactI18nextModule=$,e.setDefaults=o,e.getDefaults=a,e.setI18n=s,e.getI18n=c,Object.defineProperty(e,"__esModule",{value:!0})}); +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["exports","react","prop-types"],t):t(e.reactI18next={},e.React,e.PropTypes)}(this,function(e,t,n){"use strict";function i(e,t){return e===t?0!==e||0!==t||1/e==1/t:e!==e&&t!==t}function r(e,t){if(i(e,t))return!0;if("object"!==(void 0===e?"undefined":C(e))||null===e||"object"!==(void 0===t?"undefined":C(t))||null===t)return!1;var n=Object.keys(e),r=Object.keys(t);if(n.length!==r.length)return!1;for(var o=0;o1&&void 0!==arguments[1]?arguments[1]:{};return function(o){var s=function(t){function n(t,r){E(this,n);var o=W(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,t,r));o.i18n=t.i18n||i.i18n||r.i18n||c(),o.namespaces="function"==typeof e?e(t):e||o.i18n.options&&o.i18n.options.defaultNS,"string"==typeof o.namespaces&&(o.namespaces=[o.namespaces]);var s=o.i18n&&o.i18n.options&&o.i18n.options.react||{};return o.options=N({},a(),s,i),o.getWrappedInstance=o.getWrappedInstance.bind(o),o}return A(n,t),R(n,[{key:"shouldComponentUpdate",value:function(e){return!this.options.usePureComponent||!r(this.props,e)}},{key:"getWrappedInstance",value:function(){return this.options.withRef||console.error("To access the wrapped instance, you need to specify { withRef: true } as the second argument of the translate() call."),this.wrappedInstance}},{key:"render",value:function(){var e=this,t={};return this.options.withRef&&(t.ref=function(t){e.wrappedInstance=t}),j.createElement(H,N({ns:this.namespaces},this.options,this.props,{i18n:this.i18n}),function(n,i){var r=i.ready,a=L(i,["ready"]);return j.createElement(o,N({tReady:r},e.props,t,a))})}}]),n}(t.Component);return s.WrappedComponent=o,s.contextTypes={i18n:n.object},s.displayName="Translate("+p(o)+")",s.namespaces=e,_(s,o)}}function l(e,t,n,i,r){var o=t.indexOf("<",i),a=t.slice(i,-1===o?void 0:o);/^\s*$/.test(a)&&(a=" "),(!r&&o>-1&&n+e.length>=0||" "!==a)&&e.push({type:"text",content:a})}function f(e){var t=[];for(var n in e)t.push(n+'="'+e[n]+'"');return t.length?" "+t.join(" "):""}function h(e,t){switch(t.type){case"text":return e+t.content;case"tag":return e+="<"+t.name+(t.attrs?f(t.attrs):"")+(t.voidElement?"/>":">"),t.voidElement?e:e+t.children.reduce(h,"")+""}}function d(e){return e&&(e.children||e.props&&e.props.children)}function y(e){return e&&e.children?e.children:e.props&&e.props.children}function v(e,t,n){return t?("[object Array]"!==Object.prototype.toString.call(t)&&(t=[t]),t.forEach(function(t,n){var i=""+n;if("string"==typeof t)e=""+e+t;else if(d(t))e=e+"<"+i+">"+v("",y(t),n+1)+"";else if(j.isValidElement(t))e=e+"<"+i+">";else if("object"===(void 0===t?"undefined":C(t))){var r=N({},t),o=r.format;delete r.format;var a=Object.keys(r);o&&1===a.length?e=e+"<"+i+">{{"+a[0]+", "+o+"}}":1===a.length?e=e+"<"+i+">{{"+a[0]+"}}":console&&console.warn&&console.warn("react-i18next: the passed in object contained more than one variable - the object should look like {{ value, format }} where format is optional.",t)}else console&&console.warn&&console.warn("react-i18next: the passed in value is invalid - seems you passed in a variable like {number} - please pass in variables for interpolation as full objects like {{number}}.",t)}),e):""}function m(e,t,n){function i(e,t){return"[object Array]"!==Object.prototype.toString.call(e)&&(e=[e]),"[object Array]"!==Object.prototype.toString.call(t)&&(t=[t]),t.reduce(function(t,r,o){if("tag"===r.type){var a=e[parseInt(r.name,10)]||{},s=j.isValidElement(a);if("string"==typeof a)t.push(a);else if(d(a)){var c=i(y(a),r.children);a.dummy&&(a.children=c),t.push(j.cloneElement(a,N({},a.props,{key:o}),c))}else if("object"!==(void 0===a?"undefined":C(a))||s)t.push(a);else{var p=n.services.interpolator.interpolate(r.children[0].content,a,n.language);t.push(p)}}else"text"===r.type&&t.push(r.content);return t},[])}return""===t?[]:e?y(i([{dummy:!0,children:e}],Q.parse("<0>"+t+""))[0]):[t]}function g(e,t){for(var n=0,i=e.length;n=0||Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i]);return n},W=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},q=function(){function e(e,t){var n=[],i=!0,r=!1,o=void 0;try{for(var a,s=e[Symbol.iterator]();!(i=(a=s.next()).done)&&(n.push(a.value),!t||n.length!==t);i=!0);}catch(e){r=!0,o=e}finally{try{!i&&s.return&&s.return()}finally{if(r)throw o}}return n}return function(t,n){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return e(t,n);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),M=Object.prototype.hasOwnProperty,D={wait:!1,withRef:!1,bindI18n:"languageChanged loaded",bindStore:"added removed",translateFuncName:"t",nsMode:"default",usePureComponent:!1},K=void 0,$={type:"3rdParty",init:function(e){o(e.options.react),s(e)}},z=!1,H=function(e){function t(e,n){E(this,t);var i=W(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e,n));i.i18n=e.i18n||n.i18n||c(),i.namespaces=i.props.ns||i.i18n.options&&i.i18n.options.defaultNS,"string"==typeof i.namespaces&&(i.namespaces=[i.namespaces]);var r=i.i18n&&i.i18n.options&&i.i18n.options.react||{};i.options=N({},a(),r,e),e.initialI18nStore&&(i.i18n.services.resourceStore.data=e.initialI18nStore,i.options.wait=!1),e.initialLanguage&&i.i18n.changeLanguage(e.initialLanguage),i.i18n.options&&i.i18n.options.isInitialSSR&&(i.options.wait=!1);var o=i.i18n.languages&&i.i18n.languages[0],s=!!o&&i.namespaces.every(function(e){return i.i18n.hasResourceBundle(o,e)});return i.state={i18nLoadedAt:null,ready:s},i.onI18nChanged=i.onI18nChanged.bind(i),i.getI18nTranslate=i.getI18nTranslate.bind(i),i}return A(t,e),R(t,[{key:"getChildContext",value:function(){return{t:this.t,i18n:this.i18n}}},{key:"componentWillMount",value:function(){this.t=this.getI18nTranslate()}},{key:"componentDidMount",value:function(){var e=this,t=function(){e.options.bindI18n&&e.i18n&&e.i18n.on(e.options.bindI18n,e.onI18nChanged),e.options.bindStore&&e.i18n.store&&e.i18n.store.on(e.options.bindStore,e.onI18nChanged)};this.mounted=!0,this.i18n.loadNamespaces(this.namespaces,function(){var n=function(){e.mounted&&!e.state.ready&&e.setState({ready:!0}),e.options.wait&&e.mounted&&t()};if(e.i18n.isInitialized)n();else{e.i18n.on("initialized",function t(){setTimeout(function(){e.i18n.off("initialized",t)},1e3),n()})}}),this.options.wait||t()}},{key:"componentWillUnmount",value:function(){var e=this;this.mounted=!1,this.onI18nChanged&&(this.options.bindI18n&&this.options.bindI18n.split(" ").forEach(function(t){return e.i18n.off(t,e.onI18nChanged)}),this.options.bindStore&&this.options.bindStore.split(" ").forEach(function(t){return e.i18n.store&&e.i18n.store.off(t,e.onI18nChanged)}))}},{key:"onI18nChanged",value:function(){this.mounted&&(this.t=this.getI18nTranslate(),this.setState({i18nLoadedAt:new Date}))}},{key:"getI18nTranslate",value:function(){return this.i18n.getFixedT(null,"fallback"===this.options.nsMode?this.namespaces:this.namespaces[0])}},{key:"render",value:function(){var e=this,t=this.props.children,n=this.state.ready;return!n&&this.options.wait?null:(this.i18n.options&&this.i18n.options.isInitialSSR&&!z&&(z=!0,setTimeout(function(){delete e.i18n.options.isInitialSSR},100)),t(this.t,{i18n:this.i18n,t:this.t,ready:n}))}}]),t}(t.Component);H.contextTypes={i18n:n.object},H.childContextTypes={t:n.func.isRequired,i18n:n.object},u.setDefaults=o,u.setI18n=s;var V=function(e){function t(e,n){E(this,t);var i=W(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e,n));return i.i18n=e.i18n||n.i18n,i.t=e.t||n.t,i}return A(t,e),R(t,[{key:"render",value:function(){var e=this,t=this.props.parent||"span",n=this.props.regexp||this.i18n.services.interpolator.regexp,i=this.props,r=i.className,o=i.style,a=this.props.useDangerouslySetInnerHTML||!1,s=this.props.dangerouslySetInnerHTMLPartElement||"span",c=N({},this.props.options,{interpolation:{prefix:"#$?",suffix:"?$#"}}),p=this.t(this.props.i18nKey,c);if(!p||"string"!=typeof p)return j.createElement("noscript",null);var u=[],l=function(t,n){if(t.indexOf(e.i18n.options.interpolation.formatSeparator)<0)return void 0===n[t]&&e.i18n.services.logger.warn("interpolator: missed to pass in variable "+t+" for interpolating "+p),n[t];var i=t.split(e.i18n.options.interpolation.formatSeparator),r=i.shift().trim(),o=i.join(e.i18n.options.interpolation.formatSeparator).trim();return void 0===n[r]&&e.i18n.services.logger.warn("interpolator: missed to pass in variable "+r+" for interpolating "+p),e.i18n.options.interpolation.format(n[r],o,e.i18n.language)};p.split(n).reduce(function(t,n,i){var r=void 0;if(i%2==0){if(0===n.length)return t;r=a?j.createElement(s,{dangerouslySetInnerHTML:{__html:n}}):n}else r=l(n,e.props);return t.push(r),t},u);var f={};if(this.i18n.options.react&&this.i18n.options.react.exposeNamespace){var h="string"==typeof this.t.ns?this.t.ns:this.t.ns[0];this.props.i18nKey&&this.i18n.options.nsSeparator&&this.props.i18nKey.indexOf(this.i18n.options.nsSeparator)>-1&&(h=this.props.i18nKey.split(this.i18n.options.nsSeparator)[0]),this.t.ns&&(f["data-i18next-options"]=JSON.stringify({ns:h}))}return r&&(f.className=r),o&&(f.style=o),j.createElement.apply(this,[t,f].concat(u))}}]),t}(t.Component);V.propTypes={className:n.string},V.defaultProps={className:""},V.contextTypes={i18n:n.object.isRequired,t:n.func.isRequired};var F={area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,menuitem:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0},J=/([\w-]+)|=|(['"])([.\s\S]*?)\2/g,U=function(e){var t,n=0,i=!0,r={type:"tag",name:"",voidElement:!1,attrs:{},children:[]};return e.replace(J,function(o){if("="===o)return i=!0,void n++;i?0===n?((F[o]||"/"===e.charAt(e.length-2))&&(r.voidElement=!0),r.name=o):(r.attrs[t]=o.replace(/^['"]|['"]$/g,""),t=void 0):(t&&(r.attrs[t]=t),t=o),n++,i=!1}),r},B=/(?:|<(?:"[^"]*"['"]*|'[^']*'['"]*|[^'">])+>)/g,G=Object.create?Object.create(null):{},Q={parse:function(e,t){t||(t={}),t.components||(t.components=G);var n,i=[],r=-1,o=[],a=!1;return e.replace(B,function(s,c){if(a){if(s!=="")return;a=!1}var p,u="/"!==s.charAt(1),f=0===s.indexOf("\x3c!--"),h=c+s.length,d=e.charAt(h);u&&!f&&(r++,"tag"===(n=U(s)).type&&t.components[n.name]&&(n.type="component",a=!0),n.voidElement||a||!d||"<"===d||l(n.children,e,r,h,t.ignoreWhitespace),0===r&&i.push(n),(p=o[r-1])&&p.children.push(n),o[r]=n),(f||!u||n.voidElement)&&(f||r--,!a&&"<"!==d&&d&&l(p=-1===r?i:o[r].children,e,r,h,t.ignoreWhitespace))}),!i.length&&e.length&&l(i,e,0,0,t.ignoreWhitespace),i},stringify:function(e){return e.reduce(function(e,t){return e+h("",t)},"")}},X=function(e){function t(){return E(this,t),W(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return A(t,e),R(t,[{key:"render",value:function(){var e=N({i18n:this.context.i18n,t:this.context.t},this.props),t=e.children,n=e.count,i=e.parent,r=e.i18nKey,o=e.ns,a=e.i18n,s=e.t,c=L(e,["children","count","parent","i18nKey","ns","i18n","t"]),p=s||a.t.bind(a),u=a.options&&a.options.react||{},l=void 0!==i?i:u.defaultTransParent,f=v("",t,0),h=u.hashTransKey,d=r||(h?h(f):f),y=d?p(d,{interpolation:{prefix:"#$?",suffix:"?$#"},defaultValue:f,count:n,ns:o}):f;if(u.exposeNamespace){var g="string"==typeof p.ns?p.ns:p.ns[0];r&&a.options&&a.options.nsSeparator&&r.indexOf(a.options.nsSeparator)>-1&&(g=r.split(a.options.nsSeparator)[0]),p.ns&&(c["data-i18next-options"]=JSON.stringify({ns:g}))}return l?j.createElement(l,c,m(t,y,a)):m(t,y,a)}}]),t}(j.Component);X.propTypes={count:n.number,parent:n.node,i18nKey:n.string,i18n:n.object,t:n.func},X.contextTypes={i18n:n.object.isRequired,t:n.func};var Y=function(e){function n(e,t){E(this,n);var i=W(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e,t));return i.i18n=e.i18n,e.initialI18nStore&&(i.i18n.services.resourceStore.data=e.initialI18nStore,i.i18n.options.isInitialSSR=!0),e.initialLanguage&&i.i18n.changeLanguage(e.initialLanguage),i}return A(n,e),R(n,[{key:"getChildContext",value:function(){return{i18n:this.i18n}}},{key:"componentWillReceiveProps",value:function(e){if(this.props.i18n!==e.i18n)throw new Error("[react-i18next][I18nextProvider]does not support changing the i18n object.")}},{key:"render",value:function(){var e=this.props.children;return t.Children.only(e)}}]),n}(t.Component);Y.propTypes={i18n:n.object.isRequired,children:n.element.isRequired},Y.childContextTypes={i18n:n.object.isRequired},Object.entries||(Object.entries=function(e){for(var t=Object.keys(e),n=t.length,i=new Array(n);n--;)i[n]=[t[n],e[t[n]]];return i}),e.translate=u,e.I18n=H,e.Interpolate=V,e.Trans=X,e.I18nextProvider=Y,e.loadNamespaces=function(e){var t=e.components,n=e.i18n,i=b(t);return new Promise(function(e){n.loadNamespaces(i,e)})},e.reactI18nextModule=$,e.setDefaults=o,e.getDefaults=a,e.setI18n=s,e.getI18n=c,Object.defineProperty(e,"__esModule",{value:!0})}); diff --git a/src/I18n.js b/src/I18n.js index 5f42de44a..c1bbce12b 100644 --- a/src/I18n.js +++ b/src/I18n.js @@ -32,7 +32,10 @@ export default class I18n extends Component { const language = this.i18n.languages && this.i18n.languages[0]; const ready = !!language && this.namespaces.every(ns => this.i18n.hasResourceBundle(language, ns)); - this.state = { ready }; + this.state = { + i18nLoadedAt: null, + ready + }; this.onI18nChanged = this.onI18nChanged.bind(this); this.getI18nTranslate = this.getI18nTranslate.bind(this); @@ -98,6 +101,7 @@ export default class I18n extends Component { if (!this.mounted) return; this.t = this.getI18nTranslate(); + this.setState({ i18nLoadedAt: new Date() }); // rerender } getI18nTranslate() {