amis-ui 6.11.0 → 6.12.0-ab.2

package/lib/components/Tree.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v6.11.0
+ * amis-ui v6.12.0-ab.2
  * Copyright 2018-2025 fex
  */
 
@@ -56,21 +56,28 @@ var TreeSelector = /** @class */ (function (_super) {
             isAdding: false,
             isEditing: false,
             editingItem: null,
-            dropIndicator: undefined
+            dropIndicator: undefined,
+            virtualHeight: 0
         };
         _this.syncUnFolded(props, undefined, true);
         _this.flattenOptions(props, true);
         return _this;
     }
     TreeSelector.prototype.componentDidMount = function () {
+        var _this = this;
         var _a, _b;
         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');
     };
-    TreeSelector.prototype.componentDidUpdate = function (prevProps) {
+    TreeSelector.prototype.componentDidUpdate = function (prevProps, prevState) {
         var props = this.props;
+        var state = this.state;
         if (prevProps.options !== props.options) {
             this.syncUnFolded(props);
             this.flattenOptions(props);
@@ -90,10 +97,17 @@ var TreeSelector = /** @class */ (function (_super) {
                 valueSet: new Set(newValue)
             });
         }
+        if (prevState.isAdding !== state.isAdding) {
+            this.handleVirtualHeight();
+        }
     };
     TreeSelector.prototype.componentWillUnmount = function () {
         // clear data
         this.relations = this.unfolded = this.levels = new WeakMap();
+        if (this.unSensor) {
+            this.unSensor();
+            delete this.unSensor;
+        }
     };
     /**
      * 展开懒加载节点的父节点
@@ -909,12 +923,13 @@ var TreeSelector = /** @class */ (function (_super) {
                 }) },
                 _J$X_("span", { className: cx('Tree-itemText') }, __(checkAllLabel)))));
     };
-    TreeSelector.prototype.renderList = function (list, value) {
+    TreeSelector.prototype.renderList = function (list) {
         var _this = this;
-        var _a = this.props, virtualThreshold = _a.virtualThreshold, _b = _a.itemHeight, itemHeight = _b === void 0 ? 32 : _b, virtualHeight = _a.virtualHeight;
+        var _a = this.props, virtualThreshold = _a.virtualThreshold, _b = _a.itemHeight, itemHeight = _b === void 0 ? 32 : _b;
+        var virtualHeight = this.state.virtualHeight;
         if (virtualThreshold && list.length > virtualThreshold) {
             return (_J$X_("div", { ref: this.virtualListRef },
-                _J$X_(index["default"], { height: virtualHeight !== undefined ? virtualHeight : 266, itemCount: list.length, prefix: this.renderCheckAll(), itemSize: itemHeight, 
+                _J$X_(index["default"], { height: virtualHeight, itemCount: list.length, prefix: this.renderCheckAll(), itemSize: itemHeight, 
                     //! hack: 让 VirtualList 重新渲染
                     renderItem: this.renderItem.bind(this) })));
         }
@@ -922,8 +937,26 @@ var TreeSelector = /** @class */ (function (_super) {
             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;
+        if (virtualThreshold && flattenedOptions.length > virtualThreshold) {
+            if (height && height > 0) {
+                // tree 对应元素
+                var treeElement = this.root.current;
+                // 虚拟列表 对应元素
+                var virtualElement = this.virtualListRef.current;
+                var virtualHeight = treeElement.offsetHeight -
+                    amisCore.calculateHeight(treeElement, virtualElement);
+                this.setState({ virtualHeight: virtualHeight });
+            }
+            else {
+                this.setState({ virtualHeight: flattenedOptions.length * itemHeight });
+            }
+        }
+    };
     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, testIdBuilder = _a.testIdBuilder, actionClassName = _a.actionClassName;
+        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, testIdBuilder = _a.testIdBuilder, actionClassName = _a.actionClassName, height = _a.height;
         var _b = this.state, value = _b.value, isAdding = _b.isAdding, addingParent = _b.addingParent, isEditing = _b.isEditing, dropIndicator = _b.dropIndicator, flattenedOptions = _b.flattenedOptions;
         var addBtn = null;
         if (creatable && rootCreatable !== false && hideRoot) {
@@ -933,17 +966,24 @@ var TreeSelector = /** @class */ (function (_super) {
                 _J$X_(icons.Icon, { icon: "plus", className: "icon" }),
                 _J$X_("span", null, __(rootCreateTip))));
         }
+        var style = {};
+        if (height && height > 0) {
+            style = {
+                height: "".concat(height, "px"),
+                maxHeight: 'none'
+            };
+        }
         return (_J$X_("div", tslib.__assign({ className: cx("Tree ".concat(className || ''), {
                 'Tree--outline': showOutline,
                 'is-disabled': disabled,
                 'is-draggable': draggable
-            }), ref: this.root }, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getTestId()),
+            }), style: style, ref: this.root }, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getTestId()),
             (flattenedOptions && flattenedOptions.length) ||
                 addBtn ||
                 hideRoot === false ? (_J$X_("ul", { className: cx('Tree-list') }, hideRoot ? (_J$X_(React__default["default"].Fragment, null,
                 addBtn,
                 isAdding && !addingParent ? (_J$X_("li", { className: cx('Tree-item') }, this.renderInput())) : null,
-                this.renderList(flattenedOptions, value))) : (_J$X_("li", { className: cx('Tree-rootItem', {
+                this.renderList(flattenedOptions))) : (_J$X_("li", { className: cx('Tree-rootItem', {
                     'is-checked': !value || !value.length
                 }) },
                 _J$X_("div", { className: cx('Tree-itemLabel') },
@@ -959,7 +999,7 @@ var TreeSelector = /** @class */ (function (_super) {
                         _J$X_(icons.Icon, { icon: "plus", className: "icon" }))) : null)) : null),
                 _J$X_("ul", { className: cx('Tree-sublist') },
                     isAdding && !addingParent ? (_J$X_("li", { className: cx('Tree-item') }, this.renderInput())) : null,
-                    this.renderList(flattenedOptions, value)))))) : (_J$X_("div", { className: cx('Tree-placeholder') }, placeholder)),
+                    this.renderList(flattenedOptions)))))) : (_J$X_("div", { className: cx('Tree-placeholder') }, placeholder)),
             dropIndicator && (_J$X_("div", { className: cx('Tree-dropIndicator', {
                     'Tree-dropIndicator--hover': !!dropIndicator.height
                 }), style: dropIndicator }))));
@@ -1119,7 +1159,7 @@ var TreeSelector = /** @class */ (function (_super) {
     tslib.__decorate([
         amisCore.autobind,
         tslib.__metadata("design:type", Function),
-        tslib.__metadata("design:paramtypes", [Object, Array]),
+        tslib.__metadata("design:paramtypes", [Object]),
         tslib.__metadata("design:returntype", void 0)
     ], TreeSelector.prototype, "renderList", null);
     return TreeSelector;