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

package/lib/renderer/DateShortCutControl.js

@@ -1,5 +1,5 @@
 /**
- * amis-editor v5.2.0-beta.1
+ * amis-editor v5.2.0-beta.2
  * Copyright 2018-2022 @fex
  */
 
@@ -13,8 +13,9 @@ var cx = require('classnames');
 var Sortable = require('sortablejs');
 var reactDom = require('react-dom');
 var amis = require('amis');
-var AMisCodeEditor = require('amis-editor-core');
+var amisEditorCore = require('amis-editor-core');
 var FormulaControl = require('./FormulaControl.js');
+var i18nRuntime = require('i18n-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -24,231 +25,334 @@ var Sortable__default = /*#__PURE__*/_interopDefaultLegacy(Sortable);
 
 var CustomType = 'custom';
 var klass = 'ae-DateShortCutControl';
-var DateShortCutControl = /** @class */ (function (_super) {
-    tslib.__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;
+
+var DateShortCutControl =
+/** @class */
+function (_super) {
+  tslib.__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'];
     }
-    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
+          });
         }
-        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
-                    });
-                }
-            });
+
+        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: tslib.__spreadArray(tslib.__spreadArray([], options, true), [
-                tslib.__assign(tslib.__assign({}, item), { inputValue: item.value === CustomType ? '' : item.value, type: item.value })
-            ], false)
-        }, function () {
-            _this.onChangeOptions();
-            _this.scrollToBottom();
-        });
+      });
+    }
+
+    this.state = {
+      options: options
     };
