amis-ui 6.13.0-beta.9 → 6.13.0

package/lib/components/Tree.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v6.13.0-beta.9
+ * amis-ui v6.13.0
  * Copyright 2018-2025 fex
  */
 
@@ -38,7 +38,7 @@ var TreeSelector = /** @class */ (function (_super) {
             y: 0
         };
         _this.root = React__default["default"].createRef();
-        _this.virtualListRef = React__default["default"].createRef();
+        _this.virtualListRef = null;
         var value = Select.value2array(props.value, {
             multiple: props.multiple,
             delimiter: props.delimiter,
@@ -57,27 +57,30 @@ var TreeSelector = /** @class */ (function (_super) {
             isEditing: false,
             editingItem: null,
             dropIndicator: undefined,
-            virtualHeight: 0
+            virtualHeight: 0,
+            itemHeight: 0
         };
         _this.syncUnFolded(props, undefined, true);
         _this.flattenOptions(props, true);
         return _this;
     }
     TreeSelector.prototype.componentDidMount = function () {
-        var _this = this;
-        var _a, _b;
+        var _a, _b, _c;
         var enableNodePath = this.props.enableNodePath;
         // onRef只有渲染器的情况才会使用
         (_b = (_a = this.props).onRef) === null || _b === void 0 ? void 0 : _b.call(_a, this);
         enableNodePath && this.expandLazyLoadNodes();
-        this.handleVirtualHeight();
-        this.unSensor = amisCore.resizeSensor(this.root.current, function () {
-            _this.handleVirtualHeight();
-        }, false, 'height');
+        var treeElement = this.root.current;
+        treeElement =
+            ((_c = treeElement === null || treeElement === void 0 ? void 0 : treeElement.parentElement) === null || _c === void 0 ? void 0 : _c.matches('.cxd-TreeControl')) &&
+                treeElement.parentElement.childElementCount === 1
+                ? treeElement.parentElement
+                : treeElement;
+        this.unSensor = amisCore.resizeSensor(treeElement, this.handleVirtualHeight, false, 'height');
     };
     TreeSelector.prototype.componentDidUpdate = function (prevProps, prevState) {
         var props = this.props;
-        var state = this.state;
+        this.state;
         if (prevProps.options !== props.options) {
             this.syncUnFolded(props);
             this.flattenOptions(props);
@@ -97,10 +100,6 @@ var TreeSelector = /** @class */ (function (_super) {
                 valueSet: new Set(newValue)
             });
         }
-        if (prevState.isAdding !== state.isAdding ||
-            prevState.flattenedOptions !== state.flattenedOptions) {
-            this.handleVirtualHeight();
-        }
     };
     TreeSelector.prototype.componentWillUnmount = function () {
         // clear data
@@ -120,6 +119,10 @@ var TreeSelector = /** @class */ (function (_super) {
         });
         onExpandTree === null || onExpandTree === void 0 ? void 0 : onExpandTree(nodePathArr);
     };
+    TreeSelector.prototype.virtualListRefSetter = function (ref) {
+        this.virtualListRef = ref;
+        ref && this.handleVirtualHeight();
+    };
     TreeSelector.prototype.syncUnFolded = function (props, unfoldedLevel, initial) {
         // 传入默认展开层级需要重新初始化unfolded
         var initFoldedLevel = typeof unfoldedLevel !== 'undefined';
@@ -785,7 +788,7 @@ var TreeSelector = /** @class */ (function (_super) {
     };
     TreeSelector.prototype.renderItem = function (_a) {
         var _this = this;
-        var index = _a.index, style = _a.style;
+        var index = _a.index, style = _a.style, rest = tslib.__rest(_a, ["index", "style"]);
         var _b = this.props, itemClassName = _b.itemClassName, showIcon = _b.showIcon, showRadio = _b.showRadio, multiple = _b.multiple, labelField = _b.labelField, iconField = _b.iconField, deferField = _b.deferField, 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, mobileUI = _b.mobileUI, testIdBuilder = _b.testIdBuilder, itemActionsRender = _b.itemActionsRender, actionClassName = _b.actionClassName;
         var item = this.state.flattenedOptions[index];
         if (!item) {
@@ -863,10 +866,10 @@ var TreeSelector = /** @class */ (function (_super) {
                                 _J$X_(icons.Icon, { icon: "new-edit", className: "icon" })))) : null,
                         itemActionsRender && (_J$X_("div", { className: cx('Tree-itemActions') }, itemActionsRender(item, tslib.__assign(tslib.__assign({}, item), { index: index, multiple: multiple, checked: checked, labelField: labelField, onChange: function () { return _this.handleCheck(item, !checked); }, disabled: disabled || item.disabled, classnames: cx })))))) : null)));
         }
