[New] jsx-handler-names: add checkLocalVariables option

jsx-eslint · Oct 29, 2019 · 8093565 · 8093565
1 parent 5be539b
commit 8093565
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 6 deletions.
diff --git a/docs/rules/jsx-handler-names.md b/docs/rules/jsx-handler-names.md
@@ -30,13 +30,15 @@ The following patterns are **not** considered warnings:
 ...
 "react/jsx-handler-names": [<enabled>, {
   "eventHandlerPrefix": <eventHandlerPrefix>,
-  "eventHandlerPropPrefix": <eventHandlerPropPrefix>
+  "eventHandlerPropPrefix": <eventHandlerPropPrefix>,
+  "checkLocalVariables": <boolean>
 }]
 ...
 ```
 
 * `eventHandlerPrefix`: Prefix for component methods used as event handlers. Defaults to `handle`
 * `eventHandlerPropPrefix`: Prefix for props that are used as event handlers. Defaults to `on`
+* `checkLocalVariables`: Determines whether event handlers stored as local variables are checked. Defaults to `false`
 
 ## When Not To Use It
 

diff --git a/lib/rules/jsx-handler-names.js b/lib/rules/jsx-handler-names.js
@@ -21,12 +21,13 @@ module.exports = {
     },
 
     schema: [{
-      oneOf: [
+      anyOf: [
         {
           type: 'object',
           properties: {
             eventHandlerPrefix: {type: 'string'},
-            eventHandlerPropPrefix: {type: 'string'}
+            eventHandlerPropPrefix: {type: 'string'},
+            checkLocalVariables: {type: 'boolean'}
           },
           additionalProperties: false
         }, {
@@ -36,7 +37,8 @@ module.exports = {
             eventHandlerPropPrefix: {
               type: 'boolean',
               enum: [false]
-            }
+            },
+            checkLocalVariables: {type: 'boolean'}
           },
           additionalProperties: false
         }, {
@@ -46,7 +48,14 @@ module.exports = {
               type: 'boolean',
               enum: [false]
             },
-            eventHandlerPropPrefix: {type: 'string'}
+            eventHandlerPropPrefix: {type: 'string'},
+            checkLocalVariables: {type: 'boolean'}
+          },
+          additionalProperties: false
+        }, {
+          type: 'object',
+          properties: {
+            checkLocalVariables: {type: 'boolean'}
           },
           additionalProperties: false
         }
@@ -75,9 +84,11 @@ module.exports = {
       null :
       new RegExp(`^(${eventHandlerPropPrefix}[A-Z].*|ref)$`);
 
+    const checkLocal = !!configuration.checkLocalVariables;
+
     return {
       JSXAttribute(node) {
-        if (!node.value || !node.value.expression || !node.value.expression.object) {
+        if (!node.value || !node.value.expression || (!checkLocal && !node.value.expression.object)) {
           return;
         }
 

diff --git a/tests/lib/rules/jsx-handler-names.js b/tests/lib/rules/jsx-handler-names.js
@@ -32,6 +32,16 @@ ruleTester.run('jsx-handler-names', rule, {
     code: '<TestComponent onChange={this.handleChange} />'
   }, {
     code: '<TestComponent onChange={this.props.onChange} />'
+  }, {
+    code: '<TestComponent onChange={handleChange} />',
+    options: [{
+      checkLocalVariables: true
+    }]
+  }, {
+    code: '<TestComponent onChange={takeCareOfChange} />',
+    options: [{
+      checkLocalVariables: false
+    }]
   }, {
     code: '<TestComponent onChange={this.props.onFoo} />'
   }, {
@@ -99,12 +109,32 @@ ruleTester.run('jsx-handler-names', rule, {
   }, {
     code: '<TestComponent onChange={this.handlerChange} />',
     errors: [{message: 'Handler function for onChange prop key must begin with \'handle\''}]
+  }, {
+    code: '<TestComponent onChange={takeCareOfChange} />',
+    errors: [{message: 'Handler function for onChange prop key must begin with \'handle\''}],
+    options: [{
+      checkLocalVariables: true
+    }]
   }, {
     code: '<TestComponent only={this.handleChange} />',
     errors: [{message: 'Prop key for handleChange must begin with \'on\''}]
   }, {
     code: '<TestComponent handleChange={this.handleChange} />',
     errors: [{message: 'Prop key for handleChange must begin with \'on\''}]
+  }, {
+    code: '<TestComponent whenChange={handleChange} />',
+    errors: [{message: 'Prop key for handleChange must begin with \'on\''}],
+    options: [{
+      checkLocalVariables: true
+    }]
+  }, {
+    code: '<TestComponent onChange={handleChange} />',
+    errors: [{message: 'Prop key for handleChange must begin with \'when\''}],
+    options: [{
+      checkLocalVariables: true,
+      eventHandlerPrefix: 'handle',
+      eventHandlerPropPrefix: 'when'
+    }]
   }, {
     code: '<TestComponent onChange={this.onChange} />',
     errors: [{message: 'Handler function for onChange prop key must begin with \'handle\''}]