[docs] Add CheckboxesGroup TypeScript demo (#15228)

mui · Apr 8, 2019 · 130cc2e · 130cc2e
1 parent fde7c11
commit 130cc2e
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 4 deletions.
diff --git a/docs/src/pages/demos/selection-controls/CheckboxesGroup.js b/docs/src/pages/demos/selection-controls/CheckboxesGroup.js
@@ -33,8 +33,8 @@ function CheckboxesGroup() {
 
   return (
     <div className={classes.root}>
-      <FormControl component="fieldset" className={classes.formControl}>
-        <FormLabel component="legend">Assign responsibility</FormLabel>
+      <FormControl component={'fieldset'} className={classes.formControl}>
+        <FormLabel component={'legend'}>Assign responsibility</FormLabel>
         <FormGroup>
           <FormControlLabel
             control={<Checkbox checked={gilad} onChange={handleChange('gilad')} value="gilad" />}
@@ -53,8 +53,8 @@ function CheckboxesGroup() {
         </FormGroup>
         <FormHelperText>Be careful</FormHelperText>
       </FormControl>
-      <FormControl required error={error} component="fieldset" className={classes.formControl}>
-        <FormLabel component="legend">Pick two</FormLabel>
+      <FormControl required error={error} component={'fieldset'} className={classes.formControl}>
+        <FormLabel component={'legend'}>Pick two</FormLabel>
         <FormGroup>
           <FormControlLabel
             control={<Checkbox checked={gilad} onChange={handleChange('gilad')} value="gilad" />}

diff --git a/docs/src/pages/demos/selection-controls/CheckboxesGroup.tsx b/docs/src/pages/demos/selection-controls/CheckboxesGroup.tsx
@@ -0,0 +1,85 @@
+import React from 'react';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import FormLabel from '@material-ui/core/FormLabel';
+import FormControl from '@material-ui/core/FormControl';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import Checkbox from '@material-ui/core/Checkbox';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    display: 'flex',
+  },
+  formControl: {
+    margin: theme.spacing(3),
+  },
+}));
+
+function CheckboxesGroup() {
+  const classes = useStyles();
+  const [state, setState] = React.useState({
+    gilad: true,
+    jason: false,
+    antoine: false,
+  });
+
+  const handleChange = (name: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
+    setState({ ...state, [name]: event.target.checked });
+  };
+
+  const { gilad, jason, antoine } = state;
+  const error = [gilad, jason, antoine].filter(v => v).length !== 2;
+
+  return (
+    <div className={classes.root}>
+      <FormControl component={'fieldset' as 'div'} className={classes.formControl}>
+        <FormLabel component={'legend' as 'label'}>Assign responsibility</FormLabel>
+        <FormGroup>
+          <FormControlLabel
+            control={<Checkbox checked={gilad} onChange={handleChange('gilad')} value="gilad" />}
+            label="Gilad Gray"
+          />
+          <FormControlLabel
+            control={<Checkbox checked={jason} onChange={handleChange('jason')} value="jason" />}
+            label="Jason Killian"
+          />
+          <FormControlLabel
+            control={
+              <Checkbox checked={antoine} onChange={handleChange('antoine')} value="antoine" />
+            }
+            label="Antoine Llorca"
+          />
+        </FormGroup>
+        <FormHelperText>Be careful</FormHelperText>
+      </FormControl>
+      <FormControl
+        required
+        error={error}
+        component={'fieldset' as 'div'}
+        className={classes.formControl}
+      >
+        <FormLabel component={'legend' as 'label'}>Pick two</FormLabel>
+        <FormGroup>
+          <FormControlLabel
+            control={<Checkbox checked={gilad} onChange={handleChange('gilad')} value="gilad" />}
+            label="Gilad Gray"
+          />
+          <FormControlLabel
+            control={<Checkbox checked={jason} onChange={handleChange('jason')} value="jason" />}
+            label="Jason Killian"
+          />
+          <FormControlLabel
+            control={
+              <Checkbox checked={antoine} onChange={handleChange('antoine')} value="antoine" />
+            }
+            label="Antoine Llorca"
+          />
+        </FormGroup>
+        <FormHelperText>You can display an error</FormHelperText>
+      </FormControl>
+    </div>
+  );
+}
+
+export default CheckboxesGroup;