choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
646 lines (553 loc) • 20.6 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import _typeof from "@babel/runtime/helpers/typeof";
var _excluded = ["dataSet", "renderer", "titleField", "treeNodeRenderer", "onTreeNode", "loadData", "async", "selectable", "filter"];
import { __decorate } from "tslib";
import React, { Component } from 'react';
import { observer } from 'mobx-react';
import { action, computed, observable, runInAction } from 'mobx';
import defaultTo from 'lodash/defaultTo';
import noop from 'lodash/noop';
import xor from 'lodash/xor';
import isNil from 'lodash/isNil';
import C7NTree, { TreeNode } from '../../../es/tree';
import autobind from '../_util/autobind';
import { getKey, getTreeNodes } from './util';
import { BooleanValue, DataSetEvents, DataSetSelection } from '../data-set/enum';
import Spin from '../spin';
export function defaultRenderer(_ref) {
var text = _ref.text;
return text;
}
function defaultNodeCover() {
return {};
}
function getCheckedKeys(checkedKeys) {
return Array.isArray(checkedKeys) ? checkedKeys : _typeof(checkedKeys) === 'object' ? checkedKeys.checked : [];
}
var Tree = /*#__PURE__*/function (_Component) {
_inherits(Tree, _Component);
var _super = _createSuper(Tree);
function Tree(props, context) {
var _this;
_classCallCheck(this, Tree);
_this = _super.call(this, props, context);
_this.inCheckExpansion = false;
runInAction(function () {
_this.stateCheckedKeys = [];
_this.stateExpandedKeys = [];
_this.stateLoadedKeys = [];
});
return _this;
}
_createClass(Tree, [{
key: "componentWillMount",
value: function componentWillMount() {
this.handleDataSetLoad();
this.processDataSetListener(true);
}
}, {
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(nextProps) {
var _this$props = this.props,
defaultExpandAll = _this$props.defaultExpandAll,
defaultSelectedKeys = _this$props.defaultSelectedKeys,
defaultExpandedKeys = _this$props.defaultExpandedKeys,
defaultCheckedKeys = _this$props.defaultCheckedKeys;
if (defaultExpandAll !== nextProps.defaultExpandAll || defaultExpandedKeys !== nextProps.defaultExpandedKeys || defaultCheckedKeys !== nextProps.defaultCheckKeys || defaultSelectedKeys !== nextProps.defaultSelectedKeys) {
this.processDataSetListener(false);
this.processDataSetListener(true);
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.processDataSetListener(false);
}
}, {
key: "processDataSetListener",
value: function processDataSetListener(flag) {
var _this$props2 = this.props,
dataSet = _this$props2.dataSet,
selectable = _this$props2.selectable,
checkable = _this$props2.checkable;
if (dataSet) {
var handler = flag ? dataSet.addEventListener : dataSet.removeEventListener;
handler.call(dataSet, DataSetEvents.load, this.handleDataSetLoad);
if (checkable && selectable === false) {
handler.call(dataSet, DataSetEvents.batchSelect, this.handleBatchSelect);
handler.call(dataSet, DataSetEvents.batchUnSelect, this.handleUnBatchSelect);
}
}
}
}, {
key: "handleDataSetLoad",
value: function handleDataSetLoad() {
this.initDefaultExpandedRows();
this.initDefaultCheckRows();
this.initDefaultSelectRows();
this.initDefaultLoadedRows();
}
}, {
key: "initDefaultExpandedRows",
value: function initDefaultExpandedRows() {
var _this$props3 = this.props,
defaultExpandAll = _this$props3.defaultExpandAll,
dataSet = _this$props3.dataSet,
defaultExpandedKeys = _this$props3.defaultExpandedKeys;
this.stateExpandedKeys = this.dealDefaultCheckExpand(dataSet, defaultExpandedKeys, defaultExpandAll);
}
}, {
key: "initDefaultCheckRows",
value: function initDefaultCheckRows() {
var _this$props4 = this.props,
dataSet = _this$props4.dataSet,
checkable = _this$props4.checkable,
selectable = _this$props4.selectable,
defaultCheckedKeys = _this$props4.defaultCheckedKeys;
this.stateCheckedKeys = this.dealDefaultCheckExpand(dataSet, defaultCheckedKeys);
if (dataSet) {
var _dataSet$props = dataSet.props,
checkField = _dataSet$props.checkField,
idField = _dataSet$props.idField;
if (checkable && selectable === false) {
if (checkField) {
var field = dataSet.getField(checkField);
dataSet.forEach(function (record) {
if (record.get(checkField) === (field ? field.get(BooleanValue.trueValue, record) : true)) {
record.isSelected = true;
}
});
} else {
this.stateCheckedKeys = dataSet.selected.map(function (selected) {
return String(idField ? selected.get(idField) : selected.id);
});
}
}
}
}
}, {
key: "initDefaultLoadedRows",
value: function initDefaultLoadedRows() {
this.stateLoadedKeys = [];
}
}, {
key: "initDefaultSelectRows",
value: function initDefaultSelectRows() {
var _this$props5 = this.props,
dataSet = _this$props5.dataSet,
defaultSelectedKeys = _this$props5.defaultSelectedKeys;
if (dataSet && defaultSelectedKeys) {
var idField = dataSet.props.idField;
defaultSelectedKeys.map(function (selectKey) {
var found = dataSet.find(function (record) {
return selectKey === String(idField ? record.get(idField) : record.id);
});
if (found) {
dataSet.select(found);
}
return null;
});
}
}
/**
* 处理tree的props expand check的默认事件
* @param dataSet
* @param defaultAll
* @param defaultKeys
*/
}, {
key: "dealDefaultCheckExpand",
value: function dealDefaultCheckExpand(dataSet, defaultKeys, defaultAll) {
var defaultStateKeys = [];
if (dataSet) {
var _dataSet$props2 = dataSet.props,
idField = _dataSet$props2.idField,
expandField = _dataSet$props2.expandField;
if (defaultAll && !expandField) {
defaultStateKeys = dataSet.reduce(function (array, record) {
if (record.children) {
array.push(getKey(record, idField));
}
return array;
}, []);
} else if (defaultKeys && !expandField) {
defaultStateKeys = dataSet.reduce(function (array, record) {
defaultKeys.map(function (key) {
if (getKey(record, idField) === key) {
array.push(key);
}
return null;
});
return array;
}, []);
}
}
return defaultStateKeys;
}
}, {
key: "expandedKeys",
get: function get() {
var dataSet = this.props.dataSet;
if (dataSet) {
var _dataSet$props3 = dataSet.props,
expandField = _dataSet$props3.expandField,
idField = _dataSet$props3.idField;
if (expandField) {
var keys = [];
dataSet.forEach(function (record) {
if (record.isExpanded) {
keys.push(getKey(record, idField));
}
});
return keys;
}
}
return this.stateExpandedKeys;
}
}, {
key: "checkedKeys",
get: function get() {
var dataSet = this.props.dataSet;
if (dataSet) {
var _dataSet$props4 = dataSet.props,
checkField = _dataSet$props4.checkField,
idField = _dataSet$props4.idField;
if (checkField) {
var keys = [];
var field = dataSet.getField(checkField);
dataSet.forEach(function (record) {
var key = getKey(record, idField);
if (record.get(checkField) === (field ? field.get(BooleanValue.trueValue, record) : true)) {
keys.push(key);
}
});
return keys;
}
}
return this.stateCheckedKeys;
}
}, {
key: "selectedKeys",
get: function get() {
var dataSet = this.props.dataSet;
if (dataSet) {
var idField = dataSet.props.idField;
return dataSet.selected.map(function (record) {
return getKey(record, idField);
});
}
return [];
}
}, {
key: "checkStrictly",
get: function get() {
var _this$props6 = this.props,
dataSet = _this$props6.dataSet,
checkStrictly = _this$props6.checkStrictly;
if (dataSet && !isNil(dataSet.props.treeCheckStrictly)) {
return dataSet.props.treeCheckStrictly;
}
if (dataSet && dataSet.props.checkField) {
return false;
}
return checkStrictly;
}
}, {
key: "setExpand",
value: function setExpand(eventObj) {
var dataSet = this.props.dataSet;
if (dataSet) {
var _dataSet$props5 = dataSet.props,
expandField = _dataSet$props5.expandField,
idField = _dataSet$props5.idField;
if (expandField) {
var node = eventObj.node,
expanded = eventObj.expanded;
var eventKey = node.eventKey;
var found = dataSet.find(function (record) {
return eventKey === getKey(record, idField);
});
if (found) {
found.isExpanded = !!expanded;
return false;
}
}
}
return true;
}
}, {
key: "setCheck",
value: function setCheck(eventObj) {
var dataSet = this.props.dataSet;
if (dataSet) {
var _dataSet$props6 = dataSet.props,
checkField = _dataSet$props6.checkField,
idField = _dataSet$props6.idField;
if (checkField) {
var node = eventObj.node,
checked = eventObj.checked;
var eventKey = node.eventKey;
var found = dataSet.find(function (record) {
return eventKey === String(idField ? record.get(idField) : record.id);
});
if (found) {
var field = dataSet.getField(checkField);
found.set(checkField, field ? checked ? field.get(BooleanValue.trueValue, found) : field.get(BooleanValue.falseValue, found) : checked);
return false;
}
}
}
return true;
}
}, {
key: "handleExpand",
value: function handleExpand(expandedKeys, eventObj) {
var _this2 = this;
if (this.setExpand(eventObj)) {
runInAction(function () {
_this2.stateExpandedKeys = expandedKeys;
});
}
var _this$props$onExpand = this.props.onExpand,
onExpand = _this$props$onExpand === void 0 ? noop : _this$props$onExpand;
onExpand(expandedKeys, eventObj);
}
}, {
key: "handleCheck",
value: function handleCheck(checkedKeys, eventObj, oldCheckedKeys) {
var _this3 = this;
var checkedKeysArr = getCheckedKeys(checkedKeys);
var oldCheckedKeysArr = getCheckedKeys(oldCheckedKeys);
this.inCheckExpansion = true;
var _this$props7 = this.props,
dataSet = _this$props7.dataSet,
selectable = _this$props7.selectable;
if (this.setCheck(eventObj)) {
runInAction(function () {
_this3.stateCheckedKeys = checkedKeysArr;
});
}
if (dataSet && selectable === false) {
var idField = dataSet.props.idField;
var diffKeys = xor(oldCheckedKeysArr, checkedKeysArr);
dataSet.forEach(function (record) {
diffKeys.forEach(function (key) {
if (getKey(record, idField) === key) {
if (!record.isSelected) {
dataSet.select(record);
} else {
dataSet.unSelect(record);
}
}
});
});
}
var _this$props$onCheck = this.props.onCheck,
onCheck = _this$props$onCheck === void 0 ? noop : _this$props$onCheck;
onCheck(checkedKeys, eventObj, oldCheckedKeys);
this.inCheckExpansion = false;
}
}, {
key: "handleBatchSelect",
value: function handleBatchSelect(_ref2) {
var dataSet = _ref2.dataSet,
records = _ref2.records;
this.handleDataSetSelect({
dataSet: dataSet,
records: records
}, true);
}
}, {
key: "handleUnBatchSelect",
value: function handleUnBatchSelect(_ref3) {
var dataSet = _ref3.dataSet,
records = _ref3.records;
this.handleDataSetSelect({
dataSet: dataSet,
records: records
}, false);
}
}, {
key: "handleDataSetSelect",
value: function handleDataSetSelect(_ref4, checked) {
var _this4 = this;
var dataSet = _ref4.dataSet,
records = _ref4.records;
if (!this.inCheckExpansion) {
var _dataSet$props7 = dataSet.props,
checkField = _dataSet$props7.checkField,
idField = _dataSet$props7.idField;
if (checkField) {
var field = dataSet.getField(checkField);
records.forEach(function (record) {
record.set(checkField, field ? checked ? field.get(BooleanValue.trueValue, record) : field.get(BooleanValue.falseValue, record) : checked);
});
} else {
runInAction(function () {
_this4.stateCheckedKeys = dataSet.selected.map(function (selected) {
return String(idField ? selected.get(idField) : selected.id);
});
});
}
}
}
}, {
key: "handleSelect",
value: function handleSelect(selectedKeys, eventObj) {
var _this$props8 = this.props,
dataSet = _this$props8.dataSet,
_this$props8$onSelect = _this$props8.onSelect,
onSelect = _this$props8$onSelect === void 0 ? noop : _this$props8$onSelect;
if (dataSet) {
var idField = dataSet.props.idField;
var node = eventObj.node,
selected = eventObj.selected;
var eventKey = node.eventKey;
var found = dataSet.find(function (record) {
return eventKey === String(idField ? record.get(idField) : record.id);
});
if (found) {
if (selected) {
dataSet.select(found);
} else {
dataSet.unSelect(found);
}
}
onSelect(selectedKeys, eventObj);
}
}
}, {
key: "handleLoadData",
value: function handleLoadData(event) {
var _this5 = this;
var _this$props9 = this.props,
dataSet = _this$props9.dataSet,
loadData = _this$props9.loadData,
async = _this$props9.async;
var promises = [];
if (async && dataSet) {
var record = event.props.record;
promises.push(dataSet.queryMoreChild(record, dataSet.currentPage));
}
if (loadData) {
promises.push(loadData(event));
}
return Promise.all(promises).then(action(function () {
_this5.stateLoadedKeys.push(event.key);
_this5.handleAfterLoadData(event);
}));
}
}, {
key: "handleAfterLoadData",
value: function handleAfterLoadData(event) {
var _this$props10 = this.props,
dataSet = _this$props10.dataSet,
selectable = _this$props10.selectable;
if (dataSet && selectable === false) {
var _dataSet$props8 = dataSet.props,
checkField = _dataSet$props8.checkField,
idField = _dataSet$props8.idField;
var loadRootRecord = dataSet.find(function (record) {
return getKey(record, idField) === String(event.key);
});
if (!loadRootRecord) {
return;
}
var loadRecords = defaultTo(loadRootRecord.children, []);
if (checkField) {
var field = dataSet.getField(checkField);
loadRecords.forEach(function (record) {
if (record.get(checkField) === (field ? field.get(BooleanValue.trueValue, record) : true)) {
dataSet.select(record);
}
});
if (!loadRootRecord.isSelected && loadRecords.every(function (record) {
return record.isSelected;
})) {
dataSet.select(loadRootRecord);
} else if (loadRootRecord.isSelected && loadRecords.some(function (record) {
return !record.isSelected;
})) {
dataSet.unSelect(loadRootRecord);
}
} else if (event.checked) {
loadRecords.forEach(function (record) {
dataSet.select(record);
});
}
}
}
}, {
key: "render",
value: function render() {
var _this$props11 = this.props,
dataSet = _this$props11.dataSet,
_this$props11$rendere = _this$props11.renderer,
renderer = _this$props11$rendere === void 0 ? defaultRenderer : _this$props11$rendere,
titleField = _this$props11.titleField,
treeNodeRenderer = _this$props11.treeNodeRenderer,
onTreeNode = _this$props11.onTreeNode,
loadData = _this$props11.loadData,
async = _this$props11.async,
selectable = _this$props11.selectable,
optionsFilter = _this$props11.filter,
otherProps = _objectWithoutProperties(_this$props11, _excluded);
if (dataSet) {
var props = {};
props.treeData = getTreeNodes(dataSet, dataSet.treeData, renderer, onTreeNode || treeNodeRenderer || defaultNodeCover, async || !!loadData, titleField, optionsFilter) || [];
props.onExpand = this.handleExpand;
props.onCheck = this.handleCheck;
props.onSelect = this.handleSelect;
props.selectable = selectable;
props.loadData = this.handleLoadData;
props.expandedKeys = this.expandedKeys.slice();
if (!('checkedKeys' in otherProps)) {
props.checkedKeys = this.checkedKeys.slice();
}
if (!('multiple' in otherProps)) {
props.multiple = dataSet.props.selection === DataSetSelection.multiple;
}
if (!('selectedKeys' in otherProps)) {
props.selectedKeys = this.selectedKeys.slice();
}
if (!('loadedKeys' in otherProps)) {
props.loadedKeys = this.stateLoadedKeys.slice();
}
props.checkStrictly = this.checkStrictly;
return /*#__PURE__*/React.createElement(Spin, {
dataSet: dataSet
}, /*#__PURE__*/React.createElement(C7NTree, _extends({}, otherProps, props)));
}
return /*#__PURE__*/React.createElement(C7NTree, _extends({}, otherProps));
}
}]);
return Tree;
}(Component);
Tree.displayName = 'Tree<PRO>';
Tree.TreeNode = TreeNode;
__decorate([observable], Tree.prototype, "stateCheckedKeys", void 0);
__decorate([observable], Tree.prototype, "stateExpandedKeys", void 0);
__decorate([observable], Tree.prototype, "stateLoadedKeys", void 0);
__decorate([autobind], Tree.prototype, "handleDataSetLoad", null);
__decorate([action], Tree.prototype, "initDefaultExpandedRows", null);
__decorate([action], Tree.prototype, "initDefaultCheckRows", null);
__decorate([action], Tree.prototype, "initDefaultLoadedRows", null);
__decorate([action], Tree.prototype, "initDefaultSelectRows", null);
__decorate([computed], Tree.prototype, "expandedKeys", null);
__decorate([computed], Tree.prototype, "selectedKeys", null);
__decorate([autobind], Tree.prototype, "handleExpand", null);
__decorate([autobind], Tree.prototype, "handleCheck", null);
__decorate([autobind], Tree.prototype, "handleBatchSelect", null);
__decorate([autobind], Tree.prototype, "handleUnBatchSelect", null);
__decorate([autobind], Tree.prototype, "handleDataSetSelect", null);
__decorate([autobind], Tree.prototype, "handleSelect", null);
__decorate([autobind], Tree.prototype, "handleLoadData", null);
__decorate([autobind], Tree.prototype, "handleAfterLoadData", null);
Tree = __decorate([observer], Tree);
export default Tree;
//# sourceMappingURL=index.js.map