310 lines
11 KiB
JavaScript
310 lines
11 KiB
JavaScript
"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 _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
|
|
|
|
var _kebabCase2 = _interopRequireDefault(require("lodash/kebabCase"));
|
|
|
|
var _isUndefined2 = _interopRequireDefault(require("lodash/isUndefined"));
|
|
|
|
var React = _interopRequireWildcard(require("react"));
|
|
|
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
|
|
var _domLib = require("dom-lib");
|
|
|
|
var _RootCloseWrapper = _interopRequireDefault(require("../Overlay/RootCloseWrapper"));
|
|
|
|
var _shallowEqual = _interopRequireDefault(require("../utils/shallowEqual"));
|
|
|
|
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 _constants = require("../constants");
|
|
|
|
var Dropdown =
|
|
/*#__PURE__*/
|
|
function (_React$Component) {
|
|
(0, _inheritsLoose2.default)(Dropdown, _React$Component);
|
|
|
|
function Dropdown(props) {
|
|
var _this;
|
|
|
|
_this = _React$Component.call(this, props) || this;
|
|
_this.rootRef = void 0;
|
|
|
|
_this.toggle = function (isOpen) {
|
|
var _this$props = _this.props,
|
|
onOpen = _this$props.onOpen,
|
|
onClose = _this$props.onClose,
|
|
onToggle = _this$props.onToggle;
|
|
var open = (0, _isUndefined2.default)(isOpen) ? !_this.getOpen() : isOpen;
|
|
var handleToggle = open ? onOpen : onClose;
|
|
|
|
_this.setState({
|
|
open: open
|
|
});
|
|
|
|
handleToggle === null || handleToggle === void 0 ? void 0 : handleToggle();
|
|
onToggle === null || onToggle === void 0 ? void 0 : onToggle(open);
|
|
};
|
|
|
|
_this.handleRootClose = function (event) {
|
|
var _this$props$onToggle, _this$props2, _this$props$onClose, _this$props3;
|
|
|
|
// Prevent the event from bubbling when closing the overlay is triggered by its own element.
|
|
// fix#1435
|
|
if ((0, _domLib.contains)((0, _utils.getDOMNode)(_this.rootRef.current), event.target)) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}
|
|
|
|
_this.setState({
|
|
open: false
|
|
});
|
|
|
|
(_this$props$onToggle = (_this$props2 = _this.props).onToggle) === null || _this$props$onToggle === void 0 ? void 0 : _this$props$onToggle.call(_this$props2, false);
|
|
(_this$props$onClose = (_this$props3 = _this.props).onClose) === null || _this$props$onClose === void 0 ? void 0 : _this$props$onClose.call(_this$props3);
|
|
};
|
|
|
|
_this.handleClick = function (event) {
|
|
event.preventDefault();
|
|
|
|
if (_this.props.disabled) {
|
|
return;
|
|
}
|
|
|
|
_this.toggle();
|
|
};
|
|
|
|
_this.handleOpenChange = function (event) {
|
|
var _this$context, _this$context$onOpenC;
|
|
|
|
var eventKey = _this.props.eventKey;
|
|
(_this$context = _this.context) === null || _this$context === void 0 ? void 0 : (_this$context$onOpenC = _this$context.onOpenChange) === null || _this$context$onOpenC === void 0 ? void 0 : _this$context$onOpenC.call(_this$context, eventKey, event);
|
|
};
|
|
|
|
_this.handleToggleChange = function (eventKey, event) {
|
|
var _this$context2, _this$context2$onOpen;
|
|
|
|
(_this$context2 = _this.context) === null || _this$context2 === void 0 ? void 0 : (_this$context2$onOpen = _this$context2.onOpenChange) === null || _this$context2$onOpen === void 0 ? void 0 : _this$context2$onOpen.call(_this$context2, eventKey, event);
|
|
};
|
|
|
|
_this.handleMouseEnter = function () {
|
|
if (!_this.props.disabled) {
|
|
_this.toggle(true);
|
|
}
|
|
};
|
|
|
|
_this.handleMouseLeave = function () {
|
|
if (!_this.props.disabled) {
|
|
_this.toggle(false);
|
|
}
|
|
};
|
|
|
|
_this.handleSelect = function (eventKey, event) {
|
|
var _this$props$onSelect, _this$props4;
|
|
|
|
(_this$props$onSelect = (_this$props4 = _this.props).onSelect) === null || _this$props$onSelect === void 0 ? void 0 : _this$props$onSelect.call(_this$props4, eventKey, event);
|
|
|
|
_this.toggle(false);
|
|
};
|
|
|
|
_this.state = {
|
|
open: props.open
|
|
};
|
|
_this.rootRef = React.createRef();
|
|
return _this;
|
|
}
|
|
|
|
var _proto = Dropdown.prototype;
|
|
|
|
_proto.getOpen = function getOpen() {
|
|
var open = this.props.open;
|
|
|
|
if ((0, _isUndefined2.default)(open)) {
|
|
return this.state.open;
|
|
}
|
|
|
|
return open;
|
|
};
|
|
|
|
_proto.render = function render() {
|
|
var _classNames;
|
|
|
|
var _this$props5 = this.props,
|
|
title = _this$props5.title,
|
|
children = _this$props5.children,
|
|
className = _this$props5.className,
|
|
menuStyle = _this$props5.menuStyle,
|
|
disabled = _this$props5.disabled,
|
|
renderTitle = _this$props5.renderTitle,
|
|
classPrefix = _this$props5.classPrefix,
|
|
placement = _this$props5.placement,
|
|
activeKey = _this$props5.activeKey,
|
|
tabIndex = _this$props5.tabIndex,
|
|
toggleClassName = _this$props5.toggleClassName,
|
|
trigger = _this$props5.trigger,
|
|
icon = _this$props5.icon,
|
|
onClick = _this$props5.onClick,
|
|
onMouseEnter = _this$props5.onMouseEnter,
|
|
onMouseLeave = _this$props5.onMouseLeave,
|
|
onContextMenu = _this$props5.onContextMenu,
|
|
eventKey = _this$props5.eventKey,
|
|
Component = _this$props5.componentClass,
|
|
toggleComponentClass = _this$props5.toggleComponentClass,
|
|
noCaret = _this$props5.noCaret,
|
|
style = _this$props5.style,
|
|
showHeader = _this$props5.showHeader,
|
|
props = (0, _objectWithoutPropertiesLoose2.default)(_this$props5, ["title", "children", "className", "menuStyle", "disabled", "renderTitle", "classPrefix", "placement", "activeKey", "tabIndex", "toggleClassName", "trigger", "icon", "onClick", "onMouseEnter", "onMouseLeave", "onContextMenu", "eventKey", "componentClass", "toggleComponentClass", "noCaret", "style", "showHeader"]);
|
|
|
|
var _ref = this.context || {},
|
|
_ref$openKeys = _ref.openKeys,
|
|
openKeys = _ref$openKeys === void 0 ? [] : _ref$openKeys,
|
|
sidenav = _ref.sidenav,
|
|
expanded = _ref.expanded;
|
|
|
|
var menuExpanded = openKeys.some(function (key) {
|
|
return (0, _shallowEqual.default)(key, eventKey);
|
|
});
|
|
var addPrefix = (0, _utils.prefix)(classPrefix);
|
|
var open = this.getOpen();
|
|
var collapsible = sidenav && expanded;
|
|
var unhandled = (0, _utils.getUnhandledProps)(Dropdown, props);
|
|
var toggleProps = (0, _extends2.default)({}, unhandled, {
|
|
onClick: (0, _utils.createChainedFunction)(this.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)(this.handleClick, toggleProps.onClick);
|
|
}
|
|
|
|
if ((0, _utils.isOneOf)('contextMenu', trigger)) {
|
|
toggleProps.onContextMenu = (0, _utils.createChainedFunction)(this.handleClick, onContextMenu);
|
|
}
|
|
|
|
if ((0, _utils.isOneOf)('hover', trigger)) {
|
|
dropdownProps.onMouseEnter = (0, _utils.createChainedFunction)(this.handleMouseEnter, onMouseEnter);
|
|
dropdownProps.onMouseLeave = (0, _utils.createChainedFunction)(this.handleMouseLeave, onMouseLeave);
|
|
}
|
|
}
|
|
|
|
var menuProps = {
|
|
collapsible: collapsible,
|
|
activeKey: activeKey,
|
|
openKeys: openKeys,
|
|
expanded: menuExpanded,
|
|
style: menuStyle,
|
|
onSelect: this.handleSelect,
|
|
onToggle: this.handleToggleChange
|
|
};
|
|
var menu = React.createElement(_DropdownMenu.default, menuProps, children);
|
|
|
|
if (open) {
|
|
menu = React.createElement(_RootCloseWrapper.default, {
|
|
onRootClose: this.handleRootClose
|
|
}, function (props, ref) {
|
|
return React.createElement(_DropdownMenu.default, (0, _extends2.default)({}, props, menuProps, {
|
|
htmlElementRef: ref
|
|
}), showHeader && React.createElement("li", {
|
|
className: addPrefix('header')
|
|
}, title), children);
|
|
});
|
|
}
|
|
|
|
var toggle = React.createElement(_DropdownToggle.default, (0, _extends2.default)({}, toggleProps, {
|
|
noCaret: noCaret,
|
|
tabIndex: tabIndex,
|
|
className: toggleClassName,
|
|
renderTitle: renderTitle,
|
|
icon: icon,
|
|
componentClass: toggleComponentClass
|
|
}), title);
|
|
var classes = (0, _classnames.default)(classPrefix, className, (_classNames = {}, _classNames[addPrefix("placement-" + (0, _kebabCase2.default)((0, _utils.placementPolyfill)(placement)))] = placement, _classNames[addPrefix('disabled')] = disabled, _classNames[addPrefix('no-caret')] = noCaret, _classNames[addPrefix('open')] = open, _classNames[addPrefix(menuExpanded ? 'expand' : 'collapse')] = sidenav, _classNames));
|
|
return React.createElement(Component, (0, _extends2.default)({
|
|
ref: this.rootRef
|
|
}, dropdownProps, {
|
|
style: style,
|
|
className: classes,
|
|
role: "menu"
|
|
}), menu, toggle);
|
|
};
|
|
|
|
return Dropdown;
|
|
}(React.Component);
|
|
|
|
Dropdown.displayName = 'Dropdown';
|
|
Dropdown.contextType = _Sidenav.SidenavContext;
|
|
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(_constants.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,
|
|
componentClass: _propTypes.default.elementType,
|
|
toggleComponentClass: _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
|
|
};
|
|
Dropdown.defaultProps = {
|
|
placement: 'bottomStart',
|
|
trigger: 'click',
|
|
tabIndex: 0
|
|
};
|
|
var EnhancedDropdown = (0, _utils.defaultProps)({
|
|
componentClass: 'div',
|
|
classPrefix: 'dropdown'
|
|
})(Dropdown);
|
|
(0, _utils.setStatic)('Item', _DropdownMenuItem.default)(EnhancedDropdown);
|
|
(0, _utils.setStatic)('Menu', _DropdownMenu.default)(EnhancedDropdown);
|
|
var _default = EnhancedDropdown;
|
|
exports.default = _default;
|
|
module.exports = exports.default; |