You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
3.0 KiB
102 lines
3.0 KiB
import React from "react"; |
|
import Select from "@material-ui/core/Select"; |
|
import { makeStyles } from "@material-ui/core/styles"; |
|
import Input from "@material-ui/core/Input"; |
|
import InputLabel from "@material-ui/core/InputLabel"; |
|
import MenuItem from "@material-ui/core/MenuItem"; |
|
import FormControl from "@material-ui/core/FormControl"; |
|
import KeyboardArrowDownIcon from "@material-ui/icons/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, 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 |
|
? Array.isArray(selectedOptions) |
|
? selectedOptions |
|
: 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} |
|
</> |
|
); |
|
}
|
|
|