diff --git a/CHANGELOG.md b/CHANGELOG.md
index f3d60c65c7..003099f306 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/lib/rules/jsx-indent-props.js b/lib/rules/jsx-indent-props.js
index 27a63fb4b1..7a07cca283 100644
--- a/lib/rules/jsx-indent-props.js
+++ b/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)
diff --git a/tests/lib/rules/jsx-indent-props.js b/tests/lib/rules/jsx-indent-props.js
index 05bc038a52..0cd1de59ba 100644
--- a/tests/lib/rules/jsx-indent-props.js
+++ b/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',
+ ' ? ',
+ ' : '
+ ].join('\n'),
+ output: [
+ 'const test = true',
+ ' ? ',
+ ' : '
+ ].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',
+ ' ? ',
+ ' : ',
+ '}'
+ ].join('\n'),
+ output: [
+ '{test.isLoading',
+ ' ? ',
+ ' : ',
+ '}'
+ ].join('\n'),
+ options: [2],
+ errors: [
+ {message: 'Expected indentation of 6 space characters but found 4.'}
+ ]
+ }, {
+ code: [
+ '{test.isLoading',
+ ' ? ',
+ ' : ',
+ '}'
+ ].join('\n'),
+ output: [
+ '{test.isLoading',
+ ' ? ',
+ ' : ',
+ '}'
+ ].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: [
'