UNPKG

rsuite

Version:

A suite of react components

161 lines (132 loc) 6.66 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard"); exports.__esModule = true; exports.default = void 0; var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose")); var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose")); var _react = _interopRequireWildcard(require("react")); var _omit2 = _interopRequireDefault(require("lodash/omit")); var _utils = require("../utils"); var _propTypes = _interopRequireDefault(require("prop-types")); var _AngleLeft = _interopRequireDefault(require("@rsuite/icons/legacy/AngleLeft")); var _AngleRight = _interopRequireDefault(require("@rsuite/icons/legacy/AngleRight")); var _useCustom2 = _interopRequireDefault(require("../utils/useCustom")); var _ = require("."); var _Disclosure = _interopRequireDefault(require("../Disclosure")); var _NavContext = _interopRequireDefault(require("../Nav/NavContext")); var _deprecatePropType = _interopRequireDefault(require("../utils/deprecatePropType")); var _templateObject, _templateObject2; /** * @private this component is not supposed to be used directly * Instead it's rendered by a <Nav.Menu> within a <Navbar> * * <Navbar> * <Nav> * <Nav.Menu> * <Nav.Menu title="menu"> -> This submenu will render <NavbarDropdownMenu> component * </Nav.Menu> * </Nav.Menu> * </Nav> * </Navbar> */ var NavbarDropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref) { var navbar = (0, _react.useContext)(_.NavbarContext); var nav = (0, _react.useContext)(_NavContext.default); if (!navbar || !nav) { throw new Error('<Navbar.Dropdown.Menu> must be rendered within a <Nav> within a <Navbar> component.'); } var _onToggle = props.onToggle, eventKey = props.eventKey, title = props.title, _props$classPrefix = props.classPrefix, classPrefix = _props$classPrefix === void 0 ? 'dropdown-menu' : _props$classPrefix, children = props.children, _props$openDirection = props.openDirection, openDirection = _props$openDirection === void 0 ? 'end' : _props$openDirection, rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["onToggle", "eventKey", "title", "classPrefix", "children", "openDirection"]); var _useCustom = (0, _useCustom2.default)('DropdownMenu'), rtl = _useCustom.rtl; var _useClassNames = (0, _utils.useClassNames)(classPrefix), prefix = _useClassNames.prefix; var _useClassNames2 = (0, _utils.useClassNames)('dropdown-menu'), withMenuClassPrefix = _useClassNames2.withClassPrefix, mergeMenuClassName = _useClassNames2.merge; var _useClassNames3 = (0, _utils.useClassNames)('dropdown-item'), mergeItemClassNames = _useClassNames3.merge, withItemClassPrefix = _useClassNames3.withClassPrefix, prefixItemClassName = _useClassNames3.prefix; // Parent menu exists. This is a submenu. // Should render a `menuitem` that controls this submenu. var _omit = (0, _omit2.default)(rest, ['trigger']), icon = _omit.icon, className = _omit.className, disabled = _omit.disabled, menuProps = (0, _objectWithoutPropertiesLoose2.default)(_omit, ["icon", "className", "disabled"]); var Icon = rtl ? _AngleLeft.default : _AngleRight.default; return /*#__PURE__*/_react.default.createElement(_Disclosure.default, { hideOnClickOutside: true, trigger: ['click', 'mouseover'], onToggle: function onToggle(open, event) { return _onToggle === null || _onToggle === void 0 ? void 0 : _onToggle(open, undefined, event); } }, function (_ref, containerRef) { var open = _ref.open, props = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["open"]); var classes = mergeItemClassNames(className, withItemClassPrefix({ disabled: disabled, open: open, submenu: true })); return /*#__PURE__*/_react.default.createElement("li", (0, _extends2.default)({ ref: (0, _utils.mergeRefs)(ref, containerRef), className: classes }, props), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Button, null, function (_ref2, buttonRef) { var open = _ref2.open, buttonProps = (0, _objectWithoutPropertiesLoose2.default)(_ref2, ["open"]); var classes = mergeItemClassNames(className, prefixItemClassName(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["toggle"]))), withItemClassPrefix({ 'with-icon': icon, open: open, disabled: disabled })); return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({ ref: (0, _utils.mergeRefs)(buttonRef, buttonRef), className: classes, "data-event-key": eventKey, "data-event-key-type": typeof eventKey }, buttonProps), icon && /*#__PURE__*/_react.default.cloneElement(icon, { className: prefix('menu-icon') }), title, /*#__PURE__*/_react.default.createElement(Icon, { className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["toggle-icon"]))) })); }), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Content, null, function (_ref3, elementRef) { var open = _ref3.open; var menuClassName = mergeMenuClassName(className, withMenuClassPrefix()); return /*#__PURE__*/_react.default.createElement("ul", (0, _extends2.default)({ ref: elementRef, className: menuClassName, hidden: !open, "data-direction": openDirection }, menuProps), children); })); }); }); NavbarDropdownMenu.displayName = 'Nav.Dropdown.Menu'; NavbarDropdownMenu.propTypes = { active: _propTypes.default.bool, activeKey: _propTypes.default.any, className: _propTypes.default.string, children: _propTypes.default.node, icon: _propTypes.default.any, classPrefix: _propTypes.default.string, pullLeft: (0, _deprecatePropType.default)(_propTypes.default.bool, 'Use openDirection="start" instead.'), openDirection: _propTypes.default.oneOf(['start', 'end']), title: _propTypes.default.node, open: _propTypes.default.bool, eventKey: _propTypes.default.any, expanded: _propTypes.default.bool, collapsible: _propTypes.default.bool, onToggle: _propTypes.default.func }; var _default = NavbarDropdownMenu; exports.default = _default;