%PDF- %PDF-
Direktori : /home/emergentqj/actioncivile/pre-auth/.8352c036a19b0051d0217d27d25e3f4a/static/js/components/ |
Current File : /home/emergentqj/actioncivile/pre-auth/.8352c036a19b0051d0217d27d25e3f4a/static/js/components/DropdownMenu.js |
import React, { cloneElement, Children } from "react"; import { makeStyles } from "@material-ui/core/styles"; import { arrayOf, object, string, bool, } from "prop-types"; const useStyles = makeStyles((theme) => ({ dropdown: { backgroundColor: "#FFF", position: "absolute", right: 0, top: 36, borderRadius: "2px", paddingBottom: 9, border: "1px solid rgba(0,0,0,0.2)", boxShadow: "0px 0px 6px rgba(0,0,0,0.06)", zIndex: 2, maxHeight: "350px", overflow: "auto", "@media only screen and (max-width: 356px)": { position: "fixed", top: "48px", }, }, fullWidthDropdown: { width: "100%", }, dropdownHeading: { padding: "0 1rem", margin: "12px 0 6px", textAlign: "left", paddingLeft: "1rem", color: theme.palette.text.secondary, fontWeight: "normal", }, dropdownList: { margin: 0, padding: 0, }, dropdownMultiColumn: { columns: 1, "@media only screen and (min-width: 768px)": { columns: 2, }, }, dropdownItem: { display: "flex", flexDirection: "row", alignItems: "center", listStyle: "none", padding: "0.5rem 1rem", color: "#000", fontSize: "15px", fontWeight: 400, cursor: "pointer", "&:hover": { backgroundColor: "#EAEAEA", }, whiteSpace: "nowrap", }, dropdownItemImage: { width: "15px", height: "15px", borderRadius: "4px", marginRight: "8px", }, selectedItem: { cursor: "not-allowed", color: "#872878", fontWeight: 600, "&:hover": { backgroundColor: "#FFF", }, }, dropdownItemButton: { width: "100%", textAlign: "left", }, })); function DropdownMenu(props) { const classes = useStyles(props); return ( <div className={`${classes.dropdown}${props.fullWidthDropdown ? ` ${classes.fullWidthDropdown}` : ""}`}> <h3 className={classes.dropdownHeading}>{props.title}</h3> <ul className={`${classes.dropdownList} ${ props.children.length > 10 && classes.dropdownMultiColumn }`} > { Children.map(props.children, (child) => cloneElement(child, { classes })) } </ul> </div> ); } DropdownMenu.propTypes = { children: arrayOf(object).isRequired, fullWidthDropdown: bool, title: string, }; DropdownMenu.defaultProps = { title: "", fullWidthDropdown: false, }; export default DropdownMenu;