choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
287 lines (235 loc) • 10.1 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _reactDom = require("react-dom");
var _domScrollIntoView = _interopRequireDefault(require("dom-scroll-into-view"));
var _raf = _interopRequireDefault(require("raf"));
var _toArray = _interopRequireDefault(require("../util/Children/toArray"));
var _menu = _interopRequireDefault(require("../menu"));
var _util = require("./util");
var _FilterInput = _interopRequireDefault(require("./FilterInput"));
var _LocaleReceiver = _interopRequireDefault(require("../../locale-provider/LocaleReceiver"));
var _default = _interopRequireDefault(require("../../locale-provider/default"));
var DropdownMenu = /*#__PURE__*/function (_Component) {
(0, _inherits2["default"])(DropdownMenu, _Component);
var _super = (0, _createSuper2["default"])(DropdownMenu);
function DropdownMenu(_props) {
var _this;
(0, _classCallCheck2["default"])(this, DropdownMenu);
_this = _super.call(this, _props);
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "scrollActiveItemToView", function () {
// scroll into view
var itemComponent = (0, _reactDom.findDOMNode)(_this.firstActiveItem);
if (itemComponent) {
(0, _raf["default"])(function () {
if (itemComponent) {
var _assertThisInitialize = (0, _assertThisInitialized2["default"])(_this),
props = _assertThisInitialize.props;
var scrollIntoViewOpts = {
onlyScrollIfNeeded: true
};
if ((!props.value || props.value.length === 0) && props.firstActiveValue) {
scrollIntoViewOpts.alignWithTop = true;
}
(0, _domScrollIntoView["default"])(itemComponent, (0, _reactDom.findDOMNode)(_this.menuRef), scrollIntoViewOpts);
}
});
}
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderCheckLabel", function (locale) {
var _this$props = _this.props,
prefixCls = _this$props.prefixCls,
checkAll = _this$props.checkAll;
return checkAll ? /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(prefixCls, "-select-all-none")
}, /*#__PURE__*/_react["default"].createElement("span", {
name: "check-all",
onClick: checkAll
}, locale.selectAll), /*#__PURE__*/_react["default"].createElement("span", {
name: "check-none",
onClick: checkAll
}, locale.selectNone)) : null;
});
_this.lastInputValue = _props.inputValue;
_this.saveMenuRef = (0, _util.saveRef)((0, _assertThisInitialized2["default"])(_this), 'menuRef');
return _this;
}
(0, _createClass2["default"])(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 = (0, _util.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__*/(0, _react.cloneElement)(item, {
ref: function ref(_ref) {
_this2.firstActiveItem = _ref;
}
});
}
return item;
};
clonedMenuItems = menuItems.map(function (item) {
if (item.type.isMenuItemGroup) {
var children = (0, _toArray["default"])(item.props.children).map(clone);
return /*#__PURE__*/(0, _react.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["default"].createElement(_menu["default"], (0, _extends2["default"])({
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["default"].createElement(_FilterInput["default"], (0, _extends2["default"])({}, props, {
ref: (0, _util.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["default"].createElement("div", {
className: "".concat(prefixCls, "-footer"),
onMouseDown: _util.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["default"].createElement(_LocaleReceiver["default"], {
componentName: "Select",
defaultLocale: _default["default"].Select
}, this.renderCheckLabel);
}
var menu = renderMenu ? /*#__PURE__*/_react["default"].createElement("div", {
style: {
overflow: 'auto'
},
onFocus: this.props.onPopupFocus,
onMouseDown: _util.preventDefaultEvent,
onScroll: this.props.onPopupScroll
}, renderMenu) : null;
var footer = this.getFooter();
return menu || filterInput || selectOpt || footer ? /*#__PURE__*/_react["default"].createElement("div", {
onMouseDown: onMouseDown
}, filterInput, selectOpt, menu, footer) : null;
}
}]);
return DropdownMenu;
}(_react.Component);
exports["default"] = DropdownMenu;
(0, _defineProperty2["default"])(DropdownMenu, "defaultProps", {
footer: null
});
DropdownMenu.displayName = 'DropdownMenu';
//# sourceMappingURL=DropdownMenu.js.map