amis-editor 5.2.0-beta.2 → 5.2.1-beta.15

package/esm/renderer/TreeOptionControl.js

@@ -1,5 +1,5 @@
 /**
- * amis-editor v5.2.0-beta.2
+ * amis-editor v5.2.1-beta.15
  * Copyright 2018-2022 @fex
  */
 
@@ -21,24 +21,34 @@ var defaultOption = {
   label: '',
   value: ''
 };
-
-var TreeOptionControl =
-/** @class */
-function (_super) {
+var TreeOptionControl = /** @class */function (_super) {
   __extends(TreeOptionControl, _super);
-
   function TreeOptionControl(props) {
     var _this = _super.call(this, props) || this;
-
-    _this.internalProps = ['checked', 'editing'];
-
+    Object.defineProperty(_this, "sortables", {
+      enumerable: true,
+      configurable: true,
+      writable: true,
+      value: void 0
+    });
+    Object.defineProperty(_this, "drag", {
+      enumerable: true,
+      configurable: true,
+      writable: true,
+      value: void 0
+    });
+    Object.defineProperty(_this, "internalProps", {
+      enumerable: true,
+      configurable: true,
+      writable: true,
+      value: ['checked', 'editing']
+    });
     var _a = props.data || {},
-        source = _a.source,
-        labelField = _a.labelField,
-        valueField = _a.valueField,
-        showIconField = _a.showIconField,
-        iconField = _a.iconField;
-
+      source = _a.source,
+      labelField = _a.labelField,
+      valueField = _a.valueField,
+      showIconField = _a.showIconField,
+      iconField = _a.iconField;
     _this.state = {
       options: _this.transformOptions(props),
       api: source,
@@ -51,90 +61,96 @@ function (_super) {
     _this.sortables = [];
     return _this;
   }
-
-  TreeOptionControl.prototype.transformOptions = function (props) {
-    var options = props.data.options;
-
-    if (!options || !options.length) {
-      return [__assign({}, defaultOption)];
+  Object.defineProperty(TreeOptionControl.prototype, "transformOptions", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (props) {
+      var options = props.data.options;
+      if (!options || !options.length) {
+        return [__assign({}, defaultOption)];
+      }
+      return options;
     }
-
-    return options;
-  };
+  });
   /**
    * 处理下未设置value的情况
    */
-
-
-  TreeOptionControl.prototype.pretreatOptions = function (options) {
-    var _this = this;
-
-    if (!Array.isArray(options)) {
-      return [];
-    }
-
-    return options.map(function (option) {
-      if (option.children && option.children.length) {
-        option.children = _this.pretreatOptions(option.children);
+  Object.defineProperty(TreeOptionControl.prototype, "pretreatOptions", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (options) {
+      var _this = this;
+      if (!Array.isArray(options)) {
+        return [];
       }
-
-      option.value = option.value == null || option.value === '' ? option.label : option.value;
-      return option;
-    });
-  };
+      return options.map(function (option) {
+        if (option.children && option.children.length) {
+          option.children = _this.pretreatOptions(option.children);
+        }
+        option.value = option.value == null || option.value === '' ? option.label : option.value;
+        return option;
+      });
+    }
+  });
   /**
    * 更新options字段的统一出口
    */
-
-
-  TreeOptionControl.prototype.onChange = function () {
-    var source = this.state.source;
-    var onBulkChange = this.props.onBulkChange;
-    var data = {
-      source: undefined,
-      options: undefined,
-      labelField: undefined,
-      valueField: undefined,
-      iconField: undefined
-    };
-
-    if (source === 'custom') {
-      var options = this.state.options.concat();
-      data.options = this.pretreatOptions(options);
-    }
-
-    if (source === 'api' || source === 'apicenter') {
-      var _a = this.state,
+  Object.defineProperty(TreeOptionControl.prototype, "onChange", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      var source = this.state.source;
+      var onBulkChange = this.props.onBulkChange;
+      var data = {
+        source: undefined,
+        options: undefined,
+        labelField: undefined,
+        valueField: undefined,
+        iconField: undefined
+      };
+      if (source === 'custom') {
+        var options = this.state.options.concat();
+        data.options = this.pretreatOptions(options);
+      }
+      if (source === 'api' || source === 'apicenter') {
+        var _a = this.state,
           api = _a.api,
           labelField = _a.labelField,
           valueField = _a.valueField,
           iconField = _a.iconField;
-      data.source = api;
-      data.labelField = labelField;
-      data.valueField = valueField;
-      data.iconField = iconField;
+        data.source = api;
+        data.labelField = labelField;
+        data.valueField = valueField;
+        data.iconField = iconField;
+      }
+      onBulkChange && onBulkChange(data);
+      return;
     }
-
-    onBulkChange && onBulkChange(data);
-    return;
-  };
+  });
   /**
    * 切换选项类型
    */
-
-
-  TreeOptionControl.prototype.handleSourceChange = function (source) {
-    this.setState({
-      source: source
-    }, this.onChange);
-  };
-
-  TreeOptionControl.prototype.renderHeader = function () {
-    var _this = this;
-
-    var _a;
-
-    var _b = this.props,
+  Object.defineProperty(TreeOptionControl.prototype, "handleSourceChange", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (source) {
+      this.setState({
+        source: source
+      }, this.onChange);
+    }
+  });
+  Object.defineProperty(TreeOptionControl.prototype, "renderHeader", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      var _this = this;
+      var _a;
+      var _b = this.props,
         render = _b.render,
         label = _b.label,
         labelRemark = _b.labelRemark,
@@ -142,554 +158,563 @@ function (_super) {
         env = _b.env,
         popOverContainer = _b.popOverContainer,
         hasApiCenter = _b.hasApiCenter;
-    var classPrefix = (_a = env === null || env === void 0 ? void 0 : env.theme) === null || _a === void 0 ? void 0 : _a.classPrefix;
-    var source = this.state.source;
-
-    var optionSourceList = __spreadArray([{
-      label: i18n("01820262aa9ad5b130f8f5b86bfd2968"),
-      value: 'custom'
-    }, {
-      label: i18n("f99603414a616bdee85de0e6e3938b65"),
-      value: 'api'
-    }], hasApiCenter ? [{
-      label: i18n("e6ff6a97bf600c02942db3126a7077b8"),
-      value: 'apicenter'
-    }] : [], true).map(function (item) {
-      return __assign(__assign({}, item), {
-        onClick: function () {
-          return _this.handleSourceChange(item.value);
+      var classPrefix = (_a = env === null || env === void 0 ? void 0 : env.theme) === null || _a === void 0 ? void 0 : _a.classPrefix;
+      var source = this.state.source;
+      var optionSourceList = __spreadArray([{
+        label: i18n("01820262aa9ad5b130f8f5b86bfd2968"),
+        value: 'custom'
+      }, {
+        label: i18n("f99603414a616bdee85de0e6e3938b65"),
+        value: 'api'
+      }], hasApiCenter ? [{
+        label: i18n("e6ff6a97bf600c02942db3126a7077b8"),
+        value: 'apicenter'
+      }] : [], true).map(function (item) {
+        return __assign(__assign({}, item), {
+          onClick: function () {
+            return _this.handleSourceChange(item.value);
+          }
+        });
+      });
+      return React__default.createElement("header", {
+        className: "ae-TreeOptionControl-header"
+      }, React__default.createElement("label", {
+        className: cx("".concat(classPrefix, "Form-label"))
+      }, label || '', labelRemark ? render('label-remark', {
+        type: 'remark',
+        icon: labelRemark.icon || 'warning-mark',
+        tooltip: labelRemark,
+        className: cx("Form-lableRemark", labelRemark === null || labelRemark === void 0 ? void 0 : labelRemark.className),
+        useMobileUI: useMobileUI,
+        container: popOverContainer ? popOverContainer : env && env.getModalContainer ? env.getModalContainer : undefined
+      }) : null), React__default.createElement("div", null, render('validation-control-addBtn', {
+        type: 'dropdown-button',
+        level: 'link',
+        size: 'sm',
+        label: '${selected}',
+        align: 'right',
+        closeOnClick: true,
+        closeOnOutside: true,
+        buttons: optionSourceList
+      }, {
+        popOverContainer: null,
+        data: {
+          selected: optionSourceList.find(function (item) {
+            return item.value === source;
+          }).label
         }
+      })));
+    }
+  });
+  Object.defineProperty(TreeOptionControl.prototype, "handleEditLabelOrValue", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (value, path, key) {
+      var _this = this;
+      var options = cloneDeep(this.state.options);
+      var nodePath = this.getNodePath(path).path;
+      set(options, "".concat(nodePath, ".").concat(key), value);
+      this.setState({
+        options: options
+      }, function () {
+        return _this.rereshBindDrag();
       });
-    });
-
-    return React__default.createElement("header", {
-      className: "ae-TreeOptionControl-header"
-    }, React__default.createElement("label", {
-      className: cx("".concat(classPrefix, "Form-label"))
-    }, label || '', labelRemark ? render('label-remark', {
-      type: 'remark',
-      icon: labelRemark.icon || 'warning-mark',
-      tooltip: labelRemark,
-      className: cx("Form-lableRemark", labelRemark === null || labelRemark === void 0 ? void 0 : labelRemark.className),
-      useMobileUI: useMobileUI,
-      container: popOverContainer ? popOverContainer : env && env.getModalContainer ? env.getModalContainer : undefined
-    }) : null), React__default.createElement("div", null, render('validation-control-addBtn', {
-      type: 'dropdown-button',
-      level: 'link',
-      size: 'sm',
-      label: '${selected}',
-      align: 'right',
-      closeOnClick: true,
-      closeOnOutside: true,
-      buttons: optionSourceList
-    }, {
-      popOverContainer: null,
-      data: {
-        selected: optionSourceList.find(function (item) {
-          return item.value === source;
-        }).label
+    }
+  });
+  Object.defineProperty(TreeOptionControl.prototype, "handleDelete", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (pathStr, index) {
+      var _this = this;
+      var _a;
+      var options = cloneDeep(this.state.options);
+      if (options.length === 1) {
+        toast.warning(i18n("355c54009e364bf4396be424fba10e0f"), {
+          closeButton: true
+        });
+        return;
       }
-    })));
-  };
-
-  TreeOptionControl.prototype.handleEditLabelOrValue = function (value, path, key) {
-    var _this = this;
-
-    var options = cloneDeep(this.state.options);
-    var nodePath = this.getNodePath(path).path;
-    set(options, "".concat(nodePath, ".").concat(key), value);
-    this.setState({
-      options: options
-    }, function () {
-      return _this.rereshBindDrag();
-    });
-  };
-
-  TreeOptionControl.prototype.handleDelete = function (pathStr, index) {
-    var _this = this;
-
-    var _a;
-
-    var options = cloneDeep(this.state.options);
-
-    if (options.length === 1) {
-      toast.warning(i18n("355c54009e364bf4396be424fba10e0f"), {
-        closeButton: true
+      var path = pathStr.split('-');
+      if (path.length === 1) {
+        options.splice(index, 1);
+      } else {
+        var parentPath = this.getNodePath(pathStr).parentPath;
+        var parentNode = get(options, parentPath, {});
+        (_a = parentNode === null || parentNode === void 0 ? void 0 : parentNode.children) === null || _a === void 0 ? void 0 : _a.splice(index, 1);
+        if (!(parentNode === null || parentNode === void 0 ? void 0 : parentNode.children.length)) {
+          // 去除僵尸子节点
+          delete parentNode.children;
+        }
+        set(options, parentPath, parentNode);
+      }
+      this.setState({
+        options: options
+      }, function () {
+        return _this.rereshBindDrag();
       });
-      return;
     }
-
-    var path = pathStr.split('-');
-
-    if (path.length === 1) {
-      options.splice(index, 1);
-    } else {
-      var parentPath = this.getNodePath(pathStr).parentPath;
-      var parentNode = get(options, parentPath, {});
-      (_a = parentNode === null || parentNode === void 0 ? void 0 : parentNode.children) === null || _a === void 0 ? void 0 : _a.splice(index, 1);
-
-      if (!(parentNode === null || parentNode === void 0 ? void 0 : parentNode.children.length)) {
-        // 去除僵尸子节点
-        delete parentNode.children;
+  });
+  Object.defineProperty(TreeOptionControl.prototype, "getNodePath", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (pathStr) {
+      var pathArr = pathStr.split('-');
+      if (pathArr.length === 1) {
+        return {
+          path: pathArr,
+          parentPath: ''
+        };
       }
-
-      set(options, parentPath, parentNode);
-    }
-
-    this.setState({
-      options: options
-    }, function () {
-      return _this.rereshBindDrag();
-    });
-  };
-
-  TreeOptionControl.prototype.getNodePath = function (pathStr) {
-    var pathArr = pathStr.split('-');
-
-    if (pathArr.length === 1) {
+      var path = "[".concat(pathArr.join('].children['), "]");
+      pathArr = pathArr.slice(0, pathArr.length - 1);
+      var parentPath = "[".concat(pathArr.join('].children['), "]");
       return {
-        path: pathArr,
-        parentPath: ''
+        path: path,
+        parentPath: parentPath
       };
     }
-
-    var path = "[".concat(pathArr.join('].children['), "]");
-    pathArr = pathArr.slice(0, pathArr.length - 1);
-    var parentPath = "[".concat(pathArr.join('].children['), "]");
-    return {
-      path: path,
-      parentPath: parentPath
-    };
-  };
-
-  TreeOptionControl.prototype.addOption = function (pathStr) {
-    var _this = this;
-
-    var _a;
-
-    var options = cloneDeep(this.state.options);
-    var path = pathStr.split('-');
-
-    if (path.length === 1) {
-      options.splice(+path[0] + 1, 0, __assign({}, defaultOption)); // 加在后面一项
-    } else {
-      var index = path[path.length - 1];
-      var parentPath = this.getNodePath(pathStr).parentPath;
-      var parentNode = get(options, parentPath, {});
-      (_a = parentNode.children) === null || _a === void 0 ? void 0 : _a.splice(+index + 1, 0, __assign({}, defaultOption));
-      set(options, parentPath, parentNode);
-    }
-
-    this.setState({
-      options: options
-    }, function () {
-      return _this.rereshBindDrag();
-    });
-  };
-
-  TreeOptionControl.prototype.addChildOption = function (pathStr) {
-    var _this = this;
-
-    if (pathStr.split('-').length >= 6) {
-      toast.warning(i18n("9046ad86a1a47f16e954f2ec38fb680a"), {
-        closeButton: true
+  });
+  Object.defineProperty(TreeOptionControl.prototype, "addOption", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (pathStr) {
+      var _this = this;
+      var _a;
+      var options = cloneDeep(this.state.options);
+      var path = pathStr.split('-');
+      if (path.length === 1) {
+        options.splice(+path[0] + 1, 0, __assign({}, defaultOption)); // 加在后面一项
+      } else {
+        var index = path[path.length - 1];
+        var parentPath = this.getNodePath(pathStr).parentPath;
+        var parentNode = get(options, parentPath, {});
+        (_a = parentNode.children) === null || _a === void 0 ? void 0 : _a.splice(+index + 1, 0, __assign({}, defaultOption));
+        set(options, parentPath, parentNode);
+      }
+      this.setState({
+        options: options
+      }, function () {
+        return _this.rereshBindDrag();
       });
-      return;
-    }
-
-    var options = cloneDeep(this.state.options);
-    var path = this.getNodePath(pathStr).path;
-    var node = get(options, path) || [];
-
-    if (node.children) {
-      node.children.push(__assign({}, defaultOption));
-    } else {
-      node.children = [__assign({}, defaultOption)];
     }
-
-    set(options, path, node);
-    this.setState({
-      options: options
-    }, function () {
-      return _this.rereshBindDrag();
-    });
-  };
-
-  TreeOptionControl.prototype.hideModal = function (notResetOptions) {
-    this.setState({
-      modalVisible: false
-    });
-
-    if (!notResetOptions) {
+  });
+  Object.defineProperty(TreeOptionControl.prototype, "addChildOption", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (pathStr) {
+      var _this = this;
+      if (pathStr.split('-').length >= 6) {
+        toast.warning(i18n("9046ad86a1a47f16e954f2ec38fb680a"), {
+          closeButton: true
+        });
+        return;
+      }
+      var options = cloneDeep(this.state.options);
+      var path = this.getNodePath(pathStr).path;
+      var node = get(options, path) || [];
+      if (node.children) {
+        node.children.push(__assign({}, defaultOption));
+      } else {
+        node.children = [__assign({}, defaultOption)];
+      }
+      set(options, path, node);
       this.setState({
-        options: this.transformOptions(this.props)
+        options: options
+      }, function () {
+        return _this.rereshBindDrag();
       });
     }
-  };
-
-  TreeOptionControl.prototype.renderOptions = function (option, key, indexes) {
-    var _this = this;
-
-    var render = this.props.render;
-    var path = indexes.join('-');
-
-    if (option.children && option.children.length) {
-      var parent_1 = cloneDeep(option);
-      delete parent_1.children;
-      return React__default.createElement("div", {
-        className: cx('ae-TreeOptionControlItem-parent'),
-        key: "parent".concat(path).concat(key).concat(option.label)
-      }, this.renderOptions(parent_1, key, indexes), React__default.createElement("div", {
-        className: cx('ae-TreeOptionControlItem-son'),
-        key: "son".concat(path).concat(key).concat(option.label),
-        "data-level": path
-      }, option.children.map(function (option, key) {
-        return _this.renderOptions(option, key, indexes.concat(key));
-      })));
-    }
-
-    return React__default.createElement("div", {
-      className: "ae-TreeOptionControlItem",
-      key: "child".concat(path).concat(key).concat(option.label),
-      "data-path": path
-    }, React__default.createElement("a", {
-      className: "ae-TreeOptionControlItem-dragBar"
-    }, React__default.createElement(Icon, {
-      icon: "drag-bar",
-      className: "icon"
-    })), React__default.createElement(InputBox, {
-      className: "ae-TreeOptionControlItem-input-label",
-      value: option.label,
-      placeholder: "\u9009\u9879\u540D\u79F0",
-      clearable: false,
-      onBlur: function (event) {
-        // 这里使用onBlur替代onChange 减少渲染次数
-        _this.handleEditLabelOrValue(event.target.value, path, 'label');
+  });
+  Object.defineProperty(TreeOptionControl.prototype, "hideModal", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (notResetOptions) {
+      this.setState({
+        modalVisible: false
+      });
+      if (!notResetOptions) {
+        this.setState({
+          options: this.transformOptions(this.props)
+        });
       }
-    }), React__default.createElement(InputBox, {
-      className: "ae-TreeOptionControlItem-input-value",
-      value: option.value,
-      placeholder: "\u9009\u9879\u503C",
-      clearable: false,
-      onBlur: function (event) {
-        _this.handleEditLabelOrValue(event.target.value, path, 'value');
+    }
+  });
+  Object.defineProperty(TreeOptionControl.prototype, "renderOptions", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (option, key, indexes) {
+      var _this = this;
+      var render = this.props.render;
+      var path = indexes.join('-');
+      if (option.children && option.children.length) {
+        var parent_1 = cloneDeep(option);
+        delete parent_1.children;
+        return React__default.createElement("div", {
+          className: cx('ae-TreeOptionControlItem-parent'),
+          key: "parent".concat(path).concat(key).concat(option.label)
+        }, this.renderOptions(parent_1, key, indexes), React__default.createElement("div", {
+          className: cx('ae-TreeOptionControlItem-son'),
+          key: "son".concat(path).concat(key).concat(option.label),
+          "data-level": path
+        }, option.children.map(function (option, key) {
+          return _this.renderOptions(option, key, indexes.concat(key));
+        })));
       }
-    }), React__default.createElement("div", {
-      className: "ae-TreeOptionControlItem-btns"
-    }, render('dropdown', {
-      type: 'dropdown-button',
-      className: 'ae-TreeOptionControlItem-dropdown fa-sm',
-      btnClassName: 'px-2',
-      icon: 'add',
-      hideCaret: true,
-      closeOnClick: true,
-      trigger: 'hover',
-      align: 'right',
-      menuClassName: 'ae-TreeOptionControlItem-ulmenu',
-      buttons: [{
-        type: 'button',
-        className: 'ae-OptionControlItem-action',
-        label: i18n("e8755fb1e985a5d26df0fce1f0b7b0f8"),
-        onClick: function () {
-          _this.addOption(path);
+      return React__default.createElement("div", {
+        className: "ae-TreeOptionControlItem",
+        key: "child".concat(path).concat(key).concat(option.label),
+        "data-path": path
+      }, React__default.createElement("a", {
+        className: "ae-TreeOptionControlItem-dragBar"
+      }, React__default.createElement(Icon, {
+        icon: "drag-bar",
+        className: "icon"
+      })), React__default.createElement(InputBox, {
+        className: "ae-TreeOptionControlItem-input-label",
+        value: option.label,
+        placeholder: "\u9009\u9879\u540D\u79F0",
+        clearable: false,
+        onBlur: function (event) {
+          // 这里使用onBlur替代onChange 减少渲染次数
+          _this.handleEditLabelOrValue(event.target.value, path, 'label');
+        }
+      }), React__default.createElement(InputBox, {
+        className: "ae-TreeOptionControlItem-input-value",
+        value: option.value,
+        placeholder: "\u9009\u9879\u503C",
+        clearable: false,
+        onBlur: function (event) {
+          _this.handleEditLabelOrValue(event.target.value, path, 'value');
         }
+      }), React__default.createElement("div", {
+        className: "ae-TreeOptionControlItem-btns"
+      }, render('dropdown', {
+        type: 'dropdown-button',
+        className: 'ae-TreeOptionControlItem-dropdown fa-sm',
+        btnClassName: 'px-2',
+        icon: 'add',
+        hideCaret: true,
+        closeOnClick: true,
+        trigger: 'hover',
+        align: 'right',
+        menuClassName: 'ae-TreeOptionControlItem-ulmenu',
+        buttons: [{
+          type: 'button',
+          className: 'ae-OptionControlItem-action',
+          label: i18n("e8755fb1e985a5d26df0fce1f0b7b0f8"),
+          onClick: function () {
+            _this.addOption(path);
+          }
+        }, {
+          type: 'button',
+          className: 'ae-OptionControlItem-action',
+          label: i18n("bbcbe681f9225f8adf3663f563a9f294"),
+          onClick: function () {
+            _this.addChildOption(path);
+          }
+        }]
       }, {
-        type: 'button',
-        className: 'ae-OptionControlItem-action',
-        label: i18n("bbcbe681f9225f8adf3663f563a9f294"),
+        popOverContainer: null // amis 渲染挂载节点会使用 this.target
+      }), React__default.createElement(Button, {
+        size: "sm",
         onClick: function () {
-          _this.addChildOption(path);
+          _this.handleDelete(path, key);
         }
-      }]
-    }, {
-      popOverContainer: null // amis 渲染挂载节点会使用 this.target
-
-    }), React__default.createElement(Button, {
-      size: "sm",
-      onClick: function () {
-        _this.handleDelete(path, key);
-      }
-    }, React__default.createElement(Icon, {
-      className: "icon",
-      icon: "delete-bold-btn"
-    }))));
-  };
-
-  TreeOptionControl.prototype.dragRef = function (ref) {
-    if (!this.drag && ref) {
-      this.drag = ref;
-      this.initDragging();
-    } else if (this.drag && !ref) {
-      this.destroyDragging(true);
+      }, React__default.createElement(Icon, {
+        className: "icon",
+        icon: "delete-bold-btn"
+      }))));
     }
-  };
-
-  TreeOptionControl.prototype.rereshBindDrag = function () {
-    if (this.drag) {
-      this.destroyDragging();
-      this.initDragging();
+  });
+  Object.defineProperty(TreeOptionControl.prototype, "dragRef", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (ref) {
+      if (!this.drag && ref) {
+        this.drag = ref;
+        this.initDragging();
+      } else if (this.drag && !ref) {
+        this.destroyDragging(true);
+      }
     }
-  };
-
-  TreeOptionControl.prototype.initDragging = function () {
-    var _this = this;
-
-    var _a;
-
-    var rootSortable = new Sortable(this.drag, {
-      group: 'TreeOptionControlGroup',
-      animation: 150,
-      handle: '.ae-TreeOptionControlItem-dragBar',
-      ghostClass: 'ae-TreeOptionControlItem-dragging',
-      onEnd: function (e) {
-        var _a;
-
-        var options = cloneDeep(_this.state.options);
-        var oldIndex = e.oldIndex,
-            newIndex = e.newIndex;
-        _a = [options[oldIndex], options[newIndex]], options[newIndex] = _a[0], options[oldIndex] = _a[1];
-
-        _this.setState({
-          options: options
-        }, function () {
-          return _this.rereshBindDrag();
-        });
-      },
-      onMove: function (e) {
-        var from = e.from,
-            to = e.to; // 暂时不支持跨级拖拽
-
-        return from.dataset.level === to.dataset.level;
+  });
+  Object.defineProperty(TreeOptionControl.prototype, "rereshBindDrag", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      if (this.drag) {
+        this.destroyDragging();
+        this.initDragging();
       }
-    });
-    this.sortables.push(rootSortable);
-    var parents = (_a = this.drag) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.ae-TreeOptionControlItem-son');
-
-    if (!parents) {
-      return;
     }
-
-    Array.from(parents).forEach(function (parent) {
-      var sortable = new Sortable(parent, {
+  });
+  Object.defineProperty(TreeOptionControl.prototype, "initDragging", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      var _this = this;
+      var _a;
+      var rootSortable = new Sortable(this.drag, {
         group: 'TreeOptionControlGroup',
         animation: 150,
         handle: '.ae-TreeOptionControlItem-dragBar',
         ghostClass: 'ae-TreeOptionControlItem-dragging',
-        // fallbackOnBody: true,
         onEnd: function (e) {
           var _a;
-
-          var item = e.item,
-              oldIndex = e.oldIndex,
-              newIndex = e.newIndex;
           var options = cloneDeep(_this.state.options);
-          var nodePath = item.dataset.path;
-
-          if (!nodePath) {
-            return;
-          }
-
-          var parentPath = _this.getNodePath(nodePath).parentPath;
-
-          var children = get(options, "".concat(parentPath, ".children")) || [];
-
-          if (children) {
-            _a = [children[newIndex], children[oldIndex]], children[oldIndex] = _a[0], children[newIndex] = _a[1];
-            set(options, "".concat(parentPath, ".children"), children);
-
-            _this.setState({
-              options: options
-            });
-          }
+          var oldIndex = e.oldIndex,
+            newIndex = e.newIndex;
+          _a = [options[oldIndex], options[newIndex]], options[newIndex] = _a[0], options[oldIndex] = _a[1];
+          _this.setState({
+            options: options
+          }, function () {
+            return _this.rereshBindDrag();
+          });
         },
         onMove: function (e) {
           var from = e.from,
-              to = e.to; // 暂时不支持跨级拖拽
-
+            to = e.to;
+          // 暂时不支持跨级拖拽
           return from.dataset.level === to.dataset.level;
         }
       });
-
-      _this.sortables.push(sortable);
-    });
-  };
-
-  TreeOptionControl.prototype.destroyDragging = function (destroyRoot) {
-    this.sortables.forEach(function (sortable) {
-      sortable === null || sortable === void 0 ? void 0 : sortable.destroy();
-    });
-    this.sortables = [];
-    destroyRoot && (this.drag = null);
-  };
-
-  TreeOptionControl.prototype.renderModal = function () {
-    var _this = this;
-
-    var _a = this.state,
+      this.sortables.push(rootSortable);
+      var parents = (_a = this.drag) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.ae-TreeOptionControlItem-son');
+      if (!parents) {
+        return;
+      }
+      Array.from(parents).forEach(function (parent) {
+        var sortable = new Sortable(parent, {
+          group: 'TreeOptionControlGroup',
+          animation: 150,
+          handle: '.ae-TreeOptionControlItem-dragBar',
+          ghostClass: 'ae-TreeOptionControlItem-dragging',
+          // fallbackOnBody: true,
+          onEnd: function (e) {
+            var _a;
+            var item = e.item,
+              oldIndex = e.oldIndex,
+              newIndex = e.newIndex;
+            var options = cloneDeep(_this.state.options);
+            var nodePath = item.dataset.path;
+            if (!nodePath) {
+              return;
+            }
+            var parentPath = _this.getNodePath(nodePath).parentPath;
+            var children = get(options, "".concat(parentPath, ".children")) || [];
+            if (children) {
+              _a = [children[newIndex], children[oldIndex]], children[oldIndex] = _a[0], children[newIndex] = _a[1];
+              set(options, "".concat(parentPath, ".children"), children);
+              _this.setState({
+                options: options
+              });
+            }
+          },
+          onMove: function (e) {
+            var from = e.from,
+              to = e.to;
+            // 暂时不支持跨级拖拽
+            return from.dataset.level === to.dataset.level;
+          }
+        });
+        _this.sortables.push(sortable);
+      });
+    }
+  });
+  Object.defineProperty(TreeOptionControl.prototype, "destroyDragging", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (destroyRoot) {
+      this.sortables.forEach(function (sortable) {
+        sortable === null || sortable === void 0 ? void 0 : sortable.destroy();
+      });
+      this.sortables = [];
+      destroyRoot && (this.drag = null);
+    }
+  });
+  Object.defineProperty(TreeOptionControl.prototype, "renderModal", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      var _this = this;
+      var _a = this.state,
         modalVisible = _a.modalVisible,
         options = _a.options;
-    return React__default.createElement(Modal, {
-      className: "ae-TreeOptionControl-Modal",
-      show: modalVisible,
-      onHide: function () {
-        _this.hideModal();
-      }
-    }, React__default.createElement(Modal.Header, {
-      onClose: function () {
-        _this.hideModal();
-      }
-    }, "\u9009\u9879\u7BA1\u7406"), React__default.createElement(Modal.Body, null, React__default.createElement("div", {
-      className: "ae-TreeOptionControl-content",
-      ref: this.dragRef
-    }, options.map(function (option, key) {
-      return _this.renderOptions(option, key, [key]);
-    }))), React__default.createElement(Modal.Footer, null, React__default.createElement(Button, {
-      onClick: function () {
-        _this.hideModal();
-      }
-    }, "\u53D6\u6D88"), React__default.createElement(Button, {
-      level: "primary",
-      onClick: function () {
-        _this.onChange();
-
-        _this.hideModal(true);
-      }
-    }, "\u786E\u8BA4")));
-  };
-
-  TreeOptionControl.prototype.handleAPIChange = function (source) {
-    this.setState({
-      api: source
-    }, this.onChange);
-  };
-
-  TreeOptionControl.prototype.handleLableFieldChange = function (labelField) {
-    this.setState({
-      labelField: labelField
-    }, this.onChange);
-  };
-
-  TreeOptionControl.prototype.handleValueFieldChange = function (valueField) {
-
-    this.setState({
-      valueField: valueField
-    }, this.onChange);
-  };
-
-  TreeOptionControl.prototype.handleIconFieldChange = function (iconField) {
-    this.setState({
-      iconField: iconField
-    }, this.onChange);
-  };
-
-  TreeOptionControl.prototype.renderApiPanel = function () {
-    var _a = this.props,
+      return React__default.createElement(Modal, {
+        className: "ae-TreeOptionControl-Modal",
+        show: modalVisible,
+        onHide: function () {
+          _this.hideModal();
+        }
+      }, React__default.createElement(Modal.Header, {
+        onClose: function () {
+          _this.hideModal();
+        }
+      }, "\u9009\u9879\u7BA1\u7406"), React__default.createElement(Modal.Body, null, React__default.createElement("div", {
+        className: "ae-TreeOptionControl-content",
+        ref: this.dragRef
+      }, options.map(function (option, key) {
+        return _this.renderOptions(option, key, [key]);
+      }))), React__default.createElement(Modal.Footer, null, React__default.createElement(Button, {
+        onClick: function () {
+          _this.hideModal();
+        }
+      }, "\u53D6\u6D88"), React__default.createElement(Button, {
+        level: "primary",
+        onClick: function () {
+          _this.onChange();
+          _this.hideModal(true);
+        }
+      }, "\u786E\u8BA4")));
+    }
+  });
+  Object.defineProperty(TreeOptionControl.prototype, "handleAPIChange", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (source) {
+      this.setState({
+        api: source
+      }, this.onChange);
+    }
+  });
+  Object.defineProperty(TreeOptionControl.prototype, "handleLableFieldChange", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (labelField) {
+      this.setState({
+        labelField: labelField
+      }, this.onChange);
+    }
+  });
+  Object.defineProperty(TreeOptionControl.prototype, "handleValueFieldChange", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (valueField) {
+      this.setState({
+        valueField: valueField
+      }, this.onChange);
+    }
+  });
+  Object.defineProperty(TreeOptionControl.prototype, "handleIconFieldChange", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function (iconField) {
+      this.setState({
+        iconField: iconField
+      }, this.onChange);
+    }
+  });
+  Object.defineProperty(TreeOptionControl.prototype, "renderApiPanel", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      var _a = this.props,
         render = _a.render,
         _b = _a.showIconField,
         showIconField = _b === void 0 ? false : _b;
-    var _c = this.state,
+      var _c = this.state,
         source = _c.source,
         api = _c.api,
         labelField = _c.labelField,
         valueField = _c.valueField,
         iconField = _c.iconField;
-
-    if (source === 'custom') {
-      return null;
-    }
-
-    return render('api', getSchemaTpl('apiControl', {
-      label: i18n("54ea89b497ec3bb319c68844dfa3687f"),
-      name: 'source',
-      className: 'ae-ExtendMore',
-      visibleOn: 'data.autoComplete !== false',
-      value: api,
-      onChange: this.handleAPIChange,
-      sourceType: source,
-      footer: [{
-        label: tipedLabel(i18n("7e9c83e86beb612377a94e6e8d1fc644"), i18n("26ff46d82166741297ce666b2792af85")),
-        type: 'input-text',
-        name: 'labelField',
-        value: labelField,
-        placeholder: i18n("6d4ce0631f37676a887c9599691fabec"),
-        onChange: this.handleLableFieldChange
-      }, {
-        label: i18n("2e01f5f5889e33d003bec7857cd38445"),
-        type: 'input-text',
-        name: 'valueField',
-        value: valueField,
-        placeholder: i18n("959c27193eb0a41d01f4b53dcc4b9245"),
-        onChange: this.handleValueFieldChange
-      }, {
-        type: 'input-text',
-        label: i18n("1cd9e1bb335cb0643d9e310dd4edd830"),
-        name: 'iconField',
-        value: iconField,
-        placeholder: i18n("152b66069787294e53cfc176a189c81f"),
-        visible: showIconField,
-        onChange: this.handleIconFieldChange
-      }]
-    }));
-  };
-
-  TreeOptionControl.prototype.render = function () {
-    var _this = this;
-
-    var source = this.state.source;
-    var className = this.props.className;
-    return React__default.createElement("div", {
-      className: cx('ae-TreeOptionControl', className)
-    }, this.renderHeader(), source === 'custom' ? React__default.createElement("div", {
-      className: "ae-TreeOptionControl-wrapper"
-    }, React__default.createElement("div", null, React__default.createElement(Button, {
-      block: true,
-      onClick: function () {
-        _this.setState({
-          modalVisible: true
-        });
+      if (source === 'custom') {
+        return null;
       }
-    }, "\u9009\u9879\u7BA1\u7406"), this.renderModal())) : null, this.renderApiPanel());
-  };
-
+      return render('api', getSchemaTpl('apiControl', {
+        label: i18n("54ea89b497ec3bb319c68844dfa3687f"),
+        name: 'source',
+        className: 'ae-ExtendMore',
+        visibleOn: 'data.autoComplete !== false',
+        value: api,
+        onChange: this.handleAPIChange,
+        sourceType: source,
+        footer: [{
+          label: tipedLabel(i18n("7e9c83e86beb612377a94e6e8d1fc644"), i18n("26ff46d82166741297ce666b2792af85")),
+          type: 'input-text',
+          name: 'labelField',
+          value: labelField,
+          placeholder: i18n("6d4ce0631f37676a887c9599691fabec"),
+          onChange: this.handleLableFieldChange
+        }, {
+          label: i18n("2e01f5f5889e33d003bec7857cd38445"),
+          type: 'input-text',
+          name: 'valueField',
+          value: valueField,
+          placeholder: i18n("959c27193eb0a41d01f4b53dcc4b9245"),
+          onChange: this.handleValueFieldChange
+        }, {
+          type: 'input-text',
+          label: i18n("1cd9e1bb335cb0643d9e310dd4edd830"),
+          name: 'iconField',
+          value: iconField,
+          placeholder: i18n("152b66069787294e53cfc176a189c81f"),
+          visible: showIconField,
+          onChange: this.handleIconFieldChange
+        }]
+      }));
+    }
+  });
+  Object.defineProperty(TreeOptionControl.prototype, "render", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      var _this = this;
+      var source = this.state.source;
+      var className = this.props.className;
+      return React__default.createElement("div", {
+        className: cx('ae-TreeOptionControl', className)
+      }, this.renderHeader(), source === 'custom' ? React__default.createElement("div", {
+        className: "ae-TreeOptionControl-wrapper"
+      }, React__default.createElement("div", null, React__default.createElement(Button, {
+        block: true,
+        onClick: function () {
+          _this.setState({
+            modalVisible: true
+          });
+        }
+      }, "\u9009\u9879\u7BA1\u7406"), this.renderModal())) : null, this.renderApiPanel());
+    }
+  });
   __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [String]), __metadata("design:returntype", void 0)], TreeOptionControl.prototype, "handleSourceChange", null);
