amis-ui 2.8.0 → 3.0.0

package/esm/components/Tree.js

@@ -1,11 +1,11 @@
 /**
- * amis-ui v2.8.0
+ * amis-ui v3.0.0
  * Copyright 2018-2023 fex
  */
 
 import { __extends, __assign, __values, __decorate, __metadata } from 'tslib';
 import React__default from 'react';
-import { eachTree, getTreeAncestors, getTreeParent, findTreeIndex, isVisible, highlight, hasAbility, autobind, themeable, localeable } from 'amis-core';
+import { eachTree, getTreeAncestors, getTreeParent, findTreeIndex, isVisible, highlight, hasAbility, flattenTree, autobind, themeable, localeable } from 'amis-core';
 import { value2array } from './Select.js';
 import { Icon, getIcon } from './icons.js';
 import Checkbox from './Checkbox.js';
@@ -84,7 +84,9 @@ var TreeSelector = /** @class */ (function (_super) {
                     multiple: props.multiple,
                     delimiter: props.delimiter,
                     valueField: props.valueField,
-                    options: props.options
+                    pathSeparator: props.pathSeparator,
+                    options: props.options,
+                    labelField: props.labelField
                 }, props.enableNodePath)
             });
         }
@@ -145,8 +147,7 @@ var TreeSelector = /** @class */ (function (_super) {
             onDeferLoad === null || onDeferLoad === void 0 ? void 0 : onDeferLoad(node);
             return;
         }
-        // TODO: 操作store区更新option属性
-        // hack: 在node上直接添加属性
+        // ！ hack: 在node上直接添加属性，options 在更新的时候旧的字段会保留
         if (node.defer && node.loaded) {
             node[unfoldedField] = !unfolded.get(node);
         }
@@ -212,7 +213,7 @@ var TreeSelector = /** @class */ (function (_super) {
             }
             return;
         }
-        if (onlyLeaf && node.children) {
+        if (onlyLeaf && (Array.isArray(node.children) && node.children.length)) {
             return;
         }
         this.setState({
@@ -311,16 +312,17 @@ var TreeSelector = /** @class */ (function (_super) {
         }
         this.setState({
             value: value
-        }, function () {
-            var joinValues = props.joinValues, extractValue = props.extractValue, valueField = props.valueField, delimiter = props.delimiter, onChange = props.onChange, enableNodePath = props.enableNodePath;
-            onChange(enableNodePath
-                ? _this.transform2NodePath(value)
-                : joinValues
-                    ? value.map(function (item) { return item[valueField]; }).join(delimiter)
-                    : extractValue
-                        ? value.map(function (item) { return item[valueField]; })
-                        : value);
-        });
+        }, function () { return _this.fireChange(value); });
+    };
+    TreeSelector.prototype.fireChange = function (value) {
+        var _a = this.props, joinValues = _a.joinValues, extractValue = _a.extractValue, valueField = _a.valueField, delimiter = _a.delimiter, onChange = _a.onChange, enableNodePath = _a.enableNodePath;
+        onChange(enableNodePath
+            ? this.transform2NodePath(value)
+            : joinValues
+                ? value.map(function (item) { return item[valueField]; }).join(delimiter)
+                : extractValue
+                    ? value.map(function (item) { return item[valueField]; })
+                    : value);
     };
     TreeSelector.prototype.handleAdd = function (parent) {
         var _this = this;
@@ -344,10 +346,12 @@ var TreeSelector = /** @class */ (function (_super) {
                 try {
                     for (var _b = __values(_this.state.flattenedOptions), _c = _b.next(); !_c.done; _c = _b.next()) {
                         var option = _c.value;
-                        result.push(option);
                         if (option === parent) {
                             result.push(__assign(__assign({}, option), { isAdding: true }));
                         }
+                        else {
+                            result.push(option);
+                        }
                     }
                 }
                 catch (e_1_1) { e_1 = { error: e_1_1 }; }
@@ -543,26 +547,25 @@ var TreeSelector = /** @class */ (function (_super) {
         };
     };
     /**
+     * 将树形接口转换为平铺结构，以支持虚拟列表
      * TODO: this.unfolded => reaction 更加合理
      */
     TreeSelector.prototype.flattenOptions = function (props, initial) {
         var _this = this;
         var flattenedOptions = [];
-        eachTree((props === null || props === void 0 ? void 0 : props.options) || this.props.options, function (item, key, level, paths) {
+        eachTree((props === null || props === void 0 ? void 0 : props.options) || this.props.options, function (item, index, level, paths) {
             var parent = paths[paths.length - 2];
             if (!isVisible(item)) {
                 return;
             }
             if (paths.length === 1) {
                 // 父节点
-                item.key = key;
                 flattenedOptions.push(item);
             }
             else if (_this.isUnfolded(parent)) {
                 _this.relations.set(item, parent);
                 // 父节点是展开的状态
                 item.level = level;
-                item.key = "".concat(parent.key, "-").concat(key);
                 flattenedOptions.push(item);
             }
         });
@@ -702,7 +705,7 @@ var TreeSelector = /** @class */ (function (_super) {
     TreeSelector.prototype.renderItem = function (_a) {
         var _this = this;
         var index = _a.index, style = _a.style;
-        var _b = this.props, itemClassName = _b.itemClassName, showIcon = _b.showIcon, showRadio = _b.showRadio, multiple = _b.multiple, labelField = _b.labelField, iconField = _b.iconField, cascade = _b.cascade, cx = _b.classnames, highlightTxt = _b.highlightTxt, creatable = _b.creatable, editable = _b.editable, removable = _b.removable, createTip = _b.createTip, editTip = _b.editTip, removeTip = _b.removeTip, __ = _b.translate, itemRender = _b.itemRender, draggable = _b.draggable, loadingConfig = _b.loadingConfig, enableDefaultIcon = _b.enableDefaultIcon;
+        var _b = this.props, itemClassName = _b.itemClassName, showIcon = _b.showIcon, showRadio = _b.showRadio, multiple = _b.multiple, labelField = _b.labelField, iconField = _b.iconField, cascade = _b.cascade, cx = _b.classnames, highlightTxt = _b.highlightTxt, creatable = _b.creatable, editable = _b.editable, removable = _b.removable, createTip = _b.createTip, editTip = _b.editTip, removeTip = _b.removeTip, __ = _b.translate, itemRender = _b.itemRender, draggable = _b.draggable, loadingConfig = _b.loadingConfig, enableDefaultIcon = _b.enableDefaultIcon, valueField = _b.valueField;
         var item = this.state.flattenedOptions[index];
         if (!item) {
             return null;
@@ -714,7 +717,12 @@ var TreeSelector = /** @class */ (function (_super) {
         var checkedInValue = !!~this.state.value.indexOf(item);
         var checkbox = multiple ? (React__default.createElement(Checkbox, { size: "sm", disabled: disabled, checked: checked || partial, partial: partial, onChange: this.handleCheck.bind(this, item, !checked) })) : showRadio ? (React__default.createElement(Checkbox, { size: "sm", disabled: disabled, checked: checked, onChange: this.handleSelect.bind(this, item) })) : null;
         var isLeaf = (!item.children || !item.children.length) && !item.placeholder;
-        var iconValue = item[iconField] || (enableDefaultIcon !== false ? (item.children ? 'folder' : 'file') : false);
+        var iconValue = item[iconField] ||
+            (enableDefaultIcon !== false
+                ? (Array.isArray(item.children) && item.children.length)
+                    ? 'folder'
+                    : 'file'
+                : false);
         var level = item.level ? item.level - 1 : 0;
         var body = null;
         if (isEditing && editingItem === item) {
@@ -740,7 +748,7 @@ var TreeSelector = /** @class */ (function (_super) {
                     React__default.createElement(Icon, { icon: "down-arrow-bold", className: "icon" }))) : (React__default.createElement("span", { className: cx('Tree-itemArrowPlaceholder') })),
                 checkbox,
                 React__default.createElement("div", { className: cx('Tree-itemLabel-item') },
-                    showIcon ? (React__default.createElement("i", { className: cx("Tree-itemIcon ".concat(item.children ? 'Tree-folderIcon' : 'Tree-leafIcon')), onClick: function () {
+                    showIcon ? (React__default.createElement("i", { className: cx("Tree-itemIcon ".concat((Array.isArray(item.children) && item.children.length) ? 'Tree-folderIcon' : 'Tree-leafIcon')), onClick: function () {
                             return !disabled &&
                                 (multiple
                                     ? _this.handleCheck(item, !checked)
@@ -751,13 +759,17 @@ var TreeSelector = /** @class */ (function (_super) {
                                 (multiple
                                     ? _this.handleCheck(item, !checked)
                                     : _this.handleSelect(item));
-                        }, title: item[labelField] }, itemRender ? itemRender(item, {
-                        index: item.key,
-                        multiple: multiple,
-                        checked: checked,
-                        onChange: function () { return _this.handleCheck(item, !checked); },
-                        disabled: disabled || item.disabled
-                    }) : (highlightTxt ? highlight("".concat(item[labelField]), highlightTxt) : "".concat(item[labelField]))),
+                        }, title: item[labelField] }, itemRender
+                        ? itemRender(item, {
+                            index: index,
+                            multiple: multiple,
+                            checked: checked,
+                            onChange: function () { return _this.handleCheck(item, !checked); },
+                            disabled: disabled || item.disabled
+                        })
+                        : highlightTxt
+                            ? highlight("".concat(item[labelField]), highlightTxt)
+                            : "".concat(item[labelField])),
                     !disabled &&
                         !isAdding &&
                         !isEditing &&
@@ -769,20 +781,63 @@ var TreeSelector = /** @class */ (function (_super) {
                         editable && hasAbility(item, 'editable') ? (React__default.createElement("a", { onClick: this.handleEdit.bind(this, item), "data-tooltip": __(editTip), "data-position": "left" },
                             React__default.createElement(Icon, { icon: "new-edit", className: "icon" }))) : null)) : null)));
         }
-        return (React__default.createElement("li", { key: item.key, className: cx("Tree-item ".concat(itemClassName || ''), {
+        return (React__default.createElement("li", { key: "".concat(item[valueField || 'value'], "-").concat(index), className: cx("Tree-item ".concat(itemClassName || ''), {
                 'Tree-item--isLeaf': isLeaf,
                 'is-child': this.relations.get(item)
             }), style: __assign(__assign({}, style), { left: "calc(".concat(level, " * var(--Tree-indent))"), width: "calc(100% - ".concat(level, " * var(--Tree-indent))") }) }, body));
     };
+    TreeSelector.prototype.isEmptyOrNotExist = function (obj) {
+        return obj === '' || obj === undefined || obj === null;
+    };
+    TreeSelector.prototype.getAvailableOptions = function () {
+        var _this = this;
+        var _a = this.props, options = _a.options, onlyChildren = _a.onlyChildren, valueField = _a.valueField;
+        var flattendOptions = flattenTree(options, function (item) {
+            return onlyChildren
+                ? item.children
+                    ? null
+                    : item
+                : _this.isEmptyOrNotExist(item[valueField || 'value'])
+                    ? null
+                    : item;
+        }).filter(function (a) { return a && !a.disabled; });
+        return flattendOptions;
+    };
+    TreeSelector.prototype.handleCheckAll = function (availableOptions, checkedAll) {
+        var _this = this;
+        this.setState({
+            value: checkedAll ? [] : availableOptions
+        }, function () { return _this.fireChange(checkedAll ? [] : availableOptions); });
+    };
+    TreeSelector.prototype.renderCheckAll = function () {
+        var _this = this;
+        var _a = this.props, multiple = _a.multiple, checkAll = _a.checkAll, checkAllLabel = _a.checkAllLabel, cx = _a.classnames, __ = _a.translate, disabled = _a.disabled;
+        if (!multiple || !checkAll) {
+            return null;
+        }
+        var availableOptions = this.getAvailableOptions();
+        var checkedAll = availableOptions.every(function (option) {
+            return _this.isItemChecked(option);
+        });
+        var checkedPartial = availableOptions.some(function (option) {
+            return _this.isItemChecked(option);
+        });
+        return (React__default.createElement("div", { className: cx('Tree-itemLabel'), onClick: function () { return _this.handleCheckAll(availableOptions, checkedAll); } },
+            React__default.createElement(Checkbox, { size: "sm", disabled: disabled, checked: checkedPartial, partial: checkedPartial && !checkedAll }),
+            React__default.createElement("div", { className: cx('Tree-itemLabel-item') },
+                React__default.createElement("span", { className: cx('Tree-itemText') }, __(checkAllLabel)))));
+    };
     TreeSelector.prototype.renderList = function (list, value) {
         var _this = this;
         var _a = this.props, virtualThreshold = _a.virtualThreshold, _b = _a.itemHeight, itemHeight = _b === void 0 ? 32 : _b;
         if (virtualThreshold && list.length > virtualThreshold) {
-            return (React__default.createElement(VirtualList, { height: list.length > 8 ? 266 : list.length * itemHeight, itemCount: list.length, itemSize: itemHeight, 
+            return (React__default.createElement(VirtualList, { height: list.length > 8 ? 266 : list.length * itemHeight, itemCount: list.length, prefix: this.renderCheckAll(), itemSize: itemHeight, 
                 //! hack: 让 VirtualList 重新渲染
                 renderItem: this.renderItem.bind(this) }));
         }
-        return list.map(function (item, index) { return _this.renderItem({ index: index }); });
+        return (React__default.createElement(React__default.Fragment, null,
+            this.renderCheckAll(),
+            list.map(function (item, index) { return _this.renderItem({ index: index }); })));
     };
     TreeSelector.prototype.render = function () {
         var _a = this.props, className = _a.className, placeholder = _a.placeholder, hideRoot = _a.hideRoot, rootLabel = _a.rootLabel, showOutline = _a.showOutline, showIcon = _a.showIcon, cx = _a.classnames, creatable = _a.creatable, rootCreatable = _a.rootCreatable, rootCreateTip = _a.rootCreateTip, disabled = _a.disabled, draggable = _a.draggable, __ = _a.translate;
@@ -958,6 +1013,12 @@ var TreeSelector = /** @class */ (function (_super) {
         __metadata("design:paramtypes", [Object]),
         __metadata("design:returntype", void 0)
     ], TreeSelector.prototype, "renderItem", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Array, Boolean]),
+        __metadata("design:returntype", void 0)
+    ], TreeSelector.prototype, "handleCheckAll", null);
     __decorate([
         autobind,
         __metadata("design:type", Function),