amis-editor 5.2.0-beta.1 → 5.2.0-beta.2

package/esm/renderer/DateShortCutControl.js

@@ -0,0 +1,348 @@
+/**
+ * amis-editor v5.2.0-beta.2
+ * Copyright 2018-2022 @fex
+ */
+
+import { __extends, __spreadArray, __assign, __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 { autobind } from 'amis-editor-core';
+import FormulaControl from './FormulaControl.js';
+import { i18n } from 'i18n-runtime';
+
+var CustomType = 'custom';
+var klass = 'ae-DateShortCutControl';
+
+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) {
+      return {
+        label: dropDownOption[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.state = {
+      options: options
+    };
+  };
+  /**
+   * 添加
+   */
+
+
+  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();
+    }
+
+    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'
+    }));
+  };
+  /**
+   * 初始化拖动
+   */
+
+
+  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();
+        });
+      }
+    });
+  };
+  /**
+   * 拖动的销毁
+   */
+
+
+  DateShortCutControl.prototype.destroyDragging = 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"));
+  };
+  /**
+   * 生成选项
+   */
+
+
+  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"
+    })));
+  };
+  /**
+   * 输入框的改变
+   */
+
+
+  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();
+    });
+  };
+  /**
+   * 删除选项
+   */
+
+
+  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字段的统一出口
+   */
+
+
+  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,
+        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")
+  };
+
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", void 0)], DateShortCutControl.prototype, "dragRef", null);
+
+  return DateShortCutControl;
+}(React__default.PureComponent);
+
+/** @class */
+(function (_super) {
+  __extends(DateShortCutControlRender, _super);
+
+  function DateShortCutControlRender() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  DateShortCutControlRender = __decorate([FormItem({
+    type: klass,
+    renderLabel: false
+  })], DateShortCutControlRender);
+  return DateShortCutControlRender;
+})(DateShortCutControl);
+
+export { DateShortCutControl };

package/esm/renderer/FeatureControl.d.ts

@@ -0,0 +1,64 @@
+/**
+ * @file 控制功能开关的控件，这里的功能指需要加子组件来支持的功能
+ */
+import React from 'react';
+import { FormControlProps } from 'amis';
+import Sortable from 'sortablejs';
+export declare type FeatureOption = {
+    label: string;
+    value: any;
+    remove?: (data: any) => void;
+    /** 提供该字段表示删除后还可以再新增回来 */
+    add?: (data: any) => void;
+    isActive?: (data: any) => boolean;
+};
+interface FeatureControlProps extends FormControlProps {
+    className?: string;
+    removable?: boolean;
+    addable?: boolean;
+    addText?: string;
+    sortable?: boolean;
+    features: Array<FeatureOption> | ((schema: any) => Array<FeatureOption>);
+    goFeatureComp?: (item: FeatureOption) => string;
+    onSort?: (value: FeatureOption[]) => void;
+}
+interface FeatureControlState {
+    /**
+     * 当前启用的功能
+     */
+    inUseFeat: FeatureOption[];
+    /**
+     * 未启用的功能
+     */
+    unUseFeat: FeatureOption[];
+}
+export default class FeatureControl extends React.Component<FeatureControlProps, FeatureControlState> {
+    constructor(props: FeatureControlProps);
+    static getDerivedStateFromProps(nextProps: FeatureControlProps, preState: FeatureControlState): {
+        inUseFeat: FeatureOption[];
+        unUseFeat: FeatureOption[];
+    };
+    static initState(data: any, features: FeatureOption[] | ((schema: any) => Array<FeatureOption>), lastInUseFeat?: FeatureOption[], lastUnUseFeat?: FeatureOption[]): {
+        inUseFeat: FeatureOption[];
+        unUseFeat: FeatureOption[];
+    };
+    handleRemove(item: FeatureOption, index: number): void;
+    handleAdd(item: any): void;
+    sortable?: Sortable;
+    drag?: HTMLElement | null;
+    dragRef(ref: any): void;
+    /**
+     * 初始化拖动
+     */
+    initDragging(): void;
+    /**
+     * 拖动的销毁
+     */
+    destroyDragging(): void;
+    renderItem(item: FeatureOption, index: number): JSX.Element;
+    renderAction(): JSX.Element | null;
+    render(): JSX.Element;
+}
+export declare class FeatureControlRenderer extends FeatureControl {
+}
+export {};

