[docs] Add Select TypeScript demos (#15288)

* [docs] Add Select TypeScript demos * [docs] replicate null ref checks from TypeScript demos to JavaScript versions * [docs] fix whitespace difference between TypeScript and JS demos * [docs] Add Select TypeScript demos * [docs] replicate null ref checks from TypeScript demos to JavaScript versions * [docs] fix whitespace difference between TypeScript and JS demos * [docs] update select ts demos to use new value types * [docs] update select ts demos to use new value types * Less restrictive names Doesn't matter if we pass names that are not in the original array. Keep the demo simple. * Use non-null assertions
mui · Apr 12, 2019 · dea2617 · dea2617
1 parent 468c694
commit dea2617
Show file tree

Hide file tree

Showing 6 changed files with 959 additions and 0 deletions.
diff --git a/docs/src/pages/demos/selects/ControlledOpenSelect.tsx b/docs/src/pages/demos/selects/ControlledOpenSelect.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+import Button from '@material-ui/core/Button';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  button: {
+    display: 'block',
+    marginTop: theme.spacing(2),
+  },
+  formControl: {
+    margin: theme.spacing(1),
+    minWidth: 120,
+  },
+}));
+
+function ControlledOpenSelect() {
+  const classes = useStyles();
+  const [age, setAge] = React.useState<string | number>('');
+  const [open, setOpen] = React.useState(false);
+
+  function handleChange(event: React.ChangeEvent<{ value: unknown }>) {
+    setAge(event.target.value as number);
+  }
+
+  function handleClose() {
+    setOpen(false);
+  }
+
+  function handleOpen() {
+    setOpen(true);
+  }
+
+  return (
+    <form autoComplete="off">
+      <Button className={classes.button} onClick={handleOpen}>
+        Open the select
+      </Button>
+      <FormControl className={classes.formControl}>
+        <InputLabel htmlFor="demo-controlled-open-select">Age</InputLabel>
+        <Select
+          open={open}
+          onClose={handleClose}
+          onOpen={handleOpen}
+          value={age}
+          onChange={handleChange}
+          inputProps={{
+            name: 'age',
+            id: 'demo-controlled-open-select',
+          }}
+        >
+          <MenuItem value="">
+            <em>None</em>
+          </MenuItem>
+          <MenuItem value={10}>Ten</MenuItem>
+          <MenuItem value={20}>Twenty</MenuItem>
+          <MenuItem value={30}>Thirty</MenuItem>
+        </Select>
+      </FormControl>
+    </form>
+  );
+}
+
+export default ControlledOpenSelect;
diff --git a/docs/src/pages/demos/selects/CustomizedSelects.tsx b/docs/src/pages/demos/selects/CustomizedSelects.tsx
@@ -0,0 +1,110 @@
+import React from 'react';
+import { makeStyles, withStyles } from '@material-ui/styles';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+import NativeSelect from '@material-ui/core/NativeSelect';
+import InputBase from '@material-ui/core/InputBase';
+import { Theme } from '@material-ui/core/styles';
+
+const BootstrapInput = withStyles((theme: Theme) => ({
+  root: {
+    'label + &': {
+      marginTop: theme.spacing(3),
+    },
+  },
+  input: {
+    borderRadius: 4,
+    position: 'relative',
+    backgroundColor: theme.palette.background.paper,
+    border: '1px solid #ced4da',
+    fontSize: 16,
+    width: 'auto',
+    padding: '10px 26px 10px 12px',
+    transition: theme.transitions.create(['border-color', 'box-shadow']),
+    // Use the system font instead of the default Roboto font.
+    fontFamily: [
+      '-apple-system',
+      'BlinkMacSystemFont',
+      '"Segoe UI"',
+      'Roboto',
+      '"Helvetica Neue"',
+      'Arial',
+      'sans-serif',
+      '"Apple Color Emoji"',
+      '"Segoe UI Emoji"',
+      '"Segoe UI Symbol"',
+    ].join(','),
+    '&:focus': {
+      borderRadius: 4,
+      borderColor: '#80bdff',
+      boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)',
+    },
+  },
+}))(InputBase);
+
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+  margin: {
+    margin: theme.spacing(1),
+  },
+  bootstrapFormLabel: {
+    fontSize: 18,
+  },
+}));
+
+function CustomizedSelects() {
+  const classes = useStyles();
+  const [age, setAge] = React.useState('');
+  const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
+    setAge(event.target.value as string);
+  };
+  return (
+    <form className={classes.root} autoComplete="off">
+      <FormControl className={classes.margin}>
+        <InputLabel htmlFor="age-customized-select" className={classes.bootstrapFormLabel}>
+          Age
+        </InputLabel>
+        <BootstrapInput />
+      </FormControl>
+      <FormControl className={classes.margin}>
+        <InputLabel htmlFor="age-customized-select" className={classes.bootstrapFormLabel}>
+          Age
+        </InputLabel>
+        <Select
+          value={age}
+          onChange={handleChange}
+          input={<BootstrapInput name="age" id="age-customized-select" />}
+        >
+          <MenuItem value="">
+            <em>None</em>
+          </MenuItem>
+          <MenuItem value={10}>Ten</MenuItem>
+          <MenuItem value={20}>Twenty</MenuItem>
+          <MenuItem value={30}>Thirty</MenuItem>
+        </Select>
+      </FormControl>
+      <FormControl className={classes.margin}>
+        <InputLabel htmlFor="age-customized-native-simple" className={classes.bootstrapFormLabel}>
+          Age
+        </InputLabel>
+        <NativeSelect
+          value={age}
+          onChange={handleChange}
+          input={<BootstrapInput name="age" id="age-customized-native-simple" />}
+        >
+          <option value="" />
+          <option value={10}>Ten</option>
+          <option value={20}>Twenty</option>
+          <option value={30}>Thirty</option>
+        </NativeSelect>
+      </FormControl>
+    </form>
+  );
+}
+
+export default CustomizedSelects;
diff --git a/docs/src/pages/demos/selects/DialogSelect.tsx b/docs/src/pages/demos/selects/DialogSelect.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import InputLabel from '@material-ui/core/InputLabel';
+import Input from '@material-ui/core/Input';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  container: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+  formControl: {
+    margin: theme.spacing(1),
+    minWidth: 120,
+  },
+}));
+
+function DialogSelect() {
+  const classes = useStyles();
+  const [state, setState] = React.useState({
+    open: false,
+    age: '',
+  });
+
+  const handleChange = (name: keyof typeof state) => (
+    event: React.ChangeEvent<{ value: unknown }>,
+  ) => {
+    setState({ ...state, [name]: Number(event.target.value) });
+  };
+
+  function handleClickOpen() {
+    setState({ ...state, open: true });
+  }
+
+  function handleClose() {
+    setState({ ...state, open: false });
+  }
+
+  return (
+    <div>
+      <Button onClick={handleClickOpen}>Open select dialog</Button>
+      <Dialog disableBackdropClick disableEscapeKeyDown open={state.open} onClose={handleClose}>
+        <DialogTitle>Fill the form</DialogTitle>
+        <DialogContent>
+          <form className={classes.container}>
+            <FormControl className={classes.formControl}>
+              <InputLabel htmlFor="age-native-simple">Age</InputLabel>
+              <Select
+                native
+                value={state.age}
+                onChange={handleChange('age')}
+                input={<Input id="age-native-simple" />}
+              >
+                <option value="" />
+                <option value={10}>Ten</option>
+                <option value={20}>Twenty</option>
+                <option value={30}>Thirty</option>
+              </Select>
+            </FormControl>
+            <FormControl className={classes.formControl}>
+              <InputLabel htmlFor="age-simple">Age</InputLabel>
+              <Select
+                value={state.age}
+                onChange={handleChange('age')}
+                input={<Input id="age-simple" />}
+              >
+                <MenuItem value="">
+                  <em>None</em>
+                </MenuItem>
+                <MenuItem value={10}>Ten</MenuItem>
+                <MenuItem value={20}>Twenty</MenuItem>
+                <MenuItem value={30}>Thirty</MenuItem>
+              </Select>
+            </FormControl>
+          </form>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose} color="primary">
+            Cancel
+          </Button>
+          <Button onClick={handleClose} color="primary">
+            Ok
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </div>
+  );
+}
+
+export default DialogSelect;