amis-editor 5.2.0 → 5.2.1-beta.15

package/esm/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/esm/renderer/event-control/action-config-dialog.js

@@ -0,0 +1,273 @@
+/**
+ * amis-editor v5.2.1-beta.15
+ * Copyright 2018-2022 @fex
+ */
+
+import { __extends, __assign } from 'tslib';
+import React__default from 'react';
+import ActionConfigPanel from './action-config-panel.js';
+import { BASE_ACTION_PROPS } from './comp-action-select.js';
+import { findActionNode } from './helper.js';
+import { i18n } from 'i18n-runtime';
+
+/**
+ * 动作配置面板
+ */
+var ActionDialog = /** @class */function (_super) {
+  __extends(ActionDialog, _super);
+  function ActionDialog() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+  /**
+   * 获取组件树搜索列表
+   * @param tree
+   * @param keywords
+   * @returns
+   */
+  Object.defineProperty(ActionDialog.prototype, "getTreeSearchList", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: 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(__assign({}, node));
+          }
+        });
+      };
+      getSearchList(result, tree, keywords);
+      return result;
+    }
+  });
+  /**
+   * 获取组件树配置schema
+   * @param isSearch 是否是搜索
+   * @param actionTree 原数据源
+   * @param getComponents
+   * @returns
+   */
+  Object.defineProperty(ActionDialog.prototype, "getInputTreeSchema", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: 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: i18n("db1cac8e2f6206e8f179b1ff47a676df"),
+        onChange: function (value, oldVal, data, form) {
+          var _a;
+          // 因为不知道动作都有哪些字段，这里只保留基础配置
+          var removeKeys = {};
+          var groupType = '';
+          Object.keys(form.data).forEach(function (key) {
+            if (!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 = findActionNode(actionTree, value);
+          form.setValues(__assign(__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 __assign(__assign({}, inputTreeSchema), {
+          source: '${__resultActionTree}',
+          highlightTxt: '${__keywords}'
+        });
+      } else {
+        return __assign(__assign({}, inputTreeSchema), {
+          options: actionTree
+        });
+      }
+    }
+  });
+  Object.defineProperty(ActionDialog.prototype, "render", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: 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: 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: 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: i18n("d1d9049139d870edd490215530d90458"),
+                className: 'action-panel-title',
+                inline: false
+              }, {
+                type: 'input-text',
+                name: '__keywords',
+                className: 'action-tree-search',
+                inputClassName: 'action-tree-search-input',
+                placeholder: 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: i18n("0174bdde9517fa331bf7d716a553e023"),
+                className: 'action-panel-title',
+                visibleOn: 'data.actionType',
+                inline: false
+              }, {
+                type: 'tpl',
+                className: 'action-desc',
+                tpl: '${__actionDesc}',
+                visibleOn: 'data.actionType'
+              }, {
+                type: 'tpl',
+                tpl: i18n("0aeca07a02601a8e701a46d1a8b5ce43"),
+                className: 'action-panel-title',
+                visibleOn: 'data.actionType',
+                inline: false
+              }, {
+                type: 'container',
+                className: 'right-panel-container',
+                body: [{
+                  asFormItem: true,
+                  component: ActionConfigPanel,
+                  pluginActions: pluginActions,
+                  commonActions: commonActions
+                }, {
+                  type: 'tpl',
+                  tpl: 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: '执行条件',
+                  mode: 'horizontal',
+                  size: 'lg',
+                  placeholder: '默认执行该动作',
+                  visibleOn: 'data.actionType'
+                },
+                */
+                {
+                  name: 'expression',
+                  label: i18n("da1ed600ce65be863766444e60c2da05"),
+                  type: 'ae-expressionFormulaControl',
+                  variables: '${variables}',
+                  mode: 'horizontal',
+                  size: 'lg',
+                  placeholder: i18n("13b2de1073f76444c49d2c6a21e46e26"),
+                  visibleOn: 'data.actionType'
+                }]
+              }],
+              columnClassName: 'right-panel'
+            }]
+          }],
+          style: {
+            borderStyle: 'solid'
+          },
+          className: 'action-config-panel'
+        }],
+        onClose: onClose
+      }, {
+        data: data // 必须这样，不然变量会被当作数据映射处理掉
+      });
+      //   : null;
+    }
+  });
+
+  return ActionDialog;
+}(React__default.Component);
+
+export { ActionDialog as default };

