forked from mui/material-ui
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Playground.js
410 lines (406 loc) · 14.8 KB
/
Playground.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
import * as React from 'react';
import Autocomplete from '@mui/joy/Autocomplete';
import Box from '@mui/joy/Box';
import Checkbox from '@mui/joy/Checkbox';
import Divider from '@mui/joy/Divider';
import Link from '@mui/joy/Link';
import FormControl, { formControlClasses } from '@mui/joy/FormControl';
import FormLabel from '@mui/joy/FormLabel';
import FormHelperText from '@mui/joy/FormHelperText';
import List from '@mui/joy/List';
import ListItem from '@mui/joy/ListItem';
import Typography from '@mui/joy/Typography';
export default function Playground() {
const [flags, setFlags] = React.useState([]);
const getCheckboxProps = (flag) => ({
checked: flags.includes(flag),
onChange: (event) => {
setFlags(
event.target.checked ? [...flags, flag] : flags.filter((f) => f !== flag),
);
},
});
return (
<Box>
<Box
sx={{
mt: 3,
pt: 4,
position: 'sticky',
top: 'var(--MuiDocs-header-height)',
zIndex: 2,
border: '1px solid rgba(62, 80, 96, 0.3)',
borderRadius: 'xs',
background: 'rgba(0,30,60, 0.95)',
}}
>
<FormControl sx={{ width: 300, mx: 'auto' }}>
<FormLabel>Playground</FormLabel>
<Autocomplete
options={top100Films}
placeholder="Type to search"
{...flags.reduce((prev, current) => ({ ...prev, [current]: true }), {})}
/>
</FormControl>
<Divider sx={{ mt: 4, mb: 2 }} />
<Box sx={{ display: 'flex', alignItems: 'baseline' }}>
<Typography
id="flags-playground"
level="body3"
sx={{
textTransform: 'uppercase',
fontWeight: 'lg',
letterSpacing: 'md',
px: 2,
}}
>
Flags {flags.length ? `(${flags.length})` : ''}
</Typography>
{flags.length > 0 && (
// eslint-disable-next-line jsx-a11y/anchor-is-valid
<Link
component="button"
level="body2"
onClick={() => setFlags([])}
sx={{ ml: 'auto' }}
>
Clear all
</Link>
)}
</Box>
<Divider sx={{ my: 2 }} />
</Box>
<Box sx={{ minWidth: 0, flexBasis: 300, flexGrow: 1 }}>
<List
aria-labelledby="flags-playground"
sx={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
overflow: 'auto',
px: 0.5,
'--List-gap': '8px',
'& > li:first-child': {
mt: 'var(--List-gap)',
},
[`& .${formControlClasses.root}`]: { position: 'initial', gap: 1.5 },
'& > li': {
alignItems: 'flex-start',
},
}}
>
<ListItem>
<FormControl orientation="horizontal">
<Checkbox overlay {...getCheckboxProps('autoComplete')} />
<div>
<FormLabel>autoComplete</FormLabel>
<FormHelperText>
The completion string, appears inline after the input cursor in the
textbox. The inline completion string is visually highlighted and
has a selected state.
</FormHelperText>
</div>
</FormControl>
</ListItem>
<ListItem>
<FormControl orientation="horizontal">
<Checkbox overlay {...getCheckboxProps('autoHighlight')} />
<div>
<FormLabel>autoHighlight</FormLabel>
<FormHelperText>
The first option is automatically highlighted.
</FormHelperText>
</div>
</FormControl>
</ListItem>
<ListItem>
<FormControl orientation="horizontal">
<Checkbox overlay {...getCheckboxProps('autoSelect')} />
<div>
<FormLabel>autoSelect</FormLabel>
<FormHelperText>
The selected option becomes the value of the input when the
Autocomplete loses focus unless the user chooses a different option
or changes the character string in the input.
</FormHelperText>
</div>
</FormControl>
</ListItem>
<ListItem>
<FormControl orientation="horizontal">
<Checkbox overlay {...getCheckboxProps('blurOnSelect')} />
<div>
<FormLabel>blurOnSelect</FormLabel>
<FormHelperText>The input is always blurred.</FormHelperText>
</div>
</FormControl>
</ListItem>
<ListItem>
<FormControl orientation="horizontal">
<Checkbox overlay {...getCheckboxProps('clearOnBlur')} />
<div>
<FormLabel>clearOnBlur</FormLabel>
<FormHelperText>
The input's text is cleared on blur if no value is selected.
</FormHelperText>
</div>
</FormControl>
</ListItem>
<ListItem>
<FormControl orientation="horizontal">
<Checkbox overlay {...getCheckboxProps('clearOnEscape')} />
<div>
<FormLabel>clearOnEscape</FormLabel>
<FormHelperText>
Clear all values when the user presses escape and the popup is
closed.
</FormHelperText>
</div>
</FormControl>
</ListItem>
<ListItem>
<FormControl orientation="horizontal">
<Checkbox overlay {...getCheckboxProps('disabled')} />
<div>
<FormLabel>disabled</FormLabel>
<FormHelperText>The component is disabled.</FormHelperText>
</div>
</FormControl>
</ListItem>
<ListItem>
<FormControl orientation="horizontal">
<Checkbox overlay {...getCheckboxProps('disableClearable')} />
<div>
<FormLabel>disableClearable</FormLabel>
<FormHelperText>The input can't be cleared</FormHelperText>
</div>
</FormControl>
</ListItem>
<ListItem>
<FormControl orientation="horizontal">
<Checkbox overlay {...getCheckboxProps('disableCloseOnSelect')} />
<div>
<FormLabel>disableCloseOnSelect</FormLabel>
<FormHelperText>
The popup won't close when a value is selected.
</FormHelperText>
</div>
</FormControl>
</ListItem>
<ListItem>
<FormControl orientation="horizontal">
<Checkbox overlay {...getCheckboxProps('disableListWrap')} />
<div>
<FormLabel>disableListWrap</FormLabel>
<FormHelperText>
The list box in the popup will not wrap focus.
</FormHelperText>
</div>
</FormControl>
</ListItem>
<ListItem>
<FormControl orientation="horizontal">
<Checkbox overlay {...getCheckboxProps('filterSelectedOptions')} />
<div>
<FormLabel>filterSelectedOptions</FormLabel>
<FormHelperText>
Hide the selected option from the list box.
</FormHelperText>
</div>
</FormControl>
</ListItem>
<ListItem>
<FormControl orientation="horizontal">
<Checkbox overlay {...getCheckboxProps('freeSolo')} />
<div>
<FormLabel>freeSolo</FormLabel>
<FormHelperText>
The user input is not bound to the provided options.
</FormHelperText>
</div>
</FormControl>
</ListItem>
<ListItem>
<FormControl orientation="horizontal">
<Checkbox overlay {...getCheckboxProps('includeInputInList')} />
<div>
<FormLabel>includeInputInList</FormLabel>
<FormHelperText>The highlight can move to the input.</FormHelperText>
</div>
</FormControl>
</ListItem>
<ListItem>
<FormControl orientation="horizontal">
<Checkbox overlay {...getCheckboxProps('openOnFocus')} />
<div>
<FormLabel>openOnFocus</FormLabel>
<FormHelperText>The popup will open on input focus.</FormHelperText>
</div>
</FormControl>
</ListItem>
<ListItem>
<FormControl orientation="horizontal">
<Checkbox overlay {...getCheckboxProps('disablePortal')} />
<div>
<FormLabel>disablePortal</FormLabel>
<FormHelperText>
The popup will be under the DOM hierarchy of the parent component.
</FormHelperText>
</div>
</FormControl>
</ListItem>
<ListItem>
<FormControl orientation="horizontal">
<Checkbox overlay {...getCheckboxProps('readOnly')} />
<div>
<FormLabel>readOnly</FormLabel>
<FormHelperText>
The component becomes read-only. It is also supported in multiple
tags where the tag cannot be deleted.
</FormHelperText>
</div>
</FormControl>
</ListItem>
<ListItem>
<FormControl orientation="horizontal">
<Checkbox overlay {...getCheckboxProps('selectOnFocus')} />
<div>
<FormLabel>selectOnFocus</FormLabel>
<FormHelperText>
The input's text is selected on focus. It helps the user clear
the selected value.
</FormHelperText>
</div>
</FormControl>
</ListItem>
</List>
</Box>
</Box>
);
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ label: 'The Shawshank Redemption', year: 1994 },
{ label: 'The Godfather', year: 1972 },
{ label: 'The Godfather: Part II', year: 1974 },
{ label: 'The Dark Knight', year: 2008 },
{ label: '12 Angry Men', year: 1957 },
{ label: "Schindler's List", year: 1993 },
{ label: 'Pulp Fiction', year: 1994 },
{
label: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ label: 'The Good, the Bad and the Ugly', year: 1966 },
{ label: 'Fight Club', year: 1999 },
{
label: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
label: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ label: 'Forrest Gump', year: 1994 },
{ label: 'Inception', year: 2010 },
{
label: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ label: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ label: 'Goodfellas', year: 1990 },
{ label: 'The Matrix', year: 1999 },
{ label: 'Seven Samurai', year: 1954 },
{
label: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ label: 'City of God', year: 2002 },
{ label: 'Se7en', year: 1995 },
{ label: 'The Silence of the Lambs', year: 1991 },
{ label: "It's a Wonderful Life", year: 1946 },
{ label: 'Life Is Beautiful', year: 1997 },
{ label: 'The Usual Suspects', year: 1995 },
{ label: 'Léon: The Professional', year: 1994 },
{ label: 'Spirited Away', year: 2001 },
{ label: 'Saving Private Ryan', year: 1998 },
{ label: 'Once Upon a Time in the West', year: 1968 },
{ label: 'American History X', year: 1998 },
{ label: 'Interstellar', year: 2014 },
{ label: 'Casablanca', year: 1942 },
{ label: 'City Lights', year: 1931 },
{ label: 'Psycho', year: 1960 },
{ label: 'The Green Mile', year: 1999 },
{ label: 'The Intouchables', year: 2011 },
{ label: 'Modern Times', year: 1936 },
{ label: 'Raiders of the Lost Ark', year: 1981 },
{ label: 'Rear Window', year: 1954 },
{ label: 'The Pianist', year: 2002 },
{ label: 'The Departed', year: 2006 },
{ label: 'Terminator 2: Judgment Day', year: 1991 },
{ label: 'Back to the Future', year: 1985 },
{ label: 'Whiplash', year: 2014 },
{ label: 'Gladiator', year: 2000 },
{ label: 'Memento', year: 2000 },
{ label: 'The Prestige', year: 2006 },
{ label: 'The Lion King', year: 1994 },
{ label: 'Apocalypse Now', year: 1979 },
{ label: 'Alien', year: 1979 },
{ label: 'Sunset Boulevard', year: 1950 },
{
label: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
year: 1964,
},
{ label: 'The Great Dictator', year: 1940 },
{ label: 'Cinema Paradiso', year: 1988 },
{ label: 'The Lives of Others', year: 2006 },
{ label: 'Grave of the Fireflies', year: 1988 },
{ label: 'Paths of Glory', year: 1957 },
{ label: 'Django Unchained', year: 2012 },
{ label: 'The Shining', year: 1980 },
{ label: 'WALL·E', year: 2008 },
{ label: 'American Beauty', year: 1999 },
{ label: 'The Dark Knight Rises', year: 2012 },
{ label: 'Princess Mononoke', year: 1997 },
{ label: 'Aliens', year: 1986 },
{ label: 'Oldboy', year: 2003 },
{ label: 'Once Upon a Time in America', year: 1984 },
{ label: 'Witness for the Prosecution', year: 1957 },
{ label: 'Das Boot', year: 1981 },
{ label: 'Citizen Kane', year: 1941 },
{ label: 'North by Northwest', year: 1959 },
{ label: 'Vertigo', year: 1958 },
{
label: 'Star Wars: Episode VI - Return of the Jedi',
year: 1983,
},
{ label: 'Reservoir Dogs', year: 1992 },
{ label: 'Braveheart', year: 1995 },
{ label: 'M', year: 1931 },
{ label: 'Requiem for a Dream', year: 2000 },
{ label: 'Amélie', year: 2001 },
{ label: 'A Clockwork Orange', year: 1971 },
{ label: 'Like Stars on Earth', year: 2007 },
{ label: 'Taxi Driver', year: 1976 },
{ label: 'Lawrence of Arabia', year: 1962 },
{ label: 'Double Indemnity', year: 1944 },
{
label: 'Eternal Sunshine of the Spotless Mind',
year: 2004,
},
{ label: 'Amadeus', year: 1984 },
{ label: 'To Kill a Mockingbird', year: 1962 },
{ label: 'Toy Story 3', year: 2010 },
{ label: 'Logan', year: 2017 },
{ label: 'Full Metal Jacket', year: 1987 },
{ label: 'Dangal', year: 2016 },
{ label: 'The Sting', year: 1973 },
{ label: '2001: A Space Odyssey', year: 1968 },
{ label: "Singin' in the Rain", year: 1952 },
{ label: 'Toy Story', year: 1995 },
{ label: 'Bicycle Thieves', year: 1948 },
{ label: 'The Kid', year: 1921 },
{ label: 'Inglourious Basterds', year: 2009 },
{ label: 'Snatch', year: 2000 },
{ label: '3 Idiots', year: 2009 },
{ label: 'Monty Python and the Holy Grail', year: 1975 },
];