Merge pull request #71 from yahoo/customdname

customized display name

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.
 

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

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);
         },
 
         /**

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,
 

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({

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({