irisrad-ui
Version:
UI elements developered for IRIS R&D Group Inc
109 lines (100 loc) • 3.22 kB
JavaScript
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 };