amis-ui 3.1.1 → 3.3.0

package/lib/components/Tree.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -20,24 +20,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-/**
- * @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 __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
 var TreeSelector = /** @class */ (function (_super) {
     tslib.__extends(TreeSelector, _super);
     function TreeSelector(props) {
@@ -251,30 +236,56 @@ var TreeSelector = /** @class */ (function (_super) {
             // cascade 为 true 表示父节点跟子节点没有级联关系。
             if (autoCheckChildren) {
                 var children = item.children ? item.children.concat([]) : [];
+                var hasDisabled = amisCore.flattenTree(children).some(function (item) { return item === null || item === void 0 ? void 0 : item.disabled; });
                 if (onlyChildren) {
                     // 父级选中的时候，子节点也都选中，但是自己不选中
                     !~idx && children.length && value.pop();
+                    // 这个 isAllChecked 主要是判断如果有disabled的item项，这时父节点还是选中的话，针对性的处理逻辑
+                    var isAllChecked = amisCore.flattenTreeWithLeafNodes(children)
+                        .filter(function (item) { return !(item === null || item === void 0 ? void 0 : item.disabled); })
+                        .every(function (v) { return ~value.indexOf(v); });
                     while (children.length) {
                         var child = children.shift();
                         var index = value.indexOf(child);
                         if (child.children && child.children.length) {
                             children.push.apply(children, child.children);
+                            continue;
+                        }
+                        if (hasDisabled && isAllChecked) {
+                            if (~index &&
+                                children.value !== 'undefined' &&
+                                !(child === null || child === void 0 ? void 0 : child.disabled)) {
+                                value.splice(index, 1);
+                            }
+                            continue;
                         }
-                        else if (!~index && child.value !== 'undefined') {
+                        if (!~index && child.value !== 'undefined' && !(child === null || child === void 0 ? void 0 : child.disabled)) {
                             value.push(child);
                         }
                     }
                 }
                 else {
+                    // 这个 isAllChecked 主要是判断如果有disabled的item项，这时父节点还是选中的话，针对性的处理逻辑
+                    var isAllChecked = amisCore.flattenTree(children)
+                        .filter(function (item) { return !(item === null || item === void 0 ? void 0 : item.disabled); })
+                        .every(function (v) { return ~value.indexOf(v); });
                     // 只要父节点选择了,子节点就不需要了,全部去掉勾选.  withChildren时相反
                     while (children.length) {
                         var child = children.shift();
                         var index = value.indexOf(child);
-                        if (~index) {
-                            value.splice(index, 1);
-                        }
-                        if (withChildren || cascade) {
-                            value.push(child);
+                        if (!(child === null || child === void 0 ? void 0 : child.disabled)) {
+                            // 判断下下面是否有禁用项
+                            if (!hasDisabled) {
+                                if (~index) {
+                                    value.splice(index, 1);
+                                }
+                                if (withChildren || cascade) {
+                                    value.push(child);
+                                }
+                            }
+                            else {
+                                isAllChecked ? value.splice(index, 1) : value.push(child);
+                            }
                         }
                         if (child.children && child.children.length) {
                             children.push.apply(children, child.children);
@@ -313,7 +324,7 @@ var TreeSelector = /** @class */ (function (_super) {
                     while (children.length) {
                         var child = children.shift();
                         var index = value.indexOf(child);
-                        if (~index) {
+                        if (~index && !(child === null || child === void 0 ? void 0 : child.disabled)) {
                             value.splice(index, 1);
                         }
                         if (child.children && child.children.length) {
@@ -359,11 +370,11 @@ var TreeSelector = /** @class */ (function (_super) {
                 try {
                     for (var _b = tslib.__values(_this.state.flattenedOptions), _c = _b.next(); !_c.done; _c = _b.next()) {
                         var option = _c.value;
+                        result.push(option);
                         if (option === parent) {
-                            result.push(tslib.__assign(tslib.__assign({}, option), { isAdding: true }));
-                        }
-                        else {
-                            result.push(option);
+                            var insert = { isAdding: true };
+                            _this.levels.set(insert, (_this.levels.get(option) || 0) + 1);
+                            result.push(insert);
                         }
                     }
                 }
@@ -436,16 +447,21 @@ var TreeSelector = /** @class */ (function (_super) {
     };
     TreeSelector.prototype.renderInput = function (prfix) {
         if (prfix === void 0) { prfix = null; }
-        var _a = this.props, cx = _a.classnames, __ = _a.translate;
+        var _a = this.props, cx = _a.classnames, useMobileUI = _a.useMobileUI, __ = _a.translate;
         var inputValue = this.state.inputValue;
-        return (React__default["default"].createElement("div", { className: cx('Tree-itemLabel') },
-            React__default["default"].createElement("div", { className: cx('Tree-itemInput') },
+        var mobileUI = useMobileUI && amisCore.isMobile();
+        return (_J$X_("div", { className: cx('Tree-itemLabel', {
+                'is-mobile': mobileUI
+            }) },
+            _J$X_("div", { className: cx('Tree-itemInput', {
+                    'is-mobile': mobileUI
+                }) },
                 prfix,
-                React__default["default"].createElement("input", { onChange: this.handleInputChange, value: inputValue, placeholder: __('placeholder.enter') }),
-                React__default["default"].createElement("a", { "data-tooltip": __('cancel'), onClick: this.handleCancel },
-                    React__default["default"].createElement(icons.Icon, { icon: "close", className: "icon" })),
-                React__default["default"].createElement("a", { "data-tooltip": __('confirm'), onClick: this.handleConfirm },
-                    React__default["default"].createElement(icons.Icon, { icon: "check", className: "icon" })))));
+                _J$X_("input", { onChange: this.handleInputChange, value: inputValue, placeholder: __('placeholder.enter') }),
+                _J$X_("a", { "data-tooltip": __('cancel'), onClick: this.handleCancel },
+                    _J$X_(icons.Icon, { icon: "close", className: "icon" })),
+                _J$X_("a", { "data-tooltip": __('confirm'), onClick: this.handleConfirm },
+                    _J$X_(icons.Icon, { icon: "check", className: "icon" })))));
     };
     TreeSelector.prototype.getOffsetPosition = function (element) {
         var left = 0;
@@ -571,13 +587,13 @@ var TreeSelector = /** @class */ (function (_super) {
             if (!amisCore.isVisible(item)) {
                 return;
             }
+            _this.levels.set(item, level);
             if (paths.length === 0) {
                 // 父节点
                 flattenedOptions.push(item);
             }
             else if (_this.isUnfolded(parent)) {
                 _this.relations.set(item, parent);
-                _this.levels.set(item, level);
                 // 父节点是展开的状态
                 flattenedOptions.push(item);
             }
@@ -718,7 +734,8 @@ 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, valueField = _b.valueField;
+        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, useMobileUI = _b.useMobileUI;
+        var mobileUI = useMobileUI && amisCore.isMobile();
         var item = this.state.flattenedOptions[index];
         if (!item) {
             return null;
@@ -728,7 +745,7 @@ var TreeSelector = /** @class */ (function (_super) {
         var disabled = this.isItemDisabled(item, checked);
         var partial = this.isItemChildrenPartialChecked(item, checked);
         var checkedInValue = !!~this.state.value.indexOf(item);
-        var checkbox = multiple ? (React__default["default"].createElement(Checkbox["default"], { size: "sm", disabled: disabled, checked: checked || partial, partial: partial, onChange: this.handleCheck.bind(this, item, !checked) })) : showRadio ? (React__default["default"].createElement(Checkbox["default"], { size: "sm", disabled: disabled, checked: checked, onChange: this.handleSelect.bind(this, item) })) : null;
+        var checkbox = multiple ? (_J$X_(Checkbox["default"], { size: "sm", disabled: disabled, checked: checked || partial, partial: partial, onChange: this.handleCheck.bind(this, item, !checked) })) : showRadio ? (_J$X_(Checkbox["default"], { 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
@@ -742,10 +759,10 @@ var TreeSelector = /** @class */ (function (_super) {
             body = this.renderInput(checkbox);
         }
         else if (item.isAdding) {
-            body = this.renderInput(checkbox);
+            body = this.renderInput(_J$X_("span", { className: cx('Tree-itemArrowPlaceholder') }));
         }
         else {
-            body = (React__default["default"].createElement("div", { className: cx('Tree-itemLabel', {
+            body = (_J$X_("div", { className: cx('Tree-itemLabel', {
                     'is-children-checked': multiple &&
                         !cascade &&
                         this.isItemChildrenChecked(item) &&
@@ -753,23 +770,23 @@ var TreeSelector = /** @class */ (function (_super) {
                     'is-checked': checkedInValue,
                     'is-disabled': disabled
                 }), draggable: draggable, onDragStart: this.onDragStart(item), onDragOver: this.onDragOver(item), onDragEnd: this.onDragEnd(item) },
-                draggable && (React__default["default"].createElement("a", { className: cx('Tree-itemDrager drag-bar') },
-                    React__default["default"].createElement(icons.Icon, { icon: "drag-bar", className: "icon" }))),
-                item.loading ? (React__default["default"].createElement(Spinner["default"], { size: "sm", show: true, icon: "reload", spinnerClassName: cx('Tree-spinner'), loadingConfig: loadingConfig })) : !isLeaf || (item.defer && !item.loaded) ? (React__default["default"].createElement("div", { onClick: function () { return _this.toggleUnfolded(item); }, className: cx('Tree-itemArrow', {
+                draggable && (_J$X_("a", { className: cx('Tree-itemDrager drag-bar') },
+                    _J$X_(icons.Icon, { icon: "drag-bar", className: "icon" }))),
+                item.loading ? (_J$X_(Spinner["default"], { size: "sm", show: true, icon: "reload", spinnerClassName: cx('Tree-spinner'), loadingConfig: loadingConfig })) : !isLeaf || (item.defer && !item.loaded) ? (_J$X_("div", { onClick: function () { return _this.toggleUnfolded(item); }, className: cx('Tree-itemArrow', {
                         'is-folded': !this.isUnfolded(item)
                     }) },
-                    React__default["default"].createElement(icons.Icon, { icon: "down-arrow-bold", className: "icon" }))) : (React__default["default"].createElement("span", { className: cx('Tree-itemArrowPlaceholder') })),
+                    _J$X_(icons.Icon, { icon: "down-arrow-bold", className: "icon" }))) : (_J$X_("span", { className: cx('Tree-itemArrowPlaceholder') })),
                 checkbox,
-                React__default["default"].createElement("div", { className: cx('Tree-itemLabel-item') },
-                    showIcon ? (React__default["default"].createElement("i", { className: cx("Tree-itemIcon ".concat(Array.isArray(item.children) && item.children.length
+                _J$X_("div", { className: cx('Tree-itemLabel-item', { 'is-mobile': mobileUI }) },
+                    showIcon ? (_J$X_("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)
                                     : _this.handleSelect(item));
-                        } }, iconValue ? (icons.getIcon(iconValue) ? (React__default["default"].createElement(icons.Icon, { icon: iconValue, className: "icon" })) : React__default["default"].isValidElement(iconValue) ? (iconValue) : (React__default["default"].createElement("i", { className: iconValue }))) : null)) : null,
-                    React__default["default"].createElement("span", { className: cx('Tree-itemText'), onClick: function () {
+                        } }, iconValue ? (icons.getIcon(iconValue) ? (_J$X_(icons.Icon, { icon: iconValue, className: "icon" })) : React__default["default"].isValidElement(iconValue) ? (iconValue) : (_J$X_("i", { className: iconValue }))) : null)) : null,
+                    _J$X_("span", { className: cx('Tree-itemText'), onClick: function () {
                             return !disabled &&
                                 (multiple
                                     ? _this.handleCheck(item, !checked)
@@ -789,18 +806,18 @@ var TreeSelector = /** @class */ (function (_super) {
                     !disabled &&
                         !isAdding &&
                         !isEditing &&
-                        !(item.defer && !item.loaded) ? (React__default["default"].createElement("div", { className: cx('Tree-item-icons') },
-                        creatable && amisCore.hasAbility(item, 'creatable') ? (React__default["default"].createElement("a", { onClick: this.handleAdd.bind(this, item), "data-tooltip": __(createTip), "data-position": "left" },
-                            React__default["default"].createElement(icons.Icon, { icon: "plus", className: "icon" }))) : null,
-                        removable && amisCore.hasAbility(item, 'removable') ? (React__default["default"].createElement("a", { onClick: this.handleRemove.bind(this, item), "data-tooltip": __(removeTip), "data-position": "left" },
-                            React__default["default"].createElement(icons.Icon, { icon: "minus", className: "icon" }))) : null,
-                        editable && amisCore.hasAbility(item, 'editable') ? (React__default["default"].createElement("a", { onClick: this.handleEdit.bind(this, item), "data-tooltip": __(editTip), "data-position": "left" },
-                            React__default["default"].createElement(icons.Icon, { icon: "new-edit", className: "icon" }))) : null)) : null)));
+                        !(item.defer && !item.loaded) ? (_J$X_("div", { className: cx('Tree-item-icons') },
+                        creatable && amisCore.hasAbility(item, 'creatable') ? (_J$X_("a", { onClick: this.handleAdd.bind(this, item), "data-tooltip": __(createTip), "data-position": "left" },
+                            _J$X_(icons.Icon, { icon: "plus", className: "icon" }))) : null,
+                        removable && amisCore.hasAbility(item, 'removable') ? (_J$X_("a", { onClick: this.handleRemove.bind(this, item), "data-tooltip": __(removeTip), "data-position": "left" },
+                            _J$X_(icons.Icon, { icon: "minus", className: "icon" }))) : null,
+                        editable && amisCore.hasAbility(item, 'editable') ? (_J$X_("a", { onClick: this.handleEdit.bind(this, item), "data-tooltip": __(editTip), "data-position": "left" },
+                            _J$X_(icons.Icon, { icon: "new-edit", className: "icon" }))) : null)) : null)));
         }
-        return (React__default["default"].createElement("li", { key: "".concat(item[valueField || 'value'], "-").concat(index), className: cx("Tree-item ".concat(itemClassName || ''), {
+        return (_J$X_("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: tslib.__assign(tslib.__assign({}, style), { left: "calc(".concat(level, " * var(--Tree-indent))"), width: "calc(100% - ".concat(level, " * var(--Tree-indent))") }) }, body));
+            }), style: tslib.__assign(tslib.__assign({}, style), { paddingLeft: "calc(".concat(level, " * var(--Tree-indent))") }) }, body));
     };
     TreeSelector.prototype.isEmptyOrNotExist = function (obj) {
         return obj === '' || obj === undefined || obj === null;
@@ -827,7 +844,7 @@ var TreeSelector = /** @class */ (function (_super) {
     };
     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;
+        var _a = this.props, multiple = _a.multiple, checkAll = _a.checkAll, checkAllLabel = _a.checkAllLabel, cx = _a.classnames, __ = _a.translate, disabled = _a.disabled, useMobileUI = _a.useMobileUI;
         if (!multiple || !checkAll) {
             return null;
         }
@@ -838,20 +855,23 @@ var TreeSelector = /** @class */ (function (_super) {
         var checkedPartial = availableOptions.some(function (option) {
             return _this.isItemChecked(option);
         });
-        return (React__default["default"].createElement("div", { className: cx('Tree-itemLabel'), onClick: function () { return _this.handleCheckAll(availableOptions, checkedAll); } },
-            React__default["default"].createElement(Checkbox["default"], { size: "sm", disabled: disabled, checked: checkedPartial, partial: checkedPartial && !checkedAll }),
-            React__default["default"].createElement("div", { className: cx('Tree-itemLabel-item') },
-                React__default["default"].createElement("span", { className: cx('Tree-itemText') }, __(checkAllLabel)))));
+        var mobileUI = useMobileUI && amisCore.isMobile();
+        return (_J$X_("div", { className: cx('Tree-itemLabel'), onClick: function () { return _this.handleCheckAll(availableOptions, checkedAll); } },
+            _J$X_(Checkbox["default"], { size: "sm", disabled: disabled, checked: checkedPartial, partial: checkedPartial && !checkedAll }),
+            _J$X_("div", { className: cx('Tree-itemLabel-item', {
+                    'is-mobile': mobileUI
+                }) },
+                _J$X_("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["default"].createElement(index["default"], { height: list.length > 8 ? 266 : list.length * itemHeight, itemCount: list.length, prefix: this.renderCheckAll(), itemSize: itemHeight, 
+            return (_J$X_(index["default"], { height: list.length > 8 ? 266 : list.length * itemHeight, itemCount: list.length, prefix: this.renderCheckAll(), itemSize: itemHeight, 
                 //! hack: 让 VirtualList 重新渲染
                 renderItem: this.renderItem.bind(this) }));
         }
-        return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        return (_J$X_(React__default["default"].Fragment, null,
             this.renderCheckAll(),
             list.map(function (item, index) { return _this.renderItem({ index: index }); })));
     };
@@ -860,40 +880,40 @@ var TreeSelector = /** @class */ (function (_super) {
         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["default"].createElement("a", { className: cx('Tree-addTopBtn', {
+            addBtn = (_J$X_("a", { className: cx('Tree-addTopBtn', {
                     'is-disabled': isAdding || isEditing
                 }), onClick: this.handleAdd.bind(this, null) },
-                React__default["default"].createElement(icons.Icon, { icon: "plus", className: "icon" }),
-                React__default["default"].createElement("span", null, __(rootCreateTip))));
+                _J$X_(icons.Icon, { icon: "plus", className: "icon" }),
+                _J$X_("span", null, __(rootCreateTip))));
         }
-        return (React__default["default"].createElement("div", { className: cx("Tree ".concat(className || ''), {
+        return (_J$X_("div", { className: cx("Tree ".concat(className || ''), {
                 'Tree--outline': showOutline,
                 'is-disabled': disabled,
                 'is-draggable': draggable
             }), ref: this.root },
             (flattenedOptions && flattenedOptions.length) ||
                 addBtn ||
-                hideRoot === false ? (React__default["default"].createElement("ul", { className: cx('Tree-list') }, hideRoot ? (React__default["default"].createElement(React__default["default"].Fragment, null,
+                hideRoot === false ? (_J$X_("ul", { className: cx('Tree-list') }, hideRoot ? (_J$X_(React__default["default"].Fragment, null,
                 addBtn,
-                isAdding && !addingParent ? (React__default["default"].createElement("li", { className: cx('Tree-item') }, this.renderInput())) : null,
-                this.renderList(flattenedOptions, value))) : (React__default["default"].createElement("li", { className: cx('Tree-rootItem', {
+                isAdding && !addingParent ? (_J$X_("li", { className: cx('Tree-item') }, this.renderInput())) : null,
+                this.renderList(flattenedOptions, value))) : (_J$X_("li", { className: cx('Tree-rootItem', {
                     'is-checked': !value || !value.length
                 }) },
-                React__default["default"].createElement("div", { className: cx('Tree-itemLabel') },
-                    React__default["default"].createElement("span", { className: cx('Tree-itemText'), onClick: this.clearSelect },
-                        showIcon ? (React__default["default"].createElement("i", { className: cx('Tree-itemIcon Tree-rootIcon') },
-                            React__default["default"].createElement(icons.Icon, { icon: "home", className: "icon" }))) : null,
+                _J$X_("div", { className: cx('Tree-itemLabel') },
+                    _J$X_("span", { className: cx('Tree-itemText'), onClick: this.clearSelect },
+                        showIcon ? (_J$X_("i", { className: cx('Tree-itemIcon Tree-rootIcon') },
+                            _J$X_(icons.Icon, { icon: "home", className: "icon" }))) : null,
                         rootLabel),
                     !disabled &&
                         creatable &&
                         rootCreatable !== false &&
                         !isAdding &&
-                        !isEditing ? (React__default["default"].createElement("div", { className: cx('Tree-item-icons') }, creatable ? (React__default["default"].createElement("a", { onClick: this.handleAdd.bind(this, null), "data-tooltip": rootCreateTip, "data-position": "left" },
-                        React__default["default"].createElement(icons.Icon, { icon: "plus", className: "icon" }))) : null)) : null),
-                React__default["default"].createElement("ul", { className: cx('Tree-sublist') },
-                    isAdding && !addingParent ? (React__default["default"].createElement("li", { className: cx('Tree-item') }, this.renderInput())) : null,
-                    this.renderList(flattenedOptions, value)))))) : (React__default["default"].createElement("div", { className: cx('Tree-placeholder') }, placeholder)),
-            dropIndicator && (React__default["default"].createElement("div", { className: cx('Tree-dropIndicator', {
+                        !isEditing ? (_J$X_("div", { className: cx('Tree-item-icons') }, creatable ? (_J$X_("a", { onClick: this.handleAdd.bind(this, null), "data-tooltip": rootCreateTip, "data-position": "left" },
+                        _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)),
+            dropIndicator && (_J$X_("div", { className: cx('Tree-dropIndicator', {
                     'Tree-dropIndicator--hover': !!dropIndicator.height
                 }), style: dropIndicator }))));
     };