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

package/lib/renderer/ValidationItem.js

@@ -1,5 +1,5 @@
 /**
- * amis-editor v5.2.0-beta.1
+ * amis-editor v5.2.0-beta.2
  * Copyright 2018-2022 @fex
  */
 
@@ -11,8 +11,8 @@ var tslib = require('tslib');
 var React = require('react');
 var cx = require('classnames');
 var amis = require('amis');
-var AMisCodeEditor = require('amis-editor-core');
-var BaseControl = require('../component/BaseControl.js');
+var amisEditorCore = require('amis-editor-core');
+var i18nRuntime = require('i18n-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -22,126 +22,177 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 /**
  * @file 校验项
  */
-var ValidationItem = /** @class */ (function (_super) {
-    tslib.__extends(ValidationItem, _super);
-    function ValidationItem(props) {
-        var _this = _super.call(this, props) || this;
-        var data = _this.props.data;
-        _this.validator = _this.props.validator;
-        _this.state = {
-            value: data === null || data === void 0 ? void 0 : data.value,
-            checked: data.value != null,
-            message: (data === null || data === void 0 ? void 0 : data.message) || '',
-            isBuiltIn: data === null || data === void 0 ? void 0 : data.isBuiltIn
-        };
-        return _this;
-    }
-    ValidationItem.prototype.handleEdit = function (value, action) {
-        var _a = this.props, onEdit = _a.onEdit, data = _a.data;
-        if ((action === null || action === void 0 ? void 0 : action.type) === 'submit') {
-            onEdit &&
-                onEdit(tslib.__assign({ name: data.name }, value));
-        }
-    };
-    ValidationItem.prototype.handleDelete = function () {
-        var _a = this.props, onDelete = _a.onDelete, data = _a.data;
-        onDelete && onDelete(data.name);
-    };
-    ValidationItem.prototype.handleSwitch = function (checked) {
-        var _a = this.props, onSwitch = _a.onSwitch, data = _a.data;
-        var _b = this.state, value = _b.value; _b.message;
-        this.setState({
-            checked: checked
-        });
-        if (checked) {
-            data.value = this.validator.schema ? value : true;
-            data.message = '';
-        }
-        onSwitch && onSwitch(checked, data);
-    };
-    ValidationItem.prototype.renderActions = function () {
-        var isDefault = this.props.isDefault;
-        var actions = [];
-        if (!isDefault) {
-            actions.push(React__default["default"].createElement(amis.Button, { className: "ae-ValidationControl-item-action", level: "link", size: "md", key: "delete", onClick: this.handleDelete },
-                React__default["default"].createElement("i", { className: "fa fa-trash" })));
-        }
-        return actions.length !== 0 ? (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement("div", { className: "ae-ValidationControl-item-actions" }, actions))) : null;
-    };
-    ValidationItem.prototype.renderInputControl = function () {
-        var _a = this.state, value = _a.value, message = _a.message, checked = _a.checked;
-        var control = [];
-        if (!checked) {
-            return null;
-        }
-        if (this.validator.schema) {
-            control = control.concat(this.validator.schema);
-        }
-        if (this.validator.message) {
-            control.push({
-                name: 'message',
-                type: 'input-text',
-                label: BaseControl.tipedLabel('错误提示', "\u7CFB\u7EDF\u9ED8\u8BA4\u63D0\u793A\uFF1A".concat(this.validator.message)),
-                placeholder: '默认使用系统定义提示'
-            });
-        }
-        return control.length !== 0 ? (React__default["default"].createElement("section", { className: cx__default["default"]('ae-ValidationControl-item-input', 'ae-ExtendMore') }, amis.render({
-            type: 'form',
-            className: 'w-full',
-            wrapWithPanel: false,
-            panelClassName: 'border-none shadow-none mb-0',
-            bodyClassName: 'p-none',
-            actionsClassName: 'border-none mt-2.5',
-            wrapperComponent: 'div',
-            mode: 'horizontal',
-            horizontal: {
-                justify: true,
-                left: 4,
-                right: 8
-            },
-            preventEnterSubmit: true,
-            submitOnChange: true,
-            body: control,
-            data: { value: value, message: message }
-        }, {
-            onSubmit: this.handleEdit
-        }))) : null;
-    };
-    ValidationItem.prototype.render = function () {
-        var _a = this.props, classPrefix = _a.classPrefix, data = _a.data; _a.isDefault;
-        var _b = this.state, checked = _b.checked, isBuiltIn = _b.isBuiltIn;
-        return (React__default["default"].createElement("div", { className: cx__default["default"]('ae-ValidationControl-item', {
-                'is-active': checked
-            }), key: data.name },
-            React__default["default"].createElement("section", { className: cx__default["default"]('ae-ValidationControl-item-control', {
-                    'is-active': checked && data.name !== 'required'
-                }) },
-                React__default["default"].createElement("label", { className: cx__default["default"]("".concat(classPrefix, "Form-label")) }, this.validator.label),
-                React__default["default"].createElement("div", null,
-                    this.renderActions(),
-                    React__default["default"].createElement(amis.Switch, { key: "switch", value: checked, disabled: isBuiltIn, onChange: this.handleSwitch }))),
-            this.renderInputControl()));
+
+var ValidationItem =
+/** @class */
+function (_super) {
+  tslib.__extends(ValidationItem, _super);
+
+  function ValidationItem(props) {
+    var _this = _super.call(this, props) || this;
+
+    var data = _this.props.data;
+    _this.validator = _this.props.validator;
+    _this.state = {
+      value: data === null || data === void 0 ? void 0 : data.value,
+      checked: data.value != null,
+      message: (data === null || data === void 0 ? void 0 : data.message) || '',
+      isBuiltIn: data === null || data === void 0 ? void 0 : data.isBuiltIn
     };
-    tslib.__decorate([
-        AMisCodeEditor.autobind,
-        tslib.__metadata("design:type", Function),
-        tslib.__metadata("design:paramtypes", [Object, Object]),
-        tslib.__metadata("design:returntype", void 0)
-    ], ValidationItem.prototype, "handleEdit", null);
-    tslib.__decorate([
-        AMisCodeEditor.autobind,
-        tslib.__metadata("design:type", Function),
-        tslib.__metadata("design:paramtypes", []),
-        tslib.__metadata("design:returntype", void 0)
-    ], ValidationItem.prototype, "handleDelete", null);
-    tslib.__decorate([
-        AMisCodeEditor.autobind,
-        tslib.__metadata("design:type", Function),
-        tslib.__metadata("design:paramtypes", [Boolean]),
-        tslib.__metadata("design:returntype", void 0)
-    ], ValidationItem.prototype, "handleSwitch", null);
-    return ValidationItem;
-}(React__default["default"].Component));
+    return _this;
+  }
+
+  ValidationItem.prototype.handleEdit = function (value, action) {
+    var _a = this.props,
+        onEdit = _a.onEdit,
+        data = _a.data;
+
+    if ((action === null || action === void 0 ? void 0 : action.type) === 'submit') {
+      onEdit && onEdit(tslib.__assign({
+        name: data.name
+      }, value));
+    }
+  };
+
+  ValidationItem.prototype.handleDelete = function () {
+    var _a = this.props,
+        onDelete = _a.onDelete,
+        data = _a.data;
+    onDelete && onDelete(data.name);
+  };
+
+  ValidationItem.prototype.handleSwitch = function (checked) {
+    var _a = this.props,
+        onSwitch = _a.onSwitch,
+        data = _a.data;
+    var _b = this.state,
+        value = _b.value;
+        _b.message;
+    this.setState({
+      checked: checked
+    });
+
+    if (checked) {
+      data.value = this.validator.schema ? value : true;
+      data.message = '';
+    }
+
+    onSwitch && onSwitch(checked, data);
+  };
+
+  ValidationItem.prototype.renderActions = function () {
+    var isDefault = this.props.isDefault;
+    var actions = [];
+
+    if (!isDefault) {
+      actions.push(React__default["default"].createElement(amis.Button, {
+        className: "ae-ValidationControl-item-action",
+        level: "link",
+        size: "md",
+        key: "delete",
+        onClick: this.handleDelete
+      }, React__default["default"].createElement("i", {
+        className: "fa fa-trash"
+      })));
+    }
+
+    return actions.length !== 0 ? React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("div", {
+      className: "ae-ValidationControl-item-actions"
+    }, actions)) : null;
+  };
+
+  ValidationItem.prototype.renderInputControl = function () {
+    var _this = this;
+
+    var _a = this.state,
+        value = _a.value,
+        message = _a.message,
+        checked = _a.checked;
+    var control = [];
+
+    if (!checked) {
+      return null;
+    }
+
+    if (this.validator.schema) {
+      control = control.concat(this.validator.schema);
+    }
+
+    if (this.validator.message) {
+      control.push({
+        name: 'message',
+        type: 'input-text',
+        label: amisEditorCore.tipedLabel(i18nRuntime.i18n("d7a169e81b60ee08c82b5d9de473e362"), "\u7CFB\u7EDF\u9ED8\u8BA4\u63D0\u793A\uFF1A".concat(this.validator.message)),
+        pipeIn: function (value, data) {
+          // value中 $1 会被运算，导致无法正确回显$1。此处从this.props.data中获取该校验项的错误提示
+          return _this.props.data.message;
+        },
+        placeholder: i18nRuntime.i18n("5ef6ce89f52b4331b080a0f3019414f3")
+      });
+    }
+
+    return control.length !== 0 ? React__default["default"].createElement("section", {
+      className: cx__default["default"]('ae-ValidationControl-item-input', 'ae-ExtendMore')
+    }, amis.render({
+      type: 'form',
+      className: 'w-full',
+      wrapWithPanel: false,
+      panelClassName: 'border-none shadow-none mb-0',
+      bodyClassName: 'p-none',
+      actionsClassName: 'border-none mt-2.5',
+      wrapperComponent: 'div',
+      mode: 'horizontal',
+      horizontal: {
+        justify: true,
+        left: 4,
+        right: 8
+      },
+      preventEnterSubmit: true,
+      submitOnChange: true,
+      body: control,
+      data: {
+        value: value,
+        message: message
+      }
+    }, {
+      onSubmit: this.handleEdit
+    })) : null;
+  };
+
+  ValidationItem.prototype.render = function () {
+    var _a = this.props,
+        classPrefix = _a.classPrefix,
+        data = _a.data;
+        _a.isDefault;
+    var _b = this.state,
+        checked = _b.checked,
+        isBuiltIn = _b.isBuiltIn;
+    return React__default["default"].createElement("div", {
+      className: cx__default["default"]('ae-ValidationControl-item', {
+        'is-active': checked
+      }),
+      key: data.name
+    }, React__default["default"].createElement("section", {
+      className: cx__default["default"]('ae-ValidationControl-item-control', {
+        'is-active': checked && data.name !== 'required'
+      })
+    }, React__default["default"].createElement("label", {
+      className: cx__default["default"]("".concat(classPrefix, "Form-label"))
+    }, this.validator.label), React__default["default"].createElement("div", null, this.renderActions(), React__default["default"].createElement(amis.Switch, {
+      key: "switch",
+      value: checked,
+      disabled: isBuiltIn,
+      onChange: this.handleSwitch
+    }))), this.renderInputControl());
+  };
+
+  tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Object, Object]), tslib.__metadata("design:returntype", void 0)], ValidationItem.prototype, "handleEdit", null);
+
+  tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", []), tslib.__metadata("design:returntype", void 0)], ValidationItem.prototype, "handleDelete", null);
+
+  tslib.__decorate([amisEditorCore.autobind, tslib.__metadata("design:type", Function), tslib.__metadata("design:paramtypes", [Boolean]), tslib.__metadata("design:returntype", void 0)], ValidationItem.prototype, "handleSwitch", null);
+
+  return ValidationItem;
+}(React__default["default"].Component);
 
 exports["default"] = ValidationItem;