-    DateShortCutControl.prototype.dragRef = function (ref) {
-        if (!this.drag && ref) {
-            this.initDragging();
-        }
-        else if (this.drag && !ref) {
-            this.destroyDragging();
+  };
+  /**
+   * 添加
+   */
+
+
+  DateShortCutControl.prototype.addItem = function (item) {
+    var _this = this;
+
+    var options = this.state.options;
+    this.setState({
+      options: tslib.__spreadArray(tslib.__spreadArray([], options, true), [tslib.__assign(tslib.__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 = reactDom.findDOMNode(this);
+    this.sortable = new Sortable__default["default"](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);
         }
-        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 = reactDom.findDOMNode(this);
-        this.sortable = new Sortable__default["default"](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();
-    };
-    /**
-     * 生成内容体
-     */
-    DateShortCutControl.prototype.renderContent = function () {
-        var _this = this;
-        var options = this.state.options;
-        return (React__default["default"].createElement("div", { className: klass + '-wrapper' }, options && options.length ? (React__default["default"].createElement("ul", { className: klass + '-content', ref: this.dragRef }, options.map(function (option, index) { return _this.renderOption(option, index); }))) : (React__default["default"].createElement("div", { className: "ae-OptionControl-placeholder" }, "\u672A\u914D\u7F6E"))));
-    };
-    /**
-     * 生成选项
-     */
-    DateShortCutControl.prototype.renderOption = function (option, index) {
-        var _this = this;
-        return (React__default["default"].createElement("li", { className: klass + 'Item', key: index },
-            React__default["default"].createElement("a", { className: klass + 'Item-dragBar' },
-                React__default["default"].createElement(amis.Icon, { icon: "drag-bar", className: "icon" })),
-            React__default["default"].createElement(amis.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["default"].createElement(FormulaControl["default"], tslib.__assign({}, this.props, { simple: true, variables: [], functions: [], header: '', onChange: function (value) {
-                    return _this.onInputChange(index, value, 'inputValue');
-                }, value: option.inputValue })),
-            React__default["default"].createElement(amis.Button, { className: klass + 'Item-action', level: "link", size: "md", onClick: function (e) { return _this.handleDelete(index, e); } },
-                React__default["default"].createElement(amis.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
-                });
-            }
+      }
+    });
+  };
+  /**
+   * 拖动的销毁
+   */
+
+
+  DateShortCutControl.prototype.destroyDragging = function () {
+    this.sortable && this.sortable.destroy();
+  };
+  /**
+   * 生成内容体
+   */
+
+
+  DateShortCutControl.prototype.renderContent = function () {
+    var _this = this;
+
+    var options = this.state.options;
+    return React__default["default"].createElement("div", {
+      className: klass + '-wrapper'
+    }, options && options.length ? React__default["default"].createElement("ul", {
+      className: klass + '-content',
+      ref: this.dragRef
+    }, options.map(function (option, index) {
+      return _this.renderOption(option, index);
+    })) : React__default["default"].createElement("div", {
+      className: "ae-OptionControl-placeholder"
+    }, "\u672A\u914D\u7F6E"));
+  };
+  /**
+   * 生成选项
+   */
+
+
+  DateShortCutControl.prototype.renderOption = function (option, index) {
+    var _this = this;
+
+    return React__default["default"].createElement("li", {
+      className: klass + 'Item',
+      key: index
+    }, React__default["default"].createElement("a", {
+      className: klass + 'Item-dragBar'
+    }, React__default["default"].createElement(amis.Icon, {
+      icon: "drag-bar",
+      className: "icon"
+    })), React__default["default"].createElement(amis.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["default"].createElement(FormulaControl["default"], tslib.__assign({}, this.props, {
+      simple: true,
+      variables: [],
+      functions: [],
+      header: '',
+      onChange: function (value) {
+        return _this.onInputChange(index, value, 'inputValue');
+      },
+      value: option.inputValue
+    })), React__default["default"].createElement(amis.Button, {
+      className: klass + 'Item-action',
+      level: "link",
+      size: "md",
+      onClick: function (e) {
+        return _this.handleDelete(index, e);
+      }
+    }, React__default["default"].createElement(amis.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;
-        var optionList = this.dropDownOptionArr.map(function (item) { return (tslib.__assign(tslib.__assign({}, item), { type: 'button', onAction: function (e, action) { return _this.addItem(item); } })); });
-        return (React__default["default"].createElement("div", { className: cx__default["default"](klass, className) },
-            React__default["default"].createElement("header", { className: klass + '-header' },
-                React__default["default"].createElement("label", null, label)),
-            this.renderContent(),
-            React__default["default"].createElement("div", { className: klass + '-footer' }, amis.render({
-                type: 'dropdown-button',
-                label: '添加选项',
-                closeOnClick: true,
-                closeOnOutside: true,
-                buttons: optionList
-            }))));
-    };
-    DateShortCutControl.defaultProps = {
-        label: '快捷键'
-    };
-    tslib.__decorate([
-        AMisCodeEditor.autobind,
-        tslib.__metadata("design:type", Function),
-        tslib.__metadata("design:paramtypes", [Object]),
-        tslib.__metadata("design:returntype", void 0)
-    ], DateShortCutControl.prototype, "dragRef", null);
-    return DateShortCutControl;
-}(React__default["default"].PureComponent));
-/** @class */ ((function (_super) {
-    tslib.__extends(DateShortCutControlRender, _super);
-    function DateShortCutControlRender() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    DateShortCutControlRender = tslib.__decorate([
-        amis.FormItem({
-            type: klass,
-            renderLabel: false
-        })
-    ], DateShortCutControlRender);
-    return DateShortCutControlRender;
-})(DateShortCutControl));
+      }
+    });
+    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 tslib.__assign(tslib.__assign({}, item), {
+        type: 'button',
+        onAction: function (e, action) {
+          return _this.addItem(item);
+        }
+      });
+    });
+    return React__default["default"].createElement("div", {
+      className: cx__default["default"](klass, className)
+    }, React__default["default"].createElement("header", {
+      className: klass + '-header'
+    }, React__default["default"].createElement("label", null, label)), this.renderContent(), React__default["default"].createElement("div", {
+      className: klass + '-footer'
+    }, render('inner', {
+      type: 'dropdown-button',
+      label: i18nRuntime.i18n("e8755fb1e985a5d26df0fce1f0b7b0f8"),
+      closeOnClick: true,
+      closeOnOutside: true,
+      buttons: optionList
+    }, {
+      popOverContainer: null // amis 渲染挂载节点会使用 this.target
+
+    })));
+  };
+
+  DateShortCutControl.defaultProps = {
+    label: i18nRuntime.i18n("f7d2996639d97b4a03fc0e40e2eb853a")
+  };
+
+  tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Object]), tslib.__metadata("design:returntype", void 0)], DateShortCutControl.prototype, "dragRef", null);
+
+  return DateShortCutControl;
+}(React__default["default"].PureComponent);
+
+/** @class */
+(function (_super) {
+  tslib.__extends(DateShortCutControlRender, _super);
+
+  function DateShortCutControlRender() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  DateShortCutControlRender = tslib.__decorate([amis.FormItem({
+    type: klass,
+    renderLabel: false
+  })], DateShortCutControlRender);
+  return DateShortCutControlRender;
+})(DateShortCutControl);
 
 exports.DateShortCutControl = DateShortCutControl;

package/lib/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 {};