Skip to content

Commit dea2617

Browse files
cahilfoleyeps1lon
cahilfoley
authored and
eps1lon
committed
[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
1 parent 468c694 commit dea2617

File tree

6 files changed

+959
-0
lines changed

6 files changed

+959
-0
lines changed

‎docs/src/pages/demos/selects/ControlledOpenSelect.tsx

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import React from 'react';
2+
import { makeStyles, Theme } from '@material-ui/core/styles';
3+
import InputLabel from '@material-ui/core/InputLabel';
4+
import MenuItem from '@material-ui/core/MenuItem';
5+
import FormControl from '@material-ui/core/FormControl';
6+
import Select from '@material-ui/core/Select';
7+
import Button from '@material-ui/core/Button';
8+
9+
const useStyles = makeStyles((theme: Theme) => ({
10+
button: {
11+
display: 'block',
12+
marginTop: theme.spacing(2),
13+
},
14+
formControl: {
15+
margin: theme.spacing(1),
16+
minWidth: 120,
17+
},
18+
}));
19+
20+
function ControlledOpenSelect() {
21+
const classes = useStyles();
22+
const [age, setAge] = React.useState<string | number>('');
23+
const [open, setOpen] = React.useState(false);
24+
25+
function handleChange(event: React.ChangeEvent<{ value: unknown }>) {
26+
setAge(event.target.value as number);
27+
}
28+
29+
function handleClose() {
30+
setOpen(false);
31+
}
32+
33+
function handleOpen() {
34+
setOpen(true);
35+
}
36+
37+
return (
38+
<form autoComplete="off">
39+
<Button className={classes.button} onClick={handleOpen}>
40+
Open the select
41+
</Button>
42+
<FormControl className={classes.formControl}>
43+
<InputLabel htmlFor="demo-controlled-open-select">Age</InputLabel>
44+
<Select
45+
open={open}
46+
onClose={handleClose}
47+
onOpen={handleOpen}
48+
value={age}
49+
onChange={handleChange}
50+
inputProps={{
51+
name: 'age',
52+
id: 'demo-controlled-open-select',
53+
}}
54+
>
55+
<MenuItem value="">
56+
<em>None</em>
57+
</MenuItem>
58+
<MenuItem value={10}>Ten</MenuItem>
59+
<MenuItem value={20}>Twenty</MenuItem>
60+
<MenuItem value={30}>Thirty</MenuItem>
61+
</Select>
62+
</FormControl>
63+
</form>
64+
);
65+
}
66+
67+
export default ControlledOpenSelect;

‎docs/src/pages/demos/selects/CustomizedSelects.tsx

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import React from 'react';
2+
import { makeStyles, withStyles } from '@material-ui/styles';
3+
import InputLabel from '@material-ui/core/InputLabel';
4+
import MenuItem from '@material-ui/core/MenuItem';
5+
import FormControl from '@material-ui/core/FormControl';
6+
import Select from '@material-ui/core/Select';
7+
import NativeSelect from '@material-ui/core/NativeSelect';
8+
import InputBase from '@material-ui/core/InputBase';
9+
import { Theme } from '@material-ui/core/styles';
10+
11+
const BootstrapInput = withStyles((theme: Theme) => ({
12+
root: {
13+
'label + &': {
14+
marginTop: theme.spacing(3),
15+
},
16+
},
17+
input: {
18+
borderRadius: 4,
19+
position: 'relative',
20+
backgroundColor: theme.palette.background.paper,
21+
border: '1px solid #ced4da',
22+
fontSize: 16,
23+
width: 'auto',
24+
padding: '10px 26px 10px 12px',
25+
transition: theme.transitions.create(['border-color', 'box-shadow']),
26+
// Use the system font instead of the default Roboto font.
27+
fontFamily: [
28+
'-apple-system',
29+
'BlinkMacSystemFont',
30+
'"Segoe UI"',
31+
'Roboto',
32+
'"Helvetica Neue"',
33+
'Arial',
34+
'sans-serif',
35+
'"Apple Color Emoji"',
36+
'"Segoe UI Emoji"',
37+
'"Segoe UI Symbol"',
38+
].join(','),
39+
'&:focus': {
40+
borderRadius: 4,
41+
borderColor: '#80bdff',
42+
boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)',
43+
},
44+
},
45+
}))(InputBase);
46+
47+
const useStyles = makeStyles((theme: Theme) => ({
48+
root: {
49+
display: 'flex',
50+
flexWrap: 'wrap',
51+
},
52+
margin: {
53+
margin: theme.spacing(1),
54+
},
55+
bootstrapFormLabel: {
56+
fontSize: 18,
57+
},
58+
}));
59+
60+
function CustomizedSelects() {
61+
const classes = useStyles();
62+
const [age, setAge] = React.useState('');
63+
const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
64+
setAge(event.target.value as string);
65+
};
66+
return (
67+
<form className={classes.root} autoComplete="off">
68+
<FormControl className={classes.margin}>
69+
<InputLabel htmlFor="age-customized-select" className={classes.bootstrapFormLabel}>
70+
Age
71+
</InputLabel>
72+
<BootstrapInput />
73+
</FormControl>
74+
<FormControl className={classes.margin}>
75+
<InputLabel htmlFor="age-customized-select" className={classes.bootstrapFormLabel}>
76+
Age
77+
</InputLabel>
78+
<Select
79+
value={age}
80+
onChange={handleChange}
81+
input={<BootstrapInput name="age" id="age-customized-select" />}
82+
>
83+
<MenuItem value="">
84+
<em>None</em>
85+
</MenuItem>
86+
<MenuItem value={10}>Ten</MenuItem>
87+
<MenuItem value={20}>Twenty</MenuItem>
88+
<MenuItem value={30}>Thirty</MenuItem>
89+
</Select>
90+
</FormControl>
91+
<FormControl className={classes.margin}>
92+
<InputLabel htmlFor="age-customized-native-simple" className={classes.bootstrapFormLabel}>
93+
Age
94+
</InputLabel>
95+
<NativeSelect
96+
value={age}
97+
onChange={handleChange}
98+
input={<BootstrapInput name="age" id="age-customized-native-simple" />}
99+
>
100+
<option value="" />
101+
<option value={10}>Ten</option>
102+
<option value={20}>Twenty</option>
103+
<option value={30}>Thirty</option>
104+
</NativeSelect>
105+
</FormControl>
106+
</form>
107+
);
108+
}
109+
110+
export default CustomizedSelects;

