2020-05-19 11:43:42 +03:00

186 lines
5.9 KiB
JavaScript

import _extends from 'babel-runtime/helpers/extends';
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _createClass from 'babel-runtime/helpers/createClass';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import React, { cloneElement } from 'react';
import { findDOMNode } from 'react-dom';
import PropTypes from 'prop-types';
import toArray from 'rc-util/es/Children/toArray';
import Menu from 'rc-menu';
import scrollIntoView from 'dom-scroll-into-view';
import { getSelectKeys, preventDefaultEvent } from './util';
var DropdownMenu = function (_React$Component) {
_inherits(DropdownMenu, _React$Component);
function DropdownMenu() {
var _ref;
var _temp, _this, _ret;
_classCallCheck(this, DropdownMenu);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = DropdownMenu.__proto__ || Object.getPrototypeOf(DropdownMenu)).call.apply(_ref, [this].concat(args))), _this), _this.scrollActiveItemToView = function () {
var itemComponent = findDOMNode(_this.firstActiveItem);
var props = _this.props;
if (itemComponent) {
var scrollIntoViewOpts = {
onlyScrollIfNeeded: true
};
if ((!props.value || props.value.length === 0) && props.firstActiveValue) {
scrollIntoViewOpts.alignWithTop = true;
}
scrollIntoView(itemComponent, findDOMNode(_this.refs.menu), scrollIntoViewOpts);
}
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(DropdownMenu, [{
key: 'componentWillMount',
value: function componentWillMount() {
this.lastInputValue = this.props.inputValue;
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
this.scrollActiveItemToView();
this.lastVisible = this.props.visible;
}
}, {
key: 'shouldComponentUpdate',
value: function shouldComponentUpdate(nextProps) {
if (!nextProps.visible) {
this.lastVisible = false;
}
return nextProps.visible;
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate(prevProps) {
var props = this.props;
if (!prevProps.visible && props.visible) {
this.scrollActiveItemToView();
}
this.lastVisible = props.visible;
this.lastInputValue = props.inputValue;
}
}, {
key: 'renderMenu',
value: function renderMenu() {
var _this2 = this;
var props = this.props;
var menuItems = props.menuItems,
defaultActiveFirstOption = props.defaultActiveFirstOption,
value = props.value,
prefixCls = props.prefixCls,
multiple = props.multiple,
onMenuSelect = props.onMenuSelect,
inputValue = props.inputValue,
firstActiveValue = props.firstActiveValue;
if (menuItems && menuItems.length) {
var menuProps = {};
if (multiple) {
menuProps.onDeselect = props.onMenuDeselect;
menuProps.onSelect = onMenuSelect;
} else {
menuProps.onClick = onMenuSelect;
}
var selectedKeys = getSelectKeys(menuItems, value);
var activeKeyProps = {};
var clonedMenuItems = menuItems;
if (selectedKeys.length || firstActiveValue) {
if (props.visible && !this.lastVisible) {
activeKeyProps.activeKey = selectedKeys[0] || firstActiveValue;
}
var foundFirst = false;
var clone = function clone(item) {
if (!foundFirst && selectedKeys.indexOf(item.key) !== -1 || !foundFirst && !selectedKeys.length && firstActiveValue.indexOf(item.key) !== -1) {
foundFirst = true;
return cloneElement(item, {
ref: function ref(_ref2) {
_this2.firstActiveItem = _ref2;
}
});
}
return item;
};
clonedMenuItems = menuItems.map(function (item) {
if (item.type.isMenuItemGroup) {
var children = toArray(item.props.children).map(clone);
return cloneElement(item, {}, children);
}
return clone(item);
});
}
var lastValue = value && value[value.length - 1];
if (inputValue !== this.lastInputValue && (!lastValue || !lastValue.backfill)) {
activeKeyProps.activeKey = '';
}
return React.createElement(
Menu,
_extends({
ref: 'menu',
style: this.props.dropdownMenuStyle,
defaultActiveFirst: defaultActiveFirstOption
}, activeKeyProps, {
multiple: multiple,
focusable: false
}, menuProps, {
selectedKeys: selectedKeys,
prefixCls: prefixCls + '-menu'
}),
clonedMenuItems
);
}
return null;
}
}, {
key: 'render',
value: function render() {
var renderMenu = this.renderMenu();
return renderMenu ? React.createElement(
'div',
{
style: { overflow: 'auto' },
onFocus: this.props.onPopupFocus,
onMouseDown: preventDefaultEvent
},
renderMenu
) : null;
}
}]);
return DropdownMenu;
}(React.Component);
DropdownMenu.propTypes = {
defaultActiveFirstOption: PropTypes.bool,
value: PropTypes.any,
dropdownMenuStyle: PropTypes.object,
multiple: PropTypes.bool,
onPopupFocus: PropTypes.func,
onMenuDeSelect: PropTypes.func,
onMenuSelect: PropTypes.func,
prefixCls: PropTypes.string,
menuItems: PropTypes.any,
inputValue: PropTypes.string,
visible: PropTypes.bool
};
export default DropdownMenu;
DropdownMenu.displayName = 'DropdownMenu';