UNPKG

choerodon-ui

Version:

An enterprise-class UI design language and React-based implementation

407 lines (356 loc) 15 kB
"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