[SwitchBase] Prepare v5 removal of the second argument of onChange (#…

…20541)
mui · Apr 14, 2020 · de38602 · de38602
1 parent cbcbb47
commit de38602
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 14 deletions.
diff --git a/docs/src/pages/components/tables/EnhancedTable.tsx b/docs/src/pages/components/tables/EnhancedTable.tsx
@@ -104,7 +104,7 @@ interface EnhancedTableProps {
   classes: ReturnType<typeof useStyles>;
   numSelected: number;
   onRequestSort: (event: React.MouseEvent<unknown>, property: keyof Data) => void;
-  onSelectAllClick: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+  onSelectAllClick: (event: React.ChangeEvent<HTMLInputElement>) => void;
   order: Order;
   orderBy: string;
   rowCount: number;

diff --git a/docs/src/pages/customization/color/ColorTool.js b/docs/src/pages/customization/color/ColorTool.js
@@ -113,9 +113,7 @@ function ColorTool(props) {
   };
 
   const handleChangeHue = (name) => (event) => {
-    const {
-      target: { value: hue },
-    } = event;
+    const hue = event.target.value;
     const color = colors[hue][shades[state[`${name}Shade`]]];
 
     setState({

diff --git a/packages/material-ui/src/internal/SwitchBase.js b/packages/material-ui/src/internal/SwitchBase.js
@@ -89,6 +89,7 @@ const SwitchBase = React.forwardRef(function SwitchBase(props, ref) {
     setCheckedState(newChecked);
 
     if (onChange) {
+      // TODO v5: remove the second argument.
       onChange(event, newChecked);
     }
   };

diff --git a/packages/material-ui/test/typescript/components.spec.tsx b/packages/material-ui/test/typescript/components.spec.tsx
@@ -655,20 +655,30 @@ const SelectionControlTest = () => {
     checkedF: true,
   };
 
-  const handleChange = (name: string) => (event: React.SyntheticEvent<any>, checked: boolean) =>
-    log({ [name]: checked });
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) =>
+    log({ [event.target.name]: event.target.checked });
 
   return (
     <FormGroup row>
       <FormControlLabel
         control={
-          <Checkbox checked={state.checkedA} onChange={handleChange('checkedA')} value="checkedA" />
+          <Checkbox
+            checked={state.checkedA}
+            onChange={handleChange}
+            name="checkedA"
+            value="checkedA"
+          />
         }
         label="Option A"
       />
       <FormControlLabel
         control={
-          <Checkbox checked={state.checkedB} onChange={handleChange('checkedB')} value="checkedB" />
+          <Checkbox
+            checked={state.checkedB}
+            onChange={handleChange}
+            name="checkedB"
+            value="checkedB"
+          />
         }
         label="Option B"
       />
@@ -681,7 +691,9 @@ const SelectionControlTest = () => {
         label="Indeterminate"
       />
       <FormControlLabel
-        control={<Checkbox checked={true} onChange={handleChange('checkedF')} value="checkedF" />}
+        control={
+          <Checkbox checked={true} onChange={handleChange} name="checkedF" value="checkedF" />
+        }
         label="Custom color"
       />
     </FormGroup>
@@ -694,16 +706,32 @@ const SwitchTest = () => {
     checkedB: false,
     checkedE: true,
   };
-  const handleChange = (name: string) => (event: React.SyntheticEvent<any>, checked: boolean) =>
-    log({ [name]: checked });
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) =>
+    log({ [event.target.name]: event.target.checked });
 
   return (
     <div>
-      <Switch checked={state.checkedA} onChange={handleChange('checkedA')} aria-label="checkedA" />
-      <Switch checked={state.checkedB} onChange={handleChange('checkedB')} aria-label="checkedB" />
+      <Switch
+        checked={state.checkedA}
+        onChange={handleChange}
+        name="checkedA"
+        aria-label="checkedA"
+      />
+      <Switch
+        checked={state.checkedB}
+        onChange={handleChange}
+        name="checkedB"
+        aria-label="checkedB"
+      />
       <Switch checked={false} aria-label="checkedC" disabled />
       <Switch checked aria-label="checkedD" disabled />
-      <Switch checked={state.checkedE} onChange={handleChange('checkedE')} aria-label="checkedD" />
+      <Switch
+        checked={state.checkedE}
+        onChange={handleChange}
+        name="checkedE"
+        aria-label="checkedD"
+      />
     </div>
   );
 };