From a7b32277ccecce2239110d847be5102712f8c8e8 Mon Sep 17 00:00:00 2001 From: kaesonho Date: Tue, 26 Jan 2016 17:53:55 -0800 Subject: [PATCH] customized display name --- docs/api/createI13nNode.md | 4 +++- docs/api/setupI13n.md | 1 + src/utils/createI13nNode.js | 10 +++++++--- src/utils/setupI13n.js | 5 ++++- tests/unit/utils/createI13nNode.js | 13 +++++++++++++ tests/unit/utils/setupI13n.js | 13 +++++++++++++ 6 files changed, 41 insertions(+), 5 deletions(-) diff --git a/docs/api/createI13nNode.md b/docs/api/createI13nNode.md index 49400a9a..7dc69feb 100644 --- a/docs/api/createI13nNode.md +++ b/docs/api/createI13nNode.md @@ -15,7 +15,9 @@ If your component needs i13n functionality, we will mirror an `I13nNode` in `I13 The `high order component` integrates the functionalities of i13n, it returns a decorated component with full I13n functionality. * `component` - can be a string for native tags e.g., `a`, `button` or a react component you create - * `options` - options object, it would be the default `props` of that I13nNode, you can also pass options with `props` to overwrite it. + * `defaultProps` - defaultProps object, it would be the default `props` of that I13nNode, you can also pass options with `props` to overwrite it. + * `options` - options object + * `options.displayName` - display name of the wrapper component, will fallback to `I13n` + original display name For example, if you want to enable link tracking, you will need to create an anchor with the `createI13nNode` and enable the click tracking. diff --git a/docs/api/setupI13n.md b/docs/api/setupI13n.md index c4bf9510..a7b7811d 100644 --- a/docs/api/setupI13n.md +++ b/docs/api/setupI13n.md @@ -8,6 +8,7 @@ We provide `setupI13n` as a convenient [higher order function](https://medium.co * `options.I13nNodeClass` - you can inherit the `I13nNode` and add the functionality you need, just pass the class. * `options.isViewportEnabled` - define if you want to enable the viewport checking. * `options.handlerTimeout` - define the timeout of the event handler, the event callback will be executed even if handlers don't finish in time, default to 1000ms. + * `options.displayName` - display name of the wrapper component, will fallback to `I13n` + original display name * `plugins` - plugins array that you defined according to the definition below. ```js diff --git a/src/utils/createI13nNode.js b/src/utils/createI13nNode.js index a6a0ce19..d80cd64d 100644 --- a/src/utils/createI13nNode.js +++ b/src/utils/createI13nNode.js @@ -12,9 +12,12 @@ var hoistNonReactStatics = require('hoist-non-react-statics'); /** * createI13nNode higher order function to create a Component with I13nNode functionality * @param {Object|String} Component the component you want to create a i13nNode + * @param {Object} defaultProps default props + * @param {Object} options + * @param {Object} options.displayName * @method createI13nNode */ -module.exports = function createI13nNode (Component, options) { +module.exports = function createI13nNode (Component, defaultProps, options) { if (!Component) { if ('production' !== process.env.NODE_ENV) { console && console.warn && console.warn('You are passing a null component into createI13nNode'); @@ -23,10 +26,11 @@ module.exports = function createI13nNode (Component, options) { return; } var componentName = Component.displayName || Component.name || Component; + defaultProps = defaultProps || {}; options = options || {}; var I13nComponent = React.createClass({ - displayName: 'I13n' + componentName, + displayName: options.displayName || ('I13n' + componentName), mixins: [I13nMixin], autobind: false, @@ -43,7 +47,7 @@ module.exports = function createI13nNode (Component, options) { bindClickEvent: false, follow: false, scanLinks: null - }, options); + }, defaultProps); }, /** diff --git a/src/utils/setupI13n.js b/src/utils/setupI13n.js index a99d5493..e279b681 100644 --- a/src/utils/setupI13n.js +++ b/src/utils/setupI13n.js @@ -15,10 +15,13 @@ var I13nUtils = require('../mixins/I13nUtils'); * @param {Boolean} options.isViewportEnabled if enable viewport checking * @param {Object} options.rootModelData model data of root i13n node * @param {Object} options.i13nNodeClass the i13nNode class, you can inherit it with your own functionalities + * @param {Object} options.displayName display name of the wrapper component * @param {Array} plugins plugins * @method setupI13n */ module.exports = function setupI13n (Component, options, plugins) { + options = options || {}; + plugins = plugins || []; var RootI13nComponent; var componentName = Component.displayName || Component.name; @@ -31,7 +34,7 @@ module.exports = function setupI13n (Component, options, plugins) { mixins: [I13nUtils], - displayName: 'RootI13n' + componentName, + displayName: options.displayName || ('RootI13n' + componentName), autobind: false, diff --git a/tests/unit/utils/createI13nNode.js b/tests/unit/utils/createI13nNode.js index c49d1676..ca90d27a 100644 --- a/tests/unit/utils/createI13nNode.js +++ b/tests/unit/utils/createI13nNode.js @@ -108,6 +108,19 @@ describe('createI13nNode', function () { var component = ReactDOM.render(React.createElement(I13nTestComponent, {i13nModel: {sec: 'foo'}}), container); expect(rootI13nNode.getChildrenNodes()[0].getModel()).to.eql({sec: 'foo'}); }); + + it('should generate a component with createI13nNode and custome name', function () { + var TestComponent = React.createClass({ + displayName: 'TestComponent', + render: function() { + return React.createElement('div'); + } + }); + + // check the initial state is correct after render + var I13nTestComponent = createI13nNode(TestComponent, {}, {displayName: 'CustomeName'}); + expect(I13nTestComponent.displayName).to.eql('CustomeName'); + }); it('should generate a component with createI13nNode and BC for users passing data as model', function (done) { var TestComponent = React.createClass({ diff --git a/tests/unit/utils/setupI13n.js b/tests/unit/utils/setupI13n.js index dbe81cb7..dffe80bf 100644 --- a/tests/unit/utils/setupI13n.js +++ b/tests/unit/utils/setupI13n.js @@ -81,6 +81,19 @@ describe('setupI13n', function () { expect(mockData.reactI13n._rootI13nNode).to.be.an('object'); done(); }); + + it('should generate a component with setupI13n and custom display name', function () { + var TestApp = React.createClass({ + displayName: 'TestApp', + render: function() { + return React.createElement('div'); + } + }); + + // check the initial state is correct after render + var I13nTestApp = setupI13n(TestApp, {displayName: 'CustomName'}); + expect(I13nTestApp.displayName).to.eql('CustomName'); + }); it('should get i13n util functions via both props and context', function (done) { var TestApp = React.createClass({