[docs][joy-ui] Make code readable to set next color in color inversio…

…n demos (mui#39669)
sai6855 · Nov 3, 2023 · d37b6cc · d37b6cc
1 parent a459e2f
commit d37b6cc
Show file tree

Hide file tree

Showing 10 changed files with 20 additions and 20 deletions.
diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionFooter.js b/docs/data/joy/main-features/color-inversion/ColorInversionFooter.js
@@ -41,8 +41,8 @@ export default function ColorInversionFooter() {
           onClick={() => {
             const colors = ['primary', 'neutral', 'danger', 'success', 'warning'];
 
-            const nextColor = colors.indexOf(color);
-            setColor(colors[nextColor + 1] ?? colors[0]);
+            const nextColorIndex = colors.indexOf(color) + 1;
+            setColor(colors[nextColorIndex] ?? colors[0]);
           }}
         >
           <ColorLensRoundedIcon fontSize="small" />

diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionFooter.tsx b/docs/data/joy/main-features/color-inversion/ColorInversionFooter.tsx
@@ -46,8 +46,8 @@ export default function ColorInversionFooter() {
               'success',
               'warning',
             ];
-            const nextColor = colors.indexOf(color);
-            setColor(colors[nextColor + 1] ?? colors[0]);
+            const nextColorIndex = colors.indexOf(color) + 1;
+            setColor(colors[nextColorIndex] ?? colors[0]);
           }}
         >
           <ColorLensRoundedIcon fontSize="small" />

diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionHeader.js b/docs/data/joy/main-features/color-inversion/ColorInversionHeader.js
@@ -45,8 +45,8 @@ export default function ColorInversionHeader() {
         onClick={() => {
           const colors = ['primary', 'neutral', 'danger', 'success', 'warning'];
 
-          const nextColor = colors.indexOf(color);
-          setColor(colors[nextColor + 1] ?? colors[0]);
+          const nextColorIndex = colors.indexOf(color) + 1;
+          setColor(colors[nextColorIndex] ?? colors[0]);
         }}
       >
         <ColorLensRoundedIcon fontSize="small" />

diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionHeader.tsx b/docs/data/joy/main-features/color-inversion/ColorInversionHeader.tsx
@@ -50,8 +50,8 @@ export default function ColorInversionHeader() {
             'success',
             'warning',
           ];
-          const nextColor = colors.indexOf(color);
-          setColor(colors[nextColor + 1] ?? colors[0]);
+          const nextColorIndex = colors.indexOf(color) + 1;
+          setColor(colors[nextColorIndex] ?? colors[0]);
         }}
       >
         <ColorLensRoundedIcon fontSize="small" />

diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.js b/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.js
@@ -73,8 +73,8 @@ export default function ColorInversionMarketing() {
         onClick={() => {
           const colors = ['primary', 'neutral', 'danger', 'success', 'warning'];
 
-          const nextColor = colors.indexOf(color);
-          setColor(colors[nextColor + 1] ?? colors[0]);
+          const nextColorIndex = colors.indexOf(color) + 1;
+          setColor(colors[nextColorIndex] ?? colors[0]);
         }}
       >
         <ColorLensRoundedIcon fontSize="small" />

diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.tsx b/docs/data/joy/main-features/color-inversion/ColorInversionMarketing.tsx
@@ -78,8 +78,8 @@ export default function ColorInversionMarketing() {
             'success',
             'warning',
           ];
-          const nextColor = colors.indexOf(color);
-          setColor(colors[nextColor + 1] ?? colors[0]);
+          const nextColorIndex = colors.indexOf(color) + 1;
+          setColor(colors[nextColorIndex] ?? colors[0]);
         }}
       >
         <ColorLensRoundedIcon fontSize="small" />

diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionNavigation.js b/docs/data/joy/main-features/color-inversion/ColorInversionNavigation.js
@@ -177,8 +177,8 @@ export default function ColorInversionNavigation() {
           onClick={() => {
             const colors = ['primary', 'neutral', 'danger', 'success', 'warning'];
 
-            const nextColor = colors.indexOf(color);
-            setColor(colors[nextColor + 1] ?? colors[0]);
+            const nextColorIndex = colors.indexOf(color) + 1;
+            setColor(colors[nextColorIndex] ?? colors[0]);
           }}
           sx={{ mt: 'auto', height: '40px' }}
         >

diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionNavigation.tsx b/docs/data/joy/main-features/color-inversion/ColorInversionNavigation.tsx
@@ -182,8 +182,8 @@ export default function ColorInversionNavigation() {
               'success',
               'warning',
             ];
-            const nextColor = colors.indexOf(color);
-            setColor(colors[nextColor + 1] ?? colors[0]);
+            const nextColorIndex = colors.indexOf(color) + 1;
+            setColor(colors[nextColorIndex] ?? colors[0]);
           }}
           sx={{ mt: 'auto', height: '40px' }}
         >

diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionPopup.js b/docs/data/joy/main-features/color-inversion/ColorInversionPopup.js
@@ -35,8 +35,8 @@ export default function ColorInversionPopup() {
         onClick={() => {
           const colors = ['primary', 'neutral', 'danger', 'success', 'warning'];
 
-          const nextColor = colors.indexOf(color);
-          setColor(colors[nextColor + 1] ?? colors[0]);
+          const nextColorIndex = colors.indexOf(color) + 1;
+          setColor(colors[nextColorIndex] ?? colors[0]);
         }}
       >
         Change the color

diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionPopup.tsx b/docs/data/joy/main-features/color-inversion/ColorInversionPopup.tsx
@@ -40,8 +40,8 @@ export default function ColorInversionPopup() {
             'success',
             'warning',
           ];
-          const nextColor = colors.indexOf(color);
-          setColor(colors[nextColor + 1] ?? colors[0]);
+          const nextColorIndex = colors.indexOf(color) + 1;
+          setColor(colors[nextColorIndex] ?? colors[0]);
         }}
       >
         Change the color