Skip to content

Commit

Permalink
[Fix] jsx-indent-props: Reset line.isUsingOperator correctly afte…
Browse files Browse the repository at this point in the history 
…r ternary
  • Loading branch information
@ljharb
Tobias Waltl authored and ljharb committed Dec 14, 2021
1 parent d56fdb8 commit 3db5285
Show file tree
Hide file tree
Showing 3 changed files with 269 additions and 1 deletion.
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Expand Up @@ -8,12 +8,16 @@ This change log adheres to standards from [Keep a CHANGELOG](http://keepachangel
### Added
* [`function-component-definition`]: support namedComponents option being an array ([#3129][] @petersendidit)

### Fixed
* [`jsx-indent-props`]: Reset `line.isUsingOperator` correctly after ternary ([#3146][] @tobiaswaltl)

### Changed
* [Refactor] [`no-arrow-function-lifecycle`], [`no-unused-class-component-methods`]: use report/messages convention (@ljharb)
* [Tests] component detection: Add testing scaffolding ([#3149][] @duncanbeevers)
* [New] component detection: track React imports ([#3149][] @duncanbeevers)

[#3149]: https://github.com/yannickcr/eslint-plugin-react/pull/3149
[#3146]: https://github.com/yannickcr/eslint-plugin-react/pull/3146
[#3129]: https://github.com/yannickcr/eslint-plugin-react/pull/3129

## [7.27.1] - 2021.11.18
Expand Down
2 changes: 1 addition & 1 deletion lib/rules/jsx-indent-props.js
View file
Expand Up @@ -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) {
Expand Down
264 changes: 264 additions & 0 deletions tests/lib/rules/jsx-indent-props.js
View file
Expand Up @@ -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
Expand Down Expand Up @@ -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,
},
},
],
},
]),
});

0 comments on commit 3db5285

Please sign in to comment.