amis-editor 5.2.5 → 5.4.0

package/esm/renderer/DateShortCutControl.js

@@ -1,9 +1,9 @@
 /**
- * amis-editor v5.2.4-beta.39
+ * amis-editor v5.4.0
  * Copyright 2018-2023 @fex
  */
 
-import { __extends, __assign, __spreadArray, __decorate, __metadata } from 'tslib';
+import { __extends, __assign, __spreadArray, __read, __decorate, __metadata } from 'tslib';
 import React__default from 'react';
 import cx from 'classnames';
 import Sortable from 'sortablejs';
@@ -40,38 +40,8 @@ var DateShortCutControl = /** @class */function (_super) {
   __extends(DateShortCutControl, _super);
   function DateShortCutControl(props) {
     var _this = this;
-    var _a;
+    var _a, _b;
     _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
-    });
-    Object.defineProperty(_this, "normalDropDownOptionArr", {
-      enumerable: true,
-      configurable: true,
-      writable: true,
-      value: void 0
-    });
-    Object.defineProperty(_this, "customDropDownOptionArr", {
-      enumerable: true,
-      configurable: true,
-      writable: true,
-      value: void 0
-    });
     var normalDropDownOption = props.normalDropDownOption,
       customDropDownOption = props.customDropDownOption,
       data = props.data;
@@ -87,9 +57,10 @@ var DateShortCutControl = /** @class */function (_super) {
         value: key
       };
     });
