[core] Replace more indexOf with includes (#43694)

Signed-off-by: Eng Zer Jun <engzerjun@gmail.com> Co-authored-by: Aarón García Hervás <aaron@mui.com>
mui · Sep 12, 2024 · 092e100 · 092e100
1 parent 4732610
commit 092e100
Show file tree

Hide file tree

Showing 75 changed files with 135 additions and 173 deletions.
diff --git a/apps/pigment-css-vite-app/src/Slider/ZeroSlider.tsx b/apps/pigment-css-vite-app/src/Slider/ZeroSlider.tsx
@@ -847,7 +847,7 @@ const Slider = React.forwardRef<HTMLSpanElement, SliderProps>(function Slider(pr
 
           let markActive;
           if (track === false) {
-            markActive = values.indexOf(mark.value) !== -1;
+            markActive = values.includes(mark.value);
           } else {
             markActive =
               (track === 'normal' &&

diff --git a/apps/pigment-css-vite-app/src/pages/fixtures/index.tsx b/apps/pigment-css-vite-app/src/pages/fixtures/index.tsx
@@ -21,7 +21,7 @@ export default function Layout() {
   );
 
   const demosRoutes = (materialUIRoute?.route.children ?? []).filter(
-    (item) => !!item.path && item.path.indexOf('react-pagination') < 0,
+    (item) => !!item.path && !item.path.includes('react-pagination'),
   );
 
   return (

diff --git a/docs/data/joy/components/autocomplete/FixedTags.js b/docs/data/joy/components/autocomplete/FixedTags.js
@@ -18,7 +18,7 @@ export default function FixedTags() {
         onChange={(event, newValue) => {
           setValue([
             ...fixedOptions,
-            ...newValue.filter((option) => fixedOptions.indexOf(option) === -1),
+            ...newValue.filter((option) => !fixedOptions.includes(option)),
           ]);
         }}
         options={top100Films}
@@ -30,7 +30,7 @@ export default function FixedTags() {
               color="neutral"
               sx={{ minWidth: 0 }}
               {...getTagProps({ index })}
-              disabled={fixedOptions.indexOf(option) !== -1}
+              disabled={fixedOptions.includes(option)}
             >
               {option.title}
             </Chip>

diff --git a/docs/data/joy/components/autocomplete/FixedTags.tsx b/docs/data/joy/components/autocomplete/FixedTags.tsx
@@ -18,7 +18,7 @@ export default function FixedTags() {
         onChange={(event, newValue) => {
           setValue([
             ...fixedOptions,
-            ...newValue.filter((option) => fixedOptions.indexOf(option) === -1),
+            ...newValue.filter((option) => !fixedOptions.includes(option)),
           ]);
         }}
         options={top100Films}
@@ -30,7 +30,7 @@ export default function FixedTags() {
               color="neutral"
               sx={{ minWidth: 0 }}
               {...getTagProps({ index })}
-              disabled={fixedOptions.indexOf(option) !== -1}
+              disabled={fixedOptions.includes(option)}
             >
               {option.title}
             </Chip>

diff --git a/docs/data/joy/components/table/TableSortAndSelection.js b/docs/data/joy/components/table/TableSortAndSelection.js
@@ -290,7 +290,6 @@ export default function TableSortAndSelection() {
       ? rows.length
       : Math.min(rows.length, (page + 1) * rowsPerPage);
   };
-  const isSelected = (name) => selected.indexOf(name) !== -1;
   // Avoid a layout jump when reaching the last page with empty rows.
   const emptyRows =
     page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
@@ -329,7 +328,7 @@ export default function TableSortAndSelection() {
             .sort(getComparator(order, orderBy))
             .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
             .map((row, index) => {
-              const isItemSelected = isSelected(row.name);
+              const isItemSelected = selected.includes(row.name);
               const labelId = `enhanced-table-checkbox-${index}`;
 
               return (

diff --git a/docs/data/joy/components/table/TableSortAndSelection.tsx b/docs/data/joy/components/table/TableSortAndSelection.tsx
@@ -331,7 +331,6 @@ export default function TableSortAndSelection() {
       ? rows.length
       : Math.min(rows.length, (page + 1) * rowsPerPage);
   };
-  const isSelected = (name: string) => selected.indexOf(name) !== -1;
   // Avoid a layout jump when reaching the last page with empty rows.
   const emptyRows =
     page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
@@ -370,7 +369,7 @@ export default function TableSortAndSelection() {
             .sort(getComparator(order, orderBy))
             .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
             .map((row, index) => {
-              const isItemSelected = isSelected(row.name);
+              const isItemSelected = selected.includes(row.name);
               const labelId = `enhanced-table-checkbox-${index}`;
 
               return (

diff --git a/docs/data/material/components/autocomplete/FixedTags.js b/docs/data/material/components/autocomplete/FixedTags.js
@@ -15,7 +15,7 @@ export default function FixedTags() {
       onChange={(event, newValue) => {
         setValue([
           ...fixedOptions,
-          ...newValue.filter((option) => fixedOptions.indexOf(option) === -1),
+          ...newValue.filter((option) => !fixedOptions.includes(option)),
         ]);
       }}
       options={top100Films}
@@ -28,7 +28,7 @@ export default function FixedTags() {
               key={key}
               label={option.title}
               {...tagProps}
-              disabled={fixedOptions.indexOf(option) !== -1}
+              disabled={fixedOptions.includes(option)}
             />
           );
         })

diff --git a/docs/data/material/components/autocomplete/FixedTags.tsx b/docs/data/material/components/autocomplete/FixedTags.tsx
@@ -15,7 +15,7 @@ export default function FixedTags() {
       onChange={(event, newValue) => {
         setValue([
           ...fixedOptions,
-          ...newValue.filter((option) => fixedOptions.indexOf(option) === -1),
+          ...newValue.filter((option) => !fixedOptions.includes(option)),
         ]);
       }}
       options={top100Films}
@@ -28,7 +28,7 @@ export default function FixedTags() {
               key={key}
               label={option.title}
               {...tagProps}
-              disabled={fixedOptions.indexOf(option) !== -1}
+              disabled={fixedOptions.includes(option)}
             />
           );
         })

diff --git a/docs/data/material/components/lists/CheckboxList.js b/docs/data/material/components/lists/CheckboxList.js
@@ -43,7 +43,7 @@ export default function CheckboxList() {
               <ListItemIcon>
                 <Checkbox
                   edge="start"
-                  checked={checked.indexOf(value) !== -1}
+                  checked={checked.includes(value)}
                   tabIndex={-1}
                   disableRipple
                   inputProps={{ 'aria-labelledby': labelId }}

diff --git a/docs/data/material/components/lists/CheckboxList.tsx b/docs/data/material/components/lists/CheckboxList.tsx
@@ -43,7 +43,7 @@ export default function CheckboxList() {
               <ListItemIcon>
                 <Checkbox
                   edge="start"
-                  checked={checked.indexOf(value) !== -1}
+                  checked={checked.includes(value)}
                   tabIndex={-1}
                   disableRipple
                   inputProps={{ 'aria-labelledby': labelId }}

diff --git a/docs/data/material/components/lists/CheckboxListSecondary.js b/docs/data/material/components/lists/CheckboxListSecondary.js
@@ -34,7 +34,7 @@ export default function CheckboxListSecondary() {
               <Checkbox
                 edge="end"
                 onChange={handleToggle(value)}
-                checked={checked.indexOf(value) !== -1}
+                checked={checked.includes(value)}
                 inputProps={{ 'aria-labelledby': labelId }}
               />
             }

diff --git a/docs/data/material/components/lists/CheckboxListSecondary.tsx b/docs/data/material/components/lists/CheckboxListSecondary.tsx
@@ -34,7 +34,7 @@ export default function CheckboxListSecondary() {
               <Checkbox
                 edge="end"
                 onChange={handleToggle(value)}
-                checked={checked.indexOf(value) !== -1}
+                checked={checked.includes(value)}
                 inputProps={{ 'aria-labelledby': labelId }}
               />
             }

diff --git a/docs/data/material/components/lists/SwitchListSecondary.js b/docs/data/material/components/lists/SwitchListSecondary.js
@@ -37,7 +37,7 @@ export default function SwitchListSecondary() {
         <Switch
           edge="end"
           onChange={handleToggle('wifi')}
-          checked={checked.indexOf('wifi') !== -1}
+          checked={checked.includes('wifi')}
           inputProps={{
             'aria-labelledby': 'switch-list-label-wifi',
           }}
@@ -51,7 +51,7 @@ export default function SwitchListSecondary() {
         <Switch
           edge="end"
           onChange={handleToggle('bluetooth')}
-          checked={checked.indexOf('bluetooth') !== -1}
+          checked={checked.includes('bluetooth')}
           inputProps={{
             'aria-labelledby': 'switch-list-label-bluetooth',
           }}

diff --git a/docs/data/material/components/lists/SwitchListSecondary.tsx b/docs/data/material/components/lists/SwitchListSecondary.tsx
@@ -37,7 +37,7 @@ export default function SwitchListSecondary() {
         <Switch
           edge="end"
           onChange={handleToggle('wifi')}
-          checked={checked.indexOf('wifi') !== -1}
+          checked={checked.includes('wifi')}
           inputProps={{
             'aria-labelledby': 'switch-list-label-wifi',
           }}
@@ -51,7 +51,7 @@ export default function SwitchListSecondary() {
         <Switch
           edge="end"
           onChange={handleToggle('bluetooth')}
-          checked={checked.indexOf('bluetooth') !== -1}
+          checked={checked.includes('bluetooth')}
           inputProps={{
             'aria-labelledby': 'switch-list-label-bluetooth',
           }}

diff --git a/docs/data/material/components/material-icons/SearchIcons.js b/docs/data/material/components/material-icons/SearchIcons.js
@@ -467,13 +467,13 @@ const allIcons = Object.keys(mui)
   .sort()
   .map((importName) => {
     let theme;
-    if (importName.indexOf('Outlined') !== -1) {
+    if (importName.includes('Outlined')) {
       theme = 'Outlined';
-    } else if (importName.indexOf('TwoTone') !== -1) {
+    } else if (importName.includes('TwoTone')) {
       theme = 'Two tone';
-    } else if (importName.indexOf('Rounded') !== -1) {
+    } else if (importName.includes('Rounded')) {
       theme = 'Rounded';
-    } else if (importName.indexOf('Sharp') !== -1) {
+    } else if (importName.includes('Sharp')) {
       theme = 'Sharp';
     } else {
       theme = 'Filled';

diff --git a/docs/data/material/components/selects/MultipleSelect.js b/docs/data/material/components/selects/MultipleSelect.js
@@ -32,10 +32,9 @@ const names = [
 
 function getStyles(name, personName, theme) {
   return {
-    fontWeight:
-      personName.indexOf(name) === -1
-        ? theme.typography.fontWeightRegular
-        : theme.typography.fontWeightMedium,
+    fontWeight: personName.includes(name)
+      ? theme.typography.fontWeightMedium
+      : theme.typography.fontWeightRegular,
   };
 }
 

diff --git a/docs/data/material/components/selects/MultipleSelect.tsx b/docs/data/material/components/selects/MultipleSelect.tsx
@@ -32,10 +32,9 @@ const names = [
 
 function getStyles(name: string, personName: string[], theme: Theme) {
   return {
-    fontWeight:
-      personName.indexOf(name) === -1
-        ? theme.typography.fontWeightRegular
-        : theme.typography.fontWeightMedium,
+    fontWeight: personName.includes(name)
+      ? theme.typography.fontWeightMedium
+      : theme.typography.fontWeightRegular,
   };
 }
 

diff --git a/docs/data/material/components/selects/MultipleSelectCheckmarks.js b/docs/data/material/components/selects/MultipleSelectCheckmarks.js
@@ -60,7 +60,7 @@ export default function MultipleSelectCheckmarks() {
         >
           {names.map((name) => (
             <MenuItem key={name} value={name}>
-              <Checkbox checked={personName.indexOf(name) > -1} />
+              <Checkbox checked={personName.includes(name)} />
               <ListItemText primary={name} />
             </MenuItem>
           ))}

diff --git a/docs/data/material/components/selects/MultipleSelectCheckmarks.tsx b/docs/data/material/components/selects/MultipleSelectCheckmarks.tsx
@@ -60,7 +60,7 @@ export default function MultipleSelectCheckmarks() {
         >
           {names.map((name) => (
             <MenuItem key={name} value={name}>
-              <Checkbox checked={personName.indexOf(name) > -1} />
+              <Checkbox checked={personName.includes(name)} />
               <ListItemText primary={name} />
             </MenuItem>
           ))}

diff --git a/docs/data/material/components/selects/MultipleSelectChip.js b/docs/data/material/components/selects/MultipleSelectChip.js
@@ -34,10 +34,9 @@ const names = [
 
 function getStyles(name, personName, theme) {
   return {
-    fontWeight:
-      personName.indexOf(name) === -1
-        ? theme.typography.fontWeightRegular
-        : theme.typography.fontWeightMedium,
+    fontWeight: personName.includes(name)
+      ? theme.typography.fontWeightMedium
+      : theme.typography.fontWeightRegular,
   };
 }
 

diff --git a/docs/data/material/components/selects/MultipleSelectChip.tsx b/docs/data/material/components/selects/MultipleSelectChip.tsx
@@ -34,10 +34,9 @@ const names = [
 
 function getStyles(name: string, personName: readonly string[], theme: Theme) {
   return {
-    fontWeight:
-      personName.indexOf(name) === -1
-        ? theme.typography.fontWeightRegular
-        : theme.typography.fontWeightMedium,
+    fontWeight: personName.includes(name)
+      ? theme.typography.fontWeightMedium
+      : theme.typography.fontWeightRegular,
   };
 }
 

diff --git a/docs/data/material/components/selects/MultipleSelectPlaceholder.js b/docs/data/material/components/selects/MultipleSelectPlaceholder.js
@@ -31,10 +31,9 @@ const names = [
 
 function getStyles(name, personName, theme) {
   return {
-    fontWeight:
-      personName.indexOf(name) === -1
-        ? theme.typography.fontWeightRegular
-        : theme.typography.fontWeightMedium,
+    fontWeight: personName.includes(name)
+      ? theme.typography.fontWeightMedium
+      : theme.typography.fontWeightRegular,
   };
 }
 

diff --git a/docs/data/material/components/selects/MultipleSelectPlaceholder.tsx b/docs/data/material/components/selects/MultipleSelectPlaceholder.tsx
@@ -31,10 +31,9 @@ const names = [
 
 function getStyles(name: string, personName: readonly string[], theme: Theme) {
   return {
-    fontWeight:
-      personName.indexOf(name) === -1
-        ? theme.typography.fontWeightRegular
-        : theme.typography.fontWeightMedium,
+    fontWeight: personName.includes(name)
+      ? theme.typography.fontWeightMedium
+      : theme.typography.fontWeightRegular,
   };
 }
 

diff --git a/docs/data/material/components/table/EnhancedTable.js b/docs/data/material/components/table/EnhancedTable.js
@@ -264,8 +264,6 @@ export default function EnhancedTable() {
     setDense(event.target.checked);
   };
 
-  const isSelected = (id) => selected.indexOf(id) !== -1;
-
   // Avoid a layout jump when reaching the last page with empty rows.
   const emptyRows =
     page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
@@ -298,7 +296,7 @@ export default function EnhancedTable() {
             />
             <TableBody>
               {visibleRows.map((row, index) => {
-                const isItemSelected = isSelected(row.id);
+                const isItemSelected = selected.includes(row.id);
                 const labelId = `enhanced-table-checkbox-${index}`;
 
                 return (

diff --git a/docs/data/material/components/table/EnhancedTable.tsx b/docs/data/material/components/table/EnhancedTable.tsx
@@ -295,8 +295,6 @@ export default function EnhancedTable() {
     setDense(event.target.checked);
   };
 
-  const isSelected = (id: number) => selected.indexOf(id) !== -1;
-
   // Avoid a layout jump when reaching the last page with empty rows.
   const emptyRows =
     page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
@@ -329,7 +327,7 @@ export default function EnhancedTable() {
             />
             <TableBody>
               {visibleRows.map((row, index) => {
-                const isItemSelected = isSelected(row.id);
+                const isItemSelected = selected.includes(row.id);
                 const labelId = `enhanced-table-checkbox-${index}`;
 
                 return (

diff --git a/docs/data/material/components/transfer-list/SelectAllTransferList.js b/docs/data/material/components/transfer-list/SelectAllTransferList.js
@@ -11,11 +11,11 @@ import Button from '@mui/material/Button';
 import Divider from '@mui/material/Divider';
 
 function not(a, b) {
-  return a.filter((value) => b.indexOf(value) === -1);
+  return a.filter((value) => !b.includes(value));
 }
 
 function intersection(a, b) {
-  return a.filter((value) => b.indexOf(value) !== -1);
+  return a.filter((value) => b.includes(value));
 }
 
 function union(a, b) {
@@ -108,7 +108,7 @@ export default function SelectAllTransferList() {
             >
               <ListItemIcon>
                 <Checkbox
-                  checked={checked.indexOf(value) !== -1}
+                  checked={checked.includes(value)}
                   tabIndex={-1}
                   disableRipple
                   inputProps={{

diff --git a/docs/data/material/components/transfer-list/SelectAllTransferList.tsx b/docs/data/material/components/transfer-list/SelectAllTransferList.tsx
@@ -11,11 +11,11 @@ import Button from '@mui/material/Button';
 import Divider from '@mui/material/Divider';
 
 function not(a: readonly number[], b: readonly number[]) {
-  return a.filter((value) => b.indexOf(value) === -1);
+  return a.filter((value) => !b.includes(value));
 }
 
 function intersection(a: readonly number[], b: readonly number[]) {
-  return a.filter((value) => b.indexOf(value) !== -1);
+  return a.filter((value) => b.includes(value));
 }
 
 function union(a: readonly number[], b: readonly number[]) {
@@ -109,7 +109,7 @@ export default function SelectAllTransferList() {
             >
               <ListItemIcon>
                 <Checkbox
-                  checked={checked.indexOf(value) !== -1}
+                  checked={checked.includes(value)}
                   tabIndex={-1}
                   disableRipple
                   inputProps={{