@makeen.io/material-ui-kit/distr/atoms/Menu/index.js

Makeen UI components kit. Based on material-ui.

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";import _extends from "@babel/runtime/helpers/extends";import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject4() {var data = _taggedTemplateLiteral(["\n        ", "\n      "]);_templateObject4 = function _templateObject4() {return data;};return data;}function _templateObject3() {var data = _taggedTemplateLiteral(["\n  & .custom-paper-class-name {\n    max-height: ", "px;\n    width: 20ch;\n    ", "\n  }\n"]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = _taggedTemplateLiteral(["\n        ", "\n      "]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = _taggedTemplateLiteral(["\n  // todo: Unused component?\n  & .MuiMenu-paper {\n    max-height: ", "px;\n    width: 20ch;\n    ", "\n  }\n"]);_templateObject = function _templateObject() {return data;};return data;}import React, { useEffect } from "react";
import MaterialMenu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
import styled, { css } from "styled-components";
var ITEM_HEIGHT = 48;
// @Mohib, The fact that .Muimenu-paper class is to be used is mentioned here - https://material-ui.com/api/menu/#css
export var StyledMenu = styled(MaterialMenu)(_templateObject(),


ITEM_HEIGHT * 4.5,

function (props) {return css(_templateObject2(),
  props.menuStyle ? props.menuStyle(props) : "");});



// @Mohib, The rule name that's used here which is "paper" is also mentioned
// here - https://material-ui.com/api/menu/#css
// Same as above, but with own defined class name.
// Also by explicitly specifying the styled-comp specific prop which is "menuStyle"
// here, we are preventing it to be passed to child React comp
var ReStyledMenu = styled(function (_ref) {var menuStyle = _ref.menuStyle,rest = _objectWithoutProperties(_ref, ["menuStyle"]);return /*#__PURE__*/React.createElement(MaterialMenu, _extends({ classes: { paper: "custom-paper-class-name" } }, rest));})(_templateObject3(),

ITEM_HEIGHT * 4.5,

function (props) {return css(_templateObject4(),
  props.menuStyle ? props.menuStyle(props) : "");});



export default (function (_ref2) {var options = _ref2.options,children = _ref2.children,anchorPosition = _ref2.anchorPosition,openOnContext = _ref2.openOnContext,menuStyle = _ref2.menuStyle,onSelect = _ref2.onSelect,onClose = _ref2.onClose,closeOnSelect = _ref2.closeOnSelect,rest = _objectWithoutProperties(_ref2, ["options", "children", "anchorPosition", "openOnContext", "menuStyle", "onSelect", "onClose", "closeOnSelect"]);var _React$useState =
    React.useState(null),_React$useState2 = _slicedToArray(_React$useState, 2),anchorEl = _React$useState2[0],setAnchorEl = _React$useState2[1];
  var anchorPositionProp = {};
  var setAnchorPositioning = function setAnchorPositioning() {
    if (anchorPosition) {
      anchorPositionProp.anchorReference = "anchorPosition";
      anchorPositionProp.anchorPosition = anchorPosition;
    }
  };
  useEffect(setAnchorPositioning, [anchorPosition]);
  var open = !anchorPosition ? Boolean(anchorEl) : Boolean(anchorPosition);
  var handleClick = function handleClick(event) {
    event.preventDefault();
    if (!anchorPosition) {
      setAnchorEl(event.currentTarget);
    }
    if (onSelect) {
      onSelect(event);
    }
  };
  var handleClose = function handleClose() {
    if (!anchorPosition) {
      setAnchorEl(null);
    }
    if (onClose) {
      onClose();
    }
  };
  var actionHandler = !openOnContext ?
  { onClick: handleClick } :
  { onContextMenu: handleClick };
  var handleMenuItemClick = function handleMenuItemClick(option) {return function (e) {
      option.onClick(option.value, e);
      if (closeOnSelect) {
        setAnchorEl(null);
      }
    };};
  var renderMenuItems = function renderMenuItems(option) {return /*#__PURE__*/React.createElement(MenuItem, { key: option.name, disabled: option.disabled, onClick: handleMenuItemClick(option) }, option.comp ? /*#__PURE__*/React.createElement(option.comp, null) : option.name);};
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/
  React.createElement("div", _extends({}, actionHandler), children), /*#__PURE__*/
  React.createElement(ReStyledMenu, _extends({ id: "long-menu", keepMounted: true, anchorEl: anchorEl, open: open, onClose: handleClose, menuStyle: menuStyle }, rest, anchorPositionProp), options.map(renderMenuItems)));
});
//# sourceMappingURL=index.js.map