package/lib/renderer/event-control/action-config-dialog.d.ts

@@ -0,0 +1,73 @@
+/**
+ * 动作配置面板
+ */
+import { PluginActions, RendererPluginAction } from 'amis-editor-core';
+import React from 'react';
+import { ActionConfig, ComponentInfo } from './types';
+import { PlainObject, SchemaNode } from 'amis-core';
+interface ActionDialogProp {
+    show: boolean;
+    type: string;
+    data: any;
+    pluginActions: PluginActions;
+    actionTree: RendererPluginAction[];
+    commonActions?: {
+        [propName: string]: RendererPluginAction;
+    };
+    onSubmit: (type: string, config: any) => void;
+    onClose: () => void;
+    getComponents: (action: RendererPluginAction) => ComponentInfo[];
+    actionConfigInitFormatter?: (actionConfig: ActionConfig) => ActionConfig;
+    actionConfigSubmitFormatter?: (actionConfig: ActionConfig) => ActionConfig;
+    render: (region: string, node: SchemaNode, props?: PlainObject) => JSX.Element;
+}
+export default class ActionDialog extends React.Component<ActionDialogProp> {
+    /**
+     * 获取组件树搜索列表
+     * @param tree
+     * @param keywords
+     * @returns
+     */
+    getTreeSearchList(tree: RendererPluginAction[], keywords: string): any;
+    /**
+     * 获取组件树配置schema
+     * @param isSearch 是否是搜索
+     * @param actionTree 原数据源
+     * @param getComponents
+     * @returns
+     */
+    getInputTreeSchema(isSearch: boolean, actionTree: RendererPluginAction[], getComponents: (action: RendererPluginAction) => ComponentInfo[]): {
+        source: string;
+        highlightTxt: string;
+        type: string;
+        name: string;
+        visibleOn: string;
+        disabled: boolean;
+        onlyLeaf: boolean;
+        showIcon: boolean;
+        className: string;
+        mode: string;
+        labelField: string;
+        valueField: string;
+        inputClassName: string;
+        placeholder: string;
+        onChange: (value: string, oldVal: any, data: any, form: any) => void;
+    } | {
+        options: RendererPluginAction[];
+        type: string;
+        name: string;
+        visibleOn: string;
+        disabled: boolean;
+        onlyLeaf: boolean;
+        showIcon: boolean;
+        className: string;
+        mode: string;
+        labelField: string;
+        valueField: string;
+        inputClassName: string;
+        placeholder: string;
+        onChange: (value: string, oldVal: any, data: any, form: any) => void;
+    };
+    render(): JSX.Element;
+}
+export {};

