@gechiui/components/build/dropdown-menu/index.js

UI components for GeChiUI.

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@gechiui/element");

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

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

var _lodash = require("lodash");

var _keycodes = require("@gechiui/keycodes");

var _icons = require("@gechiui/icons");

var _button = _interopRequireDefault(require("../button"));

var _dropdown = _interopRequireDefault(require("../dropdown"));

var _navigableContainer = require("../navigable-container");

// @ts-nocheck

/**
 * External dependencies
 */

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
function mergeProps() {
  let defaultProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  const mergedProps = { ...defaultProps,
    ...props
  };

  if (props.className && defaultProps.className) {
    mergedProps.className = (0, _classnames.default)(props.className, defaultProps.className);
  }

  return mergedProps;
}

function DropdownMenu(dropdownMenuProps) {
  const {
    children,
    className,
    controls,
    icon = _icons.menu,
    label,
    popoverProps,
    toggleProps,
    menuProps,
    disableOpenOnArrowDown = false,
    text,
    noIcons
  } = dropdownMenuProps;

  if ((0, _lodash.isEmpty)(controls) && !(0, _lodash.isFunction)(children)) {
    return null;
  } // Normalize controls to nested array of objects (sets of controls)


  let controlSets;

  if (!(0, _lodash.isEmpty)(controls)) {
    controlSets = controls;

    if (!Array.isArray(controlSets[0])) {
      controlSets = [controlSets];
    }
  }

  const mergedPopoverProps = mergeProps({
    className: 'components-dropdown-menu__popover'
  }, popoverProps);
  return (0, _element.createElement)(_dropdown.default, {
    className: (0, _classnames.default)('components-dropdown-menu', className),
    popoverProps: mergedPopoverProps,
    renderToggle: _ref => {
      var _toggleProps$showTool;

      let {
        isOpen,
        onToggle
      } = _ref;

      const openOnArrowDown = event => {
        if (disableOpenOnArrowDown) {
          return;
        }

        if (!isOpen && event.keyCode === _keycodes.DOWN) {
          event.preventDefault();
          onToggle();
        }
      };

      const mergedToggleProps = mergeProps({
        className: (0, _classnames.default)('components-dropdown-menu__toggle', {
          'is-opened': isOpen
        })
      }, toggleProps);
      return (0, _element.createElement)(_button.default, (0, _extends2.default)({}, mergedToggleProps, {
        icon: icon,
        onClick: event => {
          onToggle(event);

          if (mergedToggleProps.onClick) {
            mergedToggleProps.onClick(event);
          }
        },
        onKeyDown: event => {
          openOnArrowDown(event);

          if (mergedToggleProps.onKeyDown) {
            mergedToggleProps.onKeyDown(event);
          }
        },
        "aria-haspopup": "true",
        "aria-expanded": isOpen,
        label: label,
        text: text,
        showTooltip: (_toggleProps$showTool = toggleProps === null || toggleProps === void 0 ? void 0 : toggleProps.showTooltip) !== null && _toggleProps$showTool !== void 0 ? _toggleProps$showTool : true
      }), mergedToggleProps.children);
    },
    renderContent: props => {
      const mergedMenuProps = mergeProps({
        'aria-label': label,
        className: (0, _classnames.default)('components-dropdown-menu__menu', {
          'no-icons': noIcons
        })
      }, menuProps);
      return (0, _element.createElement)(_navigableContainer.NavigableMenu, (0, _extends2.default)({}, mergedMenuProps, {
        role: "menu"
      }), (0, _lodash.isFunction)(children) ? children(props) : null, (0, _lodash.flatMap)(controlSets, (controlSet, indexOfSet) => controlSet.map((control, indexOfControl) => (0, _element.createElement)(_button.default, {
        key: [indexOfSet, indexOfControl].join(),
        onClick: event => {
          event.stopPropagation();
          props.onClose();

          if (control.onClick) {
            control.onClick();
          }
        },
        className: (0, _classnames.default)('components-dropdown-menu__menu-item', {
          'has-separator': indexOfSet > 0 && indexOfControl === 0,
          'is-active': control.isActive,
          'is-icon-only': !control.title
        }),
        icon: control.icon,
        label: control.label,
        "aria-checked": control.role === 'menuitemcheckbox' || control.role === 'menuitemradio' ? control.isActive : undefined,
        role: control.role === 'menuitemcheckbox' || control.role === 'menuitemradio' ? control.role : 'menuitem',
        disabled: control.isDisabled
      }, control.title))));
    }
  });
}

var _default = DropdownMenu;
exports.default = _default;
//# sourceMappingURL=index.js.map