amis-editor 4.2.0-beta.2 → 5.1.9

package/src/plugin/Dialog.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import {registerEditorPlugin} from '../manager';
-import {BasePlugin, RegionConfig, RendererInfo} from '../plugin';
+import {BaseEventContext, BasePlugin, RegionConfig, RendererInfo} from '../plugin';
 import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
-import {isObject, noop} from '../util';
+import {getEventControlConfig, isObject, noop} from '../util';
 
 export class DialogPlugin extends BasePlugin {
   // 关联渲染器名字
@@ -43,9 +43,41 @@ export class DialogPlugin extends BasePlugin {
     }
   ];
 
+  // 现在没用，后面弹窗优化后有用
+  events = [
+    {
+      eventName: 'confirm',
+      eventLabel: '确认',
+      description: '确认'
+    },
+    {
+      eventName: 'cancel',
+      eventLabel: '取消',
+      description: '取消'
+    }
+  ];
+
+  actions = [
+    {
+      actionType: 'confirm',
+      actionLabel: '确认',
+      description: '确认操作'
+    },
+    {
+      actionType: 'cancel',
+      actionLabel: '取消',
+      description: '取消操作'
+    },
+    {
+      actionType: 'setValue',
+      actionLabel: '更新数据',
+      description: '触发组件数据更新'
+    }
+  ];
+
   panelTitle = '弹框';
-  panelBody = [
-    getSchemaTpl('tabs', [
+  panelBodyCreator = (context: BaseEventContext) => {
+    return getSchemaTpl('tabs', [
       {
         title: '常规',
         body: [
@@ -55,15 +87,13 @@ export class DialogPlugin extends BasePlugin {
             name: 'title'
           },
 
-          {
-            type: 'switch',
+          getSchemaTpl('switch', {
             label: '数据映射',
             name: 'data',
-            mode: 'inline',
             className: 'block m-b-xs',
             pipeIn: (value: any) => !!value,
             pipeOut: (value: any) => (value ? {'&': '$$'} : null)
-          },
+          }),
 
           {
             type: 'tpl',
@@ -85,23 +115,17 @@ export class DialogPlugin extends BasePlugin {
             }
           },
 
-          {
+          getSchemaTpl('switch', {
             label: '按 Esc 关闭弹框',
-            type: 'switch',
             name: 'closeOnEsc',
-            mode: 'inline',
-            className: 'block',
             value: false
-          },
+          }),
 
-          {
+          getSchemaTpl('switch', {
             label: '点击弹框外区域关闭弹框',
-            type: 'switch',
             name: 'closeOnOutside',
-            mode: 'inline',
-            className: 'block',
             value: false
-          }
+          })
         ]
       },
       {
@@ -138,14 +162,11 @@ export class DialogPlugin extends BasePlugin {
             ]
           },
 
-          {
+          getSchemaTpl('switch', {
             label: '是否显示关闭按钮',
-            type: 'switch',
             name: 'showCloseButton',
-            mode: 'inline',
-            className: 'block',
             value: true
-          },
+          }),
 
           getSchemaTpl('className', {
             name: 'headerClassName',
@@ -157,9 +178,19 @@ export class DialogPlugin extends BasePlugin {
             label: '内容 CSS 类名'
           })
         ]
+      },
+      {
+        title: '事件',
+        className: 'p-none',
+        body: [
+          getSchemaTpl('eventControl', {
+            name: 'onEvent',
+            ...getEventControlConfig(this.manager, context)
+          })
+        ]
       }
     ])
-  ];
+  };
 
   buildSubRenderers() {}
 }

package/src/plugin/Drawer.tsx

@@ -1,7 +1,7 @@
 import {registerEditorPlugin} from '../manager';
-import {BasePlugin, RegionConfig, RendererInfo} from '../plugin';
+import {BaseEventContext, BasePlugin, RegionConfig, RendererInfo} from '../plugin';
 import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
-import {noop} from '../util';
+import {getEventControlConfig, noop} from '../util';
 import {InlineModal} from './Dialog';
 
 export class DrawerPlugin extends BasePlugin {
@@ -44,9 +44,41 @@ export class DrawerPlugin extends BasePlugin {
     }
   ];
 
+  // 现在没用，后面弹窗优化后有用
+  events = [
+    {
+      eventName: 'confirm',
+      eventLabel: '确认',
+      description: '确认'
+    },
+    {
+      eventName: 'cancel',
+      eventLabel: '取消',
+      description: '取消'
+    }
+  ];
+
+  actions = [
+    {
+      actionType: 'confirm',
+      actionLabel: '确认',
+      description: '确认操作'
+    },
+    {
+      actionType: 'cancel',
+      actionLabel: '取消',
+      description: '取消操作'
+    },
+    {
+      actionType: 'setValue',
+      actionLabel: '更新数据',
+      description: '触发组件数据更新'
+    }
+  ];
+
   panelTitle = '弹框';