-        return (_J$X_("li", tslib.__assign({ key: "".concat(item[valueField || 'value'], "-").concat(index), className: cx("Tree-item ".concat(itemClassName || ''), {
+        return (_J$X_("li", tslib.__assign({}, rest, { key: "".concat(item[valueField || 'value'], "-").concat(index), className: cx("Tree-item ".concat(itemClassName || ''), {
                 'Tree-item--isLeaf': isLeaf,
                 'is-child': this.relations.get(item)
-            }), style: tslib.__assign(tslib.__assign({}, style), { paddingLeft: "calc(".concat(level, " * var(--Tree-indent))") }) }, itemTestBuilder === null || itemTestBuilder === void 0 ? void 0 : itemTestBuilder.getTestId()), body));
+            }), style: tslib.__assign(tslib.__assign({}, style), { '--Tree-depth': level }) }, itemTestBuilder === null || itemTestBuilder === void 0 ? void 0 : itemTestBuilder.getTestId()), body));
     };
     TreeSelector.prototype.isEmptyOrNotExist = function (obj) {
         return obj === '' || obj === undefined || obj === null;
@@ -924,38 +927,59 @@ var TreeSelector = /** @class */ (function (_super) {
                 }) },
                 _J$X_("span", { className: cx('Tree-itemText') }, __(checkAllLabel)))));
     };
