@helpscout/hsds-react/components/Dropdown/Dropdown.Menu.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = exports.DropdownMenu = void 0;

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = require("prop-types");

var _getValidProps = _interopRequireDefault(require("@helpscout/react-utils/dist/getValidProps"));

var _wedux = require("@helpscout/wedux");

var _DropdownCss = require("./Dropdown.css.js");

var _ScrollLock = _interopRequireDefault(require("../ScrollLock"));

var _classnames = _interopRequireDefault(require("classnames"));

var _jsxRuntime = require("react/jsx-runtime");

// Deprecated

/* istanbul ignore file */
function noop() {}

var DropdownMenu = /*#__PURE__*/function (_React$PureComponent) {
  (0, _inheritsLoose2.default)(DropdownMenu, _React$PureComponent);

  function DropdownMenu() {
    return _React$PureComponent.apply(this, arguments) || this;
  }

  var _proto = DropdownMenu.prototype;

  _proto.getStyles = function getStyles() {
    var _this$props = this.props,
        style = _this$props.style,
        zIndex = _this$props.zIndex;
    return (0, _extends2.default)({}, style, {
      zIndex: zIndex
    });
  };

  _proto.getWrapperStyles = function getWrapperStyles() {
    var wrapperStyles = this.props.wrapperStyles;
    return (0, _extends2.default)({}, wrapperStyles);
  };

  _proto.renderMenu = function renderMenu() {
    var _this$props2 = this.props,
        children = _this$props2.children,
        className = _this$props2.className,
        menuRef = _this$props2.menuRef,
        innerRef = _this$props2.innerRef,
        isSubMenu = _this$props2.isSubMenu,
        renderMenu = _this$props2.renderMenu,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props2, ["children", "className", "menuRef", "innerRef", "isSubMenu", "renderMenu"]);
    var componentClassName = (0, _classnames.default)('c-DropdownMenu', isSubMenu && 'is-subMenu', className);
    var menuProps = (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
      children: children,
      className: componentClassName,
      ref: renderMenu ? undefined : menuRef,
      style: this.getStyles()
    });
    var menuMarkup = renderMenu ? renderMenu(menuProps) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownCss.MenuUI, (0, _extends2.default)({}, menuProps));
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownCss.MenuWrapperUI, {
      className: "c-DropdownMenuWrapper",
      ref: innerRef,
      style: this.getWrapperStyles(),
      children: menuMarkup
    });
  };

  _proto.render = function render() {
    var withScrollLock = this.props.withScrollLock;
    return withScrollLock ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollLock.default, {
      stopPropagation: true,
      children: this.renderMenu()
    }) : this.renderMenu();
  };

  return DropdownMenu;
}(_react.default.PureComponent);

exports.DropdownMenu = DropdownMenu;
DropdownMenu.defaultProps = {
  'data-cy': 'DropdownMenu',
  menuRef: noop,
  innerRef: noop,
  isSubMenu: false,
  role: 'listbox',
  style: {},
  withScrollLock: true,
  wrapperStyles: {},
  zIndex: 1015
};
DropdownMenu.propTypes = {
  className: _propTypes.PropTypes.string,
  children: _propTypes.PropTypes.any,

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.PropTypes.string,
  id: _propTypes.PropTypes.string,
  menuRef: _propTypes.PropTypes.func,
  innerRef: _propTypes.PropTypes.func,
  isSubMenu: _propTypes.PropTypes.bool,
  renderMenu: _propTypes.PropTypes.func,
  style: _propTypes.PropTypes.object,
  withScrollLock: _propTypes.PropTypes.bool,
  wrapperStyles: _propTypes.PropTypes.object,
  zIndex: _propTypes.PropTypes.number
};
var ConnectedMenu = (0, _wedux.connect)( // mapStateToProps
function (state) {
  var renderMenu = state.renderMenu,
      withScrollLock = state.withScrollLock;
  return {
    renderMenu: renderMenu,
    withScrollLock: withScrollLock
  };
})(DropdownMenu);
var _default = ConnectedMenu;
exports.default = _default;