186 lines
5.9 KiB
JavaScript
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';
|