package/esm/renderer/event-control/action-config-panel.js

@@ -0,0 +1,64 @@
+/**
+ * amis-editor v5.2.1-beta.15
+ * Copyright 2018-2022 @fex
+ */
+
+import { __extends, __assign, __spreadArray } from 'tslib';
+import React__default from 'react';
+import cx from 'classnames';
+import { COMMON_ACTION_SCHEMA_MAP, renderCmptActionSelect } from './helper.js';
+import { i18n } from 'i18n-runtime';
+
+/**
+ * 动作配置面板
+ */
+var ActionConfigPanel = /** @class */function (_super) {
+  __extends(ActionConfigPanel, _super);
+  function ActionConfigPanel() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+  Object.defineProperty(ActionConfigPanel.prototype, "render", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      var _a, _b, _c, _d;
+      var _e = this.props,
+        data = _e.data,
+        onBulkChange = _e.onBulkChange,
+        render = _e.render,
+        pluginActions = _e.pluginActions,
+        actionConfigItemsMap = _e.actionConfigItemsMap;
+      var actionType = data.__subActions ? data.groupType : data.actionType;
+      var commonActionConfig = __assign(__assign({}, COMMON_ACTION_SCHEMA_MAP), actionConfigItemsMap);
+      var schema = null;
+      if (data.actionType === 'component') {
+        // 获取组件动作配置
+        var subActionSchema = (_c = (_b = (_a = pluginActions === null || pluginActions === void 0 ? void 0 : pluginActions[data.__rendererName]) === null || _a === void 0 ? void 0 : _a.find(function (item) {
+          return item.actionType === data.groupType;
+        })) === null || _b === void 0 ? void 0 : _b.schema) !== null && _c !== void 0 ? _c : (_d = commonActionConfig[data.groupType]) === null || _d === void 0 ? void 0 : _d.schema;
+        var baseSchema = renderCmptActionSelect(i18n("d80bc0fcbfb250480320b683e48b1467"));
+        // 追加到基础配置
+        schema = __spreadArray(__spreadArray([], Array.isArray(baseSchema) ? baseSchema : [baseSchema], true), Array.isArray(subActionSchema) ? subActionSchema : [subActionSchema], true);
+      } else {
+        schema = data.__actionSchema;
+      }
+      return schema ? render('inner', schema, {
+        data: data,
+        onChange: function (value, field) {
+          var _a;
+          onBulkChange((_a = {}, _a[field] = value, _a));
+        }
+      }) : data.__subActions ? React__default.createElement(React__default.Fragment, null) : React__default.createElement("div", {
+        className: cx('ae-event-control-action-placeholder', {
+          'no-settings': actionType
+        })
+      }, React__default.createElement("div", {
+        className: "ae-event-control-action-placeholder-img"
+      }), React__default.createElement("span", null, actionType ? i18n("07682f1424e400c467accdb556d59e1c") : i18n("2e3ca80a58643bc28e87cc3b17bc9d80")));
+    }
+  });
+  return ActionConfigPanel;
+}(React__default.Component);
+
+export { ActionConfigPanel as default };

package/esm/renderer/event-control/actions.d.ts

@@ -0,0 +1,3 @@
+import { RendererPluginAction } from 'amis-editor-core';
+declare const ACTION_TYPE_TREE: (manager: any) => RendererPluginAction[];
+export default ACTION_TYPE_TREE;