[Fix] propType: handle imported types/interface in forwardRef generic

jsx-eslint · Apr 30, 2022 · 400ad54 · 400ad54
1 parent 24621e4
commit 400ad54
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 2 deletions.
diff --git a/lib/util/propTypes.js b/lib/util/propTypes.js
@@ -115,7 +115,6 @@ module.exports = function propTypesInstructions(context, components, utils) {
   const genericReactTypesImport = new Set();
   // import { FC as X } from 'react' -> localToImportedMap = { x: FC }
   const localToImportedMap = {};
-
   /**
    * Returns the full scope.
    * @returns {Object} The whole scope.
@@ -1016,7 +1015,7 @@ module.exports = function propTypesInstructions(context, components, utils) {
       const obj = new DeclarePropTypesForTSTypeAnnotation(propTypes, declaredPropTypes);
       components.set(node, {
         declaredPropTypes: obj.declaredPropTypes,
-        ignorePropsValidation: false,
+        ignorePropsValidation: obj.shouldIgnorePropTypes,
       });
       return;
     }

diff --git a/tests/lib/rules/prop-types.js b/tests/lib/rules/prop-types.js
@@ -4042,6 +4042,105 @@ ruleTester.run('prop-types', rule, {
           }}
         />
       `,
+    },
+    {
+      code: `
+       import React, { forwardRef } from 'react';
+       import { ControlProps, NamedProps } from './ext';
+
+       type ButtonProps = ControlProps &
+          NamedProps & {
+            onClick?: (() => void) | undefined;
+            onMouseDown?: (() => void) | undefined;
+            onMouseUp?: (() => void) | undefined;
+            disabled?: boolean | undefined;
+            width?: number;
+            type?: 'submit' | 'reset' | 'button' | undefined;
+        };
+
+        const BaseButton = forwardRef<HTMLButtonElement, ButtonProps>((
+          {
+            name,
+            className,
+            onClick,
+            onMouseDown,
+            onMouseUp,
+            children,
+            disabled,
+            width,
+            type,
+          },
+          ref,
+        ): JSX.Element => {
+          return <span>{width}</span>
+        })
+
+      `,
+      features: ['ts', 'no-babel'],
+    },
+    {
+      code: `
+       import React, { forwardRef } from 'react';
+       import { ControlProps, NamedProps } from './ext';
+
+      interface ButtonProps extends NamedProps {
+            onClick?: (() => void) | undefined;
+            onMouseDown?: (() => void) | undefined;
+            onMouseUp?: (() => void) | undefined;
+            disabled?: boolean | undefined;
+            width?: number;
+            type?: 'submit' | 'reset' | 'button' | undefined;
+       }
+
+      const BaseButton = forwardRef<HTMLButtonElement, ButtonProps>((
+          {
+            name,
+            className,
+            onClick,
+            onMouseDown,
+            onMouseUp,
+            children,
+            disabled,
+            width,
+            type,
+          },
+          ref,
+        ): JSX.Element => {
+          return <span>{width}</span>
+        })
+
+      `,
+      features: ['ts', 'no-babel'],
+    },
+    {
+      code: `
+      import React, { forwardRef } from 'react';
+      import { IExt1 } from './ext';
+
+      interface IProps extends IExt1 {
+            onClick?: (() => void) | undefined;
+            onMouseDown?: (() => void) | undefined;
+            onMouseUp?: (() => void) | undefined;
+            disabled?: boolean | undefined;
+            width?: number;
+            type?: 'submit' | 'reset' | 'button' | undefined;
+      }
+
+      const Button: React.FC<IProps> = ({
+            name,
+            className,
+            onClick,
+            onMouseDown,
+            onMouseUp,
+            children,
+            disabled,
+            width,
+            type,
+      }): JSX.Element => {
+               return <span>{width}</span>
+             }
+      `,
+      features: ['ts', 'no-babel'],
     }
   )),