package/lib/renderer/event-control/action-config-dialog.js

@@ -0,0 +1,274 @@
+/**
+ * amis-editor v5.2.0-beta.2
+ * Copyright 2018-2022 @fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var actionConfigPanel = require('./action-config-panel.js');
+var compActionSelect = require('./comp-action-select.js');
+var helper = require('./helper.js');
+var i18nRuntime = require('i18n-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * 动作配置面板
+ */
+
+var ActionDialog =
+/** @class */
+function (_super) {
+  tslib.__extends(ActionDialog, _super);
+
+  function ActionDialog() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+  /**
+   * 获取组件树搜索列表
+   * @param tree
+   * @param keywords
+   * @returns
+   */
+
+
+  ActionDialog.prototype.getTreeSearchList = function (tree, keywords) {
+    if (!keywords) {
+      return tree;
+    }
+
+    var result = [];
+
+    var getSearchList = function (result, array, keywords) {
+      array.forEach(function (node) {
+        if (node.children) {
+          getSearchList(result, node.children, keywords);
+        } else if (node.actionLabel.includes(keywords)) {
+          result.push(tslib.__assign({}, node));
+        }
+      });
+    };
+
+    getSearchList(result, tree, keywords);
+    return result;
+  };
+  /**
+   * 获取组件树配置schema
+   * @param isSearch 是否是搜索
+   * @param actionTree 原数据源
+   * @param getComponents
+   * @returns
+   */
+
+
+  ActionDialog.prototype.getInputTreeSchema = function (isSearch, actionTree, getComponents) {
+    var inputTreeSchema = {
+      type: 'input-tree',
+      name: 'actionType',
+      visibleOn: isSearch ? '__keywords' : '!__keywords',
+      disabled: false,
+      onlyLeaf: true,
+      showIcon: false,
+      className: 'action-tree',
+      mode: 'normal',
+      labelField: 'actionLabel',
+      valueField: 'actionType',
+      inputClassName: 'no-border action-tree-control',
+      placeholder: i18nRuntime.i18n("db1cac8e2f6206e8f179b1ff47a676df"),
+      onChange: function (value, oldVal, data, form) {
+        var _a; // 因为不知道动作都有哪些字段，这里只保留基础配置
+
+
+        var removeKeys = {};
+        var groupType = '';
+        Object.keys(form.data).forEach(function (key) {
+          if (!compActionSelect.BASE_ACTION_PROPS.includes(key)) {
+            removeKeys[key] = undefined;
+          }
+        });
+
+        if (value === 'openDialog' && !['dialog', 'drawer'].includes(groupType)) {
+          groupType = 'dialog';
+        }
+
+        if (value === 'closeDialog' && !['closeDialog', 'closeDrawer'].includes(groupType)) {
+          groupType = 'closeDialog';
+        }
+
+        if (value === 'visibility' && !['show', 'hidden'].includes(groupType)) {
+          groupType = 'show';
+        }
+
+        if (value === 'usability' && !['enabled', 'disabled'].includes(groupType)) {
+          groupType = 'enabled';
+        }
+
+        var actionNode = helper.findActionNode(actionTree, value);
+        form.setValues(tslib.__assign(tslib.__assign({}, removeKeys), {
+          __keywords: form.data.__keywords,
+          __resultActionTree: form.data.__resultActionTree,
+          componentId: form.data.componentId ? '' : undefined,
+          args: {},
+          groupType: groupType,
+          __actionDesc: actionNode === null || actionNode === void 0 ? void 0 : actionNode.description,
+          __actionSchema: actionNode === null || actionNode === void 0 ? void 0 : actionNode.schema,
+          __subActions: actionNode === null || actionNode === void 0 ? void 0 : actionNode.actions,
+          __cmptTreeSource: (actionNode === null || actionNode === void 0 ? void 0 : actionNode.supportComponents) ? (_a = getComponents === null || getComponents === void 0 ? void 0 : getComponents(actionNode)) !== null && _a !== void 0 ? _a : [] : []
+        }));
+      }
+    };
+
+    if (isSearch) {
+      return tslib.__assign(tslib.__assign({}, inputTreeSchema), {
+        source: '${__resultActionTree}',
+        highlightTxt: '${__keywords}'
+      });
+    } else {
+      return tslib.__assign(tslib.__assign({}, inputTreeSchema), {
+        options: actionTree
+      });
+    }
+  };
+
+  ActionDialog.prototype.render = function () {
+    var _this = this;
+
+    var _a;
+
+    var _b = this.props,
+        data = _b.data,
+        show = _b.show,
+        type = _b.type,
+        actionTree = _b.actionTree,
+        pluginActions = _b.pluginActions,
+        getComponents = _b.getComponents,
+        commonActions = _b.commonActions,
+        onClose = _b.onClose,
+        render = _b.render;
+    return render('inner', {
+      type: 'dialog',
+      title: i18nRuntime.i18n("e9908cdf79e965f6907ce9f291cdfcf8"),
+      headerClassName: 'font-bold',
+      className: 'action-config-dialog',
+      bodyClassName: 'action-config-dialog-body',
+      closeOnEsc: true,
+      closeOnOutside: false,
+      show: show,
+      showCloseButton: true,
+      size: 'md',
+      body: [{
+        type: 'form',
+        title: '',
+        mode: 'normal',
+        wrapperComponent: 'div',
+        submitText: i18nRuntime.i18n("be5fbbe34ce9979bfb6576d9eddc5612"),
+        autoFocus: true,
+        data: {
+          __keywords: '',
+          __resultActionTree: []
+        },
+        preventEnterSubmit: true,
+        // debug: true,
+        onSubmit: (_a = this.props.onSubmit) === null || _a === void 0 ? void 0 : _a.bind(this, type),
+        body: [{
+          type: 'grid',
+          className: 'h-full',
+          columns: [{
+            body: [{
+              type: 'tpl',
+              tpl: i18nRuntime.i18n("d1d9049139d870edd490215530d90458"),
+              className: 'action-panel-title',
+              inline: false
+            }, {
+              type: 'input-text',
+              name: '__keywords',
+              className: 'action-tree-search',
+              inputClassName: 'action-tree-search-input',
+              placeholder: i18nRuntime.i18n("9eac7e07ca0a3181766e5ecc70d20727"),
+              clearable: true,
+              onChange: function (value, oldVal, data, form) {
+                if (value) {
+                  var list = _this.getTreeSearchList(actionTree, value);
+
+                  form.setValueByName('__resultActionTree', list);
+                } else {
+                  form.setValueByName('__resultActionTree', actionTree);
+                }
+              }
+            }, // actionTree中包含function及class类型的属性，直接传入form的data中解析会报错
+            // 故采用两棵树分别使用静态及动态选项组
+            this.getInputTreeSchema(false, actionTree, getComponents), this.getInputTreeSchema(true, actionTree, getComponents)],
+            md: 3,
+            columnClassName: 'left-panel'
+          }, {
+            body: [{
+              type: 'tpl',
+              tpl: i18nRuntime.i18n("0174bdde9517fa331bf7d716a553e023"),
+              className: 'action-panel-title',
+              visibleOn: 'data.actionType',
+              inline: false
+            }, {
+              type: 'tpl',
+              className: 'action-desc',
+              tpl: '${__actionDesc}',
+              visibleOn: 'data.actionType'
+            }, {
+              type: 'tpl',
+              tpl: i18nRuntime.i18n("0aeca07a02601a8e701a46d1a8b5ce43"),
+              className: 'action-panel-title',
+              visibleOn: 'data.actionType',
+              inline: false
+            }, {
+              type: 'container',
+              className: 'right-panel-container',
+              body: [{
+                asFormItem: true,
+                component: actionConfigPanel["default"],
+                pluginActions: pluginActions,
+                commonActions: commonActions
+              }, {
+                type: 'tpl',
+                tpl: i18nRuntime.i18n("e370757f933a8ecd87bf0255c3ce45d0"),
+                inline: false,
+                className: 'action-panel-title',
+                visibleOn: 'data.actionType'
+              }, {
+                name: 'expression',
+                title: '',
+                type: 'input-formula',
+                variableMode: 'tabs',
+                inputMode: 'input-group',
+                variables: '${variables}',
+                className: 'action-exec-on',
+                label: i18nRuntime.i18n("da1ed600ce65be863766444e60c2da05"),
+                mode: 'horizontal',
+                size: 'lg',
+                placeholder: i18nRuntime.i18n("13b2de1073f76444c49d2c6a21e46e26"),
+                visibleOn: 'data.actionType'
+              }]
+            }],
+            columnClassName: 'right-panel'
+          }]
+        }],
+        style: {
+          borderStyle: 'solid'
+        },
+        className: 'action-config-panel'
+      }],
+      onClose: onClose
+    }, {
+      data: data // 必须这样，不然变量会被当作数据映射处理掉
+
+    }); //   : null;
+  };
+
+  return ActionDialog;
+}(React__default["default"].Component);
+
+exports["default"] = ActionDialog;

package/lib/renderer/event-control/action-config-panel.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 动作配置面板
+ */
+import { RendererProps } from 'amis-core';
+import React from 'react';
+export default class ActionConfigPanel extends React.Component<RendererProps> {
+    render(): JSX.Element;
+}