-    var defaultRanges = ['yesterday', '7daysago', 'prevweek', 'thismonth', 'prevmonth', 'prevquarter'];
+    var defaultShortcuts = ['yesterday', '7daysago', 'prevweek', 'thismonth', 'prevmonth', 'prevquarter'];
     _this.state = {
-      options: ((_a = data === null || data === void 0 ? void 0 : data.ranges) !== null && _a !== void 0 ? _a : defaultRanges).map(function (item, index) {
+      /** amis 3.1.0之后ranges属性废弃，此处兼容 */
+      options: ((_b = (_a = data === null || data === void 0 ? void 0 : data.ranges) !== null && _a !== void 0 ? _a : data === null || data === void 0 ? void 0 : data.shortcuts) !== null && _b !== void 0 ? _b : defaultShortcuts).map(function (item, index) {
         var _a;
         var arr = item.match(/^(\d+)[a-zA-Z]+/);
         if (arr) {
@@ -108,361 +79,298 @@ var DateShortCutControl = /** @class */function (_super) {
     };
     return _this;
   }
-  Object.defineProperty(DateShortCutControl.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;
+  DateShortCutControl.prototype.dragRef = function (ref) {
+    if (!this.drag && ref) {
+      this.initDragging();
+    } else if (this.drag && !ref) {
+      this.destroyDragging();
     }
-  });
+    this.drag = ref;
+  };
   /*
    * 滚动到底部
    */
-  Object.defineProperty(DateShortCutControl.prototype, "scrollToBottom", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function () {
-      var _a, _b;
-      this.drag && ((_b = (_a = this.drag) === null || _a === void 0 ? void 0 : _a.lastElementChild) === null || _b === void 0 ? void 0 : _b.scrollIntoView({
-        behavior: 'smooth',
-        block: 'nearest',
-        inline: 'start'
-      }));
-    }
-  });
+  DateShortCutControl.prototype.scrollToBottom = function () {
+    var _a, _b;
+    this.drag && ((_b = (_a = this.drag) === null || _a === void 0 ? void 0 : _a.lastElementChild) === null || _b === void 0 ? void 0 : _b.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest',
+      inline: 'start'
+    }));
+  };
   /**
    * 初始化拖动
    */
-  Object.defineProperty(DateShortCutControl.prototype, "initDragging", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function () {
-      var _this = this;
-      var dom = findDOMNode(this);
-      this.sortable = new Sortable(dom.querySelector(".".concat(klass, "-content")), {
-        group: 'OptionControlGroup',
-        animation: 150,
-        handle: ".".concat(klass, "Item-dragBar"),
-        ghostClass: "".concat(klass, "Item-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 options = _this.state.options.concat();
-          options[e.oldIndex] = options.splice(e.newIndex, 1, options[e.oldIndex])[0];
-          _this.setState({
-            options: options
-          }, function () {
-            return _this.onChangeOptions();
-          });
+  DateShortCutControl.prototype.initDragging = function () {
+    var _this = this;
+    var dom = findDOMNode(this);
+    this.sortable = new Sortable(dom.querySelector(".".concat(klass, "-content")), {
+      group: 'OptionControlGroup',
+      animation: 150,
+      handle: ".".concat(klass, "Item-dragBar"),
+      ghostClass: "".concat(klass, "Item-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 options = _this.state.options.concat();
+        options[e.oldIndex] = options.splice(e.newIndex, 1, options[e.oldIndex])[0];
+        _this.setState({
+          options: options
+        }, function () {
+          return _this.onChangeOptions();
+        });
+      }
+    });
+  };
   /**
    * 拖动的销毁
    */
-  Object.defineProperty(DateShortCutControl.prototype, "destroyDragging", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function () {
-      this.sortable && this.sortable.destroy();
-    }
-  });
+  DateShortCutControl.prototype.destroyDragging = function () {
+    this.sortable && this.sortable.destroy();
+  };
   /**
    * 生成内容体
    */
-  Object.defineProperty(DateShortCutControl.prototype, "renderContent", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function () {
-      var _this = this;
-      var options = this.state.options;
-      return React__default.createElement("div", {
-        className: klass + '-wrapper'
-      }, options && options.length ? React__default.createElement("ul", {
-        className: klass + '-content',
-        ref: this.dragRef
-      }, options.map(function (option, index) {
-        return React__default.createElement("li", {
-          className: klass + 'Item',
-          key: index
-        }, option.type === RangeType.Normal ? _this.renderNormalOption(option, index) : _this.renderCustomOption(option, index));
-      })) : React__default.createElement("div", {
-        className: klass + '-content ' + klass + '-empty'
-      }, "\u672A\u914D\u7F6E"));
-    }
-  });
+  DateShortCutControl.prototype.renderContent = function () {
+    var _this = this;
+    var options = this.state.options;
+    return React__default.createElement("div", {
+      className: klass + '-wrapper'
+    }, options && options.length ? React__default.createElement("ul", {
+      className: klass + '-content',
+      ref: this.dragRef
+    }, options.map(function (option, index) {
+      return React__default.createElement("li", {
+        className: klass + 'Item',
+        key: index
+      }, option.type === RangeType.Normal ? _this.renderNormalOption(option, index) : _this.renderCustomOption(option, index));
+    })) : React__default.createElement("div", {
+      className: klass + '-content ' + klass + '-empty'
+    }, "\u672A\u914D\u7F6E"));
+  };
   /**
    * 生成固定跨度选项
    */
-  Object.defineProperty(DateShortCutControl.prototype, "renderNormalOption", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function (option, index) {
-      return React__default.createElement(ShortCutItemWrap, {
-        index: index,
-        handleDelete: this.handleDelete
-      }, React__default.createElement("span", null, option.label));
-    }
-  });
+  DateShortCutControl.prototype.renderNormalOption = function (option, index) {
+    return React__default.createElement(ShortCutItemWrap, {
+      index: index,
+      handleDelete: this.handleDelete
+    }, React__default.createElement("span", null, option.label));
+  };
   /**
    * 生成自定义跨度选项
    */
-  Object.defineProperty(DateShortCutControl.prototype, "renderCustomOption", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function (option, index) {
-      var _this = this;
-      var render = this.props.render;
-      var renderInput = function (option) {
-        if (option.type === 'middle') {
-          return render('inner', {
-            type: 'input-text',
-            prefix: option === null || option === void 0 ? void 0 : option.prefix,
-            suffix: option.suffix,
-            mode: 'normal',
-            placeholder: 'n',
-            value: option === null || option === void 0 ? void 0 : option.value,
-            onChange: function (value) {
-              return _this.handleCustomItemChange(value, index);
-            }
-          });
-        }
+  DateShortCutControl.prototype.renderCustomOption = function (option, index) {
+    var _this = this;
+    var render = this.props.render;
+    var renderInput = function (option) {
+      if (option.type === 'middle') {
         return render('inner', {
           type: 'input-text',
-          placeholder: 'n',
-          mode: 'normal',
+          prefix: option === null || option === void 0 ? void 0 : option.prefix,
           suffix: option.suffix,
+          mode: 'normal',
+          placeholder: 'n',
           value: option === null || option === void 0 ? void 0 : option.value,
           onChange: function (value) {
             return _this.handleCustomItemChange(value, index);
           }
         });
-      };
-      var dateMap = {
-        daysago: {
-          prefix: i18n("046c6233e03af774df7b90b4504fa96c"),
-          suffix: i18n("249aba763258bbe488af3e79a381d265"),
-          type: 'middle'
-        },
-        dayslater: {
-          suffix: i18n("2f8ab07bea442bc6ce8a9e99ff88e5c1"),
-          type: 'suffix'
-        },
-        weeksago: {
-          prefix: i18n("046c6233e03af774df7b90b4504fa96c"),
-          suffix: i18n("a657f46f5bb00961adfae80d12e41b3d"),
-          type: 'middle'
-        },
-        weekslater: {
-          suffix: i18n("b1599eaa05dc9b3d90be5aebc5c84338"),
-          type: 'suffix'
-        },
-        monthsago: {
-          prefix: i18n("046c6233e03af774df7b90b4504fa96c"),
-          suffix: i18n("e42b99d59954ce6437e66f416850425a"),
-          type: 'middle'
-        },
-        monthslater: {
-          suffix: i18n("3c690347976de82df1909750cbc82b80"),
-          type: 'suffix'
-        },
-        quartersago: {
-          prefix: i18n("046c6233e03af774df7b90b4504fa96c"),
-          suffix: i18n("a483bccf85587055ab31314ad1d2f82a"),
-          type: 'middle'
-        },
-        quarterslater: {
-          suffix: i18n("b62ba98a627851e911bef8fbb005bd4a"),
-          type: 'suffix'
-        },
-        yearsago: {
-          prefix: i18n("046c6233e03af774df7b90b4504fa96c"),
-          suffix: i18n("465260fe80b0c3338d06194bb7a94446"),
-          type: 'middle'
-        },
-        yearslater: {
-          suffix: i18n("137bcb84f52bbd48623c37d8dfdebdff"),
-          type: 'suffix'
+      }
+      return render('inner', {
+        type: 'input-text',
+        placeholder: 'n',
+        mode: 'normal',
+        suffix: option.suffix,
+        value: option === null || option === void 0 ? void 0 : option.value,
+        onChange: function (value) {
+          return _this.handleCustomItemChange(value, index);
         }
-      };
-      return React__default.createElement(ShortCutItemWrap, {
-        index: index,
-        handleDelete: this.handleDelete
-      }, option.inputType ? renderInput(__assign(__assign({}, dateMap[option.inputType]), {
-        value: option.value
-      })) : null);
-    }
-  });
+      });
+    };
+    var dateMap = {
+      daysago: {
+        prefix: i18n("046c6233e03af774df7b90b4504fa96c"),
+        suffix: i18n("249aba763258bbe488af3e79a381d265"),
+        type: 'middle'
+      },
+      dayslater: {
+        suffix: i18n("2f8ab07bea442bc6ce8a9e99ff88e5c1"),
+        type: 'suffix'
+      },
+      weeksago: {
+        prefix: i18n("046c6233e03af774df7b90b4504fa96c"),
+        suffix: i18n("a657f46f5bb00961adfae80d12e41b3d"),
+        type: 'middle'
+      },
+      weekslater: {
+        suffix: i18n("b1599eaa05dc9b3d90be5aebc5c84338"),
+        type: 'suffix'
+      },
+      monthsago: {
+        prefix: i18n("046c6233e03af774df7b90b4504fa96c"),
+        suffix: i18n("e42b99d59954ce6437e66f416850425a"),
+        type: 'middle'
+      },
+      monthslater: {
+        suffix: i18n("3c690347976de82df1909750cbc82b80"),
+        type: 'suffix'
+      },
+      quartersago: {
+        prefix: i18n("046c6233e03af774df7b90b4504fa96c"),
+        suffix: i18n("a483bccf85587055ab31314ad1d2f82a"),
+        type: 'middle'
+      },
+      quarterslater: {
+        suffix: i18n("b62ba98a627851e911bef8fbb005bd4a"),
+        type: 'suffix'
+      },
+      yearsago: {
+        prefix: i18n("046c6233e03af774df7b90b4504fa96c"),
+        suffix: i18n("465260fe80b0c3338d06194bb7a94446"),
+        type: 'middle'
+      },
+      yearslater: {
+        suffix: i18n("137bcb84f52bbd48623c37d8dfdebdff"),
+        type: 'suffix'
+      }
+    };
+    return React__default.createElement(ShortCutItemWrap, {
+      index: index,
+      handleDelete: this.handleDelete
+    }, option.inputType ? renderInput(__assign(__assign({}, dateMap[option.inputType]), {
+      value: option.value
+    })) : null);
+  };
   /**
    * 自定义跨度变化
    */
-  Object.defineProperty(DateShortCutControl.prototype, "handleCustomItemChange", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function (value, index) {
-      var _this = this;
-      var options = __spreadArray([], this.state.options, true);
-      options[index].value = value;
-      this.setState({
-        options: options
-      }, function () {
-        return _this.onChangeOptions();
-      });
-    }
-  });
+  DateShortCutControl.prototype.handleCustomItemChange = function (value, index) {
+    var _this = this;
+    var options = __spreadArray([], __read(this.state.options), false);
+    options[index].value = value;
+    this.setState({
+      options: options
+    }, function () {
+      return _this.onChangeOptions();
+    });
+  };
   /**
    * option添加
    */
-  Object.defineProperty(DateShortCutControl.prototype, "addItem", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function (item, type) {
-      var _this = this;
-      var _a;
-      this.setState({
-        options: __spreadArray(__spreadArray([], this.state.options, true), [__assign({
-          label: (_a = item === null || item === void 0 ? void 0 : item.label) !== null && _a !== void 0 ? _a : '',
-          type: type,
-          value: type === RangeType.Normal ? item.value : ''
-        }, type === RangeType.Normal ? {} : {
-          inputType: item.value
-        })], false)
-      }, function () {
-        _this.onChangeOptions();
-        _this.scrollToBottom();
-      });
-    }
-  });
+  DateShortCutControl.prototype.addItem = function (item, type) {
+    var _this = this;
+    var _a;
+    this.setState({
+      options: __spreadArray(__spreadArray([], __read(this.state.options), false), [__assign({
+        label: (_a = item === null || item === void 0 ? void 0 : item.label) !== null && _a !== void 0 ? _a : '',
+        type: type,
+        value: type === RangeType.Normal ? item.value : ''
+      }, type === RangeType.Normal ? {} : {
+        inputType: item.value
+      })], false)
+    }, function () {
+      _this.onChangeOptions();
+      _this.scrollToBottom();
+    });
+  };
   /**
    * 删除选项
    */
-  Object.defineProperty(DateShortCutControl.prototype, "handleDelete", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function (index, e) {
-      var _this = this;
-      var options = this.state.options.concat();
-      options.splice(index, 1);
-      this.setState({
-        options: options
-      }, function () {
-        return _this.onChangeOptions();
-      });
-    }
-  });
+  DateShortCutControl.prototype.handleDelete = function (index, e) {
+    var _this = this;
+    var options = this.state.options.concat();
+    options.splice(index, 1);
+    this.setState({
+      options: options
+    }, function () {
+      return _this.onChangeOptions();
+    });
+  };
   /**
    * 更新options字段的统一出口
    */
