"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

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

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

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

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

var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));

var _DropdownToggle = _interopRequireDefault(require("./DropdownToggle"));

var _DropdownMenu = _interopRequireDefault(require("./DropdownMenu"));

var _DropdownMenuItem = _interopRequireDefault(require("./DropdownMenuItem"));

var _utils = require("../utils");

var _Sidenav = require("../Sidenav/Sidenav");

var defaultProps = {
  as: 'div',
  classPrefix: 'dropdown',
  placement: 'bottomStart',
  trigger: 'click',
  tabIndex: 0
};

var Dropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
  var _withClassPrefix;

  var Component = props.as,
      title = props.title,
      children = props.children,
      className = props.className,
      menuStyle = props.menuStyle,
      disabled = props.disabled,
      renderTitle = props.renderTitle,
      classPrefix = props.classPrefix,
      placement = props.placement,
      activeKey = props.activeKey,
      tabIndex = props.tabIndex,
      toggleClassName = props.toggleClassName,
      trigger = props.trigger,
      icon = props.icon,
      eventKey = props.eventKey,
      toggleAs = props.toggleAs,
      noCaret = props.noCaret,
      style = props.style,
      openProp = props.open,
      showHeader = props.showHeader,
      onClick = props.onClick,
      onMouseEnter = props.onMouseEnter,
      onMouseLeave = props.onMouseLeave,
      onContextMenu = props.onContextMenu,
      onSelect = props.onSelect,
      onOpen = props.onOpen,
      onClose = props.onClose,
      onToggle = props.onToggle,
      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "title", "children", "className", "menuStyle", "disabled", "renderTitle", "classPrefix", "placement", "activeKey", "tabIndex", "toggleClassName", "trigger", "icon", "eventKey", "toggleAs", "noCaret", "style", "open", "showHeader", "onClick", "onMouseEnter", "onMouseLeave", "onContextMenu", "onSelect", "onOpen", "onClose", "onToggle"]);

  var _ref = (0, _react.useContext)(_Sidenav.SidenavContext) || {},
      onOpenChange = _ref.onOpenChange,
      _ref$openKeys = _ref.openKeys,
      openKeys = _ref$openKeys === void 0 ? [] : _ref$openKeys,
      sidenav = _ref.sidenav,
      expanded = _ref.expanded;

  var overlayTarget = (0, _react.useRef)();
  var triggerTarget = (0, _react.useRef)();

  var _useControlled = (0, _utils.useControlled)(openProp, false),
      open = _useControlled[0],
      setOpen = _useControlled[1];

  var menuExpanded = openKeys.some(function (key) {
    return (0, _utils.shallowEqual)(key, eventKey);
  });

  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
      merge = _useClassNames.merge,
      withClassPrefix = _useClassNames.withClassPrefix,
      prefix = _useClassNames.prefix;

  var collapsible = sidenav && expanded;
  var handleToggle = (0, _react.useCallback)(function (isOpen) {
    var nextOpen = typeof isOpen === 'undefined' ? !open : isOpen;
    var fn = nextOpen ? onOpen : onClose;
    fn === null || fn === void 0 ? void 0 : fn();
    setOpen(nextOpen);
    onToggle === null || onToggle === void 0 ? void 0 : onToggle(nextOpen);
  }, [onClose, onOpen, onToggle, open, setOpen]);
  var handleOpenChange = (0, _react.useCallback)(function (event) {
    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(eventKey, event);
  }, [eventKey, onOpenChange]);
  var handleToggleChange = (0, _react.useCallback)(function (eventKey, event) {
    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(eventKey, event);
  }, [onOpenChange]);
  var handleClick = (0, _react.useCallback)(function (event) {
    event.preventDefault();

    if (disabled) {
      return;
    }

    handleToggle();
  }, [disabled, handleToggle]);
  var handleMouseEnter = (0, _react.useCallback)(function () {
    if (!disabled) {
      handleToggle(true);
    }
  }, [disabled, handleToggle]);
  var handleMouseLeave = (0, _react.useCallback)(function () {
    if (!disabled) {
      handleToggle(false);
    }
  }, [disabled, handleToggle]);

  var handleSelect = function handleSelect(eventKey, event) {
    onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventKey, event);
    handleToggle(false);
  };

  (0, _utils.useRootClose)(function () {
    return handleToggle();
  }, {
    triggerTarget: triggerTarget,
    overlayTarget: overlayTarget,
    disabled: !open
  });
  var toggleProps = {
    onClick: (0, _utils.createChainedFunction)(handleOpenChange, onClick),
    onContextMenu: onContextMenu
  };
  var dropdownProps = {
    onMouseEnter: onMouseEnter,
    onMouseLeave: onMouseLeave
  };
  /**
   * Bind event of trigger,
   * not used in  in the expanded state of '<Sidenav>'
   */

  if (!collapsible) {
    if ((0, _utils.isOneOf)('click', trigger)) {
      toggleProps.onClick = (0, _utils.createChainedFunction)(handleClick, toggleProps.onClick);
    }

    if ((0, _utils.isOneOf)('contextMenu', trigger)) {
      toggleProps.onContextMenu = (0, _utils.createChainedFunction)(handleClick, onContextMenu);
    }

    if ((0, _utils.isOneOf)('hover', trigger)) {
      dropdownProps.onMouseEnter = (0, _utils.createChainedFunction)(handleMouseEnter, onMouseEnter);
      dropdownProps.onMouseLeave = (0, _utils.createChainedFunction)(handleMouseLeave, onMouseLeave);
    }
  }

  var menuElement = /*#__PURE__*/_react.default.createElement(_DropdownMenu.default, {
    expanded: menuExpanded,
    style: menuStyle,
    onSelect: handleSelect,
    onToggle: handleToggleChange,
    collapsible: collapsible,
    activeKey: activeKey,
    openKeys: openKeys,
    ref: overlayTarget
  }, showHeader && /*#__PURE__*/_react.default.createElement("li", {
    className: prefix('header')
  }, title), children);

  var toggleElement = /*#__PURE__*/_react.default.createElement(_DropdownToggle.default, (0, _extends2.default)({
    role: "button",
    "aria-haspopup": true,
    "aria-expanded": open
  }, rest, toggleProps, {
    ref: triggerTarget,
    as: renderTitle ? 'span' : toggleAs,
    noCaret: noCaret,
    tabIndex: tabIndex,
    className: toggleClassName,
    renderTitle: renderTitle,
    icon: icon,
    placement: placement,
    inSidenav: sidenav
  }), title);

  var classes = merge(className, withClassPrefix((_withClassPrefix = {}, _withClassPrefix["placement-" + (0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))] = placement, _withClassPrefix[menuExpanded ? 'expand' : 'collapse'] = sidenav, _withClassPrefix.disabled = disabled, _withClassPrefix.open = open, _withClassPrefix['no-caret'] = noCaret, _withClassPrefix)));
  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, dropdownProps, {
    ref: ref,
    style: style,
    className: classes
  }), toggleElement, menuElement);
});

