amis-editor 4.2.0-beta.3 → 5.1.8

package/src/plugin/Form/Switch.tsx

@@ -1,6 +1,10 @@
 import {getSchemaTpl, valuePipeOut} from '../../component/schemaTpl';
 import {registerEditorPlugin} from '../../manager';
-import {BasePlugin} from '../../plugin';
+import {BasePlugin, BaseEventContext} from '../../plugin';
+import {tipedLabel} from '../../component/control/BaseControl';
+import {ValidatorTag} from '../../component/validator';
+import {getEventControlConfig} from '../../util';
+import {RendererAction, RendererEvent} from '../../event-action';
 
 export class SwitchControlPlugin extends BasePlugin {
   // 关联渲染器名字
@@ -36,72 +40,180 @@ export class SwitchControlPlugin extends BasePlugin {
     ]
   };
 
+  notRenderFormZone = true;
+
   panelTitle = '开关';
-  panelBody = [
-    getSchemaTpl('switchDefaultValue', {
-      pipeOut: (value: any, origin: any, data: any) =>
-        value ? data.trueValue : undefined
-    }),
-    {
-      type: 'switch',
-      name: 'value',
-      label: '默认勾选',
-      mode: 'inline',
-      className: 'w-full',
-      visibleOn: 'typeof this.value !== "undefined"',
-      pipeOut: (value: any, origin: any, data: any) =>
-        value ? data.trueValue : data.falseValue
-    },
-    {
-      name: 'option',
-      type: 'input-text',
-      label: '选项说明'
-    },
-    {
-      label: '选项位置',
-      name: 'optionAtLeft',
-      type: 'button-group-select',
-      size: 'sm',
-      value: false,
-      options: [
-        {
-          label: '左',
-          value: true
-        },
 
+  events: RendererEvent[] = [
+    {
+      eventName: 'change',
+      eventLabel: '值变化',
+      description: '开关值变化时触发',
+      dataSchema: [
         {
-          label: '右',
-          value: false
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '开关值'
+            }
+          }
         }
       ]
-    },
-    {
-      type: 'input-text',
-      label: '勾选后的值',
-      name: 'trueValue',
-      value: true,
-      pipeOut: valuePipeOut
-    },
-    {
-      type: 'input-text',
-      label: '未勾选的值',
-      name: 'falseValue',
-      value: false,
-      pipeOut: valuePipeOut
-    },
-
-    {
-      name: 'onText',
-      type: 'input-text',
-      label: '开启时的文本'
-    },
+    }
+  ];
 
+  // 动作定义
+  actions: RendererAction[] = [
     {
-      name: 'offText',
-      type: 'input-text',
-      label: '关闭时的文本'
+      actionType: 'setValue',
+      actionLabel: '赋值',
+      description: '触发组件数据更新'
     }
   ];