-
   __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [String, Number]), __metadata("design:returntype", void 0)], TreeOptionControl.prototype, "handleDelete", null);
-
   __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [String]), __metadata("design:returntype", void 0)], TreeOptionControl.prototype, "getNodePath", null);
-
   __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [String]), __metadata("design:returntype", void 0)], TreeOptionControl.prototype, "addOption", null);
-
   __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [String]), __metadata("design:returntype", void 0)], TreeOptionControl.prototype, "addChildOption", null);
-
   __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Boolean]), __metadata("design:returntype", void 0)], TreeOptionControl.prototype, "hideModal", null);
-
   __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object, Number, Array]), __metadata("design:returntype", Object)], TreeOptionControl.prototype, "renderOptions", null);
-
   __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", void 0)], TreeOptionControl.prototype, "dragRef", null);
-
   __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Boolean]), __metadata("design:returntype", void 0)], TreeOptionControl.prototype, "destroyDragging", null);
-
   __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", void 0)], TreeOptionControl.prototype, "renderModal", null);
-
   __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", void 0)], TreeOptionControl.prototype, "handleAPIChange", null);
-
   __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [String]), __metadata("design:returntype", void 0)], TreeOptionControl.prototype, "handleLableFieldChange", null);
-
   __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [String, Object]), __metadata("design:returntype", void 0)], TreeOptionControl.prototype, "handleValueFieldChange", null);
-
   __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [String]), __metadata("design:returntype", void 0)], TreeOptionControl.prototype, "handleIconFieldChange", null);
-
   return TreeOptionControl;
 }(React__default.Component);
-
-/** @class */
-(function (_super) {
+/** @class */(function (_super) {
   __extends(TreeOptionControlRenderer, _super);
-
   function TreeOptionControlRenderer() {
     return _super !== null && _super.apply(this, arguments) || this;
   }
-
   TreeOptionControlRenderer = __decorate([FormItem({
     type: 'ae-treeOptionControl',
     renderLabel: false