From 1ab32ce402c9156c066a0df3460e68095d01fbd9 Mon Sep 17 00:00:00 2001 From: nganphan123 <jill01009@gmail.com> Date: Mon, 20 Jan 2025 17:47:01 -0800 Subject: [PATCH] remove wrapper Signed-off-by: nganphan123 <jill01009@gmail.com> --- .../Sistent/components/select/code.js | 192 ++++++++---------- 1 file changed, 85 insertions(+), 107 deletions(-) diff --git a/src/sections/Projects/Sistent/components/select/code.js b/src/sections/Projects/Sistent/components/select/code.js index d3f56216d7e4..3e34f4d92ff9 100644 --- a/src/sections/Projects/Sistent/components/select/code.js +++ b/src/sections/Projects/Sistent/components/select/code.js @@ -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> @@ -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 = () => {