amis-editor 5.2.5 → 5.3.0

package/esm/renderer/TimelineItemControl.js

@@ -1,9 +1,9 @@
 /**
- * amis-editor v5.2.4-beta.39
+ * amis-editor v5.3.0
  * Copyright 2018-2023 @fex
  */
 
-import { __extends, __assign, __spreadArray, __decorate, __metadata } from 'tslib';
+import { __extends, __assign, __read, __spreadArray, __decorate, __metadata } from 'tslib';
 import React__default from 'react';
 import { findDOMNode } from 'react-dom';
 import cx from 'classnames';
@@ -17,24 +17,6 @@ var TimelineItemControl = /** @class */function (_super) {
   __extends(TimelineItemControl, _super);
   function TimelineItemControl(props) {
     var _this = _super.call(this, props) || this;
-    Object.defineProperty(_this, "sortable", {
-      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, "target", {
-      enumerable: true,
-      configurable: true,
-      writable: true,
-      value: void 0
-    });
     _this.state = {
       items: props.value,
       api: props.data.source,
@@ -45,259 +27,360 @@ var TimelineItemControl = /** @class */function (_super) {
   /**
    * 切换选项类型
    */
-  Object.defineProperty(TimelineItemControl.prototype, "handleSourceChange", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function (source) {
-      this.setState({
-        source: source
-      }, this.onChange);
-    }
-  });
-  Object.defineProperty(TimelineItemControl.prototype, "handleAPIChange", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function (source) {
-      this.setState({
-        api: source
-      }, this.onChange);
-    }
-  });
-  Object.defineProperty(TimelineItemControl.prototype, "onChange", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function () {
-      var source = this.state.source;
-      var onBulkChange = this.props.onBulkChange;
-      var data = {
-        source: undefined,
-        items: undefined
-      };
-      if (source === 'custom') {
-        var items = this.state.items;
-        data.items = items.map(function (item) {
-          return __assign({}, item);
-        });
-      }
-      if (source === 'api') {
-        var _a = this.state,
-          items = _a.items,
-          api = _a.api;
-        data.items = items.map(function (item) {
-          return __assign({}, item);
-        });
-        data.source = api;
-      }
-      onBulkChange && onBulkChange(data);
-    }
-  });
-  Object.defineProperty(TimelineItemControl.prototype, "toggleEdit", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function (values, index) {
-      var items = this.state.items.concat();
-      items[index] = values;
-      this.setState({
-        items: items
-      }, this.onChange);
-    }
-  });
-  Object.defineProperty(TimelineItemControl.prototype, "toggleCopy", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function (index) {
+  TimelineItemControl.prototype.handleSourceChange = function (source) {
+    this.setState({
+      source: source
+    }, this.onChange);
+  };
+  TimelineItemControl.prototype.handleAPIChange = function (source) {
+    this.setState({
+      api: source
+    }, this.onChange);
+  };
+  TimelineItemControl.prototype.onChange = function () {
+    var source = this.state.source;
+    var onBulkChange = this.props.onBulkChange;
+    var data = {
+      source: undefined,
+      items: undefined
+    };
+    if (source === 'custom') {
       var items = this.state.items;
-      var res = items.concat(items[index]);
-      this.setState({
-        items: res
-      }, this.onChange);
-    }
-  });
-  Object.defineProperty(TimelineItemControl.prototype, "toggleDelete", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function (index) {
-      var items = this.state.items.concat();
-      items.splice(index, 1);
-      this.setState({
-        items: items
-      }, this.onChange);
+      data.items = items.map(function (item) {
+        return __assign({}, item);
+      });
     }
-  });
-  Object.defineProperty(TimelineItemControl.prototype, "handleEditLabel", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function (index, value, attr) {
-      var _a;
-      var _this = this;
-      var items = this.state.items.concat();
-      items.splice(index, 1, __assign(__assign({}, items[index]), (_a = {}, _a[attr] = value, _a)));
-      this.setState({
-        items: items
-      }, function () {
-        return _this.onChange();
+    if (source === 'api') {
+      var _a = this.state,
+        items = _a.items,
+        api = _a.api;
+      data.items = items.map(function (item) {
+        return __assign({}, item);
       });
+      data.source = api;
     }
-  });
-  Object.defineProperty(TimelineItemControl.prototype, "handleBatchAdd", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function (values, action) {
-      var _this = this;
-      var items = this.state.items.concat();
-      var addedOptions = values.batchItems.split('\n').map(function (option) {
-        var item = option.trim();
-        if (~item.indexOf(' ')) {
-          var _a = item.split(' '),
-            time = _a[0],
-            title = _a[1];
-          return {
-            time: time.trim(),
-            title: title.trim()
-          };
-        }
+    onBulkChange && onBulkChange(data);
+  };
+  TimelineItemControl.prototype.toggleEdit = function (values, index) {
+    var items = this.state.items.concat();
+    items[index] = values;
+    this.setState({
+      items: items
+    }, this.onChange);
+  };
+  TimelineItemControl.prototype.toggleCopy = function (index) {
+    var items = this.state.items;
+    var res = items.concat(items[index]);
+    this.setState({
+      items: res
+    }, this.onChange);
+  };
+  TimelineItemControl.prototype.toggleDelete = function (index) {
+    var items = this.state.items.concat();
+    items.splice(index, 1);
+    this.setState({
+      items: items
+    }, this.onChange);
+  };
+  TimelineItemControl.prototype.handleEditLabel = function (index, value, attr) {
+    var _a;
+    var _this = this;
+    var items = this.state.items.concat();
+    items.splice(index, 1, __assign(__assign({}, items[index]), (_a = {}, _a[attr] = value, _a)));
+    this.setState({
+      items: items
+    }, function () {
+      return _this.onChange();
+    });
+  };
+  TimelineItemControl.prototype.handleBatchAdd = function (values, action) {
+    var _this = this;
+    var items = this.state.items.concat();
+    var addedOptions = values.batchItems.split('\n').map(function (option) {
+      var item = option.trim();
+      if (~item.indexOf(' ')) {
+        var _a = __read(item.split(' '), 2),
+          time = _a[0],
+          title = _a[1];
         return {
-          label: item,
-          value: item
+          time: time.trim(),
+          title: title.trim()
         };
-      });
-      var newOptions = uniqBy(__spreadArray(__spreadArray([], items, true), addedOptions, true), 'time');
-      this.setState({
-        items: newOptions
-      }, function () {
-        return _this.onChange();
-      });
-    }
-  });
-  Object.defineProperty(TimelineItemControl.prototype, "handleAdd", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function (values) {
-      var items = this.state.items;
-      var itemsTemp = items.concat(__assign({}, values));
-      this.setState({
-        items: itemsTemp
-      }, this.onChange);
-    }
-  });
-  Object.defineProperty(TimelineItemControl.prototype, "buildAddOrEditSchema", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function (props) {
-      var i18nEnabled = getI18nEnabled();
-      return [{
-        type: i18nEnabled ? 'input-text-i18n' : 'input-text',
-        name: 'time',
-        required: true,
-        placeholder: i18n("37087e5bb2d0367872a461f535580d91"),
-        label: i18n("19fcb9eb2594059036dfede5f4ec53e8"),
-        value: props === null || props === void 0 ? void 0 : props['time']
-      }, {
-        type: i18nEnabled ? 'input-text-i18n' : 'input-text',
-        name: 'title',
-        required: true,
-        placeholder: i18n("96641a78cfd9f9f8ba68f0524347b186"),
-        label: i18n("32c65d8d7431e76029678ec7bb73a5ab"),
-        value: props === null || props === void 0 ? void 0 : props['title']
-      }, {
-        type: 'input-color',
-        name: 'color',
-        value: props === null || props === void 0 ? void 0 : props['color'],
-        placeholder: i18n("02cc4f8f5a9aefbc03c778f7a5c989c7"),
-        label: i18n("6b36c6f7ec834692ec6c8e3816349fdd")
-      }, getSchemaTpl('icon', {
-        value: props === null || props === void 0 ? void 0 : props['icon'],
-        placeholder: i18n("02cc4f8f5a9aefbc03c778f7a5c989c7"),
-        clearable: true,
-        description: '',
-        className: 'fix-icon-picker-overflow',
-        pipeIn: function (value) {
-          return value === null || value === void 0 ? void 0 : value.icon;
-        },
-        pipeOut: function (value) {
-          if (value) {
-            return {
-              type: 'icon',
-              vendor: '',
-              icon: value
-            };
-          }
-          return undefined;
-        }
-      })];
-    }
-  });
-  Object.defineProperty(TimelineItemControl.prototype, "buildBatchAddSchema", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function () {
+      }
       return {
-        type: 'action',
-        actionType: 'dialog',
-        label: i18n("22de6ef85ed60ec54dbdc1d8583e5104"),
-        dialog: {
-          title: i18n("421252e16c6cb544fe9ce0be94a190e0"),
-          headerClassName: 'font-bold',
-          closeOnEsc: true,
-          closeOnOutside: false,
-          showCloseButton: true,
+        label: item,
+        value: item
+      };
+    });
+    var newOptions = uniqBy(__spreadArray(__spreadArray([], __read(items), false), __read(addedOptions), false), 'time');
+    this.setState({
+      items: newOptions
+    }, function () {
+      return _this.onChange();
+    });
+  };
+  TimelineItemControl.prototype.handleAdd = function (values) {
+    var items = this.state.items;
+    var itemsTemp = items.concat(__assign({}, values));
+    this.setState({
+      items: itemsTemp
+    }, this.onChange);
+  };
+  TimelineItemControl.prototype.buildAddOrEditSchema = function (props) {
+    var i18nEnabled = getI18nEnabled();
+    return [{
+      type: i18nEnabled ? 'input-text-i18n' : 'input-text',
+      name: 'time',
+      required: true,
+      placeholder: i18n("37087e5bb2d0367872a461f535580d91"),
+      label: i18n("19fcb9eb2594059036dfede5f4ec53e8"),
+      value: props === null || props === void 0 ? void 0 : props['time']
+    }, {
+      type: i18nEnabled ? 'input-text-i18n' : 'input-text',
+      name: 'title',
+      required: true,
+      placeholder: i18n("96641a78cfd9f9f8ba68f0524347b186"),
+      label: i18n("32c65d8d7431e76029678ec7bb73a5ab"),
+      value: props === null || props === void 0 ? void 0 : props['title']
+    }, {
+      type: 'input-color',
+      name: 'color',
+      value: props === null || props === void 0 ? void 0 : props['color'],
+      placeholder: i18n("02cc4f8f5a9aefbc03c778f7a5c989c7"),
+      label: i18n("6b36c6f7ec834692ec6c8e3816349fdd")
+    }, getSchemaTpl('icon', {
+      value: props === null || props === void 0 ? void 0 : props['icon'],
+      placeholder: i18n("02cc4f8f5a9aefbc03c778f7a5c989c7"),
+      clearable: true,
+      description: '',
+      className: 'fix-icon-picker-overflow',
+      pipeIn: function (value) {
+        return value === null || value === void 0 ? void 0 : value.icon;
+      },
+      pipeOut: function (value) {
+        if (value) {
+          return {
+            type: 'icon',
+            vendor: '',
+            icon: value
+          };
+        }
+        return undefined;
+      }
+    })];
+  };
+  TimelineItemControl.prototype.buildBatchAddSchema = function () {
+    return {
+      type: 'action',
+      actionType: 'dialog',
+      label: i18n("22de6ef85ed60ec54dbdc1d8583e5104"),
+      dialog: {
+        title: i18n("421252e16c6cb544fe9ce0be94a190e0"),
+        headerClassName: 'font-bold',
+        closeOnEsc: true,
+        closeOnOutside: false,
+        showCloseButton: true,
+        body: [{
+          type: 'alert',
+          level: 'warning',
           body: [{
-            type: 'alert',
-            level: 'warning',
-            body: [{
-              type: 'tpl',
-              tpl: i18n("1bf14fd24efe68f62bbff0538dee238a")
-            }],
-            showIcon: true,
-            className: 'mb-2.5'
-          }, {
-            type: 'form',
-            wrapWithPanel: false,
-            mode: 'normal',
-            wrapperComponent: 'div',
-            resetAfterSubmit: true,
-            autoFocus: true,
-            preventEnterSubmit: true,
-            horizontal: {
-              left: 0,
-              right: 12
-            },
-            body: [{
-              name: 'batchItems',
-              type: 'textarea',
-              label: '',
-              placeholder: i18n("1e2f96a69fbef8caa8823a3067ebbdc7"),
-              trimContents: true,
-              minRows: 10,
-              maxRows: 50,
-              required: true
-            }]
+            type: 'tpl',
+            tpl: i18n("1bf14fd24efe68f62bbff0538dee238a")
+          }],
+          showIcon: true,
+          className: 'mb-2.5'
+        }, {
+          type: 'form',
+          wrapWithPanel: false,
+          mode: 'normal',
+          wrapperComponent: 'div',
+          resetAfterSubmit: true,
+          autoFocus: true,
+          preventEnterSubmit: true,
+          horizontal: {
+            left: 0,
+            right: 12
+          },
+          body: [{
+            name: 'batchItems',
+            type: 'textarea',
+            label: '',
+            placeholder: i18n("1e2f96a69fbef8caa8823a3067ebbdc7"),
+            trimContents: true,
+            minRows: 10,
+            maxRows: 50,
+            required: true
           }]
-        }
-      };
+        }]
+      }
+    };
+  };
+  TimelineItemControl.prototype.buildAddSchema = function () {
+    return {
+      type: 'action',
+      actionType: 'dialog',
+      label: i18n("e8755fb1e985a5d26df0fce1f0b7b0f8"),
+      active: true,
+      dialog: {
+        title: i18n("d584018521820dac9e92120737b733ba"),
+        headerClassName: 'font-bold',
+        closeOnEsc: true,
+        closeOnOutside: false,
+        showCloseButton: true,
+        body: [{
+          type: 'form',
+          wrapWithPanel: false,
+          wrapperComponent: 'div',
+          resetAfterSubmit: true,
+          autoFocus: true,
+          preventEnterSubmit: true,
+          horizontal: {
+            justify: true,
+            left: 3,
+            right: 9
+          },
+          body: this.buildAddOrEditSchema()
+        }]
+      }
+    };
+  };
+  TimelineItemControl.prototype.dragRef = function (ref) {
+    if (!this.drag && ref) {
+      this.initDragging();
+    } else if (this.drag && !ref) {
+      this.destroyDragging();
     }
-  });
-  Object.defineProperty(TimelineItemControl.prototype, "buildAddSchema", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function () {
-      return {
+    this.drag = ref;
+  };
+  TimelineItemControl.prototype.initDragging = function () {
+    var _this = this;
+    var dom = findDOMNode(this);
+    this.sortable = new Sortable(dom.querySelector('.ae-TimelineItemControl-content'), {
+      group: 'TimelineItemControlGroup',
+      animation: 150,
+      handle: '.ae-TimelineItemControlItem-dragBar',
+      ghostClass: 'ae-TimelineItemControlItem--dragging',
+      onEnd: function (e) {
+        // 没有移动
+        if (e.newIndex === e.oldIndex) {
+          return;
+        }
+        // 换回来
+        var parent = e.to;
+        if (e.newIndex < e.oldIndex && e.oldIndex < parent.childNodes.length - 1) {
+          parent.insertBefore(e.item, parent.childNodes[e.oldIndex + 1]);
+        } else if (e.oldIndex < parent.childNodes.length - 1) {
+          parent.insertBefore(e.item, parent.childNodes[e.oldIndex]);
+        } else {
+          parent.appendChild(e.item);
+        }
+        var items = _this.state.items.concat();
+        items[e.oldIndex] = items.splice(e.newIndex, 1, items[e.oldIndex])[0];
+        _this.setState({
+          items: items
+        }, function () {
+          return _this.onChange();
+        });
+      }
+    });
+  };
+  TimelineItemControl.prototype.destroyDragging = function () {
+    this.sortable && this.sortable.destroy();
+  };
+  TimelineItemControl.prototype.renderHeader = function () {
+    var _this = this;
+    var _a;
+    var _b = this.props,
+      render = _b.render,
+      label = _b.label,
+      labelRemark = _b.labelRemark,
+      useMobileUI = _b.useMobileUI,
+      env = _b.env,
+      popOverContainer = _b.popOverContainer;
+    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 = [{
+      label: i18n("01820262aa9ad5b130f8f5b86bfd2968"),
+      value: 'custom'
+    }, {
+      label: i18n("c8158b3cad598b0b5939788ca4efb298"),
+      value: 'api'
+    }].map(function (item) {
+      return __assign(__assign({}, item), {
+        onClick: function () {
+          return _this.handleSourceChange(item.value);
+        }
+      });
+    });
+    return React__default.createElement("header", {
+      className: "ae-TimelineItemControl-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
+      }
+    })));
+  };
+  TimelineItemControl.prototype.renderOption = function (props) {
+    var _this = this;
+    var time = props.time,
+      title = props.title,
+      index = props.index;
+    var delDisabled = !(this.state.items.length > 2);
+    var i18nEnabled = getI18nEnabled();
+    return React__default.createElement("li", {
+      className: "ae-TimelineItemControlItem",
+      key: index
+    }, React__default.createElement("div", {
+      className: "ae-TimelineItemControlItem-Main"
+    }, React__default.createElement("a", {
+      className: "ae-TimelineItemControlItem-dragBar"
+    }, React__default.createElement(Icon, {
+      icon: "drag-bar",
+      className: "icon"
+    })), render({
+      type: i18nEnabled ? 'input-text-i18n' : 'input-text',
+      className: 'ae-TimelineItemControlItem-input',
+      value: time,
+      placeholder: i18n("72a3c1690dead6e24f7ac1abc90d5063"),
+      clearable: false,
+      onChange: function (value) {
+        return _this.handleEditLabel(index, value, 'time');
+      }
+    }), render({
+      type: 'dropdown-button',
+      className: 'ae-TimelineItemControlItem-dropdown',
+      btnClassName: 'px-2',
+      icon: 'fa fa-ellipsis-h',
+      hideCaret: true,
+      closeOnClick: true,
+      align: 'right',
+      menuClassName: 'ae-TimelineItemControlItem-ulmenu',
+      buttons: [{
         type: 'action',
+        className: 'ae-TimelineItemControlItem-action',
+        label: i18n("95b351c86267f3aedf89520959bce689"),
         actionType: 'dialog',
-        label: i18n("e8755fb1e985a5d26df0fce1f0b7b0f8"),
-        active: true,
         dialog: {
           title: i18n("d584018521820dac9e92120737b733ba"),
           headerClassName: 'font-bold',
@@ -316,285 +399,89 @@ var TimelineItemControl = /** @class */function (_super) {
               left: 3,
               right: 9
             },
-            body: this.buildAddOrEditSchema()
+            body: this.buildAddOrEditSchema(props),
+            onSubmit: function (e) {
+              return _this.toggleEdit(e, index);
+            }
           }]
         }
-      };
-    }
-  });
-  Object.defineProperty(TimelineItemControl.prototype, "dragRef", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function (ref) {
-      if (!this.drag && ref) {
-        this.initDragging();
-      } else if (this.drag && !ref) {
-        this.destroyDragging();
-      }
-      this.drag = ref;
-    }
-  });
-  Object.defineProperty(TimelineItemControl.prototype, "initDragging", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function () {
-      var _this = this;
-      var dom = findDOMNode(this);
-      this.sortable = new Sortable(dom.querySelector('.ae-TimelineItemControl-content'), {
-        group: 'TimelineItemControlGroup',
-        animation: 150,
-        handle: '.ae-TimelineItemControlItem-dragBar',
-        ghostClass: 'ae-TimelineItemControlItem--dragging',
-        onEnd: function (e) {
-          // 没有移动
-          if (e.newIndex === e.oldIndex) {
-            return;
-          }
-          // 换回来
-          var parent = e.to;
-          if (e.newIndex < e.oldIndex && e.oldIndex < parent.childNodes.length - 1) {
-            parent.insertBefore(e.item, parent.childNodes[e.oldIndex + 1]);
-          } else if (e.oldIndex < parent.childNodes.length - 1) {
-            parent.insertBefore(e.item, parent.childNodes[e.oldIndex]);
-          } else {
-            parent.appendChild(e.item);
-          }
-          var items = _this.state.items.concat();
-          items[e.oldIndex] = items.splice(e.newIndex, 1, items[e.oldIndex])[0];
-          _this.setState({
-            items: items
-          }, function () {
-            return _this.onChange();
-          });
-        }
-      });
-    }
-  });
-  Object.defineProperty(TimelineItemControl.prototype, "destroyDragging", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function () {
-      this.sortable && this.sortable.destroy();
-    }
-  });
-  Object.defineProperty(TimelineItemControl.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,
-        useMobileUI = _b.useMobileUI,
-        env = _b.env,
-        popOverContainer = _b.popOverContainer;
-      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 = [{
-        label: i18n("01820262aa9ad5b130f8f5b86bfd2968"),
-        value: 'custom'
-      }, {
-        label: i18n("c8158b3cad598b0b5939788ca4efb298"),
-        value: 'api'
-      }].map(function (item) {
-        return __assign(__assign({}, item), {
-          onClick: function () {
-            return _this.handleSourceChange(item.value);
-          }
-        });
-      });
-      return React__default.createElement("header", {
-        className: "ae-TimelineItemControl-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(TimelineItemControl.prototype, "renderOption", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function (props) {
-      var _this = this;
-      var time = props.time,
-        title = props.title,
-        index = props.index;
-      var delDisabled = !(this.state.items.length > 2);
-      var i18nEnabled = getI18nEnabled();
-      return React__default.createElement("li", {
-        className: "ae-TimelineItemControlItem",
-        key: index
-      }, React__default.createElement("div", {
-        className: "ae-TimelineItemControlItem-Main"
-      }, React__default.createElement("a", {
-        className: "ae-TimelineItemControlItem-dragBar"
-      }, React__default.createElement(Icon, {
-        icon: "drag-bar",
-        className: "icon"
-      })), render({
-        type: i18nEnabled ? 'input-text-i18n' : 'input-text',
-        className: 'ae-TimelineItemControlItem-input',
-        value: time,
-        placeholder: i18n("72a3c1690dead6e24f7ac1abc90d5063"),
-        clearable: false,
-        onChange: function (value) {
-          return _this.handleEditLabel(index, value, 'time');
+        type: 'button',
+        className: 'ae-TimelineItemControlItem-action',
+        label: i18n("79d3abe929f67f0644a78bf32adb3a89"),
+        onClick: function () {
+          return _this.toggleCopy(index);
         }
-      }), render({
-        type: 'dropdown-button',
-        className: 'ae-TimelineItemControlItem-dropdown',
-        btnClassName: 'px-2',
-        icon: 'fa fa-ellipsis-h',
-        hideCaret: true,
-        closeOnClick: true,
-        align: 'right',
-        menuClassName: 'ae-TimelineItemControlItem-ulmenu',
-        buttons: [{
-          type: 'action',
-          className: 'ae-TimelineItemControlItem-action',
-          label: i18n("95b351c86267f3aedf89520959bce689"),
-          actionType: 'dialog',
-          dialog: {
-            title: i18n("d584018521820dac9e92120737b733ba"),
-            headerClassName: 'font-bold',
-            closeOnEsc: true,
-            closeOnOutside: false,
-            showCloseButton: true,
-            body: [{
-              type: 'form',
-              wrapWithPanel: false,
-              wrapperComponent: 'div',
-              resetAfterSubmit: true,
-              autoFocus: true,
-              preventEnterSubmit: true,
-              horizontal: {
-                justify: true,
-                left: 3,
-                right: 9
-              },
-              body: this.buildAddOrEditSchema(props),
-              onSubmit: function (e) {
-                return _this.toggleEdit(e, index);
-              }
-            }]
-          }
-        }, {
-          type: 'button',
-          className: 'ae-TimelineItemControlItem-action',
-          label: i18n("79d3abe929f67f0644a78bf32adb3a89"),
-          onClick: function () {
-            return _this.toggleCopy(index);
-          }
-        }, {
-          type: 'button',
-          className: 'ae-TimelineItemControlItem-action',
-          label: i18n("2f4aaddde33c9b93c36fd2503f3d122b"),
-          disabled: delDisabled,
-          onClick: function () {
-            return _this.toggleDelete(index);
-          }
-        }]
       }, {
-        popOverContainer: null // amis 渲染挂载节点会使用 this.target
-      })), React__default.createElement("div", {
-        className: "ae-TimelineItemControlItem-Main"
-      }, render({
-        type: i18nEnabled ? 'input-text-i18n' : 'input-text',
-        className: 'ae-TimelineItemControlItem-input-title',
-        value: title,
-        clearable: false,
-        placeholder: i18n("96641a78cfd9f9f8ba68f0524347b186"),
-        onChange: function (value) {
-          return _this.handleEditLabel(index, value, 'title');
+        type: 'button',
+        className: 'ae-TimelineItemControlItem-action',
+        label: i18n("2f4aaddde33c9b93c36fd2503f3d122b"),
+        disabled: delDisabled,
+        onClick: function () {
+          return _this.toggleDelete(index);
         }
-      })));
-    }
-  });
-  Object.defineProperty(TimelineItemControl.prototype, "renderApiPanel", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function () {
-      var render = this.props.render;
-      var _a = this.state,
-        source = _a.source,
-        api = _a.api;
-      if (source !== 'api') {
-        return null;
+      }]
+    }, {
+      popOverContainer: null // amis 渲染挂载节点会使用 this.target
+    })), React__default.createElement("div", {
+      className: "ae-TimelineItemControlItem-Main"
+    }, render({
+      type: i18nEnabled ? 'input-text-i18n' : 'input-text',
+      className: 'ae-TimelineItemControlItem-input-title',
+      value: title,
+      clearable: false,
+      placeholder: i18n("96641a78cfd9f9f8ba68f0524347b186"),
+      onChange: function (value) {
+        return _this.handleEditLabel(index, value, 'title');
       }
-      return render('api', getSchemaTpl('apiControl', {
-        label: i18n("54ea89b497ec3bb319c68844dfa3687f"),
-        name: 'source',
-        className: 'ae-ExtendMore',
-        visibleOn: 'data.autoComplete !== false',
-        value: api,
-        onChange: this.handleAPIChange
-      }));
-    }
-  });
-  Object.defineProperty(TimelineItemControl.prototype, "render", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function () {
-      var _this = this;
-      var _a = this.state,
-        source = _a.source,
-        items = _a.items;
-      var _b = this.props;
-        _b.render;
-        var className = _b.className;
-      return React__default.createElement("div", {
-        className: cx('ae-TimelineItemControl', className)
-      }, this.renderHeader(), source === 'custom' ? React__default.createElement("div", {
-        className: "ae-TimelineItemControl-wrapper"
-      }, Array.isArray(items) && items.length ? React__default.createElement("ul", {
-        className: "ae-TimelineItemControl-content",
-        ref: this.dragRef
-      }, items.map(function (item, index) {
-        return _this.renderOption(__assign(__assign({}, item), {
-          index: index
-        }));
-      })) : React__default.createElement("div", {
-        className: "ae-TimelineItemControl-placeholder"
-      }, "\u65E0\u9009\u9879"), React__default.createElement("div", {
-        className: "ae-TimelineItemControl-footer"
-      }, render(this.buildAddSchema(), {
-        onSubmit: this.handleAdd
-      }), render(this.buildBatchAddSchema(), {
-        onSubmit: this.handleBatchAdd
-      }))) : null, this.renderApiPanel());
+    })));
+  };
+  TimelineItemControl.prototype.renderApiPanel = function () {
+    var render = this.props.render;
+    var _a = this.state,
+      source = _a.source,
+      api = _a.api;
+    if (source !== 'api') {
+      return null;
     }
-  });
+    return render('api', getSchemaTpl('apiControl', {
+      label: i18n("54ea89b497ec3bb319c68844dfa3687f"),
+      name: 'source',
+      className: 'ae-ExtendMore',
+      visibleOn: 'data.autoComplete !== false',
+      value: api,
+      onChange: this.handleAPIChange
+    }));
+  };
+  TimelineItemControl.prototype.render = function () {
+    var _this = this;
+    var _a = this.state,
+      source = _a.source,
+      items = _a.items;
+    var _b = this.props;
+      _b.render;
+      var className = _b.className;
+    return React__default.createElement("div", {
+      className: cx('ae-TimelineItemControl', className)
+    }, this.renderHeader(), source === 'custom' ? React__default.createElement("div", {
+      className: "ae-TimelineItemControl-wrapper"
+    }, Array.isArray(items) && items.length ? React__default.createElement("ul", {
+      className: "ae-TimelineItemControl-content",
+      ref: this.dragRef
+    }, items.map(function (item, index) {
+      return _this.renderOption(__assign(__assign({}, item), {
+        index: index
+      }));
+    })) : React__default.createElement("div", {
+      className: "ae-TimelineItemControl-placeholder"
+    }, "\u65E0\u9009\u9879"), React__default.createElement("div", {
+      className: "ae-TimelineItemControl-footer"
+    }, render(this.buildAddSchema(), {
+      onSubmit: this.handleAdd
+    }), render(this.buildBatchAddSchema(), {
+      onSubmit: this.handleBatchAdd
+    }))) : null, this.renderApiPanel());
+  };
   __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [String]), __metadata("design:returntype", void 0)], TimelineItemControl.prototype, "handleSourceChange", null);
   __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", void 0)], TimelineItemControl.prototype, "handleAPIChange", null);
   __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object, Number]), __metadata("design:returntype", void 0)], TimelineItemControl.prototype, "toggleEdit", null);
@@ -608,14 +495,9 @@ var TimelineItemControl = /** @class */function (_super) {
   function TimelineItemControlRenderer() {
     return _super !== null && _super.apply(this, arguments) || this;
   }
-  Object.defineProperty(TimelineItemControlRenderer.prototype, "render", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function () {
-      return React__default.createElement(TimelineItemControl, __assign({}, this.props));
-    }
-  });
+  TimelineItemControlRenderer.prototype.render = function () {
+    return React__default.createElement(TimelineItemControl, __assign({}, this.props));
+  };
   TimelineItemControlRenderer = __decorate([FormItem({
     type: 'ae-timelineItemControl',
     renderLabel: false