amis-rev-ui 6.13.0

package/esm/components/Tree.js

@@ -0,0 +1,1256 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __extends, __assign, __spreadArray, __read, __values, __rest, __decorate, __metadata } from 'tslib';
+import React__default from 'react';
+import { resizeSensor, eachTree, getTreeAncestors, flattenTree, flattenTreeWithLeafNodes, getTreeParent, findTreeIndex, isVisible, highlight, hasAbility, calculateHeight, autobind, themeable, localeable } from 'amis-rev-core';
+import { value2array } from './Select.js';
+import { Icon } from './icons.js';
+import Checkbox from './Checkbox.js';
+import Spinner from './Spinner.js';
+import VirtualList from './virtual-list/index.js';
+import TooltipWrapper from './TooltipWrapper.js';
+
+/**
+ * @file Tree
+ * @description 树形组件
+ *
+ * 情况列举：
+ * 1. 选中父节点时，连带选中子节点 : autoChildren = true 前提条件
+ *    1.1 交互
+ *        1.1.1 子节点不可以取消勾选 cascade = false,
+ *        1.1.2 子节点可以取消勾选 cascade = true, withChildren 失效
+ *    1.2 数据（state.value）
+ *        1.2.1 只提交父节点数据 cascade = false
+ *        1.2.2 只提交子节点的数据  onlyChildren = true
+ *        1.2.3 全部数据提交 withChildren = true || cascade = true
+ *
+ * 2. 选中节点时，只选中当前节点，没有联动效果
+ *
+ * @author fex
+ */
+var TreeSelector = /** @class */ (function (_super) {
+    __extends(TreeSelector, _super);
+    function TreeSelector(props) {
+        var _this = _super.call(this, props) || this;
+        // 展开的节点
+        _this.unfolded = {};
+        // key: child option, value: parent option;
+        _this.relations = new WeakMap();
+        _this.levels = new WeakMap();
+        _this.nodePaths = new WeakMap();
+        _this.startPoint = {
+            x: 0,
+            y: 0
+        };
+        _this.root = React__default.createRef();
+        _this.virtualListRef = null;
+        var value = value2array(props.value, {
+            multiple: props.multiple,
+            delimiter: props.delimiter,
+            valueField: props.valueField,
+            labelField: props.labelField,
+            options: props.options,
+            pathSeparator: props.pathSeparator
+        }, props.enableNodePath);
+        _this.state = {
+            value: value,
+            valueSet: new Set(value),
+            flattenedOptions: [],
+            inputValue: '',
+            addingParent: null,
+            isAdding: false,
+            isEditing: false,
+            editingItem: null,
+            dropIndicator: undefined,
+            virtualHeight: 0,
+            itemHeight: 0
+        };
+        _this.syncUnFolded(props, true);
+        return _this;
+    }
+    TreeSelector.prototype.componentDidMount = function () {
+        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();
+        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 = resizeSensor(treeElement, this.handleVirtualHeight, false, 'height');
+    };
+    TreeSelector.prototype.componentDidUpdate = function (prevProps, prevState) {
+        var props = this.props;
+        this.state;
+        if (prevProps.options !== props.options) {
+            this.syncUnFolded(props);
+        }
+        if (prevProps.value !== props.value ||
+            prevProps.options !== props.options) {
+            var newValue = value2array(props.value, {
+                multiple: props.multiple,
+                delimiter: props.delimiter,
+                valueField: props.valueField,
+                pathSeparator: props.pathSeparator,
+                options: props.options,
+                labelField: props.labelField
+            }, props.enableNodePath);
+            // VirtualList 如果属性不变不会重新渲染
+            // 而value 变化会影响 renderItem 的结果，所以这里让它变一下
+            this.renderItem = this.renderItem.bind(this);
+            this.setState({
+                value: newValue,
+                valueSet: new Set(newValue)
+            });
+        }
+    };
+    TreeSelector.prototype.componentWillUnmount = function () {
+        // clear data
+        this.relations = this.levels = this.nodePaths = new WeakMap();
+        this.unfolded = {};
+        if (this.unSensor) {
+            this.unSensor();
+            delete this.unSensor;
+        }
+    };
+    /**
+     * 展开懒加载节点的父节点
+     */
+    TreeSelector.prototype.expandLazyLoadNodes = function () {
+        var _a = this.props, pathSeparator = _a.pathSeparator, onExpandTree = _a.onExpandTree, _b = _a.nodePath, nodePath = _b === void 0 ? [] : _b;
+        var nodePathArr = nodePath.map(function (path) {
+            return path ? path.toString().split(pathSeparator) : [];
+        });
+        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, initial) {
+        var expandLevel = Number(props.unfoldedLevel);
+        // 初始化树节点的展开状态
+        var unfolded = this.unfolded;
+        var _a = this.props, deferField = _a.deferField, foldedField = _a.foldedField, unfoldedField = _a.unfoldedField;
+        eachTree(props.options, function (node, index, level, paths, indexes) {
+            var unfoldedKey = indexes.concat(index).join('-');
+            if (node.children && node.children.length) {
+                var ret = unfolded[unfoldedKey];
+                if (node[deferField] &&
+                    node.loaded &&
+                    unfoldedField &&
+                    node[unfoldedField] !== false) {
+                    ret = true;
+                }
+                else if (unfoldedField &&
+                    typeof node[unfoldedField] !== 'undefined') {
+                    ret = !!node[unfoldedField];
+                }
+                else if (foldedField && typeof node[foldedField] !== 'undefined') {
+                    ret = !node[foldedField];
+                }
+                else if (initial || typeof ret === 'undefined') {
+                    // initiallyOpen 为 true 时全部展开，为 false 时根据 unfoldedLevel 控制
+                    ret = props.initiallyOpen ? true : level < expandLevel;
+                }
+                unfolded[unfoldedKey] = ret;
+            }
+        });
+        this.flattenOptions(props, initial);
+        return unfolded;
+    };
+    TreeSelector.prototype.setFoldedOrUnfolded = function (targetLevel, isFolded) {
+        if (isFolded === void 0) { isFolded = false; }
+        var unfolded = this.unfolded;
+        var _a = this.props, options = _a.options, deferField = _a.deferField, onDeferLoad = _a.onDeferLoad;
+        eachTree(options, function (node, index, level, paths, indexes) {
+            var unfoldedKey = indexes.concat(index).join('-');
+            if (node[deferField] && !node.loaded) {
+                onDeferLoad === null || onDeferLoad === void 0 ? void 0 : onDeferLoad(node);
+                return;
+            }
+            if (node.children && node.children.length) {
+                var ret = isFolded ? level < targetLevel : level <= targetLevel;
+                unfolded[unfoldedKey] = ret;
+            }
+        });
+        this.flattenOptions(this.props);
+    };
+    TreeSelector.prototype.toggleUnfolded = function (node) {
+        var unfolded = this.unfolded;
+        var _a = this.props, deferField = _a.deferField, onDeferLoad = _a.onDeferLoad, unfoldedField = _a.unfoldedField;
+        if (node[deferField] && !node.loaded) {
+            onDeferLoad === null || onDeferLoad === void 0 ? void 0 : onDeferLoad(node);
+            return;
+        }
+        var path = this.nodePaths.get(node);
+        // ！ hack: 在node上直接添加属性，options 在更新的时候旧的字段会保留
+        if (node[deferField] && node.loaded) {
+            node[unfoldedField] = !unfolded[path];
+        }
+        unfolded[path] = !unfolded[path];
+        this.flattenOptions();
+    };
+    TreeSelector.prototype.isUnfolded = function (node) {
+        var unfolded = this.unfolded;
+        var parent = this.relations.get(node);
+        var path = this.nodePaths.get(node);
+        if (parent) {
+            return !!unfolded[path] && this.isUnfolded(parent);
+        }
+        return !!unfolded[path];
+    };
+    TreeSelector.prototype.clearSelect = function () {
+        var _this = this;
+        this.setState({
+            value: []
+        }, function () {
+            var _a = _this.props, joinValues = _a.joinValues, rootValue = _a.rootValue, onChange = _a.onChange;
+            onChange(joinValues ? rootValue : []);
+        });
+    };
+    /**
+     * enableNodePath为true时，将label和value转换成node path格式
+     */
+    TreeSelector.prototype.transform2NodePath = function (value) {
+        var _a = this.props, multiple = _a.multiple, options = _a.options, valueField = _a.valueField, labelField = _a.labelField, joinValues = _a.joinValues, extractValue = _a.extractValue, pathSeparator = _a.pathSeparator, delimiter = _a.delimiter;
+        var nodesValuePath = [];
+        var selectedNodes = Array.isArray(value) ? value.concat() : [value];
+        var selectedNodesPath = selectedNodes.map(function (node) {
+            var _a, _b;
+            var _c;
+            var nodePath = (_c = getTreeAncestors(options, node, true)) === null || _c === void 0 ? void 0 : _c.reduce(function (acc, node) {
+                acc[labelField].push(node[labelField]);
+                acc[valueField].push(node[valueField]);
+                return acc;
+            }, (_a = {}, _a[labelField] = [], _a[valueField] = [], _a));
+            var nodeValuePath = nodePath[valueField].join(pathSeparator);
+            nodesValuePath.push(nodeValuePath);
+            return __assign(__assign({}, node), (_b = {}, _b[labelField] = nodePath[labelField].join(pathSeparator), _b[valueField] = nodeValuePath, _b));
+        });
+        if (multiple) {
+            return joinValues
+                ? nodesValuePath.join(delimiter)
+                : extractValue
+                    ? nodesValuePath
+                    : selectedNodesPath;
+        }
+        else {
+            return joinValues || extractValue
+                ? selectedNodesPath[0][valueField]
+                : selectedNodesPath[0];
+        }
+    };
+    TreeSelector.prototype.handleSelect = function (node, value) {
+        var _this = this;
+        var _a = this.props, joinValues = _a.joinValues, valueField = _a.valueField, deferField = _a.deferField, onChange = _a.onChange, enableNodePath = _a.enableNodePath, onlyLeaf = _a.onlyLeaf;
+        if (node[valueField] === undefined) {
+            if (node[deferField] && !node.loaded) {
+                this.toggleUnfolded(node);
+            }
+            return;
+        }
+        if (onlyLeaf && Array.isArray(node.children) && node.children.length) {
+            return;
+        }
+        this.setState({
+            value: [node]
+        }, function () {
+            onChange(enableNodePath
+                ? _this.transform2NodePath(node)
+                : joinValues
+                    ? node[valueField]
+                    : node);
+        });
+    };
+    TreeSelector.prototype.handleItemClick = function (node, checked) {
+        var _a;
+        var _b = this.props, onHandleNodeClick = _b.onHandleNodeClick, multiple = _b.multiple, _c = _b.nodeBehavior, nodeBehavior = _c === void 0 ? ['check'] : _c;
+        onHandleNodeClick && onHandleNodeClick(node);
+        if ((nodeBehavior === null || nodeBehavior === void 0 ? void 0 : nodeBehavior.includes('unfold')) && ((_a = node.children) === null || _a === void 0 ? void 0 : _a.length)) {
+            this.toggleUnfolded(node);
+        }
+        if (nodeBehavior === null || nodeBehavior === void 0 ? void 0 : nodeBehavior.includes('check')) {
+            multiple ? this.handleCheck(node, !checked) : this.handleSelect(node);
+        }
+    };
+    TreeSelector.prototype.handleCheck = function (item, checked) {
+        var _this = this;
+        // TODO: 重新梳理这里的逻辑
+        var props = this.props;
+        var value = this.state.valueSet;
+        var onlyChildren = props.onlyChildren, withChildren = props.withChildren, cascade = props.cascade, autoCheckChildren = props.autoCheckChildren, autoCancelParent = props.autoCancelParent, valueField = props.valueField;
+        if (checked) {
+            if (!value.has(item)) {
+                value.add(item);
+            }
+            // cascade 为 true 表示父节点跟子节点没有级联关系。
+            if (autoCheckChildren) {
+                var children = item.children ? __spreadArray([], __read(item.children), false) : [];
+                var hasDisabled = flattenTree(children).some(function (item) { return item === null || item === void 0 ? void 0 : item.disabled; });
+                if (onlyChildren) {
+                    // 这个 isAllChecked 主要是判断如果有disabled的item项，这时父节点还是选中的话，针对性的处理逻辑
+                    var isAllChecked = flattenTreeWithLeafNodes(children)
+                        .filter(function (item) { return !(item === null || item === void 0 ? void 0 : item.disabled); })
+                        .every(function (v) { return value.has(v); });
+                    // 父级选中的时候，子节点也都选中，但是自己不选中
+                    if (value.has(item) && children.length) {
+                        value.delete(item);
+                    }
+                    while (children.length) {
+                        var child = children.shift();
+                        if (child.children && child.children.length) {
+                            children.push.apply(children, child.children);
+                            continue;
+                        }
+                        if (hasDisabled && isAllChecked) {
+                            if (value.has(child) &&
+                                child.value !== 'undefined' &&
+                                !(child === null || child === void 0 ? void 0 : child.disabled)) {
+                                value.delete(child);
+                            }
+                            continue;
+                        }
+                        if (!value.has(child) &&
+                            child.value !== 'undefined' &&
+                            !(child === null || child === void 0 ? void 0 : child.disabled)) {
+                            value.add(child);
+                        }
+                    }
+                }
+                else {
+                    // 这个 isAllChecked 主要是判断如果有disabled的item项，这时父节点还是选中的话，针对性的处理逻辑
+                    var isAllChecked = flattenTree(children)
+                        .filter(function (item) { return !(item === null || item === void 0 ? void 0 : item.disabled); })
+                        .every(function (v) { return value.has(v); });
+                    // 只要父节点选择了,子节点就不需要了,全部去掉勾选.  withChildren时相反
+                    while (children.length) {
+                        var child = children.shift();
+                        if (child === null || child === void 0 ? void 0 : child.disabled) {
+                            continue;
+                        }
+                        // 判断下下面是否有禁用项
+                        if (!hasDisabled) {
+                            if (value.has(child)) {
+                                value.delete(child);
+                            }
+                            if (withChildren || cascade) {
+                                value.add(child);
+                            }
+                        }
+                        else {
+                            isAllChecked ? value.delete(child) : value.add(child);
+                        }
+                        if (child.children && child.children.length) {
+                            children.push.apply(children, child.children);
+                        }
+                    }
+                    var toCheck = item;
+                    while (true) {
+                        var parent_1 = getTreeParent(props.options, toCheck);
+                        // 判断 parent 节点是否已经勾选，避免重复值
+                        if ((parent_1 === null || parent_1 === void 0 ? void 0 : parent_1[valueField || 'value']) && !value.has(parent_1)) {
+                            // 如果所有孩子节点都勾选了，应该自动勾选父级。
+                            if (parent_1.children.every(function (child) { return value.has(child); })) {
+                                if (!cascade && !withChildren) {
+                                    parent_1.children.forEach(function (child) {
+                                        if (value.has(child)) {
+                                            value.delete(child);
+                                        }
+                                    });
+                                }
+                                value.add(parent_1);
+                                toCheck = parent_1;
+                                continue;
+                            }
+                        }
+                        break;
+                    }
+                }
+            }
+        }
+        else {
+            value.has(item) && value.delete(item);
+            if (autoCheckChildren) {
+                if (cascade || withChildren || onlyChildren) {
+                    var children = item.children ? __spreadArray([], __read(item.children), false) : [];
+                    while (children.length) {
+                        var child = children.shift();
+                        if (value.has(child) && !(child === null || child === void 0 ? void 0 : child.disabled)) {
+                            value.delete(child);
+                        }
+                        if (child.children && child.children.length) {
+                            children.push.apply(children, child.children);
+                        }
+                    }
+                }
+            }
+            if (autoCancelParent && cascade) {
+                var toCheck = item;
+                while (true) {
+                    var parent_2 = getTreeParent(props.options, toCheck);
+                    //判断 parent 节点是否已经勾选
+                    if (value.has(parent_2)) {
+                        //当有一个子节点取消时要去掉父节点，也要去掉父节点的父节点，直至最外层
+                        value.delete(parent_2);
+                        toCheck = parent_2;
+                        continue;
+                    }
+                    break;
+                }
+            }
+        }
+        this.setState({
+            value: __spreadArray([], __read(value), false)
+        }, function () { return _this.fireChange(__spreadArray([], __read(value), false)); });
+    };
+    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;
+        if (parent === void 0) { parent = null; }
+        var _a = this.props, bultinCUD = _a.bultinCUD, onAdd = _a.onAdd, options = _a.options;
+        if (!bultinCUD) {
+            var idxes = findTreeIndex(options, function (item) { return item === parent; }) || [];
+            return onAdd && onAdd(idxes.concat(0));
+        }
+        else {
+            this.setState({
+                isEditing: false,
+                isAdding: true,
+                addingParent: parent
+            }, function () {
+                var e_1, _a;
+                if (!parent) {
+                    return;
+                }
+                var result = [];
+                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) {
+                            var insert = { isAdding: true };
+                            _this.levels.set(insert, (_this.levels.get(option) || 0) + 1);
+                            result.push(insert);
+                        }
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+                _this.setState({ flattenedOptions: result });
+            });
+        }
+    };
+    TreeSelector.prototype.handleEdit = function (item) {
+        var _a = this.props, bultinCUD = _a.bultinCUD, onEdit = _a.onEdit, labelField = _a.labelField; _a.options;
+        if (!bultinCUD) {
+            onEdit === null || onEdit === void 0 ? void 0 : onEdit(item);
+        }
+        else {
+            this.setState({
+                isEditing: true,
+                isAdding: false,
+                editingItem: item,
+                inputValue: item[labelField]
+            });
+        }
+    };
+    TreeSelector.prototype.handleRemove = function (item) {
+        var onDelete = this.props.onDelete;
+        onDelete && onDelete(item);
+    };
+    TreeSelector.prototype.handleInputChange = function (e) {
+        this.setState({
+            inputValue: e.currentTarget.value
+        });
+    };
+    TreeSelector.prototype.handleConfirm = function () {
+        var _a = this.state, value = _a.inputValue, isAdding = _a.isAdding, addingParent = _a.addingParent, editingItem = _a.editingItem, isEditing = _a.isEditing;
+        if (!value) {
+            return;
+        }
+        var _b = this.props, labelField = _b.labelField, onAdd = _b.onAdd, options = _b.options, onEdit = _b.onEdit;
+        this.setState({
+            inputValue: '',
+            isAdding: false,
+            isEditing: false
+        }, function () {
+            var _a, _b;
+            if (isAdding && onAdd) {
+                var idxes = (addingParent &&
+                    findTreeIndex(options, function (item) { return item === addingParent; })) ||
+                    [];
+                onAdd(idxes.concat(0), (_a = {}, _a[labelField] = value, _a), true);
+            }
+            else if (isEditing && onEdit) {
+                onEdit(__assign(__assign({}, editingItem), (_b = {}, _b[labelField] = value, _b)), editingItem, true);
+            }
+        });
+    };
+    TreeSelector.prototype.handleCancel = function () {
+        var flattenedOptions = this.state.flattenedOptions;
+        var flattenedOptionsWithoutAdding = flattenedOptions.filter(function (item) { return !item.isAdding; });
+        this.setState({
+            inputValue: '',
+            isAdding: false,
+            isEditing: false,
+            flattenedOptions: flattenedOptionsWithoutAdding
+        });
+    };
+    TreeSelector.prototype.valueToString = function (value) {
+        return typeof value === 'undefined' || value === null
+            ? ''
+            : typeof value === 'string'
+                ? value
+                : value instanceof Date
+                    ? value.toISOString()
+                    : JSON.stringify(value);
+    };
+    TreeSelector.prototype.renderInput = function (prfix, testIdBuilder) {
+        var _a;
+        if (prfix === void 0) { prfix = null; }
+        var _b = this.props, cx = _b.classnames, mobileUI = _b.mobileUI, __ = _b.translate, editMaxLength = _b.editMaxLength, createMaxLength = _b.createMaxLength;
+        var _c = this.state, inputValue = _c.inputValue, isEditing = _c.isEditing;
+        var maxLength = isEditing ? editMaxLength : createMaxLength;
+        var showCounter = maxLength ? true : false;
+        return (React__default.createElement("div", { className: cx('Tree-itemLabel', {
+                'is-mobile': mobileUI
+            }) },
+            React__default.createElement("div", { className: cx('Tree-itemInput', {
+                    'is-mobile': mobileUI
+                }) },
+                prfix,
+                React__default.createElement("div", { className: cx('TextControl-input') },
+                    React__default.createElement("input", __assign({ onChange: this.handleInputChange, value: inputValue, maxLength: maxLength, placeholder: __('placeholder.enter') }, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('input').getTestId())),
+                    showCounter ? (React__default.createElement("span", { className: cx('Tree-counter') }, "".concat((_a = this.valueToString(inputValue)) === null || _a === void 0 ? void 0 : _a.length).concat(typeof maxLength === 'number' && maxLength
+                        ? "/".concat(maxLength)
+                        : ''))) : null),
+                React__default.createElement("a", __assign({ "data-tooltip": __('cancel'), onClick: this.handleCancel }, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('cancel').getTestId()),
+                    React__default.createElement(Icon, { icon: "close", className: "icon" })),
+                React__default.createElement("a", __assign({ "data-tooltip": __('confirm'), onClick: this.handleConfirm }, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('confirm').getTestId()),
+                    React__default.createElement(Icon, { icon: "check", className: "icon" })))));
+    };
+    TreeSelector.prototype.getOffsetPosition = function (element) {
+        var left = 0;
+        var top = 0;
+        while (element.offsetParent) {
+            left += element.offsetLeft;
+            top += element.offsetTop;
+            element = element.offsetParent;
+        }
+        return { left: left, top: top };
+    };
+    TreeSelector.prototype.getDropInfo = function (e, node) {
+        var _a;
+        var rect = e.currentTarget.getBoundingClientRect();
+        var dragNode = this.dragNode;
+        var deltaX = Math.min(50, rect.width * 0.3);
+        var gap = ((_a = node === null || node === void 0 ? void 0 : node.children) === null || _a === void 0 ? void 0 : _a.length) ? 0 : 16;
+        // 计算相对位置
+        var offset = this.getOffsetPosition(this.root.current);
+        var targetOffset = this.getOffsetPosition(e.currentTarget);
+        var left = targetOffset.left - offset.left;
+        var top = targetOffset.top - offset.top;
+        var clientX = e.clientX, clientY = e.clientY;
+        var position = clientY >= rect.top + rect.height / 2 ? 'bottom' : 'top';
+        var indicator;
+        if (position === 'bottom' && clientX >= this.startPoint.x + deltaX) {
+            position = 'self';
+            indicator = {
+                top: top,
+                left: left,
+                width: rect.width,
+                height: rect.height
+            };
+        }
+        else {
+            indicator = {
+                top: position === 'bottom' ? top + rect.height : top,
+                left: left + gap,
+                width: rect.width - gap
+            };
+        }
+        return {
+            node: node,
+            dragNode: dragNode,
+            position: position,
+            indicator: indicator
+        };
+    };
+    TreeSelector.prototype.updateDropIndicator = function (e, node) {
+        // const gap = node?.children?.length ? 0 : 16;
+        this.dropInfo = this.getDropInfo(e, node);
+        var _a = this.dropInfo, dragNode = _a.dragNode, indicator = _a.indicator;
+        if (node === dragNode) {
+            this.setState({ dropIndicator: undefined });
+            return;
+        }
+        this.setState({
+            dropIndicator: indicator
+        });
+    };
+    TreeSelector.prototype.onDragStart = function (node) {
+        var _this = this;
+        var draggable = this.props.draggable;
+        return function (e) {
+            var _a;
+            if (draggable) {
+                e.dataTransfer.effectAllowed = 'copyMove';
+                _this.dragNode = node;
+                _this.dropInfo = null;
+                _this.startPoint = {
+                    x: e.clientX,
+                    y: e.clientY
+                };
+                if ((_a = node === null || node === void 0 ? void 0 : node.children) === null || _a === void 0 ? void 0 : _a.length) {
+                    var path = _this.nodePaths.get(node);
+                    _this.unfolded[path] = false;
+                    _this.flattenOptions();
+                }
+            }
+            else {
+                _this.dragNode = null;
+                _this.dropInfo = null;
+            }
+            e.stopPropagation();
+        };
+    };
+    TreeSelector.prototype.onDragOver = function (node) {
+        var _this = this;
+        return function (e) {
+            if (!_this.dragNode) {
+                return;
+            }
+            _this.updateDropIndicator(e, node);
+            e.preventDefault();
+        };
+    };
+    TreeSelector.prototype.onDragEnd = function (dragNode) {
+        var _this = this;
+        return function (e) {
+            var _a, _b, _c;
+            _this.setState({
+                dropIndicator: undefined
+            });
+            var node = (_a = _this.dropInfo) === null || _a === void 0 ? void 0 : _a.node;
+            if (!_this.dropInfo || !node || dragNode === node) {
+                return;
+            }
+            (_c = (_b = _this.props).onMove) === null || _c === void 0 ? void 0 : _c.call(_b, _this.dropInfo);
+            _this.dragNode = null;
+            _this.dropInfo = null;
+            e.preventDefault();
+        };
+    };
+    /**
+     * 将树形接口转换为平铺结构，以支持虚拟列表
+     * 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, index, level, paths, indexes) {
+            var parent = paths[paths.length - 1];
+            if (!isVisible(item)) {
+                return;
+            }
+            _this.levels.set(item, level);
+            _this.nodePaths.set(item, indexes.concat(index).join('-'));
+            parent && _this.relations.set(item, parent);
+            if (paths.length === 0) {
+                // 父节点
+                flattenedOptions.push(item);
+            }
+            else if (_this.isUnfolded(parent)) {
+                // 父节点是展开的状态
+                flattenedOptions.push(item);
+            }
+        });
+        if (initial) {
+            // 初始化
+            this.state = __assign(__assign({}, this.state), { flattenedOptions: flattenedOptions });
+        }
+        else {
+            this.setState({
+                flattenedOptions: flattenedOptions
+            });
+        }
+    };
+    /**
+     * 判断父元素是否勾选
+     * TODO: 递归可能需要优化
+     */
+    TreeSelector.prototype.isParentChecked = function (item) {
+        if (!item || !this.relations.get(item)) {
+            return false;
+        }
+        var valueSet = this.state.valueSet;
+        var currentItem = item;
+        while (currentItem) {
+            var itemParent = this.relations.get(currentItem);
+            if (!itemParent) {
+                return false;
+            }
+            if (valueSet.has(itemParent)) {
+                return true;
+            }
+            currentItem = itemParent;
+        }
+        return false;
+    };
+    /**
+     * 判断 子元素 是否全部选中
+     */
+    TreeSelector.prototype.isItemChildrenChecked = function (item) {
+        var _this = this;
+        if (!item || !item.children) {
+            return true;
+        }
+        return !item.children.some(function (child) { return !_this.isItemChecked(child); });
+    };
+    /**
+     * 判断子元素 部分勾选
+     */
+    TreeSelector.prototype.isItemChildrenPartialChecked = function (item, checked) {
+        var e_2, _a;
+        if (!item || !item.children || checked) {
+            return false;
+        }
+        var checkedLength = 0;
+        var partialChildrenLength = 0;
+        try {
+            for (var _b = __values(item.children), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var child = _c.value;
+                if (this.isItemChecked(child)) {
+                    checkedLength++;
+                }
+                else if (this.isItemChildrenPartialChecked(child, false)) {
+                    partialChildrenLength++;
+                }
+            }
+        }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_2) throw e_2.error; }
+        }
+        return checkedLength !== 0 || partialChildrenLength !== 0;
+    };
+    /**
+     * 判断元素是否选中：checked
+     */
+    TreeSelector.prototype.isItemChecked = function (item) {
+        var _a;
+        if (!item) {
+            return false;
+        }
+        var _b = this.props, autoCheckChildren = _b.autoCheckChildren, onlyChildren = _b.onlyChildren, multiple = _b.multiple, withChildren = _b.withChildren, cascade = _b.cascade;
+        var valueSet = this.state.valueSet;
+        var checked = valueSet.has(item);
+        if (checked) {
+            return true;
+        }
+        if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
+            if (onlyChildren && autoCheckChildren) {
+                if (this.isItemChildrenChecked(item)) {
+                    // 当前元素没有在 value 中，但是子组件全部勾选了
+                    return true;
+                }
+            }
+        }
+        var itemParent = this.relations.get(item);
+        if (itemParent && multiple && autoCheckChildren) {
+            // 当前节点为子节点
+            if (withChildren || cascade) {
+                return false;
+            }
+            return this.isParentChecked(item);
+        }
+        // 判断父组件是否勾选
+        return false;
+    };
+    /**
+     * item 是否 disabled 状态
+     * props.disabled === true return;
+     *
+     */
+    TreeSelector.prototype.isItemDisabled = function (item, checked) {
+        var _a = this.props, disabledField = _a.disabledField, disabled = _a.disabled, autoCheckChildren = _a.autoCheckChildren, valueField = _a.valueField, multiple = _a.multiple, maxLength = _a.maxLength, minLength = _a.minLength, cascade = _a.cascade, onlyChildren = _a.onlyChildren;
+        var value = this.state.value;
+        var selfDisabled = item[disabledField];
+        var nodeDisabled = !!disabled ||
+            selfDisabled ||
+            (multiple && !autoCheckChildren && !item[valueField]);
+        if (nodeDisabled) {
+            return true;
+        }
+        if ((maxLength && !checked && value.length >= maxLength) ||
+            (minLength && checked && value.length <= minLength)) {
+            return true;
+        }
+        var itemParent = this.relations.get(item);
+        if (autoCheckChildren && multiple && checked && itemParent) {
+            if (!this.isItemChecked(itemParent)) {
+                return false;
+            }
+            // 子节点
+            if (onlyChildren) {
+                return false;
+            }
+            return !cascade;
+        }
+        return false;
+    };
+    TreeSelector.prototype.renderItem = function (_a) {
+        var _this = this;
+        var index = _a.index, style = _a.style, rest = __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) {
+            return null;
+        }
+        var _c = this.state, isAdding = _c.isAdding, editingItem = _c.editingItem, isEditing = _c.isEditing;
+        var checked = this.isItemChecked(item);
+        var disabled = this.isItemDisabled(item, checked);
+        var partial = this.isItemChildrenPartialChecked(item, checked);
+        var checkedInValue = !!~this.state.value.indexOf(item);
+        var itemTestBuilder = testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild("item-".concat(item[valueField] || item[labelField] || index));
+        var checkbox = multiple ? (React__default.createElement(Checkbox, { size: "sm", disabled: disabled, checked: checked || partial, partial: partial, onChange: this.handleCheck.bind(this, item, !checked), testIdBuilder: itemTestBuilder === null || itemTestBuilder === void 0 ? void 0 : itemTestBuilder.getChild('chekbx') })) : showRadio ? (React__default.createElement(Checkbox, { size: "sm", disabled: disabled, checked: checked, onChange: this.handleSelect.bind(this, item), testIdBuilder: itemTestBuilder === null || itemTestBuilder === void 0 ? void 0 : itemTestBuilder.getChild('chekbx') })) : null;
+        var isLeaf = (!item.children || !item.children.length) && !item.placeholder;
+        var iconValue = item[iconField] ||
+            (enableDefaultIcon !== false
+                ? (Array.isArray(item.children) && item.children.length) ||
+                    item[deferField]
+                    ? 'folder'
+                    : 'file'
+                : false);
+        var level = this.levels.has(item) ? this.levels.get(item) - 1 : 0;
+        var body = null;
+        if (isEditing && editingItem === item) {
+            body = this.renderInput(checkbox, itemTestBuilder === null || itemTestBuilder === void 0 ? void 0 : itemTestBuilder.getChild('edit'));
+        }
+        else if (item.isAdding) {
+            body = this.renderInput(React__default.createElement("span", { className: cx('Tree-itemArrowPlaceholder') }), itemTestBuilder === null || itemTestBuilder === void 0 ? void 0 : itemTestBuilder.getChild('add'));
+        }
+        else {
+            var isFolded = !this.isUnfolded(item);
+            body = (React__default.createElement("div", { className: cx('Tree-itemLabel', {
+                    'is-children-checked': multiple &&
+                        !cascade &&
+                        this.isItemChildrenChecked(item) &&
+                        !disabled,
+                    'is-checked': checkedInValue,
+                    'is-disabled': disabled
+                }), draggable: draggable, onDragStart: this.onDragStart(item), onDragOver: this.onDragOver(item), onDragEnd: this.onDragEnd(item) },
+                draggable && (React__default.createElement("a", __assign({ className: cx('Tree-itemDrager drag-bar') }, itemTestBuilder === null || itemTestBuilder === void 0 ? void 0 : itemTestBuilder.getChild('drag-bar').getTestId()),
+                    React__default.createElement(Icon, { icon: "drag-bar", className: "icon" }))),
+                item.loading ? (React__default.createElement(Spinner, { size: "sm", show: true, icon: "reload", spinnerClassName: cx('Tree-spinner'), loadingConfig: loadingConfig })) : !isLeaf || (item[deferField] && !item.loaded) ? (React__default.createElement("div", __assign({ onClick: function () { return _this.toggleUnfolded(item); }, className: cx('Tree-itemArrow', {
+                        'is-folded': isFolded
+                    }) }, itemTestBuilder === null || itemTestBuilder === void 0 ? void 0 : itemTestBuilder.getChild(isFolded ? 'open' : 'fold').getTestId()),
+                    React__default.createElement(Icon, { icon: "down-arrow-bold", className: "icon" }))) : (React__default.createElement("span", { className: cx('Tree-itemArrowPlaceholder') })),
+                checkbox,
+                React__default.createElement("div", __assign({ className: cx('Tree-itemLabel-item', { 'is-mobile': mobileUI }) }, itemTestBuilder === null || itemTestBuilder === void 0 ? void 0 : itemTestBuilder.getChild('content').getTestId(), { onClick: function () { return !disabled && _this.handleItemClick(item, checked); } }),
+                    showIcon ? (React__default.createElement("i", { className: cx("Tree-itemIcon ".concat((Array.isArray(item.children) && item.children.length) ||
+                            item[deferField]
+                            ? 'Tree-folderIcon'
+                            : 'Tree-leafIcon')) }, iconValue ? React__default.createElement(Icon, { icon: iconValue, className: "icon" }) : null)) : null,
+                    React__default.createElement("span", __assign({ className: cx('Tree-itemText'), title: item[labelField] }, itemTestBuilder === null || itemTestBuilder === void 0 ? void 0 : itemTestBuilder.getChild('text').getTestId()), itemRender
+                        ? itemRender(item, {
+                            index: index,
+                            multiple: multiple,
+                            checked: checked,
+                            labelField: labelField,
+                            onChange: function () { return _this.handleCheck(item, !checked); },
+                            disabled: disabled || item.disabled,
+                            classnames: cx
+                        })
+                        : highlightTxt
+                            ? highlight("".concat(item[labelField]), highlightTxt)
+                            : "".concat(item[labelField])),
+                    !disabled && !isAdding && !isEditing ? (React__default.createElement("div", { className: cx('Tree-item-icons', actionClassName), onClick: function (e) { return e.stopPropagation(); } },
+                        creatable &&
+                            !(item[deferField] && !item.loaded) &&
+                            hasAbility(item, 'creatable') ? (React__default.createElement(TooltipWrapper, { placement: 'bottom', tooltip: __(createTip), trigger: 'hover', tooltipTheme: "dark" },
+                            React__default.createElement("a", __assign({ onClick: this.handleAdd.bind(this, item) }, itemTestBuilder === null || itemTestBuilder === void 0 ? void 0 : itemTestBuilder.getChild('add').getTestId()),
+                                React__default.createElement(Icon, { icon: "plus", className: "icon" })))) : null,
+                        removable && hasAbility(item, 'removable') ? (React__default.createElement(TooltipWrapper, { placement: 'bottom', tooltip: __(removeTip), trigger: 'hover', tooltipTheme: "dark" },
+                            React__default.createElement("a", __assign({ onClick: this.handleRemove.bind(this, item) }, itemTestBuilder === null || itemTestBuilder === void 0 ? void 0 : itemTestBuilder.getChild('remove').getTestId()),
+                                React__default.createElement(Icon, { icon: "minus", className: "icon" })))) : null,
+                        editable && hasAbility(item, 'editable') ? (React__default.createElement(TooltipWrapper, { placement: 'bottom', tooltip: __(editTip), trigger: 'hover', tooltipTheme: "dark" },
+                            React__default.createElement("a", __assign({ onClick: this.handleEdit.bind(this, item) }, itemTestBuilder === null || itemTestBuilder === void 0 ? void 0 : itemTestBuilder.getChild('edit').getTestId()),
+                                React__default.createElement(Icon, { icon: "new-edit", className: "icon" })))) : null,
+                        itemActionsRender && (React__default.createElement("div", { className: cx('Tree-itemActions') }, itemActionsRender(item, __assign(__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 (React__default.createElement("li", __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: __assign(__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;
+    };
+    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) {
+            var _a;
+            return onlyChildren
+                ? ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length)
+                    ? 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.handleToggle = function (bool) {
+        var _this = this;
+        var availableOptions = this.getAvailableOptions();
+        if (bool === undefined) {
+            var checkedAll = availableOptions.every(function (option) {
+                return _this.isItemChecked(option);
+            });
+            this.handleCheckAll(availableOptions, checkedAll);
+            return;
+        }
+        this.handleCheckAll(availableOptions, bool);
+    };
+    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, mobileUI = _a.mobileUI;
+        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', {
+                    'is-mobile': mobileUI
+                }) },
+                React__default.createElement("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 virtualThreshold = this.props.virtualThreshold;
+        var _a = this.state, virtualHeight = _a.virtualHeight, itemHeight = _a.itemHeight;
+        if (virtualThreshold && list.length > virtualThreshold) {
+            return itemHeight ? (React__default.createElement("div", { ref: this.virtualListRefSetter },
+                React__default.createElement(VirtualList, { height: virtualHeight, itemCount: list.length, prefix: this.renderCheckAll(), itemSize: itemHeight, renderItem: this.renderItem }))) : (this.renderItem({ index: 0, ref: this.styleGetter }));
+        }
+        return (React__default.createElement(React__default.Fragment, null,
+            this.renderCheckAll(),
+            list.map(function (item, index) { return _this.renderItem({ index: index }); })));
+    };
+    TreeSelector.prototype.handleVirtualHeight = function () {
+        var _a;
+        var virtualThreshold = this.props.virtualThreshold;
+        var _b = this.state, flattenedOptions = _b.flattenedOptions, itemHeight = _b.itemHeight;
+        if (virtualThreshold && flattenedOptions.length > virtualThreshold) {
+            // 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 {
+                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 - calculateHeight(treeElement, virtualElement);
+            this.setState({ virtualHeight: virtualHeight });
+        }
+    };
+    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, 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) {
+            addBtn = (React__default.createElement("a", __assign({ className: cx('Tree-addTopBtn', {
+                    'is-disabled': isAdding || isEditing
+                }), onClick: this.handleAdd.bind(this, null) }, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('add').getTestId()),
+                React__default.createElement(Icon, { icon: "plus", className: "icon" }),
+                React__default.createElement("span", null, __(rootCreateTip))));
+        }
+        var style = {};
+        if (height && height > 0) {
+            style = {
+                height: "".concat(height, "px"),
+                maxHeight: 'none'
+            };
+        }
+        return (React__default.createElement("div", __assign({ className: cx("Tree ".concat(className || ''), {
+                'Tree--outline': showOutline,
+                'is-disabled': disabled,
+                'is-draggable': draggable
+            }), style: style, ref: this.root }, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getTestId()),
+            (flattenedOptions && flattenedOptions.length) ||
+                addBtn ||
+                hideRoot === false ? (React__default.createElement("ul", { className: cx('Tree-list') }, hideRoot ? (React__default.createElement(React__default.Fragment, null,
+                addBtn,
+                isAdding && !addingParent ? (React__default.createElement("li", { className: cx('Tree-item') }, this.renderInput())) : null,
+                this.renderList(flattenedOptions))) : (React__default.createElement("li", { className: cx('Tree-rootItem', {
+                    'is-checked': !value || !value.length
+                }) },
+                React__default.createElement("div", { className: cx('Tree-itemLabel') },
+                    React__default.createElement("span", __assign({ className: cx('Tree-itemText'), onClick: this.clearSelect }, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild("root-item").getTestId()),
+                        showIcon ? (React__default.createElement("i", { className: cx('Tree-itemIcon Tree-rootIcon') },
+                            React__default.createElement(Icon, { icon: "home", className: "icon" }))) : null,
+                        rootLabel),
+                    !disabled &&
+                        creatable &&
+                        rootCreatable !== false &&
+                        !isAdding &&
+                        !isEditing ? (React__default.createElement("div", { className: cx('Tree-item-icons', actionClassName) }, creatable ? (React__default.createElement("a", __assign({ onClick: this.handleAdd.bind(this, null), "data-tooltip": rootCreateTip, "data-position": "left" }, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild("root-add").getTestId()),
+                        React__default.createElement(Icon, { icon: "plus", className: "icon" }))) : null)) : null),
+                React__default.createElement("ul", { className: cx('Tree-sublist') },
+                    isAdding && !addingParent ? (React__default.createElement("li", { className: cx('Tree-item') }, this.renderInput())) : null,
+                    this.renderList(flattenedOptions)))))) : (React__default.createElement("div", { className: cx('Tree-placeholder') }, placeholder)),
+            dropIndicator && (React__default.createElement("div", { className: cx('Tree-dropIndicator', {
+                    'Tree-dropIndicator--hover': !!dropIndicator.height
+                }), style: dropIndicator }))));
+    };
+    TreeSelector.defaultProps = {
+        showIcon: true,
+        showOutline: false,
+        initiallyOpen: true,
+        unfoldedLevel: 1,
+        showRadio: false,
+        multiple: false,
+        disabled: false,
+        withChildren: false,
+        onlyChildren: false,
+        labelField: 'label',
+        valueField: 'value',
+        iconField: 'icon',
+        deferField: 'defer',
+        unfoldedField: 'unfolded',
+        foldedField: 'folded',
+        disabledField: 'disabled',
+        joinValues: true,
+        extractValue: false,
+        delimiter: ',',
+        hideRoot: true,
+        rootLabel: 'Tree.root',
+        rootValue: 0,
+        autoCheckChildren: true,
+        autoCancelParent: false,
+        cascade: false,
+        selfDisabledAffectChildren: true,
+        rootCreateTip: 'Tree.addRoot',
+        createTip: 'Tree.addChild',
+        editTip: 'Tree.editNode',
+        removeTip: 'Tree.removeNode',
+        enableNodePath: false,
+        pathSeparator: '/',
+        nodePath: [],
+        virtualThreshold: 100,
+        enableDefaultIcon: true
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], TreeSelector.prototype, "virtualListRefSetter", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Number, Object]),
+        __metadata("design:returntype", void 0)
+    ], TreeSelector.prototype, "setFoldedOrUnfolded", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], TreeSelector.prototype, "toggleUnfolded", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], TreeSelector.prototype, "clearSelect", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object, Object]),
+        __metadata("design:returntype", void 0)
+    ], TreeSelector.prototype, "handleSelect", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object, Boolean]),
+        __metadata("design:returntype", void 0)
+    ], TreeSelector.prototype, "handleItemClick", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object, Boolean]),
+        __metadata("design:returntype", void 0)
+    ], TreeSelector.prototype, "handleCheck", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], TreeSelector.prototype, "handleAdd", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], TreeSelector.prototype, "handleEdit", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], TreeSelector.prototype, "handleRemove", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], TreeSelector.prototype, "handleInputChange", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], TreeSelector.prototype, "handleConfirm", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], TreeSelector.prototype, "handleCancel", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object, Object]),
+        __metadata("design:returntype", Object)
+    ], TreeSelector.prototype, "getDropInfo", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object, Object]),
+        __metadata("design:returntype", void 0)
+    ], TreeSelector.prototype, "updateDropIndicator", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], TreeSelector.prototype, "onDragStart", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], TreeSelector.prototype, "onDragOver", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], TreeSelector.prototype, "onDragEnd", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __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),
+        __metadata("design:paramtypes", [Boolean]),
+        __metadata("design:returntype", void 0)
+    ], TreeSelector.prototype, "handleToggle", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], TreeSelector.prototype, "styleGetter", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], TreeSelector.prototype, "renderList", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], TreeSelector.prototype, "handleVirtualHeight", null);
+    return TreeSelector;
+}(React__default.Component));
+var Tree = themeable(localeable(TreeSelector));
+
+export { TreeSelector, Tree as default };