From ff504bc31026860cdeaa3bfbe36fbf29a95da7fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rodrigo=20Arg=C3=BCello?= Date: Wed, 10 Aug 2016 13:39:48 +0200 Subject: [PATCH 1/2] Add translateFuncName option to Translate HOC This is a non-mandatory option, with it's default value set to 't', same as before. --- react-i18next.js | 29 ++++++++++++++++++++++------- react-i18next.min.js | 2 +- src/translate.js | 10 +++++----- 3 files changed, 28 insertions(+), 13 deletions(-) diff --git a/react-i18next.js b/react-i18next.js index 6613b3b66..6b9a7cd60 100644 --- a/react-i18next.js +++ b/react-i18next.js @@ -95,6 +95,21 @@ }; }(); + var defineProperty = function (obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true + }); + } else { + obj[key] = value; + } + + return obj; + }; + var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; @@ -181,6 +196,8 @@ var withRef = _options$withRef === undefined ? false : _options$withRef; var _options$wait = options.wait; var wait = _options$wait === undefined ? false : _options$wait; + var _options$translateFun = options.translateFuncName; + var translateFuncName = _options$translateFun === undefined ? 't' : _options$translateFun; return function Wrapper(WrappedComponent) { @@ -207,12 +224,12 @@ createClass(Translate, [{ key: 'getChildContext', value: function getChildContext() { - return { t: this.t }; + return defineProperty({}, translateFuncName, this[translateFuncName]); } }, { key: 'componentWillMount', value: function componentWillMount() { - this.t = this.i18n.getFixedT(null, namespaces); + this[translateFuncName] = this.i18n.getFixedT(null, namespaces); } }, { key: 'componentDidMount', @@ -261,7 +278,7 @@ var i18nLoadedAt = _state.i18nLoadedAt; var ready = _state.ready; - var extraProps = { i18nLoadedAt: i18nLoadedAt, t: this.t }; + var extraProps = defineProperty({ i18nLoadedAt: i18nLoadedAt }, translateFuncName, this[translateFuncName]); if (withRef) { extraProps.ref = 'wrappedInstance'; @@ -281,9 +298,7 @@ i18n: React.PropTypes.object.isRequired }; - Translate.childContextTypes = { - t: React.PropTypes.func.isRequired - }; + Translate.childContextTypes = defineProperty({}, translateFuncName, React.PropTypes.func.isRequired); Translate.displayName = 'Translate(' + getDisplayName(WrappedComponent) + ')'; @@ -368,7 +383,7 @@ key: 'componentWillReceiveProps', value: function componentWillReceiveProps(nextProps) { if (this.props.i18n !== nextProps.i18n) { - console.error('[react-i18next][I18nextProvider]does not support changing the i18n object.'); + throw new Error('[react-i18next][I18nextProvider]does not support changing the i18n object.'); } } }, { diff --git a/react-i18next.min.js b/react-i18next.min.js index cb584f2e4..f2cdd2663 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")):"function"==typeof define&&define.amd?define("reactI18next",["exports","react"],t):t(e.reactI18next=e.reactI18next||{},e.React)}(this,function(e,t){"use strict";function n(e,t){return t={exports:{}},e(t,t.exports),t.exports}function r(e){return e.displayName||e.name||"Component"}function o(e){var n=arguments.length<=1||void 0===arguments[1]?{}:arguments[1],o=n.withRef,i=void 0!==o&&o,a=n.wait,s=void 0!==a&&a;return function(n){var o=function(t){function r(t,n){f(this,r);var o=v(this,Object.getPrototypeOf(r).call(this,t,n));return o.i18n=n.i18n,e=e||o.i18n.options.defaultNS,o.state={i18nLoadedAt:null,ready:!1},o.onI18nChanged=o.onI18nChanged.bind(o),o}return y(r,t),d(r,[{key:"getChildContext",value:function(){return{t:this.t}}},{key:"componentWillMount",value:function(){this.t=this.i18n.getFixedT(null,e)}},{key:"componentDidMount",value:function(){var t=this;this.mounted=!0,this.i18n.loadNamespaces(e,function(){t.mounted&&t.setState({ready:!0})}),this.i18n.on("languageChanged loaded",this.onI18nChanged),this.i18n.store.on("added removed",this.onI18nChanged)}},{key:"componentWillUnmount",value:function(){this.mounted=!1,this.onI18nChanged&&(this.i18n.off("languageChanged",this.onI18nChanged),this.i18n.off("loaded",this.onI18nChanged),this.i18n.store.off("added",this.onI18nChanged),this.i18n.store.off("removed",this.onI18nChanged))}},{key:"onI18nChanged",value:function(){this.mounted&&this.setState({i18nLoadedAt:new Date})}},{key:"getWrappedInstance",value:function(){return i||console.error("To access the wrapped instance, you need to specify { withRef: true } as the second argument of the translate() call."),this.refs.wrappedInstance}},{key:"render",value:function(){var e=this.state,t=e.i18nLoadedAt,r=e.ready,o={i18nLoadedAt:t,t:this.t};return i&&(o.ref="wrappedInstance"),!r&&s?null:u.createElement(n,h({},this.props,o))}}]),r}(t.Component);return o.WrappedComponent=n,o.contextTypes={i18n:t.PropTypes.object.isRequired},o.childContextTypes={t:t.PropTypes.func.isRequired},o.displayName="Translate("+r(n)+")",o.namespaces=e,p(o,n)}}function i(e,t){for(var n=0,r=e.length;n Date: Wed, 10 Aug 2016 13:47:57 +0200 Subject: [PATCH 2/2] Update README.md with translateFuncName parameter --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index aaa92664f..667d6a3ca 100644 --- a/README.md +++ b/README.md @@ -52,6 +52,7 @@ __translate(namespaces, options)__: higher-order component to wrap a translatabl - props.t will default to first namespace in array of given namespaces (providing a string as namespace will convert automatically to array, providing no namespaces will default to `defaultNS`) - used nested inside I18nextProvider (context.i18n) - passing `{ withRef: true }` to options store a ref to the wrapped component instance making it available via `getWrappedInstance()` method +- passing `{ translateFuncName: 'someFunctionName' }` will change the name of the property passed to the child component for the translation function (by default, the value is `t`). This is useful if you are already using a concrete function name for extracting the translation chains from your source files ```javascript