-  panelBody = [
-    getSchemaTpl('tabs', [
+  panelBodyCreator = (context: BaseEventContext) => {
+    return getSchemaTpl('tabs', [
       {
         title: '常规',
         body: [
@@ -103,15 +135,13 @@ export class DrawerPlugin extends BasePlugin {
             description: '定义弹框从什么位置呼出'
           },
 
-          {
-            type: 'switch',
+          getSchemaTpl('switch', {
             label: '数据映射',
             name: 'data',
-            mode: 'inline',
-            className: 'w-full m-b-xs',
+            className: 'm-b-xs',
             pipeIn: (value: any) => !!value,
             pipeOut: (value: any) => (value ? {'&': '$$'} : null)
-          },
+          }),
 
           {
             type: 'tpl',
@@ -130,21 +160,15 @@ export class DrawerPlugin extends BasePlugin {
               '<p>当开启数据映射时，弹框中的数据只会包含设置的部分，请绑定数据。如：<code>{"a": "\\${a}", "b": 2}</code></p><p>如果希望在默认的基础上定制，请先添加一个 Key 为 `&` Value 为 `\\$$` 作为第一行。</p><div>当值为 <code>__undefined</code>时，表示删除对应的字段，可以结合<code>{"&": "\\$$"}</code>来达到黑名单效果。</div>'
           },
 
-          {
-            type: 'switch',
+          getSchemaTpl('switch', {
             name: 'closeOnOutside',
-            label: '点击外部关闭弹框',
-            mode: 'inline',
-            className: 'block'
-          },
+            label: '点击外部关闭弹框'
+          }),
 
-          {
-            label: '按 Esc 可关闭？',
-            type: 'switch',
-            name: 'closeOnEsc',
-            mode: 'inline',
-            className: 'block'
-          }
+          getSchemaTpl('switch', {
+            label: '按 Esc 可关闭',
+            name: 'closeOnEsc'
+          })
         ]
       },
       {
@@ -180,33 +204,39 @@ export class DrawerPlugin extends BasePlugin {
               }
             ]
           },
-          {
-            type: 'switch',
+
+          getSchemaTpl('switch', {
             name: 'overlay',
             label: '是否显示蒙层',
-            mode: 'inline',
-            className: 'block',
             pipeIn: defaultValue(true)
-          },
+          }),
 
-          {
-            type: 'switch',
+          getSchemaTpl('switch', {
             name: 'resizable',
             label: '可拉拽',
-            mode: 'inline',
-            className: 'block',
-            pipeIn: defaultValue(false),
-            description: '定义弹框是否可拉拽调整大小'
-          },
+            description: '定义弹框是否可拉拽调整大小',
+            pipeIn: defaultValue(false)
+          }),
+
           getSchemaTpl('className'),
           getSchemaTpl('className', {
             label: 'bodyClassName 类名',
             name: 'bodyClassName'
           })
         ]
+      },
+      {
+        title: '事件',
+        className: 'p-none',
+        body: [
+          getSchemaTpl('eventControl', {
+            name: 'onEvent',
+            ...getEventControlConfig(this.manager, context)
+          })
+        ]
       }
     ])
-  ];
+  };
 
   buildSubRenderers() {}
 }

package/src/plugin/DropDownButton.tsx

@@ -10,6 +10,7 @@ import {
 } from '../plugin';
 import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
 import {diff} from '../util';
+import {BUTTON_DEFAULT_ACTION, formItemControl} from '../component/control/BaseControl';
 
 export class DropDownButtonPlugin extends BasePlugin {
   // 关联渲染器名字
@@ -30,21 +31,13 @@ export class DropDownButtonPlugin extends BasePlugin {
       {
         type: 'button',
         label: '按钮1',
-        actionType: 'dialog',
-        dialog: {
-          title: '系统提示',
-          body: '对你点击了'
-        }
+        ...BUTTON_DEFAULT_ACTION
       },
 
       {
         type: 'button',
         label: '按钮2',
-        actionType: 'dialog',
-        dialog: {
-          title: '系统提示',
-          body: '对你点击了'
-        }
+        ...BUTTON_DEFAULT_ACTION
       }
     ]
   };
@@ -53,10 +46,11 @@ export class DropDownButtonPlugin extends BasePlugin {
   };
 
   panelTitle = '下拉按钮';
