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

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>
);
}