Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

No need to require handler names to be scoped to an object #2470

Merged
merged 1 commit into from Oct 29, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 3 additions & 1 deletion docs/rules/jsx-handler-names.md
Expand Up @@ -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

Expand Down
21 changes: 16 additions & 5 deletions lib/rules/jsx-handler-names.js
Expand Up @@ -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
}, {
Expand All @@ -36,7 +37,8 @@ module.exports = {
eventHandlerPropPrefix: {
type: 'boolean',
enum: [false]
}
},
checkLocalVariables: {type: 'boolean'}
},
additionalProperties: false
}, {
Expand All @@ -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
}
Expand Down Expand Up @@ -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;
}

Expand Down
30 changes: 30 additions & 0 deletions tests/lib/rules/jsx-handler-names.js
Expand Up @@ -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} />'
}, {
Expand Down Expand Up @@ -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\''}]
Expand Down