Merge pull request #1735 from ThiefMaster/forbid-component-props

forbid-component-props: add component whitelist

Author: ljharb

docs/rules/forbid-component-props.md

@@ -35,13 +35,21 @@ The following patterns are **not** considered warnings:
 
 ```js
 ...
-"react/forbid-component-props": [<enabled>, { "forbid": [<string>] }]
+"react/forbid-component-props": [<enabled>, { "forbid": [<string>|<object>] }]
 ...
 ```
 
 ### `forbid`
 
-An array of strings, with the names of props that are forbidden. The default value of this option is `['className', 'style']`.
+An array specifying the names of props that are forbidden. The default value of this option is `['className', 'style']`.
+Each array element can either be a string with the property name or object specifying the property name and a component whitelist:
+
+```js
+{
+  "propName": "someProp",
+  "allowedFor": [SomeComponent, AnotherComponent]
+}
+```
 
 
 ### Related rules

lib/rules/forbid-component-props.js

@@ -31,20 +31,41 @@ module.exports = {
         forbid: {
           type: 'array',
           items: {
-            type: 'string'
+            oneOf: [{
+              type: 'string'
+            }, {
+              type: 'object',
+              properties: {
+                propName: {
+                  type: 'string'
+                },
+                allowedFor: {
+                  type: 'array',
+                  uniqueItems: true,
+                  items: {
+                    type: 'string'
+                  }
+                }
+              }
+            }]
           }
         }
-      },
-      additionalProperties: true
+      }
     }]
   },
 
   create: function(context) {
-    function isForbidden(prop) {
-      const configuration = context.options[0] || {};
+    const configuration = context.options[0] || {};
+    const forbid = new Map((configuration.forbid || DEFAULTS).map(value => {
+      const propName = typeof value === 'string' ? value : value.propName;
+      const whitelist = typeof value === 'string' ? [] : (value.allowedFor || []);
+      return [propName, whitelist];
+    }));
 
-      const forbid = configuration.forbid || DEFAULTS;
-      return forbid.indexOf(prop) >= 0;
+    function isForbidden(prop, tagName) {
+      const whitelist = forbid.get(prop);
+      // if the tagName is undefined (`<this.something>`), we assume it's a forbidden element
+      return typeof whitelist !== 'undefined' && (typeof tagName === 'undefined' || whitelist.indexOf(tagName) === -1);
     }
 
     return {
@@ -57,7 +78,7 @@ module.exports = {
 
         const prop = node.name.name;
 
-        if (!isForbidden(prop)) {
+        if (!isForbidden(prop, tag)) {
           return;
         }
 

tests/lib/rules/forbid-component-props.js

@@ -101,6 +101,11 @@ ruleTester.run('forbid-component-props', rule, {
       '  <this.Foo {...props} />',
       ');'
     ].join('\n')
+  }, {
+    code: 'const item = (<ReactModal className="foo" />);',
+    options: [{
+      forbid: [{propName: 'className', allowedFor: ['ReactModal']}]
+    }]
   }],
 
   invalid: [{
@@ -165,5 +170,27 @@ ruleTester.run('forbid-component-props', rule, {
       column: 17,
       type: 'JSXAttribute'
     }]
+  }, {
+    code: 'const item = (<Foo className="foo" />);',
+    options: [{
+      forbid: [{propName: 'className', allowedFor: ['ReactModal']}]
+    }],
+    errors: [{
+      message: CLASSNAME_ERROR_MESSAGE,
+      line: 1,
+      column: 20,
+      type: 'JSXAttribute'
+    }]
+  }, {
+    code: 'const item = (<this.ReactModal className="foo" />);',
+    options: [{
+      forbid: [{propName: 'className', allowedFor: ['ReactModal']}]
+    }],
+    errors: [{
+      message: CLASSNAME_ERROR_MESSAGE,
+      line: 1,
+      column: 32,
+      type: 'JSXAttribute'
+    }]
   }]
 });