[Fix] jsx-indent-props: Reset line.isUsingOperator correctly afte…

…r ternary (#3146)
jsx-eslint · Dec 21, 2021 · 5757b4a · 5757b4a
1 parent d56fdb8
commit 5757b4a
Show file tree

Hide file tree

Showing 2 changed files with 265 additions and 1 deletion.
diff --git a/lib/rules/jsx-indent-props.js b/lib/rules/jsx-indent-props.js
@@ -153,7 +153,7 @@ module.exports = {
 
       const indent = regExp.exec(src);
       const useOperator = /^([ ]|[\t])*[:]/.test(src) || /^([ ]|[\t])*[?]/.test(src);
-      const useBracket = /^([ ]|[\t])*[<]/.test(src);
+      const useBracket = /[<]/.test(src);
 
       line.currentOperator = false;
       if (useOperator) {

diff --git a/tests/lib/rules/jsx-indent-props.js b/tests/lib/rules/jsx-indent-props.js
@@ -195,6 +195,90 @@ ruleTester.run('jsx-indent-props', rule, {
         },
       ],
     },
+    {
+      code: `
+        const F = () => {
+          const foo = true
+            ? <div id="id">test</div>
+            : false;
+
+          return <div
+            id="id"
+          >
+            test
+          </div>
+        }
+      `,
+      options: [
+        {
+          indentMode: 2,
+          ignoreTernaryOperator: false,
+        },
+      ],
+    },
+    {
+      code: `
+        const F = () => {
+          const foo = true
+            ? <div id="id">test</div>
+            : false;
+
+          return <div
+            id="id"
+          >
+            test
+          </div>
+        }
+      `,
+      options: [
+        {
+          indentMode: 2,
+          ignoreTernaryOperator: true,
+        },
+      ],
+    },
+    {
+      code: `
+\t\t\t\tconst F = () => {
+\t\t\t\t\tconst foo = true
+\t\t\t\t\t\t? <div id="id">test</div>
+\t\t\t\t\t\t: false;
+
+\t\t\t\t\treturn <div
+\t\t\t\t\t\tid="id"
+\t\t\t\t\t>
+\t\t\t\t\t\ttest
+\t\t\t\t\t</div>
+\t\t\t\t}
+`,
+      options: [
+        {
+          indentMode: 'tab',
+          ignoreTernaryOperator: false,
+        },
+      ],
+    },
+    {
+      code: `
+\t\t\t\tconst F = () => {
+\t\t\t\t\tconst foo = true
+\t\t\t\t\t\t? <div id="id">test</div>
+\t\t\t\t\t\t: false;
+
+\t\t\t\t\treturn <div
+\t\t\t\t\t\tid="id"
+\t\t\t\t\t>
+\t\t\t\t\t\ttest
+\t\t\t\t\t</div>
+\t\t\t\t}
+`,
+      options: [
+        {
+          indentMode: 'tab',
+          ignoreTernaryOperator: true,
+        },
+      ],
+    },
     {
       code: `
         {this.props.ignoreTernaryOperatorTrue
@@ -607,5 +691,185 @@ ruleTester.run('jsx-indent-props', rule, {
         },
       ],
     },
+    {
+      code: `
+        const F = () => {
+          const foo = true
+            ? <div id="id">test</div>
+            : false;
+
+          return <div
+              id="id"
+          >
+            test
+          </div>
+        }
+      `,
+      output: `
+        const F = () => {
+          const foo = true
+            ? <div id="id">test</div>
+            : false;
+
+          return <div
+            id="id"
+          >
+            test
+          </div>
+        }
+      `,
+      options: [
+        {
+          indentMode: 2,
+          ignoreTernaryOperator: false,
+        },
+      ],
+      errors: [
+        {
+          messageId: 'wrongIndent',
+          data: {
+            needed: 12,
+            type: 'space',
+            characters: 'characters',
+            gotten: 14,
+          },
+        },
+      ],
+    },
+    {
+      code: `
+        const F = () => {
+          const foo = true
+            ? <div id="id">test</div>
+            : false;
+
+          return <div
+              id="id"
+          >
+            test
+          </div>
+        }
+      `,
+      output: `
+        const F = () => {
+          const foo = true
+            ? <div id="id">test</div>
+            : false;
+
+          return <div
+            id="id"
+          >
+            test
+          </div>
+        }
+      `,
+      options: [
+        {
+          indentMode: 2,
+          ignoreTernaryOperator: true,
+        },
+      ],
+      errors: [
+        {
+          messageId: 'wrongIndent',
+          data: {
+            needed: 12,
+            type: 'space',
+            characters: 'characters',
+            gotten: 14,
+          },
+        },
+      ],
+    },
+    {
+      code: `
+\t\t\t\tconst F = () => {
+\t\t\t\t\tconst foo = true
+\t\t\t\t\t\t? <div id="id">test</div>
+\t\t\t\t\t\t: false;
+
+\t\t\t\t\treturn <div
+\t\t\t\t\t\t\tid="id"
+\t\t\t\t\t>
+\t\t\t\t\t\ttest
+\t\t\t\t\t</div>
+\t\t\t\t}
+`,
+      output: `
+\t\t\t\tconst F = () => {
+\t\t\t\t\tconst foo = true
+\t\t\t\t\t\t? <div id="id">test</div>
+\t\t\t\t\t\t: false;
+
+\t\t\t\t\treturn <div
+\t\t\t\t\t\tid="id"
+\t\t\t\t\t>
+\t\t\t\t\t\ttest
+\t\t\t\t\t</div>
+\t\t\t\t}
+`,
+      options: [
+        {
+          indentMode: 'tab',
+          ignoreTernaryOperator: false,
+        },
+      ],
+      errors: [
+        {
+          messageId: 'wrongIndent',
+          data: {
+            needed: 6,
+            type: 'tab',
+            characters: 'characters',
+            gotten: 7,
+          },
+        },
+      ],
+    },
+    {
+      code: `
+\t\t\t\tconst F = () => {
+\t\t\t\t\tconst foo = true
+\t\t\t\t\t\t? <div id="id">test</div>
+\t\t\t\t\t\t: false;
+
+\t\t\t\t\treturn <div
+\t\t\t\t\t\t\tid="id"
+\t\t\t\t\t>
+\t\t\t\t\t\ttest
+\t\t\t\t\t</div>
+\t\t\t\t}
+`,
+      output: `
+\t\t\t\tconst F = () => {
+\t\t\t\t\tconst foo = true
+\t\t\t\t\t\t? <div id="id">test</div>
+\t\t\t\t\t\t: false;
+
+\t\t\t\t\treturn <div
+\t\t\t\t\t\tid="id"
+\t\t\t\t\t>
+\t\t\t\t\t\ttest
+\t\t\t\t\t</div>
+\t\t\t\t}
+`,
+      options: [
+        {
+          indentMode: 'tab',
+          ignoreTernaryOperator: true,
+        },
+      ],
+      errors: [
+        {
+          messageId: 'wrongIndent',
+          data: {
+            needed: 6,
+            type: 'tab',
+            characters: 'characters',
+            gotten: 7,
+          },
+        },
+      ],
+    },
   ]),
 });