amis-editor 4.2.0-beta.2 → 5.1.9-beta.0

package/src/plugin/Wrapper.tsx

@@ -1,5 +1,3 @@
-import {Button} from 'amis';
-import React from 'react';
 import {registerEditorPlugin} from '../manager';
 import {BasePlugin, RegionConfig, RendererInfo} from '../plugin';
 import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
@@ -36,69 +34,92 @@ export class WrapperPlugin extends BasePlugin {
   panelBody = [
     getSchemaTpl('tabs', [
       {
-        title: '常规',
+        title: '属性',
+        className: 'p-none',
         body: [
-          {
-            children: (
-              <Button
-                size="sm"
-                className="m-b-sm"
-                level="info"
-                block
-                onClick={() => {
-                  // this.manager.showInsertPanel('body');
-                  this.manager.showRendererPanel(
-                    '',
-                    '请从左侧组件面板中点击添加内容元素'
-                  );
-                }}
-              >
-                新增内容
-              </Button>
-            )
-          },
-          getSchemaTpl('size', {
-            label: '内间距大小',
-            options: [
-              {
-                label: '极小',
-                value: 'xs'
-              },
-              {
-                label: '小',
-                value: 'sm'
-              },
-              {
-                label: '默认',
-                value: ''
-              },
-              {
-                label: '中',
-                value: 'md'
-              },
-              {
-                label: '大',
-                value: 'lg'
-              },
-              {
-                label: '无',
-                value: 'none'
-              }
-            ],
-            pipeIn: defaultValue('')
-          })
+          getSchemaTpl('collapseGroup', [
+            {
+              title: '常用',
+              body: [
+                {
+                  label: '内间距',
+                  type: 'button-group-select',
+                  name: 'size',
+                  size: 'xs',
+                  mode: 'row',
+                  className: 'ae-buttonGroupSelect--justify',
+                  options: [
+                    {
+                      label: '极小',
+                      value: 'xs'
+                    },
+                    {
+                      label: '小',
+                      value: 'sm'
+                    },
+                    {
+                      label: '默认',
+                      value: ''
+                    },
+                    {
+                      label: '中',
+                      value: 'md'
+                    },
+                    {
+                      label: '大',
+                      value: 'lg'
+                    },
+                    {
+                      label: '无',
+                      value: 'none'
+                    }
+                  ],
+                  pipeIn: defaultValue('')
+                }
+              ]
+            },
+            {
+              title: '子节点管理',
+              body: [
+                {
+                  name: 'body',
+                  label: false,
+                  type: 'combo',
+                  scaffold: {
+                    type: 'tpl',
+                    tpl: '子节点',
+                    inline: false
+                  },
+                  multiple: true,
+                  draggableTip: '',
+                  items: [
+                    {
+                      type: 'tpl',
+                      tpl:
+                        '<span class="label label-default">子节点${index | plus}</span>'
+                    }
+                  ]
+                }
+              ]
+            }
+          ])
         ]
       },
-
       {
-        title: '样式',
-        body: [
-          getSchemaTpl('className', {
-            description: '设置样式后，大小设置将无效。',
-            pipeIn: defaultValue('bg-white')
-          }),
-          getSchemaTpl('style')
-        ]
+        title: '外观',
+        className: 'p-none',
+        body: getSchemaTpl('collapseGroup', [
+          ...getSchemaTpl('style:common'),
+          {
+            title: 'CSS 类名',
+            body: [
+              getSchemaTpl('className', {
+                description: '设置样式后，大小设置将无效。',
+                pipeIn: defaultValue('bg-white')
+              })
+            ]
+          }
+        ])
       }
     ])
   ];

package/src/plugin.ts

@@ -11,6 +11,7 @@ import {EditorDNDManager} from './dnd';
 import React from 'react';
 import {DiffChange} from './util';
 import find from 'lodash/find';
+import {RendererAction, RendererEvent} from './event-action';
 import type {RendererConfig} from 'amis-core/lib/factory';
 import type {MenuDivider, MenuItem} from 'amis-ui/lib/components/ContextMenu';
 import type {BaseSchema} from 'amis/lib/Schema';
@@ -130,6 +131,12 @@ export interface VRendererConfig {
    */
   panelControls?: Array<any>;
   panelDefinitions?: any;
+
+  /**
+   * 配置面板两端对齐布局
+   */
+  panelJustify?: boolean;
+
   /**
    * @deprecated 用panelBodyCreator 代替
    */
@@ -154,6 +161,9 @@ export interface RendererScaffoldInfo {
   // 图标
   icon?: string;
 
+  // 组件搜索关键字
+  searchKeywords?: string;
+
   // 组件描述信息
   description?: string;
 
@@ -259,6 +269,7 @@ export interface RendererInfo extends RendererScaffoldInfo {
 
   // 自动填入，不用配置
   id: string;
+  type: string;
   plugin: PluginInterface;
   extraPlugin?: PluginInterface; // 辅助插件，看需求。
   renderer: RendererConfig;
@@ -281,7 +292,7 @@ export interface RendererInfo extends RendererScaffoldInfo {
 
 export type BasicRendererInfo = Omit<
   RendererInfo,
-  'id' | 'plugin' | 'renderer' | 'schemaPath'
+  'id' | 'type' | 'plugin' | 'renderer' | 'schemaPath'
 >;
 
 export interface PopOverForm {
@@ -415,6 +426,7 @@ export interface PanelItem {
   position?: 'left' | 'right';
   render?: (props: PanelProps) => JSX.Element;
   menus?: Array<any>;
+  isNotConfigPanel?: boolean; // 可用于标记非组件属性配置面板
 }
 
 export type BasicPanelItem = Omit<PanelItem, 'order'> &
@@ -555,6 +567,9 @@ export type PluginEvent<T, P = any> = {
   prevented?: boolean;
   stoped?: boolean;
 
+  // 用来支持异步场景
+  pending?: Promise<any>;
+
   // 当前值
   data?: P;
 };
@@ -720,6 +735,29 @@ export interface PluginInterface
   panelApi?: any;
   panelSubmitOnChange?: boolean;
 
+  /**
+   * 隐藏右侧面板表单项Tab
+   * TODO: 正式上线后要干掉这个属性
+   */
+  notRenderFormZone?: boolean;
+
+  /**
+   *
+   * 事件定义集合
+   */
+  events?: RendererEvent[];
+
+  /**
+   *
+   * 专有动作定义集合
+   */
+  actions?: RendererAction[];
+
+  /**
+   * 右侧面板是否需要两端对齐布局
+   */
+  panelJustify?: boolean;
+
   /**
    * @deprecated 用 panelBodyCreator
    */
@@ -787,6 +825,23 @@ export interface PluginInterface
   ) => void;
 
   markDom?: (dom: HTMLElement | Array<HTMLElement>, props: any) => void;
+
+  /**
+   * 获取上下文数据结构
+   *
+   * @param node 当前容器节点
+   * @param region 所属容器节点
+   */
+  buildDataSchemas?: (
+    node: EditorNodeType,
+    region?: EditorNodeType
+  ) => any | Promise<any>;
+
+  rendererBeforeDispatchEvent?: (
+    node: EditorNodeType,
+    e: any,
+    data: any
+  ) => void;
 }
 
 /**
@@ -870,7 +925,9 @@ export abstract class BasePlugin implements PluginInterface {
             : plugin.panelBody!,
           controls: plugin.panelControlsCreator
             ? plugin.panelControlsCreator(context)
-            : plugin.panelControls!
+            : plugin.panelControls!,
+          justify: plugin.panelJustify,
+          panelById: store.activeId
         })
       });
     } else if (
@@ -894,7 +951,9 @@ export abstract class BasePlugin implements PluginInterface {
             : plugin.vRendererConfig.panelControls!,
           body: plugin.vRendererConfig.panelBodyCreator
             ? plugin.vRendererConfig.panelBodyCreator(context)
-            : plugin.vRendererConfig.panelBody!
+            : plugin.vRendererConfig.panelBody!,
+          justify: plugin.vRendererConfig.panelJustify,
+          panelById: store.activeId
         })
       });
     }
@@ -915,7 +974,9 @@ export abstract class BasePlugin implements PluginInterface {
           } else if (
             panel.key === 'outline' ||
             panel.key === 'commonConfig' ||
-            panel.key === 'name-list'
+            panel.key === 'page-setting' ||
+            panel.key === 'name-list' ||
+            panel.isNotConfigPanel
           ) {
             // do nothing
           } else {
@@ -959,6 +1020,7 @@ export abstract class BasePlugin implements PluginInterface {
       }));
     } else if (plugin.name && plugin.description) {
       return {
+        searchKeywords: plugin.searchKeywords,
         name: plugin.name,
         icon: plugin.icon,
         description: plugin.description,