fix: 修复弹窗交互调整引发动作添加报错 Close: baidu#9720 (baidu#9724)

packages/amis-core/package.json

@@ -49,7 +49,6 @@
   ],
   "dependencies": {
     "amis-formula": "*",
-    "amis-formula": "^6.2.1",
     "classnames": "2.3.2",
     "file-saver": "^2.0.2",
     "hoist-non-react-statics": "^3.3.2",
@@ -70,7 +69,8 @@
   "peerDependencies": {
     "amis-formula": "*",
     "react": ">=16.8.6",
-    "react-dom": ">=16.8.6"
+    "react-dom": ">=16.8.6",
+    "react-is": ">=16.8.6"
   },
   "jest": {
     "testEnvironment": "jsdom",

packages/amis-editor-core/src/plugin.ts

@@ -983,7 +983,7 @@ export interface RendererPluginAction {
   schema?: any; // 动作配置schema
   supportComponents?: string[] | string; // 如果schema中包含选择组件，可以指定该动作支持的组件类型，用于组件数树过滤
   innerArgs?: string[]; // 动作专属配置参数，主要是为了区分特性字段和附加参数
-  descDetail?: (info: any) => string | JSX.Element; // 动作详细描述
+  descDetail?: (info: any, context: any, props: any) => string | JSX.Element; // 动作详细描述
   outputVarDataSchema?: any | any[]; // 动作出参的结构定义
   actions?: SubRendererPluginAction[]; // 分支动作（配置面板包含多种动作的情况）
   children?: RendererPluginAction[]; // 子类型，for动作树

packages/amis-editor/src/renderer/event-control/helper.tsx

@@ -282,6 +282,69 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
   const variableOptions = variableManager?.getVariableOptions() || [];
   const pageVariableOptions = variableManager?.getPageVariablesOptions() || [];
 
+  const modalDescDetail: (info: any, context: any, props: any) => any = (
+    info,
+    {eventKey, actionIndex},
+    props: any
+  ) => {
+    const {
+      actionTree,
+      actions: pluginActions,
+      commonActions,
+      allComponents,
+      node,
+      manager
+    } = props;
+    const store = manager.store;
+    const modals = store.modals;
+    const onEvent = node.schema?.onEvent;
+    const action = onEvent?.[eventKey].actions?.[actionIndex];
+    const actionBody =
+      action?.[action?.actionType === 'drawer' ? 'drawer' : 'dialog'];
+    let modalId = actionBody?.$$id;
+    if (actionBody?.$ref) {
+      modalId =
+        modals.find((item: any) => item.$$ref === actionBody.$ref)?.$$id || '';
+    }
+    const modal = modalId
+      ? manager.store.modals.find((item: any) => item.$$id === modalId)
+      : '';
+    if (modal) {
+      return (
+        <>
+          <div>
+            打开&nbsp;
+            <a
+              href="#"
+              onClick={(e: React.UIEvent<any>) => {
+                e.preventDefault();
+                e.stopPropagation();
+
+                store.openSubEditor({
+                  title: '编辑弹窗',
+                  value: modal,
+                  onChange: (value: any, diff: any) => {
+                    store.updateModal(modal.$$id!, value);
+                  }
+                });
+              }}
+            >
+              {modal.editorSetting?.displayName || modal.title || '未命名弹窗'}
+            </a>
+            &nbsp;
+            {(modal as any).actionType === 'confirmDialog'
+              ? '确认框'
+              : modal.type === 'drawer'
+              ? '抽屉弹窗'
+              : '弹窗'}
+          </div>
+        </>
+      );
+    }
+
+    return null;
+  };
+
   return [
     {
       actionLabel: '页面',
@@ -370,13 +433,16 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
           description: '打开弹窗，弹窗内支持复杂的交互设计',
           actions: [
             {
-              actionType: 'dialog'
+              actionType: 'dialog',
+              descDetail: modalDescDetail
             },
             {
-              actionType: 'drawer'
+              actionType: 'drawer',
+              descDetail: modalDescDetail
             },
             {
-              actionType: 'confirmDialog'
+              actionType: 'confirmDialog',
+              descDetail: modalDescDetail
             }
           ],
           schema: [
@@ -1180,19 +1246,19 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
                 {/* 只要path字段存在就认为是应用变量赋值，无论是否有值 */}
                 {typeof info?.args?.path === 'string' && !info?.componentId ? (
                   <>
-                    设置变量「
+                    设置变量
                     <span className="variable-left variable-right">
                       {variableManager.getNameByPath(info.args.path)}
                     </span>
-                    」的数据
+                    的数据
                   </>
                 ) : (
                   <>
-                    设置组件「
+                    设置组件
                     <span className="variable-left variable-right">
                       {info?.rendererLabel || info.componentId || '-'}
                     </span>
-                    」的数据
+                    的数据
                   </>
                 )}
                 {/* 值为

packages/amis-editor/src/renderer/event-control/index.tsx

@@ -893,7 +893,7 @@ export class EventControl extends React.Component<
   }
 
   // 渲染描述信息
-  renderDesc(action: ActionConfig) {
+  renderDesc(action: ActionConfig, actionIndex: number, eventKey: string) {
     const {
       actions: pluginActions,
       actionTree,
@@ -930,7 +930,16 @@ export class EventControl extends React.Component<
     }
 
     return typeof desc === 'function' ? (
-      <div className="action-control-content">{desc?.(info) || '-'}</div>
+      <div className="action-control-content">
+        {desc?.(
+          info,
+          {
+            actionIndex,
+            eventKey
+          },
+          this.props
+        ) || '-'}
+      </div>
     ) : null;
   }
 
@@ -994,65 +1003,13 @@ export class EventControl extends React.Component<
   renderActionType(action: any, actionIndex: number, eventKey: string) {
     const {
       actionTree,
-      pluginActions,
+      actions: pluginActions,
       commonActions,
       allComponents,
       node,
       manager
     } = this.props;
 
-    if (['dialog', 'drawer', 'confirmDialog'].includes(action?.actionType)) {
-      const store = manager.store;
-      const modals = store.modals;
-      const onEvent = node.schema?.onEvent;
-      const action = onEvent?.[eventKey].actions?.[actionIndex];
-      const actionBody =
-        action?.[action?.actionType === 'drawer' ? 'drawer' : 'dialog'];
-      let modalId = actionBody?.$$id;
-      if (actionBody?.$ref) {
-        modalId =
-          modals.find((item: any) => item.$$ref === actionBody.$ref)?.$$id ||
-          '';
-      }
-      const modal = modalId
-        ? manager.store.modals.find((item: any) => item.$$id === modalId)
-        : '';
-      if (modal) {
-        return (
-          <>
-            <div className="m-b-xs">打开弹窗</div>
-            <div>
-              打开{' '}
-              <a
-                href="#"
-                onClick={(e: React.UIEvent<any>) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-
-                  store.openSubEditor({
-                    title: '编辑弹窗',
-                    value: modal,
-                    onChange: (value: any, diff: any) => {
-                      store.updateModal(modal.$$id!, value);
-                    }
-                  });
-                }}
-              >
-                {modal.editorSetting?.displayName ||
-                  modal.title ||
-                  '未命名弹窗'}
-              </a>{' '}
-              {(modal as any).actionType === 'confirmDialog'
-                ? '确认框'
-                : modal.type === 'drawer'
-                ? '抽屉弹窗'
-                : '弹窗'}
-            </div>
-          </>
-        );
-      }
-    }
-
     return (
       <span>
         {getPropOfAcion(
@@ -1313,7 +1270,7 @@ export class EventControl extends React.Component<
                                   </div>
                                 </div>
                               </div>
-                              {this.renderDesc(action)}
+                              {this.renderDesc(action, actionIndex, eventKey)}
                             </li>
                           );
                         }