+
+  panelJustify = true;
+  panelBodyCreator = (context: BaseEventContext) =>
+    getSchemaTpl('tabs', [
+      {
+        title: '属性',
+        body: getSchemaTpl('collapseGroup', [
+          {
+            title: '基本',
+            body: [
+              getSchemaTpl('formItemName', {
+                required: true
+              }),
+              getSchemaTpl('label'),
+
+              {
+                name: 'option',
+                type: 'input-text',
+                label: '说明'
+              },
+
+              {
+                type: 'ae-Switch-More',
+                bulk: true,
+                mode: 'normal',
+                label: '填充文本',
+                formType: 'extend',
+                form: {
+                  body: [
+                    {
+                      name: 'onText',
+                      type: 'input-text',
+                      label: '开启时'
+                    },
+
+                    {
+                      name: 'offText',
+                      type: 'input-text',
+                      label: '关闭时'
+                    }
+                  ]
+                }
+              },
+
+              {
+                type: 'ae-Switch-More',
+                bulk: true,
+                mode: 'normal',
+                label: tipedLabel(
+                  '值格式',
+                  '默认勾选后的值 true，未勾选的值 false'
+                ),
+                formType: 'extend',
+                form: {
+                  body: [
+                    {
+                      type: 'input-text',
+                      label: '勾选后的值',
+                      name: 'trueValue',
+                      value: true,
+                      pipeOut: valuePipeOut,
+                      onChange: (
+                        value: string,
+                        oldValue: string,
+                        model: any,
+                        form: any
+                      ) => {
+                        if (oldValue === form.getValueByName('value')) {
+                          form.setValueByName('value', value);
+                        }
+                      }
+                    },
+                    {
+                      type: 'input-text',
+                      label: '未勾选的值',
+                      name: 'falseValue',
+                      value: false,
+                      pipeOut: valuePipeOut,
+                      onChange: (
+                        value: string,
+                        oldValue: string,
+                        model: any,
+                        form: any
+                      ) => {
+                        if (oldValue === form.getValueByName('value')) {
+                          form.setValueByName('value', value);
+                        }
+                      }
+                    }
+                  ]
+                }
+              },
+
+              getSchemaTpl('switch', {
+                name: 'value',
+                label: '默认开启',
+                pipeIn: (value: any, data: any) => {
+                  const {trueValue = true} = data.data || {};
+                  return value === trueValue ? true : false;
+                },
+                pipeOut: (value: any, origin: any, data: any) => {
+                  return value
+                    ? data.trueValue || true
+                    : data.falseValue || false;
+                }
+              }),
+              getSchemaTpl('labelRemark'),
+              getSchemaTpl('remark'),
+              getSchemaTpl('description')
+            ]
+          },
+          getSchemaTpl('status', {isFormItem: true}),
+          getSchemaTpl('validation', {tag: ValidatorTag.Check})
+        ])
+      },
+      {
+        title: '外观',
+        body: getSchemaTpl('collapseGroup', [
+          getSchemaTpl('style:formItem', {renderer: context.info.renderer}),
+          {
+            title: '说明',
+            body: [
+              getSchemaTpl('horizontal-align', {
+                name: 'optionAtLeft',
+                pipeIn: (v: boolean) => (v ? 'left' : 'right'),
+                pipeOut: (v: string) => (v === 'left' ? true : undefined)
+              })
+            ]
+          },
+          getSchemaTpl('style:classNames')
+        ])
+      },
+      {
+        title: '事件',
+        className: 'p-none',
+        body: [
+          getSchemaTpl('eventControl', {
+            name: 'onEvent',
+            ...getEventControlConfig(this.manager, context)
+          })
+        ]
+      }
+    ]);
 }
 
 registerEditorPlugin(SwitchControlPlugin);

package/src/plugin/Form/TabsTransfer.tsx

@@ -1,6 +1,9 @@
+import React from 'react';
 import {getSchemaTpl} from '../../component/schemaTpl';
 import {registerEditorPlugin} from '../../manager';
