Skip to content

Commit 1ab32ce

Browse files
nganphan123nganphan123
committed
remove wrapper
Signed-off-by: nganphan123 <jill01009@gmail.com>
1 parent ff9c597 commit 1ab32ce

1 file changed

Lines changed: 85 additions & 107 deletions

File tree

  • src/sections/Projects/Sistent/components/select

‎src/sections/Projects/Sistent/components/select/code.js‎

Lines changed: 85 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -18,122 +18,101 @@ import {
1818
} from "@mui/material";
1919

2020
const codes = {
21-
"variant-outlined": `<SistentThemeProvider>
22-
<Select>
23-
<MenuItem value={10}>Ten</MenuItem>
24-
<MenuItem value={20}>Twenty</MenuItem>
25-
<MenuItem value={30}>Thirty</MenuItem>
26-
</Select>
27-
</SistentThemeProvider>`,
21+
"variant-outlined": `<Select>
22+
<MenuItem value={10}>Ten</MenuItem>
23+
<MenuItem value={20}>Twenty</MenuItem>
24+
<MenuItem value={30}>Thirty</MenuItem>
25+
</Select>`,
2826

29-
"variant-filled": `<SistentThemeProvider>
30-
<Select variant="filled">
31-
<MenuItem value={10}>Ten</MenuItem>
32-
<MenuItem value={20}>Twenty</MenuItem>
33-
<MenuItem value={30}>Thirty</MenuItem>
34-
</Select>
35-
</SistentThemeProvider>`,
27+
"variant-filled": `<Select variant="filled">
28+
<MenuItem value={10}>Ten</MenuItem>
29+
<MenuItem value={20}>Twenty</MenuItem>
30+
<MenuItem value={30}>Thirty</MenuItem>
31+
</Select>`,
3632

37-
"variant-standard": `<SistentThemeProvider>
38-
<Select variant="standard">
39-
<MenuItem value={10}>Ten</MenuItem>
40-
<MenuItem value={20}>Twenty</MenuItem>
41-
<MenuItem value={30}>Thirty</MenuItem>
42-
</Select>
43-
</SistentThemeProvider>`,
33+
"variant-standard": `<Select variant="standard">
34+
<MenuItem value={10}>Ten</MenuItem>
35+
<MenuItem value={20}>Twenty</MenuItem>
36+
<MenuItem value={30}>Thirty</MenuItem>
37+
</Select>`,
4438

45-
"size-auto": `<SistentThemeProvider>
46-
<Select autoWidth>
47-
<MenuItem value={10}>Ten</MenuItem>
48-
<MenuItem value={20}>Twenty</MenuItem>
49-
<MenuItem value={30}>Thirty</MenuItem>
50-
</Select>
51-
</SistentThemeProvider>`,
39+
"size-auto": `<Select autoWidth>
40+
<MenuItem value={10}>Ten</MenuItem>
41+
<MenuItem value={20}>Twenty</MenuItem>
42+
<MenuItem value={30}>Thirty</MenuItem>
43+
</Select>`,
5244

53-
"size-small": `<SistentThemeProvider>
54-
<Select size="small">
55-
<MenuItem value={10}>Ten</MenuItem>
56-
<MenuItem value={20}>Twenty</MenuItem>
57-
<MenuItem value={30}>Thirty</MenuItem>
58-
</Select>
59-
</SistentThemeProvider>`,
45+
"size-small": `<Select size="small">
46+
<MenuItem value={10}>Ten</MenuItem>
47+
<MenuItem value={20}>Twenty</MenuItem>
48+
<MenuItem value={30}>Thirty</MenuItem>
49+
</Select>`,
6050

61-
"size-fullwidth": `<SistentThemeProvider>
62-
<Select fullWidth>
51+
"size-fullwidth": `<Select fullWidth>
52+
<MenuItem value={10}>Ten</MenuItem>
53+
<MenuItem value={20}>Twenty</MenuItem>
54+
<MenuItem value={30}>Thirty</MenuItem>
55+
</Select>`,
56+
57+
"behavior-error-disabled": `<Select disabled>
58+
<MenuItem value={10}>Ten</MenuItem>
59+
<MenuItem value={20}>Twenty</MenuItem>
60+
<MenuItem value={30}>Thirty</MenuItem>
61+
</Select>
62+
<Select error>
63+
<MenuItem value={10}>Ten</MenuItem>
64+
<MenuItem value={20}>Twenty</MenuItem>
65+
<MenuItem value={30}>Thirty</MenuItem>
66+
</Select>`,
67+
68+
"behavior-required": `<FormControl required>
69+
<InputLabel id="demo-select-label-outlined">Age</InputLabel>
70+
<Select
71+
labelId="demo-select-label-outlined"
72+
label="Age"
73+
>
6374
<MenuItem value={10}>Ten</MenuItem>
6475
<MenuItem value={20}>Twenty</MenuItem>
6576
<MenuItem value={30}>Thirty</MenuItem>
6677
</Select>
67-
</SistentThemeProvider>`,
78+
</FormControl>`,
6879

69-
"behavior-error-disabled": `<SistentThemeProvider>
70-
<Select disabled>
80+
"customize-label": `<FormControl sx={{ width: "200px" }}>
81+
<InputLabel id="demo-select-label">Age</InputLabel>
82+
<Select
83+
labelId="demo-select-label"
84+
label="Age"
85+
>
7186
<MenuItem value={10}>Ten</MenuItem>
7287
<MenuItem value={20}>Twenty</MenuItem>
7388
<MenuItem value={30}>Thirty</MenuItem>
7489
</Select>
75-
<Select error>
90+
</FormControl>`,
91+
92+
"customize-helper-text": `<FormControl sx={{ width: "200px" }}>
93+
<Select>
7694
<MenuItem value={10}>Ten</MenuItem>
7795
<MenuItem value={20}>Twenty</MenuItem>
7896
<MenuItem value={30}>Thirty</MenuItem>
7997
</Select>
80-
</SistentThemeProvider>`,
81-
82-
"behavior-required": `<SistentThemeProvider>
83-
<FormControl required>
84-
<InputLabel id="demo-select-label-outlined">Age</InputLabel>
85-
<Select
86-
labelId="demo-select-label-outlined"
87-
label="Age"
88-
>
89-
<MenuItem value={10}>Ten</MenuItem>
90-
<MenuItem value={20}>Twenty</MenuItem>
91-
<MenuItem value={30}>Thirty</MenuItem>
92-
</Select>
93-
</FormControl>
94-
</SistentThemeProvider>`,
95-
96-
"customize-label": `<SistentThemeProvider>
97-
<FormControl sx={{ width: "200px" }}>
98-
<InputLabel id="demo-select-label">Age</InputLabel>
99-
<Select
100-
labelId="demo-select-label"
101-
label="Age"
102-
>
103-
<MenuItem value={10}>Ten</MenuItem>
104-
<MenuItem value={20}>Twenty</MenuItem>
105-
<MenuItem value={30}>Thirty</MenuItem>
106-
</Select>
107-
</FormControl>
108-
</SistentThemeProvider>`,
109-
"customize-helper-text": `<SistentThemeProvider>
110-
<FormControl sx={{ width: "200px" }}>
111-
<Select>
112-
<MenuItem value={10}>Ten</MenuItem>
113-
<MenuItem value={20}>Twenty</MenuItem>
114-
<MenuItem value={30}>Thirty</MenuItem>
115-
</Select>
116-
<FormHelperText>This is a helper text</FormHelperText>
117-
</FormControl>
118-
</SistentThemeProvider>`,
98+
<FormHelperText>This is a helper text</FormHelperText>
99+
</FormControl>`,
119100

120101
"customize-placeholder": `const [selectedAge, setSelectedAge] = React.useState("");
121102
122-
<SistentThemeProvider>
123-
<Select
124-
onChange={(e) => setSelectedAge(e.target.value)}
125-
renderValue={() => {
126-
if (selectedAge == "") return <em>Select an age</em>;
127-
return selectedAge;
128-
}}
129-
value={selectedAge}
130-
displayEmpty
131-
>
132-
<MenuItem value={10}>Ten</MenuItem>
133-
<MenuItem value={20}>Twenty</MenuItem>
134-
<MenuItem value={30}>Thirty</MenuItem>
135-
</Select>
136-
</SistentThemeProvider>`,
103+
<Select
104+
onChange={(e) => setSelectedAge(e.target.value)}
105+
renderValue={() => {
106+
if (selectedAge == "") return <em>Select an age</em>;
107+
return selectedAge;
108+
}}
109+
value={selectedAge}
110+
displayEmpty
111+
>
112+
<MenuItem value={10}>Ten</MenuItem>
113+
<MenuItem value={20}>Twenty</MenuItem>
114+
<MenuItem value={30}>Thirty</MenuItem>
115+
</Select>`,
137116

138117
"customize-grouping": `<Select>
139118
<ListSubheader muiSkipListHighlight>Group 1</ListSubheader>
@@ -152,18 +131,17 @@ const handleMultiplSelect = (event) => {
152131
let agesList = event.target.value;
153132
setMultipleAges(agesList);
154133
};
155-
<SistentThemeProvider>
156-
<Select
157-
multiple
158-
input={<OutlinedInput label="Name" />}
159-
value={multipleAges}
160-
onChange={handleMultiplSelect}
161-
>
162-
<MenuItem value={10}>Ten</MenuItem>
163-
<MenuItem value={20}>Twenty</MenuItem>
164-
<MenuItem value={30}>Thirty</MenuItem>
165-
</Select>
166-
</SistentThemeProvider>`,
134+
135+
<Select
136+
multiple
137+
input={<OutlinedInput label="Name" />}
138+
value={multipleAges}
139+
onChange={handleMultiplSelect}
140+
>
141+
<MenuItem value={10}>Ten</MenuItem>
142+
<MenuItem value={20}>Twenty</MenuItem>
143+
<MenuItem value={30}>Thirty</MenuItem>
144+
</Select>`,
167145
};
168146

169147
const SelectCode = () => {

0 commit comments

Comments
 (0)