package/esm/renderer/FeatureControl.js

@@ -0,0 +1,283 @@
+/**
+ * amis-editor v5.2.0-beta.2
+ * Copyright 2018-2022 @fex
+ */
+
+import { __extends, __decorate, __metadata } from 'tslib';
+import React__default from 'react';
+import { findDOMNode } from 'react-dom';
+import cx from 'classnames';
+import { Icon, Button, autobind, FormItem } from 'amis';
+import { remove, clone } from 'lodash';
+import { GoConfigControl } from './GoConfigControl.js';
+import Sortable from 'sortablejs';
+import { i18n } from 'i18n-runtime';
+
+/**
+ * @file 控制功能开关的控件，这里的功能指需要加子组件来支持的功能
+ */
+var klass = 'ae-FeatureControl';
+
+var FeatureControl =
+/** @class */
+function (_super) {
+  __extends(FeatureControl, _super);
+
+  function FeatureControl(props) {
+    var _this = _super.call(this, props) || this;
+
+    _this.state = FeatureControl.initState(props.data, props.features);
+    return _this;
+  }
+
+  FeatureControl.getDerivedStateFromProps = function (nextProps, preState) {
+    return FeatureControl.initState(nextProps.data, nextProps.features, preState.inUseFeat, preState.unUseFeat);
+  };
+
+  FeatureControl.initState = function (data, features, lastInUseFeat, lastUnUseFeat) {
+    var inUseFeat = [];
+    var unUseFeat = [];
+
+    if (!Array.isArray(features)) {
+      features = features(data);
+    }
+
+    features.forEach(function (item) {
+      var _a;
+
+      if (item.isActive == null || ((_a = item.isActive) === null || _a === void 0 ? void 0 : _a.call(item, data))) {
+        inUseFeat.push(item);
+      } else if (item.add) {
+        unUseFeat.push(item);
+      }
+    });
+    return {
+      inUseFeat: inUseFeat,
+      unUseFeat: unUseFeat
+    };
+  };
+
+  FeatureControl.prototype.handleRemove = function (item, index) {
+    var _a;
+
+    var _b = this.props,
+        removeFeature = _b.removeFeature,
+        data = _b.data,
+        onBulkChange = _b.onBulkChange;
+    var _c = this.state,
+        inUseFeat = _c.inUseFeat,
+        unUseFeat = _c.unUseFeat;
+    (_a = item.remove) === null || _a === void 0 ? void 0 : _a.call(item, data);
+    removeFeature === null || removeFeature === void 0 ? void 0 : removeFeature(item, data);
+    onBulkChange === null || onBulkChange === void 0 ? void 0 : onBulkChange(data);
+    remove(inUseFeat, item);
+    item.add && unUseFeat.push(item);
+    this.setState({
+      inUseFeat: inUseFeat,
+      unUseFeat: unUseFeat
+    });
+  };
+
+  FeatureControl.prototype.handleAdd = function (item) {
+    var _a;
+
+    var _b = this.props,
+        addFeature = _b.addFeature,
+        data = _b.data,
+        onBulkChange = _b.onBulkChange;
+    var _c = this.state,
+        inUseFeat = _c.inUseFeat,
+        unUseFeat = _c.unUseFeat;
+    inUseFeat.push(item);
+    remove(unUseFeat, item);
+    var schema = clone(data);
+    (_a = item.add) === null || _a === void 0 ? void 0 : _a.call(item, schema);
+    addFeature === null || addFeature === void 0 ? void 0 : addFeature(item, schema);
+    onBulkChange === null || onBulkChange === void 0 ? void 0 : onBulkChange(schema);
+  };
+
+  FeatureControl.prototype.dragRef = function (ref) {
+    var sortable = this.props.sortable;
+
+    if (!sortable) {
+      return;
+    }
+
+    if (!this.drag && ref) {
+      this.initDragging();
+    } else if (this.drag && !ref) {
+      this.destroyDragging();
+    }
+
+    this.drag = ref;
+  };
+  /**
+   * 初始化拖动
+   */
+
+
+  FeatureControl.prototype.initDragging = function () {
+    var _this = this;
+
+    var dom = findDOMNode(this);
+    this.sortable = new Sortable(dom.querySelector(".".concat(klass, "-features")), {
+      group: 'FeatureControlGroup',
+      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 value = _this.state.inUseFeat.concat();
+
+        value[e.oldIndex] = value.splice(e.newIndex, 1, value[e.oldIndex])[0];
+
+        _this.setState({
+          inUseFeat: value
+        }, function () {
+          var _a, _b;
+
+          (_b = (_a = _this.props).onSort) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+        });
+      }
+    });
+  };
+  /**
+   * 拖动的销毁
+   */
+
+
+  FeatureControl.prototype.destroyDragging = function () {
+    this.sortable && this.sortable.destroy();
+  };
+
+  FeatureControl.prototype.renderItem = function (item, index) {
+    var _this = this;
+
+    var _a = this.props,
+        sortable = _a.sortable,
+        goFeatureComp = _a.goFeatureComp;
+        _a.node;
+        var manager = _a.manager;
+    var content = null;
+
+    if (goFeatureComp) {
+      content = // @ts-ignore
+      React__default.createElement(GoConfigControl, {
+        className: cx("".concat(klass, "Item-go")),
+        label: item.label,
+        manager: manager,
+        compId: function () {
+          return goFeatureComp(item);
+        }
+      });
+    } else {
+      content = React__default.createElement("div", {
+        className: cx("".concat(klass, "Item-label"))
+      }, item.label);
+    }
+
+    return React__default.createElement("li", {
+      className: klass + 'Item',
+      key: index
+    }, sortable && React__default.createElement("a", {
+      className: klass + 'Item-dragBar'
+    }, React__default.createElement(Icon, {
+      icon: "drag-bar",
+      className: "icon"
+    })), content, React__default.createElement(Button, {
+      className: klass + 'Item-action',
+      onClick: function () {
+        return _this.handleRemove(item, index);
+      }
+    }, React__default.createElement(Icon, {
+      icon: "delete-btn",
+      className: "icon"
+    })));
+  };
+
+  FeatureControl.prototype.renderAction = function () {
+    var _this = this;
+
+    var _a = this.props,
+        addable = _a.addable,
+        addText = _a.addText,
+        render = _a.render;
+
+    if (!addable) {
+      return null;
+    }
+
+    return render('action', {
+      type: 'dropdown-button',
+      closeOnClick: true,
+      label: i18n("b58c7549c0246c55b9cac96383200338") || addText,
+      className: "".concat(klass, "-action"),
+      btnClassName: "".concat(klass, "-action--btn"),
+      menuClassName: "".concat(klass, "-action--menus"),
+      buttons: this.state.unUseFeat.map(function (item) {
+        return {
+          label: item.label,
+          onClick: function () {
+            return _this.handleAdd(item);
+          }
+        };
+      }, {
+        popOverContainer: null // amis 渲染挂载节点会使用 this.target
+
+      })
+    });
+  };
+
+  FeatureControl.prototype.render = function () {
+    var _this = this;
+
+    var className = this.props.className;
+    return React__default.createElement("div", {
+      className: cx('ae-FeatureControl', className)
+    }, React__default.createElement("ul", {
+      className: cx('ae-FeatureControl-features'),
+      ref: this.dragRef
+    }, this.state.inUseFeat.map(function (item, index) {
+      return _this.renderItem(item, index);
+    })), this.renderAction());
+  };
+
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object, Number]), __metadata("design:returntype", void 0)], FeatureControl.prototype, "handleRemove", null);
+
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", void 0)], FeatureControl.prototype, "handleAdd", null);
+
+  __decorate([autobind, __metadata("design:type", Function), __metadata("design:paramtypes", [Object]), __metadata("design:returntype", void 0)], FeatureControl.prototype, "dragRef", null);
+
+  return FeatureControl;
+}(React__default.Component);
+
+/** @class */
+(function (_super) {
+  __extends(FeatureControlRenderer, _super);
+
+  function FeatureControlRenderer() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  FeatureControlRenderer = __decorate([FormItem({
+    type: 'ae-feature-control'
+  })], FeatureControlRenderer);
+  return FeatureControlRenderer;
+})(FeatureControl);
+
+export { FeatureControl as default };