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

package/esm/renderer/DateShortCutControl.js

@@ -1,343 +1,477 @@
 /**
- * amis-editor v5.2.0-beta.2
+ * amis-editor v5.2.1-beta.15
  * Copyright 2018-2022 @fex
  */
 
-import { __extends, __spreadArray, __assign, __decorate, __metadata } from 'tslib';
+import { __extends, __assign, __spreadArray, __decorate, __metadata } from 'tslib';
 import React__default from 'react';
 import cx from 'classnames';
 import Sortable from 'sortablejs';
 import { findDOMNode } from 'react-dom';
-import { Icon, InputBox, Button, FormItem } from 'amis';
+import { FormItem, Icon } from 'amis';
 import { autobind } from 'amis-editor-core';
-import FormulaControl from './FormulaControl.js';
 import { i18n } from 'i18n-runtime';
 
-var CustomType = 'custom';
+var RangeType;
+(function (RangeType) {
+  RangeType["Normal"] = "Normal";
+  RangeType["Custom"] = "Custom";
+})(RangeType || (RangeType = {}));
+var ShortCutItemWrap = function (props) {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("a", {
+    className: klass + 'Item-dragBar'
+  }, React__default.createElement(Icon, {
+    icon: "drag-bar",
+    className: "icon"
+  })), React__default.createElement("span", {
+    className: klass + 'Item-content'
+  }, props.children), React__default.createElement("span", {
+    className: klass + 'Item-close',
+    onClick: function (e) {
+      return props.handleDelete(props.index, e);
+    }
+  }, React__default.createElement(Icon, {
+    icon: "status-close",
+    className: "icon"
+  })));
+};
 var klass = 'ae-DateShortCutControl';
-
-var DateShortCutControl =
-/** @class */
-function (_super) {
+var DateShortCutControl = /** @class */function (_super) {
   __extends(DateShortCutControl, _super);
-
   function DateShortCutControl(props) {
-    var _this = _super.call(this, props) || this;
-
-    var dropDownOption = props.dropDownOption,
-        data = props.data;
-    _this.dropDownOptionArr = Object.keys(dropDownOption).map(function (key) {
+    var _this = this;
+    var _a;
+    _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;
+    _this.normalDropDownOptionArr = Object.keys(normalDropDownOption).map(function (key) {
       return {
-        label: dropDownOption[key],
+        label: normalDropDownOption[key],
         value: key
       };
     });
-
-    _this.initOptions(data.ranges);
-
-    return _this;
-  }
-
-  DateShortCutControl.prototype.initOptions = function (ranges) {
-    if (!ranges) {
-      // 这里先写固定，如果amis的dateTimeRange组件暴露对应属性，从中获取更合适，到时需要让其暴露下
-      ranges = ['yesterday', '7daysago', 'prevweek', 'thismonth', 'prevmonth', 'prevquarter'];
-    }
-
-    var dropDownOption = this.props.dropDownOption;
-    var options = [];
-
-    if (Array.isArray(ranges)) {
-      ranges.map(function (item) {
-        if (typeof item === 'string' && dropDownOption.hasOwnProperty(item)) {
-          options.push({
-            label: dropDownOption[item],
-            type: item,
-            inputValue: item
-          });
-        }
-
-        if (typeof item === 'object') {
-          options.push({
-            label: item === null || item === void 0 ? void 0 : item.label,
-            type: CustomType,
-            inputValue: item.range
-          });
+    _this.customDropDownOptionArr = Object.keys(customDropDownOption).map(function (key) {
+      return {
+        label: customDropDownOption[key],
+        value: key
+      };
+    });
+    var defaultRanges = ['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) {
+        var _a;
+        var arr = item.match(/^(\d+)[a-zA-Z]+/);
+        if (arr) {
+          return {
+            value: arr[1],
+            type: RangeType.Custom,
+            inputType: (_a = item.match(/[a-zA-Z]+/)) === null || _a === void 0 ? void 0 : _a[0]
+          };
         }
-      });
-    }
-
-    this.state = {
-      options: options
+        return {
+          label: normalDropDownOption[item],
+          value: item,
+          type: RangeType.Normal
+        };
+      })
     };
-  };
-  /**
-   * 添加
-   */
-
-
-  DateShortCutControl.prototype.addItem = function (item) {
-    var _this = this;
-
-    var options = this.state.options;
-    this.setState({
-      options: __spreadArray(__spreadArray([], options, true), [__assign(__assign({}, item), {
-        inputValue: item.value === CustomType ? '' : item.value,
-        type: item.value
-      })], false)
-    }, function () {
-      _this.onChangeOptions();
-
-      _this.scrollToBottom();
-    });
-  };
-
-  DateShortCutControl.prototype.dragRef = function (ref) {
-    if (!this.drag && ref) {
-      this.initDragging();
-    } else if (this.drag && !ref) {
-      this.destroyDragging();
+    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;
     }
-
-    this.drag = ref;
-  };
+  });
   /*
    * 滚动到底部
    */
-
-
-  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, "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.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);
+  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();
+          });
         }