-  Object.defineProperty(DateShortCutControl.prototype, "onChangeOptions", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function () {
-      var options = this.state.options;
-      var onBulkChange = this.props.onBulkChange;
-      var newOptions = [];
-      options.forEach(function (item, index) {
-        if (item.type === RangeType.Normal) {
-          newOptions[index] = item.value;
-        }
-        if (item.type === RangeType.Custom && item.value) {
-          newOptions[index] = "".concat(item.value).concat(item.inputType);
-        }
-      });
-      onBulkChange && onBulkChange({
-        ranges: newOptions
-      });
-    }
-  });
-  Object.defineProperty(DateShortCutControl.prototype, "render", {
-    enumerable: false,
-    configurable: true,
-    writable: true,
-    value: function () {
-      var _this = this;
-      var _a = this.props,
-        className = _a.className,
-        label = _a.label,
-        render = _a.render;
-      return React__default.createElement("div", {
-        className: cx(klass, className)
-      }, React__default.createElement("header", {
-        className: klass + '-header'
-      }, React__default.createElement("label", null, label)), this.renderContent(), React__default.createElement("div", {
-        className: klass + '-footer'
-      }, React__default.createElement("div", {
-        className: klass + '-footer-btn'
-      }, render('inner', {
-        type: 'dropdown-button',
-        label: i18n("279d93f2d745ed08e9034022941510dc"),
-        closeOnClick: true,
-        closeOnOutside: true,
-        level: 'enhance',
-        buttons: this.normalDropDownOptionArr.map(function (item) {
-          return __assign(__assign({}, item), {
-            type: 'button',
-            onAction: function (e, action) {
-              return _this.addItem(item, RangeType.Normal);
-            }
-          });
-        })
-      }, {
-        popOverContainer: null
-      })), React__default.createElement("div", {
-        className: klass + '-footer-btn'
-      }, render('inner', {
-        type: 'dropdown-button',
-        label: i18n("7a1e5f93e362d371519bcb2bfdb0fc9a"),
-        closeOnClick: true,
-        closeOnOutside: true,
-        buttons: this.customDropDownOptionArr.map(function (item) {
-          return __assign(__assign({}, item), {
-            type: 'button',
-            onAction: function (e, action) {
-              return _this.addItem(item, RangeType.Custom);
-            }
-          });
-        })
-      }, {
-        popOverContainer: null
-      }))));
-    }
-  });
-  Object.defineProperty(DateShortCutControl, "defaultProps", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: {
-      label: i18n("f7d2996639d97b4a03fc0e40e2eb853a")
-    }
-  });
+  DateShortCutControl.prototype.onChangeOptions = function () {
+    var _a;
+    var options = this.state.options;
+    var _b = this.props,
+      onBulkChange = _b.onBulkChange,
+      name = _b.name;
+    var newOptions = [];
+    options.forEach(function (item, index) {
+      if (item.type === RangeType.Normal) {
+        newOptions[index] = item.value;
+      }
+      if (item.type === RangeType.Custom && item.value) {
+        newOptions[index] = "".concat(item.value).concat(item.inputType);
+      }
+    });
+    /** amis 3.1.0之后ranges属性废弃 */
+    onBulkChange && onBulkChange((_a = {}, _a[name !== null && name !== void 0 ? name : 'shortcuts'] = newOptions, _a.ranges = undefined, _a));
+  };
+  DateShortCutControl.prototype.render = function () {
+    var _this = this;
+    var _a = this.props,
+      className = _a.className,
+      label = _a.label,
+      render = _a.render;
+    return React__default.createElement("div", {
+      className: cx(klass, className)
+    }, React__default.createElement("header", {
+      className: klass + '-header'
+    }, React__default.createElement("label", null, label)), this.renderContent(), React__default.createElement("div", {
+      className: klass + '-footer'
+    }, React__default.createElement("div", {
+      className: klass + '-footer-btn'
+    }, render('inner', {
+      type: 'dropdown-button',
+      label: i18n("279d93f2d745ed08e9034022941510dc"),
+      closeOnClick: true,
+      closeOnOutside: true,
+      level: 'enhance',
+      buttons: this.normalDropDownOptionArr.map(function (item) {
+        return __assign(__assign({}, item), {
+          type: 'button',
+          onAction: function (e, action) {
+            return _this.addItem(item, RangeType.Normal);
+          }
+        });
+      })
+    }, {
+      popOverContainer: null
+    })), React__default.createElement("div", {
+      className: klass + '-footer-btn'
+    }, render('inner', {
+      type: 'dropdown-button',
+      label: i18n("7a1e5f93e362d371519bcb2bfdb0fc9a"),
+      closeOnClick: true,
+      closeOnOutside: true,
+      buttons: this.customDropDownOptionArr.map(function (item) {
+        return __assign(__assign({}, item), {
+          type: 'button',
+          onAction: function (e, action) {
+            return _this.addItem(item, RangeType.Custom);
+          }
+        });
+      })
+    }, {
+      popOverContainer: null
+    }))));
+  };
+  DateShortCutControl.defaultProps = {
+    label: i18n("f7d2996639d97b4a03fc0e40e2eb853a")
+  };
   __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", void 0)], DateShortCutControl.prototype, "dragRef", null);
   __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Number, Object]), __metadata("design:returntype", void 0)], DateShortCutControl.prototype, "handleDelete", null);
   return DateShortCutControl;