choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
332 lines (283 loc) • 11.4 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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
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 _arrayTreeFilter = _interopRequireDefault(require("array-tree-filter"));
var _reactDom = require("react-dom");
var _en_US = _interopRequireDefault(require("./locale/en_US"));
var _isFunction = _interopRequireDefault(require("lodash/isFunction"));
var _icon = _interopRequireDefault(require("../../icon"));
var Menus = /*#__PURE__*/function (_Component) {
(0, _inherits2["default"])(Menus, _Component);
var _super = (0, _createSuper2["default"])(Menus);
function Menus(props) {
var _this;
(0, _classCallCheck2["default"])(this, Menus);
_this = _super.call(this, props);
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "saveMenuItem", function (index) {
return function (node) {
_this.menuItems[index] = node;
};
});
_this.menuItems = {};
return _this;
}
(0, _createClass2["default"])(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["default"].createElement("li", (0, _extends2["default"])({
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 (0, _arrayTreeFilter["default"])(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 = (0, _reactDom.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 ((0, _isFunction["default"])(singleMenuItemRender)) {
label = singleMenuItemItem(option[labelField]);
}
return /*#__PURE__*/_react["default"].createElement("span", (0, _extends2["default"])({
key: option.key || option[valueField],
className: menuItemCls
}, expandProps), label, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
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 = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, 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 ((0, _isFunction["default"])(singlePleaseRender)) {
tabItemRenderResult = singlePleaseRender(pleaseRenderProps);
} else {
var pleaseItem = /*#__PURE__*/_react["default"].createElement("span", pleaseRenderProps, pleaseRenderProps.text, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
type: "arrow_drop_down"
}));
tabItemRenderResult = tabItemRender.length > 0 ? [].concat((0, _toConsumableArray2["default"])(tabItemRender), [pleaseItem]) : pleaseItem;
}
}
if (isTabSelected) {
showOptionsIndex = activeOptions.length - 1 < 0 ? 0 : activeOptions.length - 1;
}
return /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(prefixCls, "-mode-single ")
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(prefixCls, "-menu-tab")
}, tabItemRenderResult || tabItemRender), /*#__PURE__*/_react["default"].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;
}(_react.Component);
exports["default"] = Menus;
(0, _defineProperty2["default"])(Menus, "defaultProps", {
options: [],
value: [],
activeValue: [],
onSelect: function onSelect() {},
prefixCls: 'rc-cascader-menus',
visible: false,
expandTrigger: 'click',
selectedValues: [],
isTabSelected: false,
locale: _en_US["default"],
singleMenuStyle: {
width: '3rem'
},
singleMenuItemStyle: {
minWidth: '1rem'
}
});
//# sourceMappingURL=MenusSingle.js.map