choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
313 lines (276 loc) • 10.3 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
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, { Component } from 'react';
import arrayTreeFilter from 'array-tree-filter';
import { findDOMNode } from 'react-dom';
import Locale from './locale/en_US';
import isFunction from 'lodash/isFunction';
import Icon from '../../icon';
var Menus = /*#__PURE__*/function (_Component) {
_inherits(Menus, _Component);
var _super = _createSuper(Menus);
function Menus(props) {
var _this;
_classCallCheck(this, Menus);
_this = _super.call(this, props);
_defineProperty(_assertThisInitialized(_this), "saveMenuItem", function (index) {
return function (node) {
_this.menuItems[index] = node;
};
});
_this.menuItems = {};
return _this;
}
_createClass(Menus, [{
key: "componentDidMount",
value: function componentDidMount() {
this.scrollActiveItemToView();
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
if (!prevProps.visible && this.props.visible) {
this.scrollActiveItemToView();
}
}
}, {
key: "getFieldName",
value: function getFieldName(name) {
var _this$props = this.props,
fieldNames = _this$props.fieldNames,
defaultFieldNames = _this$props.defaultFieldNames; // 防止只设置单个属性的名字
return fieldNames[name] || defaultFieldNames[name];
}
/**
* render th li list
* @param {*} option
* @param {*} menuIndex
*/
}, {
key: "getOption",
value: function getOption(option, menuIndex) {
var _this$props2 = this.props,
prefixCls = _this$props2.prefixCls,
expandTrigger = _this$props2.expandTrigger,
singleMenuItemStyle = _this$props2.singleMenuItemStyle,
selectedValues = _this$props2.selectedValues;
var onSelect = this.props.onSelect.bind(this, option, menuIndex, false);
var expandProps = {
onClick: function onClick() {
return onSelect('click');
}
};
var childrenField = this.getFieldName('children');
var labelField = this.getFieldName('label');
var valueField = this.getFieldName('value');
var hasChildren = option[childrenField] && option[childrenField].length > 0;
var menuItemCls = "".concat(prefixCls, "-menu-item"); // TODO: add item style
if (expandTrigger === 'hover' && hasChildren) {
expandProps = {
onMouseEnter: this.delayOnSelect.bind(this, onSelect),
onMouseLeave: this.delayOnSelect.bind(this),
onClick: function onClick() {
return onSelect('click');
}
};
}
if (selectedValues.findIndex(function (item) {
return item === option[valueField];
}) > -1) {
menuItemCls += " ".concat(prefixCls, "-menu-item-selected");
}
if (this.isActiveOption(option, menuIndex)) {
menuItemCls += " ".concat(prefixCls, "-menu-item-active");
expandProps.ref = this.saveMenuItem(menuIndex);
}
if (option.disabled) {
menuItemCls += " ".concat(prefixCls, "-menu-item-disabled");
}
if (option.loading) {
menuItemCls += " ".concat(prefixCls, "-menu-item-loading");
}
var title = '';
if (option.title) {
title = option.title;
} else if (typeof option[labelField] === 'string') {
title = option[labelField];
}
return /*#__PURE__*/React.createElement("li", _extends({
key: option.key || option[valueField],
className: menuItemCls,
title: title,
style: singleMenuItemStyle
}, expandProps), option[labelField]);
}
/**
* be active value is a array of items
* @param string[] values
*/
}, {
key: "getActiveOptions",
value: function getActiveOptions(values) {
var activeValue = values || this.props.activeValue;
var options = this.props.options;
return arrayTreeFilter(options, function (o, level) {
return o.value === activeValue[level];
});
}
}, {
key: "getShowOptions",
value: function getShowOptions() {
var options = this.props.options;
var result = this.getActiveOptions().map(function (activeOption) {
return activeOption.children;
}).filter(function (activeOption) {
return !!activeOption;
});
result.unshift(options);
return result;
}
}, {
key: "delayOnSelect",
value: function delayOnSelect(onSelect) {
var _this2 = this;
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
if (this.delayTimer) {
clearTimeout(this.delayTimer);
this.delayTimer = null;
}
if (typeof onSelect === 'function') {
this.delayTimer = setTimeout(function () {
onSelect('hover', args);
_this2.delayTimer = null;
}, 150);
}
}
}, {
key: "scrollActiveItemToView",
value: function scrollActiveItemToView() {
// scroll into view
var optionsLength = this.getShowOptions().length;
for (var i = 0; i < optionsLength; i++) {
var itemComponent = this.menuItems[i];
if (itemComponent) {
var target = findDOMNode(itemComponent);
target.parentNode.scrollTop = target.offsetTop;
}
}
}
}, {
key: "isActiveOption",
value: function isActiveOption(option, menuIndex) {
var _this$props$activeVal = this.props.activeValue,
activeValue = _this$props$activeVal === void 0 ? [] : _this$props$activeVal;
return activeValue[menuIndex] === option.value;
}
}, {
key: "getTabItem",
value:
/**
* render th li list
* @param {*} option
* @param {*} menuIndex
*/
function getTabItem(option, menuIndex) {
var _this$props3 = this.props,
prefixCls = _this$props3.prefixCls,
singleMenuItemRender = _this$props3.singleMenuItemRender;
var onSelect = this.props.onSelect.bind(this, option, menuIndex, true);
var expandProps = {
onClick: onSelect
};
var menuItemCls = "".concat(prefixCls, "-menu-tab-item");
var labelField = this.getFieldName('label');
var valueField = this.getFieldName('value');
var label = option[labelField];
if (isFunction(singleMenuItemRender)) {
label = singleMenuItemItem(option[labelField]);
}
return /*#__PURE__*/React.createElement("span", _extends({
key: option.key || option[valueField],
className: menuItemCls
}, expandProps), label, /*#__PURE__*/React.createElement(Icon, {
type: "arrow_drop_down"
}));
}
}, {
key: "render",
value: function render() {
var _this3 = this;
var _this$props4 = this.props,
prefixCls = _this$props4.prefixCls,
dropdownMenuColumnStyle = _this$props4.dropdownMenuColumnStyle,
isTabSelected = _this$props4.isTabSelected,
locale = _this$props4.locale,
singleMenuStyle = _this$props4.singleMenuStyle,
singlePleaseRender = _this$props4.singlePleaseRender;
var showOptions = this.getShowOptions();
var showOptionsIndex = showOptions.length - 1;
var activeOptions = this.getActiveOptions();
var dropdownMenuColumnStyleSingle = _objectSpread(_objectSpread({}, dropdownMenuColumnStyle), singleMenuStyle);
var tabItemRender = activeOptions.map(function (item, indexItem) {
return _this3.getTabItem(item, indexItem);
});
var tabItemRenderResult;
if (showOptions && activeOptions && !isTabSelected && showOptions.length > activeOptions.length) {
var pleaseRenderProps = {
key: 'please_check',
className: "".concat(prefixCls, "-menu-tab-item ").concat(prefixCls, "-menu-tab-please"),
text: locale.pleaseSelect
};
if (isFunction(singlePleaseRender)) {
tabItemRenderResult = singlePleaseRender(pleaseRenderProps);
} else {
var pleaseItem = /*#__PURE__*/React.createElement("span", pleaseRenderProps, pleaseRenderProps.text, /*#__PURE__*/React.createElement(Icon, {
type: "arrow_drop_down"
}));
tabItemRenderResult = tabItemRender.length > 0 ? [].concat(_toConsumableArray(tabItemRender), [pleaseItem]) : pleaseItem;
}
}
if (isTabSelected) {
showOptionsIndex = activeOptions.length - 1 < 0 ? 0 : activeOptions.length - 1;
}
return /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-mode-single ")
}, /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-menu-tab")
}, tabItemRenderResult || tabItemRender), /*#__PURE__*/React.createElement("ul", {
className: "".concat(prefixCls, "-menu ").concat(prefixCls, "-menu-single "),
key: showOptionsIndex,
style: dropdownMenuColumnStyleSingle
}, showOptions[showOptionsIndex].map(function (option) {
return _this3.getOption(option, showOptionsIndex);
})));
}
}]);
return Menus;
}(Component);
_defineProperty(Menus, "defaultProps", {
options: [],
value: [],
activeValue: [],
onSelect: function onSelect() {},
prefixCls: 'rc-cascader-menus',
visible: false,
expandTrigger: 'click',
selectedValues: [],
isTabSelected: false,
locale: Locale,
singleMenuStyle: {
width: '3rem'
},
singleMenuItemStyle: {
minWidth: '1rem'
}
});
export { Menus as default };
//# sourceMappingURL=MenusSingle.js.map