rsuite/esm/Sidenav/ExpandedSidenavDropdownMenu.js

A suite of react components

import _extends from "@babel/runtime/helpers/esm/extends";
import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";

var _templateObject, _templateObject2;

import React, { useCallback, useContext } from 'react';
import isNil from 'lodash/isNil';
import omit from 'lodash/omit';
import { createChainedFunction, useClassNames } from '../utils';
import { SidenavContext } from './Sidenav';
import useCustom from '../utils/useCustom';
import ArrowLeftLine from '@rsuite/icons/ArrowLeftLine';
import ArrowRightLine from '@rsuite/icons/ArrowRightLine';
import PropTypes from 'prop-types';
import SidenavDropdownCollapse from './SidenavDropdownCollapse';
import Ripple from '../Ripple';
import Disclosure from '../Disclosure/Disclosure';

/**
 * Tree View Node
 * @see https://www.w3.org/TR/wai-aria-practices-1.2/#TreeView
 */
var ExpandedSidenavDropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var sidenavContext = useContext(SidenavContext);

  if (!sidenavContext) {
    throw new Error('<SidenavDropdownMenu> component is not supposed to be used standalone. Use <Nav.Menu> inside <Sidenav> instead.');
  }

  var _props$as = props.as,
      Component = _props$as === void 0 ? 'li' : _props$as,
      children = props.children,
      disabled = props.disabled,
      className = props.className,
      style = props.style,
      _props$classPrefix = props.classPrefix,
      classPrefix = _props$classPrefix === void 0 ? 'dropdown-item' : _props$classPrefix,
      tabIndex = props.tabIndex,
      icon = props.icon,
      title = props.title,
      eventKey = props.eventKey,
      onClick = props.onClick,
      onSelect = props.onSelect,
      rest = _objectWithoutPropertiesLoose(props, ["as", "children", "disabled", "className", "style", "classPrefix", "tabIndex", "icon", "title", "eventKey", "onClick", "onSelect"]);

  var _useCustom = useCustom('DropdownMenu'),
      rtl = _useCustom.rtl;

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

  var _sidenavContext$openK = sidenavContext.openKeys,
      openKeys = _sidenavContext$openK === void 0 ? [] : _sidenavContext$openK,
      onOpenChange = sidenavContext.onOpenChange,
      onSidenavSelect = sidenavContext.onSelect;
  var handleClick = useCallback(function (event) {
    if (disabled) return;
    onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventKey, event);
    onSidenavSelect === null || onSidenavSelect === void 0 ? void 0 : onSidenavSelect(eventKey, event);
  }, [disabled, onSelect, onSidenavSelect, eventKey]);
  var menuitemEventHandlers = {
    onClick: createChainedFunction(handleClick, onClick)
  };
  var Icon = rtl ? ArrowLeftLine : ArrowRightLine;
  return /*#__PURE__*/React.createElement(Disclosure, {
    open: !isNil(eventKey) && openKeys.includes(eventKey),
    onToggle: function onToggle(_, event) {
      return onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(eventKey, event);
    }
  }, function (_ref) {
    var open = _ref.open;
    var classes = merge(className, prefix('submenu'), prefix("pull-" + (rtl ? 'left' : 'right')), prefix(open ? 'expand' : 'collapse'), withClassPrefix({
      'with-icon': icon,
      // open,
      disabled: disabled
    }));
    return /*#__PURE__*/React.createElement(Component, _extends({
      ref: ref
    }, rest, {
      tabIndex: disabled ? -1 : tabIndex,
      style: style,
      className: classes
    }, menuitemEventHandlers), /*#__PURE__*/React.createElement(Disclosure.Button, null, function (buttonProps) {
      return /*#__PURE__*/React.createElement("button", _extends({
        className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["toggle"]))),
        onClick: handleClick
      }, omit(buttonProps, ['open'])), icon && /*#__PURE__*/React.cloneElement(icon, {
        className: prefix('menu-icon')
      }), title, /*#__PURE__*/React.createElement(Icon, {
        className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["toggle-icon"])))
      }), /*#__PURE__*/React.createElement(Ripple, null));
    }), /*#__PURE__*/React.createElement(Disclosure.Content, null, function (_ref2) {
      var open = _ref2.open;
      return /*#__PURE__*/React.createElement(SidenavDropdownCollapse, {
        open: open
      }, children);
    }));
  });
});
ExpandedSidenavDropdownMenu.displayName = 'Sidenav.Dropdown.Menu';
ExpandedSidenavDropdownMenu.propTypes = {
  as: PropTypes.elementType,
  expanded: PropTypes.bool,
  disabled: PropTypes.bool,
  onSelect: PropTypes.func,
  onClick: PropTypes.func,
  icon: PropTypes.node,
  eventKey: PropTypes.any,
  className: PropTypes.string,
  style: PropTypes.object,
  children: PropTypes.node,
  classPrefix: PropTypes.string,
  tabIndex: PropTypes.number,
  title: PropTypes.node,
  onMouseOver: PropTypes.func,
  onMouseOut: PropTypes.func
};
export default ExpandedSidenavDropdownMenu;