rsuite
Version:
A suite of react components
161 lines (132 loc) • 6.66 kB
JavaScript
"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;