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.
90 lines
2.6 KiB
90 lines
2.6 KiB
import React from "react"; |
|
import { makeStyles, withStyles } from "@material-ui/core/styles"; |
|
import FormControl from "@material-ui/core/FormControl"; |
|
import NativeSelect from "@material-ui/core/NativeSelect"; |
|
import InputBase from "@material-ui/core/InputBase"; |
|
import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown"; |
|
|
|
const BootstrapInput = withStyles((theme) => ({ |
|
root: { |
|
"label + &": { |
|
marginTop: theme.spacing(3), |
|
}, |
|
}, |
|
input: { |
|
borderRadius: 4, |
|
position: "relative", |
|
backgroundColor: theme.palette.background.paper, |
|
border: "1px solid #a5a5a5", |
|
fontSize: window.innerWidth > 1000 ? 16 : "calc(100vw / 30)", |
|
color: "#a5a5a5", |
|
// maxWidth : 70, |
|
minWidth: window.innerWidth > 420 ? 100 : 80, |
|
height: "35px", |
|
padding: "5px", |
|
transition: theme.transitions.create(["border-color", "box-shadow"]), |
|
// Use the system font instead of the default Roboto font. |
|
fontFamily: "numeralLight", |
|
"&:focus": { |
|
borderRadius: 4, |
|
}, |
|
}, |
|
}))(InputBase); |
|
|
|
const useStyles = makeStyles((theme) => ({ |
|
marginLeft: { |
|
// margin: theme.spacing(1), |
|
marginLeft: 8, |
|
}, |
|
})); |
|
|
|
export default function CustomizedSelects(props) { |
|
const classes = useStyles(); |
|
|
|
return ( |
|
<div style={{ position: "relative" }}> |
|
<FormControl className={classes.marginLeft}> |
|
<NativeSelect |
|
id="demo-customized-select-native" |
|
value={props.parent.state[props.name]} |
|
onChange={(e) => |
|
e.target.value !== "نام کتاب" && |
|
e.target.value !== "مرتب سازی" && |
|
e.target.value !== "پایه تحصیلی" |
|
? props.parent.setState({ |
|
selectedFilters: { |
|
...props.parent.state.selectedFilters, |
|
[props.name]: |
|
props.name === "sort" |
|
? e.target.value |
|
: new Array(e.target.value), |
|
}, |
|
}) |
|
: props.parent.setState({ |
|
selectedFilters: { |
|
...props.parent.state.selectedFilters, |
|
[props.name]: props.name === "sort" ? null : new Array(), |
|
}, |
|
}) |
|
} |
|
input={<BootstrapInput />} |
|
> |
|
{props.options.map((item, i) => ( |
|
<option key={i} value={item}> |
|
{item} |
|
</option> |
|
))} |
|
</NativeSelect> |
|
</FormControl> |
|
<KeyboardArrowDownIcon |
|
style={{ |
|
position: "absolute", |
|
left: 5, |
|
top: 6, |
|
fontSize: 25, |
|
color: "#a5a5a5", |
|
}} |
|
/> |
|
</div> |
|
); |
|
}
|
|
|