-  panelBodyCreator = (context: BaseEventContext) =>
-    getSchemaTpl('tabs', [
-      {
-        title: '常规',
+
+  panelBodyCreator = (context: BaseEventContext) => {
+    return formItemControl({
+      common: {
+        replace: true,
         body: [
           {
             children: (
@@ -77,10 +71,10 @@ export class DropDownButtonPlugin extends BasePlugin {
             name: 'label'
           },
           {
+            type: 'button-group-select',
             name: 'trigger',
             label: '触发方式',
-            type: 'button-group-select',
-            pipeIn: defaultValue('click'),
+            size: 'sm',
             options: [
               {
                 label: '点击',
@@ -90,88 +84,110 @@ export class DropDownButtonPlugin extends BasePlugin {
                 label: '鼠标经过',
                 value: 'hover'
               }
-            ]
+            ],
+            pipeIn: defaultValue('click')
           },
-          {
+
+          getSchemaTpl('switch', {
             name: 'closeOnOutside',
             label: '点击外部关闭',
-            type: 'switch',
-            mode: 'inline',
-            className: 'block',
             pipeIn: defaultValue(true)
-          },
-          {
+          }),
+
+          getSchemaTpl('switch', {
             name: 'closeOnClick',
-            label: '点击内容关闭',
-            type: 'switch',
-            mode: 'inline',
-            className: 'block'
-          },
-          getSchemaTpl('icon'),
-          getSchemaTpl('icon', {name: 'rightIcon', label: '右侧图标'})
+            label: '点击内容关闭'
+          })
         ]
       },
-      {
-        title: '外观',
+      status: {
+        replace: true,
         body: [
-          getSchemaTpl('size'),
-          {
+          // getSchemaTpl('ref'),
+          getSchemaTpl('disabled'),
+          getSchemaTpl('visible')
+        ]
+      },
+      validation: {
+        hidden: true
+      },
+      style: {
+        replace: true,
+        body: [
+          getSchemaTpl('size', {
+            pipeIn: defaultValue('md')
+          }),
+
+          getSchemaTpl('switch', {
+            name: 'block',
+            label: '块状显示'
+          }),
+
+          getSchemaTpl('buttonLevel', {
             label: '展示样式',
+            name: 'level'
+          }),
+
+          {
             type: 'button-group-select',
-            size: 'xs',
-            name: 'level',
-            btnActiveClassName: 'active',
-            clearable: false,
+            name: 'align',
+            label: '菜单对齐方式',
+            size: 'sm',
             options: [
               {
-                label: '默认',
-                value: 'default',
-                level: 'default'
+                label: '左对齐',
+                value: 'left'
               },
               {
-                label: '无',
-                value: 'link',
-                level: 'link'
-              },
-              {
-                label: '主色',
-                value: 'primary',
-                level: 'primary'
-              },
-              {
-                label: '提示',
-                value: 'info',
-                level: 'info'
-              },
-              {
-                label: '成功',
-                value: 'success',
-                level: 'success'
-              },
-              {
-                label: '警告',
-                value: 'warning',
-                level: 'warning'
-              },
-              {
-                label: '严重',
-                value: 'danger',
-                level: 'danger'
+                label: '右对齐',
+                value: 'right'
               }
-            ]
+            ],
+            pipeIn: defaultValue('left')
           },
-          getSchemaTpl('className')
+
+          getSchemaTpl('switch', {
+            label: '只显示 icon',
+            name: 'iconOnly'
+          }),
+
+          getSchemaTpl('switch', {
+            label: '默认是否打开',
+            name: 'defaultIsOpened'
+          }),
+
+          getSchemaTpl('switch', {
+            label: '隐藏下拉图标',
+            name: 'hideCaret'
+          }),
+
+          getSchemaTpl('icon'),
+          getSchemaTpl('icon', {
+            name: 'rightIcon',
+            label: '右侧图标'
+          }),
+
+          getSchemaTpl('className', {
+            name: 'className',
+            label: '外层 CSS 类名'
+          }),
+
+          getSchemaTpl('className', {
+            name: 'btnClassName',
+            label: '按钮 CSS 类名'
+          }),
+
+          getSchemaTpl('className', {
+            name: 'menuClassName',
+            label: '下拉菜单 CSS 类名'
+          })
         ]
       },
-      {
-        title: '显隐',
-        body: [
-          getSchemaTpl('ref'),
-          getSchemaTpl('disabled'),
-          getSchemaTpl('visible')
-        ]
+      event: {
+        hidden: false
       }
-    ]);
+    }, context);
+  }
 
   buildEditorToolbar(
     {id, info}: BaseEventContext,