[Fix] jsx-indent-props: Apply indentation when operator is used in front of the upper line

Fixes #647

Author: Moong0122

CHANGELOG.md

@@ -7,8 +7,10 @@ This change log adheres to standards from [Keep a CHANGELOG](http://keepachangel
 
 ### Fixed
 * [`no-unused-prop-types`]: Silence false positive on `never` type in TS ([#2815][] @pcorpet)
+* [`jsx-indent-props`]: Apply indentation when operator is used in front of the upper line ([#2808][] @Moong0122)
 
 [#2815]: https://github.com/yannickcr/eslint-plugin-react/pull/2815
+[#2808]: https://github.com/yannickcr/eslint-plugin-react/pull/2808
 
 ## [7.21.3] - 2020.10.02
 

lib/rules/jsx-indent-props.js

@@ -62,6 +62,10 @@ module.exports = {
     let indentType = 'space';
     /** @type {number|'first'} */
     let indentSize = 4;
+    const line = {
+      isUsingOperator: false,
+      currentOperator: false
+    };
 
     if (context.options.length) {
       if (context.options[0] === 'first') {
@@ -119,6 +123,13 @@ module.exports = {
       }
 
       const indent = regExp.exec(src);
+      const useOperator = /^([ ]|[\t])*[:]/.test(src) || /^([ ]|[\t])*[?]/.test(src);
+      line.currentOperator = false;
+      if (useOperator) {
+        line.isUsingOperator = true;
+        line.currentOperator = true;
+      }
+
       return indent ? indent[0].length : 0;
     }
 
@@ -130,6 +141,10 @@ module.exports = {
     function checkNodesIndent(nodes, indent) {
       nodes.forEach((node) => {
         const nodeIndent = getNodeIndent(node);
+        if (line.isUsingOperator && !line.currentOperator && indentSize !== 'first') {
+          indent += indentSize;
+          line.isUsingOperator = false;
+        }
         if (
           node.type !== 'ArrayExpression' && node.type !== 'ObjectExpression'
           && nodeIndent !== indent && astUtil.isNodeFirstInLine(context, node)

tests/lib/rules/jsx-indent-props.js

@@ -163,6 +163,71 @@ ruleTester.run('jsx-indent-props', rule, {
     ].join('\n'),
     options: [2],
     errors: [{message: 'Expected indentation of 2 space characters but found 4.'}]
+  }, {
+    code: [
+      'const test = true',
+      '  ? <span',
+      '    attr="value"',
+      '    />',
+      '  : <span',
+      '    attr="otherValue"',
+      '    />'
+    ].join('\n'),
+    output: [
+      'const test = true',
+      '  ? <span',
+      '      attr="value"',
+      '    />',
+      '  : <span',
+      '      attr="otherValue"',
+      '    />'
+    ].join('\n'),
+    options: [2],
+    errors: [
+      {message: 'Expected indentation of 6 space characters but found 4.'},
+      {message: 'Expected indentation of 6 space characters but found 4.'}
+    ]
+  }, {
+    code: [
+      '{test.isLoading',
+      '  ? <Value/>',
+      '  : <OtherValue',
+      '    some={aaa}/>',
+      '}'
+    ].join('\n'),
+    output: [
+      '{test.isLoading',
+      '  ? <Value/>',
+      '  : <OtherValue',
+      '      some={aaa}/>',
+      '}'
+    ].join('\n'),
+    options: [2],
+    errors: [
+      {message: 'Expected indentation of 6 space characters but found 4.'}
+    ]
+  }, {
+    code: [
+      '{test.isLoading',
+      '  ? <Value/>',
+      '  : <OtherValue',
+      '    some={aaa}',
+      '    other={bbb}/>',
+      '}'
+    ].join('\n'),
+    output: [
+      '{test.isLoading',
+      '  ? <Value/>',
+      '  : <OtherValue',
+      '      some={aaa}',
+      '      other={bbb}/>',
+      '}'
+    ].join('\n'),
+    options: [2],
+    errors: [
+      {message: 'Expected indentation of 6 space characters but found 4.'},
+      {message: 'Expected indentation of 6 space characters but found 4.'}
+    ]
   }, {
     code: [
       '<App',