choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
262 lines (225 loc) • 8.79 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React, { cloneElement, Component } from 'react';
import { findDOMNode } from 'react-dom';
import scrollIntoView from 'dom-scroll-into-view';
import raf from 'raf';
import toArray from '../util/Children/toArray';
import Menu from '../menu';
import { getSelectKeys, preventDefaultEvent, saveRef } from './util';
import FilterInput from './FilterInput';
import LocaleReceiver from '../../locale-provider/LocaleReceiver';
import defaultLocale from '../../locale-provider/default';
var DropdownMenu = /*#__PURE__*/function (_Component) {
_inherits(DropdownMenu, _Component);
var _super = _createSuper(DropdownMenu);
function DropdownMenu(_props) {
var _this;
_classCallCheck(this, DropdownMenu);
_this = _super.call(this, _props);
_defineProperty(_assertThisInitialized(_this), "scrollActiveItemToView", function () {
// scroll into view
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;
}
raf(function () {
scrollIntoView(itemComponent, findDOMNode(_this.menuRef), scrollIntoViewOpts);
});
}
});
_defineProperty(_assertThisInitialized(_this), "renderCheckLabel", function (locale) {
var _this$props = _this.props,
prefixCls = _this$props.prefixCls,
checkAll = _this$props.checkAll;
return checkAll ? /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-select-all-none")
}, /*#__PURE__*/React.createElement("span", {
name: "check-all",
onClick: checkAll
}, locale.selectAll), /*#__PURE__*/React.createElement("span", {
name: "check-none",
onClick: checkAll
}, locale.selectNone)) : null;
});
_this.lastInputValue = _props.inputValue;
_this.saveMenuRef = saveRef(_assertThisInitialized(_this), 'menuRef');
return _this;
}
_createClass(DropdownMenu, [{
key: "componentDidMount",
value: function componentDidMount() {
this.scrollActiveItemToView();
this.lastVisible = this.props.visible;
}
}, {
key: "shouldComponentUpdate",
value: function shouldComponentUpdate(nextProps) {
if (!nextProps.visible) {
this.lastVisible = false;
} // freeze when hide
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,
value = props.value,
defaultActiveFirstOption = props.defaultActiveFirstOption,
prefixCls = props.prefixCls,
multiple = props.multiple,
onMenuSelect = props.onMenuSelect,
inputValue = props.inputValue,
firstActiveValue = props.firstActiveValue,
backfillValue = props.backfillValue,
dropdownMenuRippleDisabled = props.dropdownMenuRippleDisabled;
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; // set firstActiveItem via cloning menus
// for scroll into view
var clone = function clone(item) {
if (!foundFirst && selectedKeys.indexOf(item.key) !== -1 || !foundFirst && !selectedKeys.length && firstActiveValue.indexOf(item.key) !== -1) {
foundFirst = true;
return /*#__PURE__*/cloneElement(item, {
ref: function ref(_ref) {
_this2.firstActiveItem = _ref;
}
});
}
return item;
};
clonedMenuItems = menuItems.map(function (item) {
if (item.type.isMenuItemGroup) {
var children = toArray(item.props.children).map(clone);
return /*#__PURE__*/cloneElement(item, {}, children);
}
return clone(item);
});
} else {
this.firstActiveItem = null;
} // clear activeKey when inputValue change
var lastValue = value && value[value.length - 1];
if (inputValue !== this.lastInputValue && (!lastValue || lastValue !== backfillValue)) {
activeKeyProps.activeKey = '';
}
return /*#__PURE__*/React.createElement(Menu, _extends({
ref: this.saveMenuRef,
style: this.props.dropdownMenuStyle,
defaultActiveFirst: defaultActiveFirstOption,
rippleDisabled: dropdownMenuRippleDisabled,
role: "listbox"
}, activeKeyProps, {
multiple: multiple
}, menuProps, {
selectedKeys: selectedKeys,
prefixCls: "".concat(prefixCls, "-menu")
}), clonedMenuItems);
}
return null;
}
}, {
key: "renderFilterInput",
value: function renderFilterInput() {
var _this$props2 = this.props,
prefixCls = _this$props2.prefixCls,
filter = _this$props2.filter,
placeholder = _this$props2.placeholder,
onFilterChange = _this$props2.onFilterChange,
filterValue = _this$props2.filterValue,
onKeyDown = _this$props2.onKeyDown;
var props = {
filterValue: filterValue,
prefixCls: prefixCls,
placeholder: placeholder,
onChange: onFilterChange,
onKeyDown: onKeyDown
};
return filter ? /*#__PURE__*/React.createElement(FilterInput, _extends({}, props, {
ref: saveRef(this, 'filterRef')
})) : null;
}
}, {
key: "getFooter",
value: function getFooter() {
var _this$props3 = this.props,
prefixCls = _this$props3.prefixCls,
footer = _this$props3.footer;
return footer ? /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-footer"),
onMouseDown: preventDefaultEvent
}, footer) : null;
}
}, {
key: "render",
value: function render() {
var renderMenu = this.renderMenu();
var filterInput = this.renderFilterInput();
var _this$props4 = this.props,
multiple = _this$props4.multiple,
menuItems = _this$props4.menuItems,
checkAll = _this$props4.checkAll,
onMouseDown = _this$props4.onMouseDown;
var selectOpt = null;
if (checkAll && multiple && menuItems.length && menuItems[0].key !== 'NOT_FOUND') {
selectOpt = /*#__PURE__*/React.createElement(LocaleReceiver, {
componentName: "Select",
defaultLocale: defaultLocale.Select
}, this.renderCheckLabel);
}
var menu = renderMenu ? /*#__PURE__*/React.createElement("div", {
style: {
overflow: 'auto'
},
onFocus: this.props.onPopupFocus,
onMouseDown: preventDefaultEvent,
onScroll: this.props.onPopupScroll
}, renderMenu) : null;
var footer = this.getFooter();
return menu || filterInput || selectOpt || footer ? /*#__PURE__*/React.createElement("div", {
onMouseDown: onMouseDown
}, filterInput, selectOpt, menu, footer) : null;
}
}]);
return DropdownMenu;
}(Component);
_defineProperty(DropdownMenu, "defaultProps", {
footer: null
});
export { DropdownMenu as default };
DropdownMenu.displayName = 'DropdownMenu';
//# sourceMappingURL=DropdownMenu.js.map