choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
407 lines (356 loc) • 15 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
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 _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
var _tslib = require("tslib");
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _mobx = require("mobx");
var _mobxReact = require("mobx-react");
var _tree = _interopRequireDefault(require("../../../lib/tree"));
var _TreeNode = _interopRequireDefault(require("./TreeNode"));
var _Select2 = require("../select/Select");
var _normalizeTreeNodes = _interopRequireDefault(require("./normalizeTreeNodes"));
var _autobind = _interopRequireDefault(require("../_util/autobind"));
var _isIE = _interopRequireDefault(require("../_util/isIE"));
var _tree2 = require("../tree");
var _util = require("../tree/util");
var _EventManager = require("../_util/EventManager");
var _enum = require("../data-set/enum");
var TreeSelect = /*#__PURE__*/function (_Select) {
(0, _inherits2["default"])(TreeSelect, _Select);
var _super = (0, _createSuper2["default"])(TreeSelect);
function TreeSelect() {
(0, _classCallCheck2["default"])(this, TreeSelect);
return _super.apply(this, arguments);
}
(0, _createClass2["default"])(TreeSelect, [{
key: "parentField",
get: function get() {
return this.getProp('parentField') || 'parentValue';
}
}, {
key: "idField",
get: function get() {
return this.getProp('idField') || this.valueField;
}
}, {
key: "options",
get: function get() {
var field = this.field,
textField = this.textField,
valueField = this.valueField,
idField = this.idField,
parentField = this.parentField,
multiple = this.multiple,
_this$observableProps = this.observableProps,
children = _this$observableProps.children,
options = _this$observableProps.options;
return options || field && field.getOptions(this.record) || (0, _normalizeTreeNodes["default"])({
textField: textField,
valueField: valueField,
disabledField: _Select2.DISABLED_FIELD,
parentField: parentField,
idField: idField,
multiple: multiple,
children: children
});
}
}, {
key: "treeData",
get: function get() {
return this.optionsWithCombo.filter(function (r) {
return !r.parent;
});
}
}, {
key: "selectedKeys",
get: function get() {
var _this = this;
var idField = this.idField;
return this.options.reduce(function (array, r) {
return _this.isSelected(r) ? array.concat(String(r.get(idField))) : array;
}, []);
}
}, {
key: "handleSearch",
value: function handleSearch(text) {
if (!(0, _Select2.isSearchTextEmpty)(text)) {
var options = this.options;
var idField = options.props.idField;
this.expandedKeys = options.map(function (r) {
return String(r.get(idField));
});
}
}
}, {
key: "handleExpand",
value: function handleExpand(keys) {
this.expandedKeys = keys;
}
}, {
key: "multiple",
get: function get() {
return !!this.getProp('multiple') || !!this.props.treeCheckable;
}
}, {
key: "handleTreeSelect",
value: function handleTreeSelect(_e, _ref) {
var node = _ref.node;
var record = node.record,
disabled = node.disabled,
key = node.key;
if (key === _Select2.MORE_KEY) {
var options = this.options;
options.queryMore(options.currentPage + 1);
} else if (!disabled) {
var multiple = this.multiple;
if (multiple) {
if (this.isSelected(record)) {
this.unChoose(record);
} else {
this.choose(record);
}
} else {
this.choose(record);
}
}
}
}, {
key: "handleTreeCheck",
value: function handleTreeCheck(_e, _ref2) {
var _this2 = this;
var node = _ref2.node;
var record = node.record,
disabled = node.disabled,
key = node.key;
var valueField = this.valueField;
if (key === _Select2.MORE_KEY) {
var options = this.options;
options.queryMore(options.currentPage + 1);
} else if (!disabled) {
var multiple = this.multiple;
if (multiple) {
var records = record.treeReduce(function (array, r) {
return _this2.isSelected(r) ? array : array.concat(r);
}, []);
var parents = [];
record.parents.every(function (parent, index) {
var children = parent.children;
if (children && children.every(function (child) {
return (index === 0 ? records.includes(child) : parents.includes(child)) || _this2.isSelected(child);
})) {
parents.push(parent);
return true;
}
return false;
});
var showCheckedStrategy = this.getProp('showCheckedStrategy');
if (showCheckedStrategy === _enum.CheckedStrategy.SHOW_ALL) {
if (this.isSelected(record)) {
var unChooseRecords = record.treeReduce(function (array, r) {
return _this2.isSelected(r) ? array.concat(r) : array;
}, []);
var unChooseParents = record.parents.filter(function (parent) {
return _this2.isSelected(parent);
});
this.unChoose(unChooseRecords.concat(unChooseParents));
} else {
this.choose(records.concat(parents));
}
} else if (showCheckedStrategy === _enum.CheckedStrategy.SHOW_PARENT) {
if (this.isSelected(record) || record.parents.some(function (parent) {
return _this2.isSelected(parent);
})) {
var selectedRecords = this.options.filter(function (option) {
if (key === option.get(valueField) || option.children && option.children.includes(record)) {
return false;
}
return !!(option.parent && option.children && record.parent && (option.parents.some(function (parent) {
return _this2.isSelected(parent);
}) || _this2.isSelected(option)) || !option.children && option.parent.children.includes(record) && option.parents.some(function (parent) {
return _this2.isSelected(parent);
}) || !option.children && option.parents.every(function (parent) {
return !_this2.isSelected(parent);
}) && _this2.isSelected(option));
});
this.setValue(selectedRecords.map(this.processRecordToObject, this));
} else {
var preSelected = this.options.filter(function (option) {
return _this2.isSelected(option);
}).concat(record, parents);
var _selectedRecords = preSelected.filter(function (child) {
return !(child.parent && preSelected.includes(child.parent));
});
this.setValue(_selectedRecords.map(this.processRecordToObject, this));
}
} else if (showCheckedStrategy === 'SHOW_CHILD') {
if (!record.parent) {
if (this.options.every(function (option) {
return !option.children && _this2.isSelected(option) || !!option.children;
})) {
this.unChooseAll();
} else {
this.choose(records.filter(function (childRecord) {
return !childRecord.children;
}));
}
}
if (this.isSelected(record) && !record.children) {
this.unChoose(record);
} else if (!this.isSelected(record) && record.children && record.parent) {
if (record.children.every(function (child) {
return _this2.isSelected(child);
})) {
this.unChoose(record.children);
} else {
this.choose(records.filter(function (chooseRecord) {
return !chooseRecord.children;
}));
}
} else {
this.choose(records.filter(function (chooseRecord) {
return !chooseRecord.children;
}));
}
}
} else {
this.choose(record);
}
}
}
}, {
key: "handleTreeNode",
value: function handleTreeNode(e) {
var onOption = this.props.onOption;
var props = onOption(e) || {};
props.className = (0, _classnames["default"])(props.className, "".concat(this.getMenuPrefixCls(), "-item"));
return props;
}
}, {
key: "handleLoadData",
value: function handleLoadData(event) {
var loadData = this.props.loadData;
var dataSet = this.options;
var promises = [];
if (dataSet) {
var record = event.props.record;
promises.push(dataSet.queryMoreChild(record));
}
if (loadData) {
promises.push(loadData(event));
}
return Promise.all(promises);
}
}, {
key: "renderSelectAll",
value: function renderSelectAll() {// noop
}
}, {
key: "getMenu",
value: function getMenu() {
var menuProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var options = this.options;
var menuPrefixCls = this.getMenuPrefixCls();
var menuDisabled = this.disabled,
textField = this.textField,
selectedKeys = this.selectedKeys,
expandedKeys = this.expandedKeys,
multiple = this.multiple,
text = this.text,
_this$props = this.props,
dropdownMenuStyle = _this$props.dropdownMenuStyle,
_this$props$optionRen = _this$props.optionRenderer,
optionRenderer = _this$props$optionRen === void 0 ? _tree2.defaultRenderer : _this$props$optionRen,
optionsFilter = _this$props.optionsFilter,
treeDefaultExpandAll = _this$props.treeDefaultExpandAll,
treeDefaultExpandedKeys = _this$props.treeDefaultExpandedKeys,
treeCheckable = _this$props.treeCheckable,
async = _this$props.async,
loadData = _this$props.loadData;
/**
* fixed when ie the scroll width would cover the item width
*/
var IeMenuStyle = !this.dropdownMatchSelectWidth && (0, _isIE["default"])() ? {
padding: '.08rem'
} : {};
var treeData = (0, _util.getTreeNodes)(options, this.treeData, optionRenderer, this.handleTreeNode, async || !!loadData, textField, optionsFilter, this.matchRecordBySearch, text);
if (!treeData || !treeData.length) {
return /*#__PURE__*/_react["default"].createElement("div", {
className: menuPrefixCls
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(menuPrefixCls, "-item ").concat(menuPrefixCls, "-item-disabled")
}, this.loading ? ' ' : this.getNotFoundContent()));
}
if (options.paging && options.currentPage < options.totalPage) {
treeData.push({
key: _Select2.MORE_KEY,
eventKey: _Select2.MORE_KEY,
title: this.getPagingOptionContent(),
className: "".concat(menuPrefixCls, "-item ").concat(menuPrefixCls, "-item-more"),
isLeaf: true
});
}
var props = {};
if (expandedKeys) {
props.expandedKeys = expandedKeys.slice();
}
return /*#__PURE__*/_react["default"].createElement(_tree["default"], (0, _extends2["default"])({
ref: this.saveMenu,
ripple: true,
disabled: menuDisabled,
onMouseDown: _EventManager.preventDefault,
onSelect: treeCheckable ? this.handleTreeCheck : this.handleTreeSelect,
onCheck: this.handleTreeCheck,
onExpand: this.handleExpand,
style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, IeMenuStyle), dropdownMenuStyle),
selectable: true,
focusable: false,
treeData: treeData,
defaultExpandAll: treeDefaultExpandAll,
defaultExpandedKeys: treeDefaultExpandedKeys,
selectedKeys: selectedKeys,
checkedKeys: selectedKeys,
checkable: treeCheckable,
className: menuPrefixCls,
multiple: multiple,
loadData: async ? this.handleLoadData : loadData
}, props, menuProps));
}
}]);
return TreeSelect;
}(_Select2.Select);
TreeSelect.displayName = 'TreeSelect';
TreeSelect.defaultProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _Select2.Select.defaultProps), {}, {
suffixCls: 'tree-select',
dropdownMatchSelectWidth: false,
showCheckedStrategy: 'SHOW_ALL',
reverse: false
});
TreeSelect.TreeNode = _TreeNode["default"];
(0, _tslib.__decorate)([_mobx.observable], TreeSelect.prototype, "expandedKeys", void 0);
(0, _tslib.__decorate)([_mobx.computed], TreeSelect.prototype, "parentField", null);
(0, _tslib.__decorate)([_mobx.computed], TreeSelect.prototype, "idField", null);
(0, _tslib.__decorate)([_mobx.computed], TreeSelect.prototype, "options", null);
(0, _tslib.__decorate)([_mobx.computed], TreeSelect.prototype, "treeData", null);
(0, _tslib.__decorate)([_mobx.computed], TreeSelect.prototype, "selectedKeys", null);
(0, _tslib.__decorate)([_mobx.action], TreeSelect.prototype, "handleSearch", null);
(0, _tslib.__decorate)([_autobind["default"], _mobx.action], TreeSelect.prototype, "handleExpand", null);
(0, _tslib.__decorate)([_mobx.computed], TreeSelect.prototype, "multiple", null);
(0, _tslib.__decorate)([_autobind["default"]], TreeSelect.prototype, "handleTreeSelect", null);
(0, _tslib.__decorate)([_autobind["default"]], TreeSelect.prototype, "handleTreeCheck", null);
(0, _tslib.__decorate)([_autobind["default"]], TreeSelect.prototype, "handleTreeNode", null);
(0, _tslib.__decorate)([_autobind["default"]], TreeSelect.prototype, "handleLoadData", null);
(0, _tslib.__decorate)([_autobind["default"]], TreeSelect.prototype, "getMenu", null);
TreeSelect = (0, _tslib.__decorate)([_mobxReact.observer], TreeSelect);
var _default = TreeSelect;
exports["default"] = _default;
//# sourceMappingURL=TreeSelect.js.map