[New] forbid-component-props: add disallowedFor option

Author: jilianfeng

CHANGELOG.md

@@ -5,6 +5,9 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 
 ## Unreleased
 
+### Added
+* [`forbid-component-props`]: add `disallowedFor` option ([#xxxx][] @jacketwpbb)
+
 ### Fixed
 * [`no-unknown-property`]: add `viewBox` on `marker` ([#3416][] @ljharb)
 * [`no-unknown-property`]: add `noModule` on `script` ([#3414][] @ljharb)

docs/rules/forbid-component-props.md

@@ -50,8 +50,18 @@ custom message, and a component whitelist:
 ```js
 {
   "propName": "someProp",
-  "allowedFor": [SomeComponent, AnotherComponent],
-  "message": "Avoid using someProp"
+  "allowedFor": ["SomeComponent", "AnotherComponent"],
+  "message": "Avoid using someProp except SomeComponent and AnotherComponent"
+}
+```
+
+Use `disallowedFor` as a blacklist to lint props for specific components. `disallowedFor` should have at least one item.
+
+```js
+{
+  "propName": "someProp",
+  "disallowedFor": ["SomeComponent", "AnotherComponent"],
+  "message": "Avoid using someProp for SomeComponent and AnotherComponent"
 }
 ```
 

lib/rules/forbid-component-props.js

@@ -39,26 +39,51 @@ module.exports = {
         forbid: {
           type: 'array',
           items: {
-            oneOf: [{
-              type: 'string',
-            }, {
-              type: 'object',
-              properties: {
-                propName: {
-                  type: 'string',
-                },
-                allowedFor: {
-                  type: 'array',
-                  uniqueItems: true,
-                  items: {
+            oneOf: [
+              {
+                type: 'string',
+              },
+              {
+                type: 'object',
+                properties: {
+                  propName: {
+                    type: 'string',
+                  },
+                  allowedFor: {
+                    type: 'array',
+                    uniqueItems: true,
+                    items: {
+                      type: 'string',
+                    },
+                  },
+                  message: {
                     type: 'string',
                   },
                 },
-                message: {
-                  type: 'string',
+                additionalProperties: false,
+              },
+              {
+                type: 'object',
+                properties: {
+                  propName: {
+                    type: 'string',
+                  },
+                  disallowedFor: {
+                    type: 'array',
+                    uniqueItems: true,
+                    minItems: 1,
+                    items: {
+                      type: 'string',
+                    },
+                  },
+                  message: {
+                    type: 'string',
+                  },
                 },
+                required: ['disallowedFor'],
+                additionalProperties: false,
               },
-            }],
+            ],
           },
         },
       },
@@ -71,16 +96,25 @@ module.exports = {
       const propName = typeof value === 'string' ? value : value.propName;
       const options = {
         allowList: typeof value === 'string' ? [] : (value.allowedFor || []),
+        disallowList: typeof value === 'string' ? [] : (value.disallowedFor || []),
         message: typeof value === 'string' ? null : value.message,
       };
       return [propName, options];
     }));
 
     function isForbidden(prop, tagName) {
       const options = forbid.get(prop);
-      const allowList = options ? options.allowList : undefined;
+      if (!options) {
+        return false;
+      }
+
+      // disallowList should have a least one item (schema configuration)
+      const isTagForbidden = options.disallowList.length
+        ? options.disallowList.indexOf(tagName) !== -1
+        : options.allowList.indexOf(tagName) === -1;
+
       // if the tagName is undefined (`<this.something>`), we assume it's a forbidden element
-      return typeof allowList !== 'undefined' && (typeof tagName === 'undefined' || allowList.indexOf(tagName) === -1);
+      return typeof tagName === 'undefined' || isTagForbidden;
     }
 
     return {

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

@@ -157,6 +157,67 @@ ruleTester.run('forbid-component-props', rule, {
       `,
       features: ['jsx namespace'],
     },
+    {
+      code: `
+        const item = (
+          <Foo className="bar">
+            <ReactModal style={{color: "red"}} />
+          </Foo>
+        );
+      `,
+      options: [
+        {
+          forbid: [
+            {
+              propName: 'className',
+              disallowedFor: ['OtherModal', 'ReactModal'],
+            },
+            {
+              propName: 'style',
+              disallowedFor: ['Foo'],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: `
+        const item = (
+          <Foo className="bar">
+            <ReactModal style={{color: "red"}} />
+          </Foo>
+        );
+      `,
+      options: [
+        {
+          forbid: [
+            {
+              propName: 'className',
+              disallowedFor: ['OtherModal', 'ReactModal'],
+            },
+            {
+              propName: 'style',
+              allowedFor: ['ReactModal'],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: `
+        const item = (<this.ReactModal className="foo" />);
+      `,
+      options: [
+        {
+          forbid: [
+            {
+              propName: 'className',
+              disallowedFor: ['ReactModal'],
+            },
+          ],
+        },
+      ],
+    },
   ]),
 
   invalid: parsers.all([
@@ -235,6 +296,25 @@ ruleTester.run('forbid-component-props', rule, {
         },
       ],
     },
+    {
+      code: `
+        var First = createReactClass({
+          propTypes: externalPropTypes,
+          render: function() {
+            return <Foo style={{color: "red"}} />;
+          }
+        });
+      `,
+      options: [{ forbid: [{ propName: 'style', disallowedFor: ['Foo'] }] }],
+      errors: [
+        {
+          messageId: 'propIsForbidden',
+          data: { prop: 'style' },
+          line: 5,
+          type: 'JSXAttribute',
+        },
+      ],
+    },
     {
       code: `
         const item = (<Foo className="foo" />);
@@ -282,6 +362,30 @@ ruleTester.run('forbid-component-props', rule, {
         },
       ],
     },
+    {
+      code: `
+        const item = (<this.ReactModal className="foo" />);
+      `,
+      options: [
+        {
+          forbid: [
+            {
+              propName: 'className',
+              disallowedFor: ['this.ReactModal'],
+            },
+          ],
+        },
+      ],
+      errors: [
+        {
+          messageId: 'propIsForbidden',
+          data: { prop: 'className' },
+          line: 2,
+          column: 40,
+          type: 'JSXAttribute',
+        },
+      ],
+    },
     {
       code: `
         const item = (<Foo className="foo" />);