amis-editor 5.2.0 → 5.2.1-beta.15

package/esm/renderer/TimelineItemControl.js

@@ -0,0 +1,622 @@
+/**
+ * amis-editor v5.2.1-beta.15
+ * Copyright 2018-2022 @fex
+ */
+
+import { __extends, __assign, __spreadArray, __decorate, __metadata } from 'tslib';
+import React__default from 'react';
+import { findDOMNode } from 'react-dom';
+import cx from 'classnames';
+import uniqBy from 'lodash/uniqBy';
+import Sortable from 'sortablejs';
+import { Icon, InputBox, render, FormItem } from 'amis';
+import { getSchemaTpl, autobind } from 'amis-editor-core';
+import { i18n } from 'i18n-runtime';
+
+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,
+      source: props.data.source ? 'api' : 'custom'
+    };
+    return _this;
+  }
+  /**
+   * 切换选项类型
+   */
+  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) {
+      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);
+    }
+  });
+  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();
+      });
+    }
+  });
+  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()
+          };
+        }
+        return {
+          label: item,
+          value: item
+        };
+      });
+      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) {
+      return [{
+        type: 'input-text',
+        name: 'time',
+        required: true,
+        placeholder: i18n("37087e5bb2d0367872a461f535580d91"),
+        label: i18n("19fcb9eb2594059036dfede5f4ec53e8"),
+        value: props === null || props === void 0 ? void 0 : props['time']
+      }, {
+        type: '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,
+          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
+            }]
+          }]
+        }
+      };
+    }
+  });
+  Object.defineProperty(TimelineItemControl.prototype, "buildAddSchema", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: 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()
+          }]
+        }
+      };
+    }
+  });
+  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);
+      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"
+      })), React__default.createElement(InputBox, {
+        className: "ae-TimelineItemControlItem-input",
+        value: time,
+        placeholder: "\u8BF7\u8F93\u5165\u663E\u793A\u65F6\u95F4",
+        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',
+          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"
+      }, React__default.createElement(InputBox, {
+        className: "ae-TimelineItemControlItem-input-title",
+        value: title,
+        clearable: false,
+        placeholder: "\u8BF7\u8F93\u5165\u6807\u9898",
+        onChange: function (value) {
+          return _this.handleEditLabel(index, value, 'title');
+        }
+      })));
+    }
+  });
+  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;
+      }
+      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());
+    }
+  });
+  __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);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object, Object]), __metadata("design:returntype", void 0)], TimelineItemControl.prototype, "handleBatchAdd", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", void 0)], TimelineItemControl.prototype, "handleAdd", null);
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", void 0)], TimelineItemControl.prototype, "dragRef", null);
+  return TimelineItemControl;
+}(React__default.Component);
+/** @class */(function (_super) {
+  __extends(TimelineItemControlRenderer, _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 = __decorate([FormItem({
+    type: 'ae-timelineItemControl',
+    renderLabel: false
+  })], TimelineItemControlRenderer);
+  return TimelineItemControlRenderer;
+})(React__default.Component);
+
+export { TimelineItemControl as default };