Add support for conditional rendering to jsx-multiline-wrap

docs/rules/jsx-wrap-multilines.md

@@ -6,14 +6,15 @@ Wrapping multiline JSX in parentheses can improve readability and/or convenience
 
 ## Rule Details
 
-This rule optionally takes a second parameter in the form of an object, containing places to apply the rule. By default, all the syntax listed below will be checked, but these can be explicitly disabled. Any syntax type missing in the object will follow the default behavior (become enabled).
+This rule optionally takes a second parameter in the form of an object, containing places to apply the rule. By default, all the syntax listed below will be checked except the conditionals, but these can be explicitly disabled. Any syntax type missing in the object will follow the default behavior (become enabled).
 
 There are the possible syntax available:
 
 * `declaration`
 * `assignment`
 * `return`
 * `arrow`
+* `conditional` (not enabled by default)
 
 The following patterns are considered warnings:
 
@@ -101,6 +102,7 @@ function hello() {
   );
 }
 ```
+
 The following patterns are considered warnings when configured `{arrow: true}`.
 
 ```jsx
@@ -118,3 +120,27 @@ var hello = () => (
   </div>
 );
 ```
+
+The following patterns are considered warnings when configured `{conditional: true}`.
+
+```jsx
+<div>
+  {myExpression &&
+    <div>
+      <p>Hello World</p>
+    </div>
+  }
+</div>
+```
+
+The following patterns are not considered warnings when configured `{conditional: true}`.
+
+```jsx
+<div>
+  {myExpression && (
+    <div>
+      <p>Hello World</p>
+    </div>
+  )}
+</div>
+```

lib/rules/jsx-wrap-multilines.js

@@ -14,7 +14,8 @@ const DEFAULTS = {
   declaration: true,
   assignment: true,
   return: true,
-  arrow: true
+  arrow: true,
+  conditional: false
 };
 
 // ------------------------------------------------------------------------------
@@ -44,6 +45,9 @@ module.exports = {
         },
         arrow: {
           type: 'boolean'
+        },
+        conditional: {
+          type: 'boolean'
         }
       },
       additionalProperties: false
@@ -66,7 +70,7 @@ module.exports = {
       return node.loc.start.line !== node.loc.end.line;
     }
 
-    function check(node) {
+    function check(node, fixerFn) {
       if (!node || node.type !== 'JSXElement') {
         return;
       }
@@ -75,7 +79,7 @@ module.exports = {
         context.report({
           node: node,
           message: 'Missing parentheses around multilines JSX',
-          fix: function(fixer) {
+          fix: fixerFn || function(fixer) {
             return fixer.replaceText(node, `(${sourceCode.getText(node)})`);
           }
         });
@@ -126,6 +130,19 @@ module.exports = {
         }
       },
 
+      JSXExpressionContainer: function(node) {
+        if (!isEnabled('conditional')) {
+          return;
+        }
+
+        const rightNode = node.expression.right;
+
+        check(rightNode, fixer => ([
+          fixer.insertTextAfterRange(sourceCode.getTokenBefore(rightNode).range, ' ('),
+          fixer.insertTextBeforeRange(sourceCode.getLastToken(node).range, ')')
+        ]));
+      },
+
       'ArrowFunctionExpression:exit': function (node) {
         const arrowBody = node.body;
 

tests/lib/rules/jsx-wrap-multilines.js

@@ -134,6 +134,32 @@ const ARROW_NO_PAREN = `
   </div>;
 `;
 
+const CONDITIONAL_SINGLE_LINE = `
+  <div>
+    {unreadMessages.length > 0 && <div>Hello World</div>}
+  </div>
+`;
+
+const CONDITIONAL_PAREN = `
+  <div>
+    {unreadMessages.length > 0 && (
+      <h2>
+        You have {unreadMessages.length} unread messages.
+      </h2>
+    )}
+  </div>
+`;
+
+const CONDITIONAL_NO_PAREN = `
+  <div>
+    {unreadMessages.length > 0 &&
+      <h2>
+        You have {unreadMessages.length} unread messages.
+      </h2>
+    }
+  </div>
+`;
+
 // ------------------------------------------------------------------------------
 // Tests
 // ------------------------------------------------------------------------------
@@ -187,6 +213,16 @@ ruleTester.run('jsx-wrap-multilines', rule, {
     }, {
       code: ARROW_NO_PAREN,
       options: [{arrow: false}]
+    }, {
+      code: CONDITIONAL_PAREN
+    }, {
+      code: CONDITIONAL_PAREN,
+      options: [{conditional: true}]
+    }, {
+      code: CONDITIONAL_SINGLE_LINE,
+      options: [{conditional: true}]
+    }, {
+      code: CONDITIONAL_NO_PAREN
     }
   ],
 
@@ -237,6 +273,11 @@ ruleTester.run('jsx-wrap-multilines', rule, {
       output: ARROW_PAREN,
       options: [{arrow: true}],
       errors: [{message: 'Missing parentheses around multilines JSX'}]
+    }, {
+      code: CONDITIONAL_NO_PAREN,
+      output: CONDITIONAL_PAREN,
+      options: [{conditional: true}],
+      errors: [{message: 'Missing parentheses around multilines JSX'}]
     }
   ]
 });