‎docs/src/pages/demos/selects/DialogSelect.tsx

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import React from 'react';
2+
import { makeStyles, Theme } from '@material-ui/core/styles';
3+
import Button from '@material-ui/core/Button';
4+
import Dialog from '@material-ui/core/Dialog';
5+
import DialogActions from '@material-ui/core/DialogActions';
6+
import DialogContent from '@material-ui/core/DialogContent';
7+
import DialogTitle from '@material-ui/core/DialogTitle';
8+
import InputLabel from '@material-ui/core/InputLabel';
9+
import Input from '@material-ui/core/Input';
10+
import MenuItem from '@material-ui/core/MenuItem';
11+
import FormControl from '@material-ui/core/FormControl';
12+
import Select from '@material-ui/core/Select';
13+
14+
const useStyles = makeStyles((theme: Theme) => ({
15+
container: {
16+
display: 'flex',
17+
flexWrap: 'wrap',
18+
},
19+
formControl: {
20+
margin: theme.spacing(1),
21+
minWidth: 120,
22+
},
23+
}));
24+
25+
function DialogSelect() {
26+
const classes = useStyles();
27+
const [state, setState] = React.useState({
28+
open: false,
29+
age: '',
30+
});
31+
32+
const handleChange = (name: keyof typeof state) => (
33+
event: React.ChangeEvent<{ value: unknown }>,
34+
) => {
35+
setState({ ...state, [name]: Number(event.target.value) });
36+
};
37+
38+
function handleClickOpen() {
39+
setState({ ...state, open: true });
40+
}
41+
42+
function handleClose() {
43+
setState({ ...state, open: false });
44+
}
45+
46+
return (
47+
<div>
48+
<Button onClick={handleClickOpen}>Open select dialog</Button>
49+
<Dialog disableBackdropClick disableEscapeKeyDown open={state.open} onClose={handleClose}>
50+
<DialogTitle>Fill the form</DialogTitle>
51+
<DialogContent>
52+
<form className={classes.container}>
53+
<FormControl className={classes.formControl}>
54+
<InputLabel htmlFor="age-native-simple">Age</InputLabel>
55+
<Select
56+
native
57+
value={state.age}
58+
onChange={handleChange('age')}
59+
input={<Input id="age-native-simple" />}
60+
>
61+
<option value="" />
62+
<option value={10}>Ten</option>
63+
<option value={20}>Twenty</option>
64+
<option value={30}>Thirty</option>
65+
</Select>
66+
</FormControl>
67+
<FormControl className={classes.formControl}>
68+
<InputLabel htmlFor="age-simple">Age</InputLabel>
69+
<Select
70+
value={state.age}
71+
onChange={handleChange('age')}
72+
input={<Input id="age-simple" />}
73+
>
74+
<MenuItem value="">
75+
<em>None</em>
76+
</MenuItem>
77+
<MenuItem value={10}>Ten</MenuItem>
78+
<MenuItem value={20}>Twenty</MenuItem>
79+
<MenuItem value={30}>Thirty</MenuItem>
80+
</Select>
81+
</FormControl>
82+
</form>
83+
</DialogContent>
84+
<DialogActions>
85+
<Button onClick={handleClose} color="primary">
86+
Cancel
87+
</Button>
88+
<Button onClick={handleClose} color="primary">
89+
Ok
90+
</Button>
91+
</DialogActions>
92+
</Dialog>
93+
</div>
94+
);
95+
}
96+
97+
export default DialogSelect;

0 commit comments

Comments
 (0)