@shopgate/engage/components/Menu/index.js

Shopgate's ENGAGE library.

import _createClass from "@babel/runtime/helpers/createClass";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import React, { Component, Children } from 'react';
import PropTypes from 'prop-types';
import { ConnectedReactPortal } from '@shopgate/engage/components';
import Backdrop from '@shopgate/pwa-common/components/Backdrop';
import Position from "./components/Position";
import Item from "./components/Item";
import styles from "./style";

/**
 * The Menu component.
 */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
let Menu = /*#__PURE__*/function (_Component) {
  function Menu() {
    return _Component.apply(this, arguments) || this;
  }
  _inheritsLoose(Menu, _Component);
  var _proto = Menu.prototype;
  /**
   * Renders the component.
   * @returns {JSX}
   */
  _proto.render = function render() {
    const {
      children,
      isOpen,
      onClose
    } = this.props;
    return /*#__PURE__*/_jsx(ConnectedReactPortal, {
      isOpened: isOpen,
      children: /*#__PURE__*/_jsxs("div", {
        className: styles.overlay,
        children: [/*#__PURE__*/_jsx(Backdrop, {
          isVisible: true,
          level: 0,
          opacity: 0,
          onClick: onClose
        }), /*#__PURE__*/_jsx(Position, {
          offset: this.offset,
          children: /*#__PURE__*/_jsx("div", {
            className: styles.menu,
            children: Children.map(children, child => {
              if (!child) {
                return null;
              }
              return /*#__PURE__*/React.cloneElement(child, {
                closeMenu: onClose
              });
            })
          })
        })]
      })
    });
  };
  return _createClass(Menu, [{
    key: "offset",
    get:
    /**
     * Gets the offset of the DOM element.
     * @returns {Object}
     */
    function () {
      if (this.props.contextRef?.current) {
        const bounds = this.props.contextRef.current.getBoundingClientRect();
        return {
          height: bounds.height,
          width: bounds.width,
          left: bounds.left,
          right: bounds.right,
          bottom: bounds.bottom,
          top: bounds.top + bounds.height
        };
      }
      return {
        top: 0,
        left: 0
      };
    }
  }]);
}(Component);
Menu.Item = Item;
Menu.defaultProps = {
  children: null,
  contextRef: null,
  isOpen: false,
  onClose: () => {}
};
export default Menu;