-import {BasePlugin} from '../../plugin';
+import {BasePlugin, BaseEventContext} from '../../plugin';
+import {getEventControlConfig} from '../../util';
+import {RendererAction, RendererEvent} from '../../event-action';
 
 export class TabsTransferPlugin extends BasePlugin {
   // 关联渲染器名字
@@ -126,6 +129,90 @@ export class TabsTransferPlugin extends BasePlugin {
   };
 
   panelTitle = '组合穿梭器';
+
+  events: RendererEvent[] = [
+    {
+      eventName: 'change',
+      eventLabel: '值变化',
+      description: '选中值变化时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '选中值'
+            }
+          }
+        }
+      ]
+    },
+    {
+      eventName: 'selectAll',
+      eventLabel: '全选',
+      description: '选中所有选项',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '选中值'
+            }
+          }
+        }
+      ]
+    },
+    {
+      eventName: 'tab-change',
+      eventLabel: '选项卡切换',
+      description: '选项卡切换时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.key': {
+              type: 'string',
+              title: '当前激活的选项卡索引'
+            }
+          }
+        }
+      ]
+    }
+  ];
+
+  // 动作定义
+  actions: RendererAction[] = [
+    {
+      actionType: 'clear',
+      actionLabel: '清空',
+      description: '清空选中内容'
+    },
+    {
+      actionType: 'reset',
+      actionLabel: '重置',
+      description: '重置选择的内容'
+    },
+    {
+      actionType: 'changeTabKey',
+      actionLabel: '修改选中tab',
+      description: '修改当前选中tab，来选择其他选项',
+      desc: (info: any) => {
+        return (
+          <div>
+            <span className="variable-right">{info?.__rendererLabel}</span>
+            修改选中tab
+          </div>
+        );
+      }
+    },
+    {
+      actionType: 'setValue',
+      actionLabel: '赋值',
+      description: '触发组件数据更新'
+    }
+  ];
+
   panelDefinitions = {
     options: {
       label: '选项 Options',
@@ -168,92 +255,101 @@ export class TabsTransferPlugin extends BasePlugin {
     }
   };
 
-  panelBody = [
-    getSchemaTpl('switchDefaultValue'),
+  // notRenderFormZone = true;
 
-    {
-      type: 'select',
-      name: 'value',
-      label: '默认值',
-      source: '${options}',
-      multiple: true,
-      visibleOn: 'typeof this.value !== "undefined"'
-    },
+  panelBodyCreator = (context: BaseEventContext) => {
+    const renderer: any = context.info.renderer;
 
-    {
-      label: '可检索',
-      name: 'searchable',
-      type: 'switch',
-      mode: 'inline',
-      className: 'w-full'
-    },
+    return getSchemaTpl('tabs', [
+      {
+        title: '属性',
+        body: getSchemaTpl('collapseGroup', [
+          getSchemaTpl('switchDefaultValue'),
 
-    getSchemaTpl('api', {
-      label: '检索接口',
-      name: 'searchApi'
-    }),
+          {
+            type: 'select',
+            name: 'value',
+            label: '默认值',
+            source: '${options}',
+            multiple: true,
+            visibleOn: 'typeof this.value !== "undefined"'
+          },
 
-    {
-      label: '查询时勾选展示模式',
-      name: 'searchResultMode',
-      type: 'select',
-      mode: 'inline',
-      className: 'w-full',
-      options: [
-        {
-          label: '列表形式',
-          value: 'list'
-        },
-        {
-          label: '表格形式',
-          value: 'table'
-        },
-        {
-          label: '树形选择形式',
-          value: 'tree'
-        },
-        {
-          label: '级联选择形式',
-          value: 'chained'
-        }
-      ]
-    },
+          getSchemaTpl('searchable'),
 
-    {
-      label: '可排序',
-      name: 'sortable',
-      type: 'switch',
-      mode: 'inline',
-      className: 'w-full'
-    },
+          getSchemaTpl('api', {
+            label: '检索接口',
+            name: 'searchApi'
+          }),
 
-    {
-      label: '左侧的标题文字',
-      name: 'selectTitle',
-      type: 'input-text'
-    },
+          {
+            label: '查询时勾选展示模式',
+            name: 'searchResultMode',
+            type: 'select',
+            mode: 'inline',
+            className: 'w-full',
+            options: [
+              {
+                label: '列表形式',
+                value: 'list'
+              },
+              {
+                label: '表格形式',
+                value: 'table'
+              },
+              {
+                label: '树形选择形式',
+                value: 'tree'
+              },
+              {
+                label: '级联选择形式',
+                value: 'chained'
+              }
+            ]
+          },
 
-    {
-      label: '右侧结果的标题文字',
-      name: 'resultTitle',
-      type: 'input-text'
-    },
+          getSchemaTpl('sortable'),
 
-    getSchemaTpl('fieldSet', {
-      title: '选项',
-      body: [
-        {
-          $ref: 'options',
-          name: 'options'
-        },
-        getSchemaTpl('source'),
-        getSchemaTpl('joinValues'),
-        getSchemaTpl('delimiter'),
-        getSchemaTpl('extractValue'),
-        getSchemaTpl('autoFill')
-      ]
-    })
-  ];
+          {
+            label: '左侧的标题文字',
+            name: 'selectTitle',
+            type: 'input-text'
+          },
+
+          {
+            label: '右侧结果的标题文字',
+            name: 'resultTitle',
+            type: 'input-text'
+          },
+
+          getSchemaTpl('fieldSet', {
+            title: '选项',
+            body: [
+              {
+                $ref: 'options',
+                name: 'options'
+              },
+              getSchemaTpl('source'),
+              getSchemaTpl('joinValues'),
+              getSchemaTpl('delimiter'),
+              getSchemaTpl('extractValue'),
+              getSchemaTpl('autoFill')
+            ]
+          })
+        ])
+      },
+      {
+        title: '事件',
+        className: 'p-none',
+        body: [
+          getSchemaTpl('eventControl', {
+            name: 'onEvent',
+            ...getEventControlConfig(this.manager, context)
+          })
+        ]
+      }
+    ]);
+  };
 }
 
 registerEditorPlugin(TabsTransferPlugin);