Skip to content

Commit

Permalink
finish select code
Browse files Browse the repository at this point in the history 
Signed-off-by: nganphan123 <[email protected]>
  • Loading branch information
@nganphan123
nganphan123 committed Jan 11, 2025
1 parent 57735a0 commit 2c4b916
Show file tree
Hide file tree
Showing 3 changed files with 235 additions and 11 deletions.
20 changes: 20 additions & 0 deletions src/sections/Projects/Sistent/components/select/code-block.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import React, { useState } from "react";
import Code from "../../../../../components/CodeBlock";

export const CodeBlock = ({ name, code }) => {
const [showCode, setShowCode] = useState(false);
const onChange = () => {
setShowCode((prev) => !prev);
};
return (
<div className="show-code">
<input type="checkbox" name={name} id={name} onChange={onChange} />
<label htmlFor={name} className="label">
Show Code
</label>
{showCode && (
<Code codeString={code} language="javascript" />
)}
</div>
);
};
220 changes: 210 additions & 10 deletions src/sections/Projects/Sistent/components/select/code.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,21 @@
import React from "react";

import { Button, SistentThemeProvider } from "@layer5/sistent";
import { SistentThemeProvider } from "@layer5/sistent";
import { CodeBlock } from "./code-block";
import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight";
import { SistentLayout } from "../../sistent-layout";

import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
import SectionNav from "./section-nav";
import Header from "./header";
import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
import {
FormControl,
FormHelperText,
InputLabel,
ListSubheader,
MenuItem,
OutlinedInput,
Select,
} from "@mui/material";

const codes = {
"variant-outlined": `<SistentThemeProvider>
Expand Down Expand Up @@ -85,11 +92,88 @@ const codes = {
</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>`,

"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>`,

"customize-grouping": `<Select>
<ListSubheader muiSkipListHighlight>Group 1</ListSubheader>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<ListSubheader muiSkipListHighlight>Group 2</ListSubheader>
<MenuItem value={30}>Thirty</MenuItem>
<MenuItem value={40}>Fourty</MenuItem>
<ListSubheader muiSkipListHighlight>Group 3</ListSubheader>
<MenuItem value={50}>Fifty</MenuItem>
<MenuItem value={60}>Sixty</MenuItem>
</Select>`,

multiselect: `const [multipleAges, setMultipleAges] = React.useState([]);
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>`,
};

const ButtonCode = () => {
const SelectCode = () => {
const { isDark } = useStyledDarkMode();

const [selectedAge, setSelectedAge] = React.useState("");
const [multipleAges, setMultipleAges] = React.useState([10]);
const handleMultiplSelect = (event) => {
let agesList = event.target.value;
setMultipleAges(agesList);
};
return (
<SistentLayout title="Button">
<div className="content">
Expand Down Expand Up @@ -210,9 +294,108 @@ const ButtonCode = () => {
</div>
<CodeBlock name="size-fullwidth" code={codes["size-fullwidth"]} />
</div>
<a id="Customize behaviors">
<h2>Customize behaviors</h2>
<a id="Customization">
<h2>Customization</h2>
</a>
<h3>Label</h3>
<p>
To add a label to the select component, wrap it inside a FormControl
component. Add an InputLabel component and link it to the select
component using the labelId prop. Ensure the label prop in the
Select component matches the InputLabel text.
</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<FormControl sx={{ width: "200px" }}>
<InputLabel id="demo-select-label">Age</InputLabel>
<Select
labelId="demo-select-label"
id="demo-select"
label="Age"
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</SistentThemeProvider>
</div>
<CodeBlock name="customize-label" code={codes["customize-label"]} />
</div>
<h3>Helper text</h3>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<FormControl sx={{ width: "200px" }}>
<Select defaultValue={10}>
<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>
</div>
<CodeBlock
name="customize-helper-text"
code={codes["customize-helper-text"]}
/>
</div>
<h3>Placeholder</h3>
<p>
To add a placeholder, use the renderValue prop to display a
placeholder text when no value is selected.
</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Select
id="demo-select-outlined"
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>
</div>
<CodeBlock
name="customize-placeholder"
code={codes["customize-placeholder"]}
/>
</div>
<h3>Grouping</h3>
To group selection options, use the ListSubheader component to create
headers for each group within the dropdown menu. This helps users to
easily navigate and find the options they need.
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Select defaultValue={10}>
<ListSubheader muiSkipListHighlight>Group 1</ListSubheader>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<ListSubheader muiSkipListHighlight>Group 2</ListSubheader>
<MenuItem value={30}>Thirty</MenuItem>
<MenuItem value={40}>Fourty</MenuItem>
<ListSubheader muiSkipListHighlight>Group 3</ListSubheader>
<MenuItem value={50}>Fifty</MenuItem>
<MenuItem value={60}>Sixty</MenuItem>
</Select>
</SistentThemeProvider>
</div>
<CodeBlock
name="customize-grouping"
code={codes["customize-grouping"]}
/>
</div>
<p>
Additional props such as error, required, and disabled can be passed
to the select component to customize its behavior.
Expand Down Expand Up @@ -265,13 +448,30 @@ const ButtonCode = () => {
clarity.
</p>
</div>
<a id="Customize select area">
<h2>Customize select area</h2>
<a id="Multi-select">
<h2>Multi-select</h2>
</a>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<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>
</div>
<CodeBlock name="multiselect" code={codes["multiselect"]} />
</div>
</div>
</div>
</SistentLayout>
);
};

export default ButtonCode;
export default SelectCode;
6 changes: 5 additions & 1 deletion src/sections/Projects/Sistent/components/select/guidance.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,11 @@ const SelectGuidance = () => {
</SistentThemeProvider>
<h3>Placeholder</h3>
<p>
Placeholder can be used to give more context about the selection.
A placeholder is a short hint or description that is displayed
inside an input field or select component before the user enters a
value. It provides a clue to the user about what kind of information
is expected in the field. The placeholder text disappears when the
user starts typing or selects an option.
</p>
<Row $Hcenter className="image-container">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
Expand Down

0 comments on commit 2c4b916

Please sign in to comment.