-
-        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.destroyDragging = function () {
-    this.sortable && this.sortable.destroy();
-  };
+  Object.defineProperty(DateShortCutControl.prototype, "destroyDragging", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      this.sortable && this.sortable.destroy();
+    }
+  });
   /**
    * 生成内容体
    */
-
-
-  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 _this.renderOption(option, index);
-    })) : React__default.createElement("div", {
-      className: "ae-OptionControl-placeholder"
-    }, "\u672A\u914D\u7F6E"));
-  };
+  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.renderOption = function (option, index) {
-    var _this = this;
-
-    return React__default.createElement("li", {
-      className: klass + 'Item',
-      key: index
-    }, React__default.createElement("a", {
-      className: klass + 'Item-dragBar'
-    }, React__default.createElement(Icon, {
-      icon: "drag-bar",
-      className: "icon"
-    })), React__default.createElement(InputBox, {
-      className: klass + 'Item-input',
-      clearable: false,
-      placeholder: "\u540D\u79F0",
-      value: option.label,
-      onInput: function (e) {
-        return _this.onInputChange(index, e.target.value, 'label');
-      }
-    }), React__default.createElement(FormulaControl, __assign({}, this.props, {
-      simple: true,
-      variables: [],
-      functions: [],
-      header: '',
-      onChange: function (value) {
-        return _this.onInputChange(index, value, 'inputValue');
-      },
-      value: option.inputValue
-    })), React__default.createElement(Button, {
-      className: klass + 'Item-action',
-      level: "link",
-      size: "md",
-      onClick: function (e) {
-        return _this.handleDelete(index, e);
-      }
-    }, React__default.createElement(Icon, {
-      icon: "delete-btn",
-      className: "icon"
-    })));
-  };
+  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.onInputChange = function (index, value, key) {
-    var _this = this;
-
-    var options = this.state.options.concat();
-    options[index][key] = value;
-    options[index].type = CustomType;
-    this.setState({
-      options: options
-    }, function () {
-      return _this.onChangeOptions();
-    });
-  };
+  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);
+            }
+          });
+        }
+        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);
+          }
+        });
+      };
+      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();
+      });
+    }
+  });
+  /**
+   * 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.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();
-    });
-  };
+  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();
+      });
+    }
+  });
   /**
    * 更新options字段的统一出口
    */
-
-
-  DateShortCutControl.prototype.onChangeOptions = function () {
-    var options = this.state.options;
-    var onBulkChange = this.props.onBulkChange;
-    var newOptions = [];
-    options.forEach(function (item) {
-      if (item.type !== CustomType) {
-        newOptions.push(item.inputValue);
-      } else {
-        newOptions.push({
-          label: item.label,
-          range: item.inputValue
-        });
-      }
-    });
-    onBulkChange && onBulkChange({
-      ranges: newOptions
-    });
-  };
-
-  DateShortCutControl.prototype.render = function () {
-    var _this = this;
-
-    var _a = this.props,
+  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;
-    var optionList = this.dropDownOptionArr.map(function (item) {
-      return __assign(__assign({}, item), {
-        type: 'button',
-        onAction: function (e, action) {
-          return _this.addItem(item);
-        }
-      });
-    });
-    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'
-    }, render('inner', {
-      type: 'dropdown-button',
-      label: i18n("e8755fb1e985a5d26df0fce1f0b7b0f8"),
-      closeOnClick: true,
-      closeOnOutside: true,
-      buttons: optionList
-    }, {
-      popOverContainer: null // amis 渲染挂载节点会使用 this.target
-
-    })));
-  };
-
-  DateShortCutControl.defaultProps = {
-    label: i18n("f7d2996639d97b4a03fc0e40e2eb853a")
-  };
-
+      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")
+    }
+  });
   __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;
 }(React__default.PureComponent);
-
-/** @class */
-(function (_super) {
+/** @class */(function (_super) {
   __extends(DateShortCutControlRender, _super);
-
   function DateShortCutControlRender() {
     return _super !== null && _super.apply(this, arguments) || this;
   }
-
   DateShortCutControlRender = __decorate([FormItem({
     type: klass,
     renderLabel: false