parent
b92aa90c4f
commit
8a9fc46bbf
19 changed files with 163 additions and 162 deletions
@ -1,96 +0,0 @@ |
|||||||
import React from "react"; |
|
||||||
import Select from "@mui/material/Select"; |
|
||||||
import { makeStyles } from "@mui/styles"; |
|
||||||
import Input from "@mui/material/Input"; |
|
||||||
import InputLabel from "@mui/material/InputLabel"; |
|
||||||
import MenuItem from "@mui/material/MenuItem"; |
|
||||||
import FormControl from "@mui/material/FormControl"; |
|
||||||
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; |
|
||||||
|
|
||||||
import "./index.scss"; |
|
||||||
export default function MultipleSelector(props) { |
|
||||||
const useStyles = makeStyles((theme) => ({ |
|
||||||
root: { |
|
||||||
"& .MuiTextField-root": { |
|
||||||
width: "100%", |
|
||||||
position: "relative", |
|
||||||
marginRight: 10, |
|
||||||
"& input": { |
|
||||||
textAlign: props.align, |
|
||||||
direction: props.align === "right" ? "rtl" : "ltr", |
|
||||||
}, |
|
||||||
}, |
|
||||||
}, |
|
||||||
})); |
|
||||||
|
|
||||||
const classes = useStyles(); |
|
||||||
const { parent, defaultValue, name, label, options, selectedOptions } = props; |
|
||||||
return ( |
|
||||||
<> |
|
||||||
{window.innerWidth < 1000 ? ( |
|
||||||
<FormControl |
|
||||||
variant="outlined" |
|
||||||
className={`${classes.formControl} mobile-multiple-selector`} |
|
||||||
> |
|
||||||
<InputLabel id="demo-mutiple-name-label">{label}</InputLabel> |
|
||||||
<Select |
|
||||||
labelId="demo-mutiple-name-label" |
|
||||||
id="demo-mutiple-name" |
|
||||||
multiple |
|
||||||
value={selectedOptions.split(",")} |
|
||||||
onChange={(e) => parent.onChange(name, e.target.value.join(","))} |
|
||||||
input={<Input />} |
|
||||||
variant="outlined" |
|
||||||
> |
|
||||||
{options.map((name, i) => ( |
|
||||||
<MenuItem key={name} value={i}> |
|
||||||
{name} |
|
||||||
</MenuItem> |
|
||||||
))} |
|
||||||
</Select> |
|
||||||
<KeyboardArrowDownIcon |
|
||||||
style={{ |
|
||||||
position: "absolute", |
|
||||||
left: 5, |
|
||||||
top: 10, |
|
||||||
fontSize: 30, |
|
||||||
color: "#a5a5a5", |
|
||||||
}} |
|
||||||
/> |
|
||||||
</FormControl> |
|
||||||
) : null} |
|
||||||
{window.innerWidth > 1000 ? ( |
|
||||||
<FormControl |
|
||||||
variant="outlined" |
|
||||||
className={`${classes.formControl} mobile-multiple-selector`} |
|
||||||
> |
|
||||||
<InputLabel id="demo-mutiple-name-label">{label}</InputLabel> |
|
||||||
<Select |
|
||||||
labelId="demo-mutiple-name-label" |
|
||||||
id="demo-mutiple-name" |
|
||||||
multiple |
|
||||||
value={selectedOptions.split(",")} |
|
||||||
onChange={(e) => parent.onChange(name, e.target.value.join(","))} |
|
||||||
input={<Input />} |
|
||||||
variant="outlined" |
|
||||||
> |
|
||||||
{options.map((name, i) => ( |
|
||||||
<MenuItem key={name} value={i}> |
|
||||||
{name} |
|
||||||
</MenuItem> |
|
||||||
))} |
|
||||||
</Select> |
|
||||||
<KeyboardArrowDownIcon |
|
||||||
style={{ |
|
||||||
position: "absolute", |
|
||||||
left: 5, |
|
||||||
top: 15, |
|
||||||
fontSize: 30, |
|
||||||
color: "#a5a5a5", |
|
||||||
}} |
|
||||||
/> |
|
||||||
</FormControl> |
|
||||||
) : null} |
|
||||||
</> |
|
||||||
); |
|
||||||
} |
|
@ -0,0 +1,43 @@ |
|||||||
|
import React from "react"; |
||||||
|
import Select from "@mui/material/Select"; |
||||||
|
import Input from "@mui/material/Input"; |
||||||
|
import InputLabel from "@mui/material/InputLabel"; |
||||||
|
import MenuItem from "@mui/material/MenuItem"; |
||||||
|
import FormControl from "@mui/material/FormControl"; |
||||||
|
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; |
||||||
|
|
||||||
|
import "./index.scss"; |
||||||
|
export default function MultipleSelector({align, onChange, selectedOptions, options, defaultValue, label, name,} : any) { |
||||||
|
return ( |
||||||
|
<FormControl |
||||||
|
variant="outlined" |
||||||
|
className={`mobile-multiple-selector`} |
||||||
|
> |
||||||
|
<InputLabel id="demo-mutiple-name-label">{label}</InputLabel> |
||||||
|
<Select |
||||||
|
labelId="demo-mutiple-name-label" |
||||||
|
id="demo-mutiple-name" |
||||||
|
multiple |
||||||
|
value={selectedOptions.map((item : any) => item.name)} |
||||||
|
onChange={(e) => onChange(name, e.target.value.join(","))} |
||||||
|
input={<Input />} |
||||||
|
variant="outlined" |
||||||
|
> |
||||||
|
{options.map((name : any, i : any) => ( |
||||||
|
<MenuItem key={name} value={i}> |
||||||
|
{name} |
||||||
|
</MenuItem> |
||||||
|
))} |
||||||
|
</Select> |
||||||
|
<KeyboardArrowDownIcon |
||||||
|
style={{ |
||||||
|
position: "absolute", |
||||||
|
left: 5, |
||||||
|
top: 10, |
||||||
|
fontSize: 30, |
||||||
|
color: "#a5a5a5", |
||||||
|
}} |
||||||
|
/> |
||||||
|
</FormControl> |
||||||
|
); |
||||||
|
} |
Loading…
Reference in new issue