Skip to content

Commit

Permalink
remove wrapper
Browse files Browse the repository at this point in the history 
Signed-off-by: nganphan123 <jill01009@gmail.com>
  • Loading branch information
@nganphan123
nganphan123 committed Jan 21, 2025
1 parent bb41f43 commit 4e9faf2
Showing 1 changed file with 85 additions and 107 deletions.
192 changes: 85 additions & 107 deletions src/sections/Projects/Sistent/components/select/code.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,122 +18,101 @@ import {
} from "@mui/material";

const codes = {
"variant-outlined": `<SistentThemeProvider>
<Select>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</SistentThemeProvider>`,
"variant-outlined": `<Select>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>`,

"variant-filled": `<SistentThemeProvider>
<Select variant="filled">
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</SistentThemeProvider>`,
"variant-filled": `<Select variant="filled">
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>`,

"variant-standard": `<SistentThemeProvider>
<Select variant="standard">
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</SistentThemeProvider>`,
"variant-standard": `<Select variant="standard">
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>`,

"size-auto": `<SistentThemeProvider>
<Select autoWidth>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</SistentThemeProvider>`,
"size-auto": `<Select autoWidth>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>`,

"size-small": `<SistentThemeProvider>
<Select size="small">
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</SistentThemeProvider>`,
"size-small": `<Select size="small">
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>`,

"size-fullwidth": `<SistentThemeProvider>
<Select fullWidth>
"size-fullwidth": `<Select fullWidth>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>`,

"behavior-error-disabled": `<Select disabled>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
<Select error>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>`,

"behavior-required": `<FormControl required>
<InputLabel id="demo-select-label-outlined">Age</InputLabel>
<Select
labelId="demo-select-label-outlined"
label="Age"
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</SistentThemeProvider>`,
</FormControl>`,

"behavior-error-disabled": `<SistentThemeProvider>
<Select disabled>
"customize-label": `<FormControl sx={{ width: "200px" }}>
<InputLabel id="demo-select-label">Age</InputLabel>
<Select
labelId="demo-select-label"
label="Age"
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
<Select error>
</FormControl>`,

"customize-helper-text": `<FormControl sx={{ width: "200px" }}>
<Select>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</SistentThemeProvider>`,

"behavior-required": `<SistentThemeProvider>
<FormControl required>
<InputLabel id="demo-select-label-outlined">Age</InputLabel>
<Select
labelId="demo-select-label-outlined"
label="Age"
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</SistentThemeProvider>`,

"customize-label": `<SistentThemeProvider>
<FormControl sx={{ width: "200px" }}>
<InputLabel id="demo-select-label">Age</InputLabel>
<Select
labelId="demo-select-label"
label="Age"
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</SistentThemeProvider>`,
"customize-helper-text": `<SistentThemeProvider>
<FormControl sx={{ width: "200px" }}>
<Select>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
<FormHelperText>This is a helper text</FormHelperText>
</FormControl>
</SistentThemeProvider>`,
<FormHelperText>This is a helper text</FormHelperText>
</FormControl>`,

"customize-placeholder": `const [selectedAge, setSelectedAge] = React.useState("");
<SistentThemeProvider>
<Select
onChange={(e) => setSelectedAge(e.target.value)}
renderValue={() => {
if (selectedAge == "") return <em>Select an age</em>;
return selectedAge;
}}
value={selectedAge}
displayEmpty
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</SistentThemeProvider>`,
<Select
onChange={(e) => setSelectedAge(e.target.value)}
renderValue={() => {
if (selectedAge == "") return <em>Select an age</em>;
return selectedAge;
}}
value={selectedAge}
displayEmpty
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>`,

"customize-grouping": `<Select>
<ListSubheader muiSkipListHighlight>Group 1</ListSubheader>
Expand All @@ -152,18 +131,17 @@ const handleMultiplSelect = (event) => {
let agesList = event.target.value;
setMultipleAges(agesList);
};
<SistentThemeProvider>
<Select
multiple
input={<OutlinedInput label="Name" />}
value={multipleAges}
onChange={handleMultiplSelect}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</SistentThemeProvider>`,
<Select
multiple
input={<OutlinedInput label="Name" />}
value={multipleAges}
onChange={handleMultiplSelect}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>`,
};

const SelectCode = () => {
Expand Down

0 comments on commit 4e9faf2

Please sign in to comment.