UNPKG

irisrad-ui

Version:

UI elements developered for IRIS R&D Group Inc

109 lines (100 loc) 3.22 kB
import React from "react"; import { IrisMenu, IrisMenuItem } from "../irisMenu/IrisMenu"; import "../../style/styles.css"; const DROP_DOWN_MENU_WRAPPER = "iris-dropdown-menu-wrapper"; const DROP_DOWN_BTN_CLASS = "iris-dropdown-toggle"; const DROP_DOWN_CONTENT = "iris-dropdown-menu-content"; import PropTypes from "prop-types"; import { IrisMUIcon } from "../irisMUIcon"; const DROP_DOWN_MENU_ALIGNMENTS = ["left", "right"]; const DROP_DOWN_MENU_SHIFT = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]; const toggleHiddenMenu = (event, showNew) => { const allDropdownContent = document.querySelectorAll("." + DROP_DOWN_CONTENT); // close all opened drop-down content if there is any for (let i = 0; i < allDropdownContent.length; i++) { if (allDropdownContent[i].classList.contains("show")) { allDropdownContent[i].classList.remove("show"); } } // open the drop-down content for the current btn if (showNew) { const elements = document.querySelectorAll("." + DROP_DOWN_BTN_CLASS); for (let i = 0; i < elements.length; i++) { const btnElement = elements[i]; if (elements[i] === event.target) { const parent = btnElement.parentElement; if (parent) { parent .querySelector("." + DROP_DOWN_CONTENT) .classList.toggle("show"); } } } } }; function IrisDropDownMenu({ buttonTitle, menuProps, menuItems, className, ...props }) { // config anchor posistion and shift for the hidden menu content let menuStyle = DROP_DOWN_CONTENT; if (menuProps) { const { alignment, shift } = menuProps; if (DROP_DOWN_MENU_ALIGNMENTS.indexOf(alignment) >= 0) { menuStyle += " anchor-" + alignment; if (DROP_DOWN_MENU_SHIFT.indexOf(shift) >= 0) { menuStyle += "-" + shift; } else { menuStyle += "-0"; } } } return ( <div className={[ DROP_DOWN_MENU_WRAPPER, typeof className === "string" ? className : "", ].join(" ")} {...props} > <button onClick={(event) => { // only for Safari which did not focus the // button by default event.target.focus(); toggleHiddenMenu(event, true); }} onBlur={(event) => { setTimeout(() => { toggleHiddenMenu(event, false); }, 100); }} className={DROP_DOWN_BTN_CLASS} > {buttonTitle ? ( buttonTitle ) : ( <IrisMUIcon iconTitle="menu" size="xlarge" variant="outlined" /> )} </button> <IrisMenu className={menuStyle}> {menuItems.map((item, index) => ( <IrisMenuItem key={index}>{item}</IrisMenuItem> ))} </IrisMenu> </div> ); } IrisDropDownMenu.propTypes = { className: PropTypes.string, buttonTitle: PropTypes.string, menuProps: PropTypes.shape({ alignment: PropTypes.oneOf(DROP_DOWN_MENU_ALIGNMENTS), shift: PropTypes.oneOf(DROP_DOWN_MENU_SHIFT), }), menuItems: PropTypes.arrayOf(PropTypes.node).isRequired, }; export { IrisDropDownMenu };