Merge pull request #385 from silvenon/ref

Add ignoreRefs option to jsx-no-bind

Author: yannickcr

docs/rules/jsx-no-bind.md

@@ -18,6 +18,41 @@ The following patterns are not considered warnings:
 <div onClick={this._handleClick}></div>
 ```
 
+## Rule Options
+
+```js
+"jsx-no-bind": [<enabled>, {
+  "ignoreRefs": <boolean> || false,
+  "allowArrowFunctions": <boolean> || false,
+  "allowBind": <boolean> || false
+}]
+```
+
+### `ignoreRefs`
+
+When `true` the following are not considered warnings:
+
+```jsx
+<div ref={c => this._div = c} />
+<div ref={this._refCallback.bind(this)} />
+```
+
+### `allowArrowFunctions`
+
+When `true` the following is not considered a warning:
+
+```jsx
+<div onClick={() => alert("1337")} />
+```
+
+### `allowBind`
+
+When `true` the following is not considered a warning:
+
+```jsx
+<div onClick={this._handleClick.bind(this)} />
+```
+
 ## Protips
 
 ### Lists of Items

lib/rules/jsx-no-bind.js

@@ -14,7 +14,8 @@ module.exports = function(context) {
 
   return {
     JSXAttribute: function(node) {
-      if (!node.value || !node.value.expression) {
+      var isRef = configuration.ignoreRefs && node.name.name === 'ref';
+      if (isRef || !node.value || !node.value.expression) {
         return;
       }
       var valueNode = node.value.expression;
@@ -45,6 +46,10 @@ module.exports.schema = [{
     allowBind: {
       default: false,
       type: 'boolean'
+    },
+    ignoreRefs: {
+      default: false,
+      type: 'boolean'
     }
   },
   additionalProperties: false

tests/lib/rules/jsx-no-bind.js

@@ -34,6 +34,18 @@ ruleTester.run('jsx-no-bind', rule, {
       parser: 'babel-eslint'
     },
 
+    // bind() and arrow functions in refs explicitly ignored
+    {
+      code: '<div ref={c => this._input = c}></div>',
+      options: [{ignoreRefs: true}],
+      parser: 'babel-eslint'
+    },
+    {
+      code: '<div ref={this._refCallback.bind(this)}></div>',
+      options: [{ignoreRefs: true}],
+      parser: 'babel-eslint'
+    },
+
     // bind() explicitly allowed
     {
       code: '<div onClick={this._handleClick.bind(this)}></div>',
@@ -66,6 +78,11 @@ ruleTester.run('jsx-no-bind', rule, {
       errors: [{message: 'JSX props should not use .bind()'}],
       parser: 'babel-eslint'
     },
+    {
+      code: '<div ref={this._refCallback.bind(this)}></div>',
+      errors: [{message: 'JSX props should not use .bind()'}],
+      parser: 'babel-eslint'
+    },
 
     // Arrow functions
     {
@@ -82,6 +99,11 @@ ruleTester.run('jsx-no-bind', rule, {
       code: '<div onClick={param => { first(); second(); }}></div>',
       errors: [{message: 'JSX props should not use arrow functions'}],
       parser: 'babel-eslint'
+    },
+    {
+      code: '<div ref={c => this._input = c}></div>',
+      errors: [{message: 'JSX props should not use arrow functions'}],
+      parser: 'babel-eslint'
     }
   ]
 });