+    TreeSelector.prototype.styleGetter = function (node) {
+        node && this.setState({ itemHeight: (node === null || node === void 0 ? void 0 : node.offsetHeight) || 0 });
+    };
     TreeSelector.prototype.renderList = function (list) {
         var _this = this;
-        var _a = this.props, virtualThreshold = _a.virtualThreshold, _b = _a.itemHeight, itemHeight = _b === void 0 ? 32 : _b;
-        var virtualHeight = this.state.virtualHeight;
+        var virtualThreshold = this.props.virtualThreshold;
+        var _a = this.state, virtualHeight = _a.virtualHeight, itemHeight = _a.itemHeight;
         if (virtualThreshold && list.length > virtualThreshold) {
-            return (_J$X_("div", { ref: this.virtualListRef },
-                _J$X_(index["default"], { height: virtualHeight, itemCount: list.length, prefix: this.renderCheckAll(), itemSize: itemHeight, 
-                    //! hack: 让 VirtualList 重新渲染
-                    renderItem: this.renderItem.bind(this) })));
+            return itemHeight ? (_J$X_("div", { ref: this.virtualListRefSetter },
+                _J$X_(index["default"], { height: virtualHeight, itemCount: list.length, prefix: this.renderCheckAll(), itemSize: itemHeight, renderItem: this.renderItem }))) : (this.renderItem({ index: 0, ref: this.styleGetter }));
         }
         return (_J$X_(React__default["default"].Fragment, null,
             this.renderCheckAll(),
             list.map(function (item, index) { return _this.renderItem({ index: index }); })));
     };
     TreeSelector.prototype.handleVirtualHeight = function () {
-        var _a = this.props, virtualThreshold = _a.virtualThreshold, _b = _a.itemHeight, itemHeight = _b === void 0 ? 32 : _b, height = _a.height;
-        var flattenedOptions = this.state.flattenedOptions;
+        var _a;
+        var virtualThreshold = this.props.virtualThreshold;
+        var _b = this.state, flattenedOptions = _b.flattenedOptions, itemHeight = _b.itemHeight;
         if (virtualThreshold && flattenedOptions.length > virtualThreshold) {
-            if (height && height > 0) {
-                // tree 对应元素
-                var treeElement = this.root.current;
-                // 虚拟列表 对应元素
-                var virtualElement = this.virtualListRef.current;
-                if (treeElement && virtualElement) {
-                    var virtualHeight = treeElement.offsetHeight -
-                        amisCore.calculateHeight(treeElement, virtualElement);
-                    this.setState({ virtualHeight: virtualHeight });
-                }
+            // tree 对应元素
+            var treeElement = this.root.current;
+            if (!this.virtualListRef ||
+                (!treeElement.offsetHeight && !treeElement.offsetWidth)) {
+                return;
+            }
+            treeElement =
+                ((_a = treeElement === null || treeElement === void 0 ? void 0 : treeElement.parentElement) === null || _a === void 0 ? void 0 : _a.matches('.cxd-TreeControl')) &&
+                    treeElement.parentElement.childElementCount === 1
+                    ? treeElement.parentElement
+                    : treeElement;
+            var styles = getComputedStyle(treeElement);
+            var offsetHeight = 0;
+            if (styles.flexGrow !== '0') {
+                // 当配置了成了动态高度时，根据实际高度来
+                offsetHeight = treeElement.offsetHeight;
             }
             else {
-                this.setState({ virtualHeight: flattenedOptions.length * itemHeight });
+                offsetHeight =
+                    itemHeight * Math.min(flattenedOptions.length, virtualThreshold);
+            }
+            var virtualElement = this.virtualListRef;
+            // 通常时外围设置了 maxHeight
+            if (virtualElement.offsetHeight &&
+                virtualElement.offsetHeight > treeElement.offsetHeight) {
+                offsetHeight = treeElement.offsetHeight;
             }
+            // 虚拟列表 对应元素
+            // todo 去支持外部滚动也支持虚拟滚动的场景，目前不支持，所以只能让高度最大，其实就没启动虚拟滚动
+            // 目前只有没有配置  heightAuto 的时候
+            // 或者配置了 flexGrow 的时候，才会有虚拟滚动的效果
+            var virtualHeight = offsetHeight - amisCore.calculateHeight(treeElement, virtualElement);
+            this.setState({ virtualHeight: virtualHeight });
         }
     };
     TreeSelector.prototype.render = function () {
@@ -1042,9 +1066,14 @@ var TreeSelector = /** @class */ (function (_super) {
         pathSeparator: '/',
         nodePath: [],
         virtualThreshold: 100,
-        itemHeight: 32,
         enableDefaultIcon: true
     };
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object]),
+        tslib.__metadata("design:returntype", void 0)
+    ], TreeSelector.prototype, "virtualListRefSetter", null);
     tslib.__decorate([
         amisCore.autobind,
         tslib.__metadata("design:type", Function),
@@ -1159,12 +1188,24 @@ var TreeSelector = /** @class */ (function (_super) {
         tslib.__metadata("design:paramtypes", [Boolean]),
         tslib.__metadata("design:returntype", void 0)
     ], TreeSelector.prototype, "handleToggle", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object]),
+        tslib.__metadata("design:returntype", void 0)
+    ], TreeSelector.prototype, "styleGetter", null);
     tslib.__decorate([
         amisCore.autobind,
         tslib.__metadata("design:type", Function),
         tslib.__metadata("design:paramtypes", [Object]),
         tslib.__metadata("design:returntype", void 0)
     ], TreeSelector.prototype, "renderList", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", []),
+        tslib.__metadata("design:returntype", void 0)
+    ], TreeSelector.prototype, "handleVirtualHeight", null);
     return TreeSelector;
 }(React__default["default"].Component));
 var Tree = amisCore.themeable(amisCore.localeable(TreeSelector));