irisrad-ui/src/components/irisDropDownMenu/IrisDropDownMenu.js

UI elements developered for IRIS R&D Group Inc

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