diff --git a/docs/rules/boolean-prop-naming.md b/docs/rules/boolean-prop-naming.md index 71f4adb65b..541b8296f2 100644 --- a/docs/rules/boolean-prop-naming.md +++ b/docs/rules/boolean-prop-naming.md @@ -30,7 +30,12 @@ var Hello = createReactClass({ ```js ... -"react/boolean-prop-naming": [, { "propTypeNames": Array, "rule": , "message": }] +"react/boolean-prop-naming": [, { + "propTypeNames": Array, + "rule": , + "message": , + "validateNested": +}] ... ``` @@ -86,3 +91,11 @@ And the failure would look like so: ``` It is better if your prop (something) matches this pattern: (^is[A-Z]([A-Za-z0-9]?)+) ``` + +### `validateNested` + +This value is boolean. It tells if nested props should be validated as well. By default this is set to false but you can change it to true, to validate deeper layers of object: + +```jsx +"react/boolean-prop-naming": ["error", { "validateNested": true }] +``` diff --git a/lib/rules/boolean-prop-naming.js b/lib/rules/boolean-prop-naming.js index c464e13265..bc7394d327 100644 --- a/lib/rules/boolean-prop-naming.js +++ b/lib/rules/boolean-prop-naming.js @@ -41,6 +41,10 @@ module.exports = { message: { minLength: 1, type: 'string' + }, + validateNested: { + default: false, + type: 'boolean' } }, type: 'object' @@ -104,6 +108,64 @@ module.exports = { return node.key.name; } + /** + * Checks if prop is declared in flow way + * @param {Object} prop Property object, single prop type declaration + * @returns {Boolean} + */ + function flowCheck(prop) { + return ( + prop.type === 'ObjectTypeProperty' && + prop.value.type === 'BooleanTypeAnnotation' && + rule.test(getPropName(prop)) === false + ); + } + + /** + * Checks if prop is declared in regular way + * @param {Object} prop Property object, single prop type declaration + * @returns {Boolean} + */ + function regularCheck(prop) { + const propKey = getPropKey(prop); + return ( + propKey && + propTypeNames.indexOf(propKey) >= 0 && + rule.test(getPropName(prop)) === false + ); + } + + /** + * Checks if prop is nested + * @param {Object} prop Property object, single prop type declaration + * @returns {Boolean} + */ + function nestedPropTypes(prop) { + return ( + prop.type === 'Property' && + prop.value.type === 'CallExpression' + ); + } + + /** + * Runs recursive check on all proptypes + * @param {Array} proptypes A list of Property object (for each proptype defined) + * @param {Function} addInvalidProp callback to run for each error + */ + function runCheck(proptypes, addInvalidProp) { + proptypes = proptypes || []; + + proptypes.forEach(prop => { + if (config.validateNested && nestedPropTypes(prop)) { + runCheck(prop.value.arguments[0].properties, addInvalidProp); + return; + } + if (flowCheck(prop) || regularCheck(prop)) { + addInvalidProp(prop); + } + }); + } + /** * Checks and mark props with invalid naming * @param {Object} node The component node we're testing @@ -113,22 +175,8 @@ module.exports = { const component = components.get(node) || node; const invalidProps = component.invalidProps || []; - (proptypes || []).forEach(prop => { - const propKey = getPropKey(prop); - const flowCheck = ( - prop.type === 'ObjectTypeProperty' && - prop.value.type === 'BooleanTypeAnnotation' && - rule.test(getPropName(prop)) === false - ); - const regularCheck = ( - propKey && - propTypeNames.indexOf(propKey) >= 0 && - rule.test(getPropName(prop)) === false - ); - - if (flowCheck || regularCheck) { - invalidProps.push(prop); - } + runCheck(proptypes, prop => { + invalidProps.push(prop); }); components.set(node, { diff --git a/tests/lib/rules/boolean-prop-naming.js b/tests/lib/rules/boolean-prop-naming.js index a542b5f0ef..09bcb8982d 100644 --- a/tests/lib/rules/boolean-prop-naming.js +++ b/tests/lib/rules/boolean-prop-naming.js @@ -373,6 +373,46 @@ ruleTester.run('boolean-prop-naming', rule, { rule: '^is[A-Z]([A-Za-z0-9]?)+' }], parser: 'babel-eslint' + }, { + code: ` + class Hello extends React.Component { + render() { + return ( +
+ ); + } + } + + Hello.propTypes = { + isSomething: PropTypes.bool.isRequired, + nested: PropTypes.shape({ + isWorking: PropTypes.bool + }) + }; + ` + }, { + code: ` + class Hello extends React.Component { + render() { + return ( +
+ ); + } + } + + Hello.propTypes = { + isSomething: PropTypes.bool.isRequired, + nested: PropTypes.shape({ + nested: PropTypes.shape({ + isWorking: PropTypes.bool + }) + }) + }; + `, + options: [{ + rule: '^is[A-Z]([A-Za-z0-9]?)+', + validateNested: true + }] }], invalid: [{ @@ -807,5 +847,55 @@ ruleTester.run('boolean-prop-naming', rule, { errors: [{ message: 'Prop name (something) doesn\'t match rule (^is[A-Z]([A-Za-z0-9]?)+)' }] + }, { + code: ` + class Hello extends React.Component { + render() { + return ( +
+ ); + } + } + + Hello.propTypes = { + isSomething: PropTypes.bool.isRequired, + nested: PropTypes.shape({ + failingItIs: PropTypes.bool + }) + }; + `, + options: [{ + rule: '^is[A-Z]([A-Za-z0-9]?)+', + validateNested: true + }], + errors: [{ + message: 'Prop name (failingItIs) doesn\'t match rule (^is[A-Z]([A-Za-z0-9]?)+)' + }] + }, { + code: ` + class Hello extends React.Component { + render() { + return ( +
+ ); + } + } + + Hello.propTypes = { + isSomething: PropTypes.bool.isRequired, + nested: PropTypes.shape({ + nested: PropTypes.shape({ + failingItIs: PropTypes.bool + }) + }) + }; + `, + options: [{ + rule: '^is[A-Z]([A-Za-z0-9]?)+', + validateNested: true + }], + errors: [{ + message: 'Prop name (failingItIs) doesn\'t match rule (^is[A-Z]([A-Za-z0-9]?)+)' + }] }] });