[docs] Simplify checkbox examples (mui#20052)

EsoterikStare · Mar 30, 2020 · c24aa5f · c24aa5f
1 parent 6753041
commit c24aa5f
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 48 deletions.
diff --git a/docs/src/pages/components/checkboxes/CheckboxLabels.js b/docs/src/pages/components/checkboxes/CheckboxLabels.js
@@ -27,23 +27,21 @@ export default function CheckboxLabels() {
     checkedG: true,
   });
 
-  const handleChange = name => event => {
-    setState({ ...state, [name]: event.target.checked });
+  const handleChange = event => {
+    setState({ ...state, [event.target.value]: event.target.checked });
   };
 
   return (
     <FormGroup row>
       <FormControlLabel
-        control={
-          <Checkbox checked={state.checkedA} onChange={handleChange('checkedA')} value="checkedA" />
-        }
+        control={<Checkbox checked={state.checkedA} onChange={handleChange} value="checkedA" />}
         label="Secondary"
       />
       <FormControlLabel
         control={
           <Checkbox
             checked={state.checkedB}
-            onChange={handleChange('checkedB')}
+            onChange={handleChange}
             value="checkedB"
             color="primary"
           />
@@ -57,7 +55,7 @@ export default function CheckboxLabels() {
         control={
           <Checkbox
             checked={state.checkedF}
-            onChange={handleChange('checkedF')}
+            onChange={handleChange}
             value="checkedF"
             indeterminate
           />
@@ -66,11 +64,7 @@ export default function CheckboxLabels() {
       />
       <FormControlLabel
         control={
-          <GreenCheckbox
-            checked={state.checkedG}
-            onChange={handleChange('checkedG')}
-            value="checkedG"
-          />
+          <GreenCheckbox checked={state.checkedG} onChange={handleChange} value="checkedG" />
         }
         label="Custom color"
       />

diff --git a/docs/src/pages/components/checkboxes/CheckboxLabels.tsx b/docs/src/pages/components/checkboxes/CheckboxLabels.tsx
@@ -27,23 +27,21 @@ export default function CheckboxLabels() {
     checkedG: true,
   });
 
-  const handleChange = (name: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
-    setState({ ...state, [name]: event.target.checked });
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setState({ ...state, [event.target.value]: event.target.checked });
   };
 
   return (
     <FormGroup row>
       <FormControlLabel
-        control={
-          <Checkbox checked={state.checkedA} onChange={handleChange('checkedA')} value="checkedA" />
-        }
+        control={<Checkbox checked={state.checkedA} onChange={handleChange} value="checkedA" />}
         label="Secondary"
       />
       <FormControlLabel
         control={
           <Checkbox
             checked={state.checkedB}
-            onChange={handleChange('checkedB')}
+            onChange={handleChange}
             value="checkedB"
             color="primary"
           />
@@ -57,7 +55,7 @@ export default function CheckboxLabels() {
         control={
           <Checkbox
             checked={state.checkedF}
-            onChange={handleChange('checkedF')}
+            onChange={handleChange}
             value="checkedF"
             indeterminate
           />
@@ -66,11 +64,7 @@ export default function CheckboxLabels() {
       />
       <FormControlLabel
         control={
-          <GreenCheckbox
-            checked={state.checkedG}
-            onChange={handleChange('checkedG')}
-            value="checkedG"
-          />
+          <GreenCheckbox checked={state.checkedG} onChange={handleChange} value="checkedG" />
         }
         label="Custom color"
       />

diff --git a/docs/src/pages/components/checkboxes/CheckboxesGroup.js b/docs/src/pages/components/checkboxes/CheckboxesGroup.js
@@ -24,8 +24,8 @@ export default function CheckboxesGroup() {
     antoine: false,
   });
 
-  const handleChange = name => event => {
-    setState({ ...state, [name]: event.target.checked });
+  const handleChange = event => {
+    setState({ ...state, [event.target.value]: event.target.checked });
   };
 
   const { gilad, jason, antoine } = state;
@@ -37,17 +37,15 @@ export default function CheckboxesGroup() {
         <FormLabel component="legend">Assign responsibility</FormLabel>
         <FormGroup>
           <FormControlLabel
-            control={<Checkbox checked={gilad} onChange={handleChange('gilad')} value="gilad" />}
+            control={<Checkbox checked={gilad} onChange={handleChange} value="gilad" />}
             label="Gilad Gray"
           />
           <FormControlLabel
-            control={<Checkbox checked={jason} onChange={handleChange('jason')} value="jason" />}
+            control={<Checkbox checked={jason} onChange={handleChange} value="jason" />}
             label="Jason Killian"
           />
           <FormControlLabel
-            control={
-              <Checkbox checked={antoine} onChange={handleChange('antoine')} value="antoine" />
-            }
+            control={<Checkbox checked={antoine} onChange={handleChange} value="antoine" />}
             label="Antoine Llorca"
           />
         </FormGroup>
@@ -57,17 +55,15 @@ export default function CheckboxesGroup() {
         <FormLabel component="legend">Pick two</FormLabel>
         <FormGroup>
           <FormControlLabel
-            control={<Checkbox checked={gilad} onChange={handleChange('gilad')} value="gilad" />}
+            control={<Checkbox checked={gilad} onChange={handleChange} value="gilad" />}
             label="Gilad Gray"
           />
           <FormControlLabel
-            control={<Checkbox checked={jason} onChange={handleChange('jason')} value="jason" />}
+            control={<Checkbox checked={jason} onChange={handleChange} value="jason" />}
             label="Jason Killian"
           />
           <FormControlLabel
-            control={
-              <Checkbox checked={antoine} onChange={handleChange('antoine')} value="antoine" />
-            }
+            control={<Checkbox checked={antoine} onChange={handleChange} value="antoine" />}
             label="Antoine Llorca"
           />
         </FormGroup>

diff --git a/docs/src/pages/components/checkboxes/CheckboxesGroup.tsx b/docs/src/pages/components/checkboxes/CheckboxesGroup.tsx
@@ -26,8 +26,8 @@ export default function CheckboxesGroup() {
     antoine: false,
   });
 
-  const handleChange = (name: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
-    setState({ ...state, [name]: event.target.checked });
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setState({ ...state, [event.target.value]: event.target.checked });
   };
 
   const { gilad, jason, antoine } = state;
@@ -39,17 +39,15 @@ export default function CheckboxesGroup() {
         <FormLabel component="legend">Assign responsibility</FormLabel>
         <FormGroup>
           <FormControlLabel
-            control={<Checkbox checked={gilad} onChange={handleChange('gilad')} value="gilad" />}
+            control={<Checkbox checked={gilad} onChange={handleChange} value="gilad" />}
             label="Gilad Gray"
           />
           <FormControlLabel
-            control={<Checkbox checked={jason} onChange={handleChange('jason')} value="jason" />}
+            control={<Checkbox checked={jason} onChange={handleChange} value="jason" />}
             label="Jason Killian"
           />
           <FormControlLabel
-            control={
-              <Checkbox checked={antoine} onChange={handleChange('antoine')} value="antoine" />
-            }
+            control={<Checkbox checked={antoine} onChange={handleChange} value="antoine" />}
             label="Antoine Llorca"
           />
         </FormGroup>
@@ -59,17 +57,15 @@ export default function CheckboxesGroup() {
         <FormLabel component="legend">Pick two</FormLabel>
         <FormGroup>
           <FormControlLabel
-            control={<Checkbox checked={gilad} onChange={handleChange('gilad')} value="gilad" />}
+            control={<Checkbox checked={gilad} onChange={handleChange} value="gilad" />}
             label="Gilad Gray"
           />
           <FormControlLabel
-            control={<Checkbox checked={jason} onChange={handleChange('jason')} value="jason" />}
+            control={<Checkbox checked={jason} onChange={handleChange} value="jason" />}
             label="Jason Killian"
           />
           <FormControlLabel
-            control={
-              <Checkbox checked={antoine} onChange={handleChange('antoine')} value="antoine" />
-            }
+            control={<Checkbox checked={antoine} onChange={handleChange} value="antoine" />}
             label="Antoine Llorca"
           />
         </FormGroup>