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

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,266 @@
+/**
+ * amis-editor v5.2.0-beta.2
+ * 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
+   */
+
+
+  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(__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: 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
+      });
+    }
+  };
+
+  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: 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: i18n("da1ed600ce65be863766444e60c2da05"),
+                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.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;
+}

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

@@ -0,0 +1,71 @@
+/**
+ * amis-editor v5.2.0-beta.2
+ * 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;
+  }
+
+  ActionConfigPanel.prototype.render = 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;