Dropdown.Item = _DropdownMenuItem.default;
Dropdown.Menu = _DropdownMenu.default;
Dropdown.displayName = 'Dropdown';
Dropdown.defaultProps = defaultProps;
Dropdown.propTypes = {
  activeKey: _propTypes.default.any,
  classPrefix: _propTypes.default.string,
  trigger: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.oneOf(['click', 'hover', 'contextMenu'])]),
  placement: _propTypes.default.oneOf(_utils.PLACEMENT_8),
  title: _propTypes.default.node,
  disabled: _propTypes.default.bool,
  icon: _propTypes.default.node,
  menuStyle: _propTypes.default.object,
  className: _propTypes.default.string,
  toggleClassName: _propTypes.default.string,
  children: _propTypes.default.node,
  tabIndex: _propTypes.default.number,
  open: _propTypes.default.bool,
  eventKey: _propTypes.default.any,
  as: _propTypes.default.elementType,
  toggleAs: _propTypes.default.elementType,
  noCaret: _propTypes.default.bool,
  showHeader: _propTypes.default.bool,
  style: _propTypes.default.object,
  onClose: _propTypes.default.func,
  onOpen: _propTypes.default.func,
  onToggle: _propTypes.default.func,
  onSelect: _propTypes.default.func,
  onMouseEnter: _propTypes.default.func,
  onMouseLeave: _propTypes.default.func,
  onContextMenu: _propTypes.default.func,
  onClick: _propTypes.default.func,
  renderTitle: _propTypes.default.func
};
var _default = Dropdown;
exports.default = _default;