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