amis-editor 4.2.0-beta.0 → 5.1.8

package/src/plugin/Tabs.tsx

@@ -6,6 +6,7 @@ import {
   BasicToolbarItem,
   PluginEvent,
   PreventClickEventContext,
+  RegionConfig,
   RendererInfo,
   VRendererConfig
 } from '../plugin';
@@ -15,6 +16,9 @@ import {VRenderer} from '../component/VRenderer';
 import findIndex from 'lodash/findIndex';
 import {RegionWrapper as Region} from '../component/RegionWrapper';
 import {Tab} from 'amis';
+import {tipedLabel} from '../component/control/BaseControl';
+import {getComboWrapper} from '../event-action/schema';
+import {getEventControlConfig} from '../util';
 
 export class TabsPlugin extends BasePlugin {
   // 关联渲染器名字
@@ -46,111 +50,247 @@ export class TabsPlugin extends BasePlugin {
     ...this.scaffold
   };
 
+  notRenderFormZone = true;
+
+  regions: Array<RegionConfig> = [
+    {
+      key: 'toolbar',
+      label: '工具栏',
+      preferTag: '展示'
+    }
+  ];
+
   panelTitle = '选项卡';
-  panelBody = [
-    getSchemaTpl('tabs', [
-      {
-        title: '常规',
-        body: [
-          {
-            name: 'tabs',
-            type: 'combo',
-            label: '选项卡管理',
-            multiple: true,
-            draggable: true,
-            minLength: 1,
-            items: [{type: 'input-text', name: 'title', required: true}],
-            scaffold: {
-              title: '选项卡',
-              body: {
-                type: 'tpl',
-                tpl: '内容',
-                inline: false
-              }
-            },
-            addButtonText: '新增选项卡',
-            draggableTip: ''
+
+  events = [
+    {
+      eventName: 'change',
+      eventLabel: '选项卡切换',
+      description: '选项卡切换',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            value: {
+              type: 'string',
+              title: '选项卡索引'
+            }
           }
-        ]
+        }
+      ]
+    }
+  ];
+
+  actions = [
+    {
+      actionType: 'changeActiveKey',
+      actionLabel: '修改激活tab值',
+      description: '修改当前激活tab项的key',
+      config: ['activeKey'],
+      desc: (info: any) => {
+        return (
+          <div>
+            <span className="variable-right">{info?.__rendererLabel}</span>
+            激活第
+            <span className="variable-left variable-right">
+              {info?.args?.activeKey}
+            </span>
+            项
+          </div>
+        );
       },
+      schema: getComboWrapper({
+        type: 'input-formula',
+        variables: '${variables}',
+        evalMode: false,
+        variableMode: 'tabs',
+        label: '激活项',
+        size: 'lg',
+        name: 'activeKey',
+        mode: 'horizontal'
+      })
+    }
+  ];
+
+  panelJustify = true;
+  panelBodyCreator = (context: BaseEventContext) => {
+    const isNewTabMode =
+      'data.tabsMode !=="vertical" && data.tabsMode !=="sidebar" && data.tabsMode !=="chrome"';
+
+    return getSchemaTpl('tabs', [
       {
-        title: '外观',
-        body: [
+        title: '属性',
+        body: getSchemaTpl('collapseGroup', [
           {
-            name: 'tabsMode',
-            label: '样式',
-            type: 'select',
-            className: 'block',
-            pipeIn: defaultValue(''),
-            options: [
-              {
-                label: '默认',
-                value: ''
-              },
-              {
-                label: '线型',
-                value: 'line'
-              },
-              {
-                label: '卡片',
-                value: 'card'
-              },
-              {
-                label: '仿 Chrome',
-                value: 'chrome'
-              },
-              {
-                label: '水平铺满',
-                value: 'tiled'
-              },
+            title: '基本',
+            body: [
+              getSchemaTpl('combo-container', {
+                type: 'combo',
+                label: '选项卡',
+                mode: 'normal',
+                name: 'tabs',
+                draggableTip: '',
+                draggable: true,
+                multiple: true,
+                minLength: 1,
+                scaffold: {
+                  title: '选项卡',
+                  body: {
+                    type: 'tpl',
+                    tpl: '内容',
+                    inline: false
+                  }
+                },
+                items: [{type: 'input-text', name: 'title', required: true}]
+              }),
+
+              getSchemaTpl('switch', {
+                name: 'showTip',
+                label: tipedLabel(
+                  '标题提示',
+                  '鼠标移动到选项卡标题时弹出提示，适用于标题超长时进行完整提示'
+                ),
+                visibleOn: isNewTabMode,
+                clearValueOnHidden: true
+              })
+            ]
+          },
+          getSchemaTpl('status'),
+          {
+            title: '高级',
+            body: [
               {
-                label: '选择器',
-                value: 'radio'
+                type: 'ae-formulaControl',
+                label: tipedLabel(
+                  '关联数据',
+                  '可用<code>\\${xxx}</code>取值，根据该数据来动态重复渲染所配置的选项卡'
+                ),
+                name: 'source'
               },
-              {
-                label: '垂直',
-                value: 'vertical'
-              }
+              getSchemaTpl('switch', {
+                name: 'mountOnEnter',
+                label: tipedLabel(
+                  '激活时渲染内容',
+                  '只有激活选项卡时才进行内容渲染，提升渲染性能'
+                )
+              }),
+              getSchemaTpl('switch', {
+                name: 'unmountOnExit',
+                label: tipedLabel(
+                  '隐藏后销毁内容',
+                  '激活其他选项卡时销毁当前内容，使其再次激活时内容可以重新渲染，适用于数据容器需要每次渲染实时获取数据的场景'
+                )
+              })
             ]
-          },
-          getSchemaTpl('className'),
-          getSchemaTpl('className', {
-            name: 'contentClassName',
-            label: '选项卡成员 CSS 类名'
-          }),
-
-          getSchemaTpl('subFormItemMode'),
-          getSchemaTpl('subFormHorizontalMode'),
-          getSchemaTpl('subFormHorizontal')
-        ]
+          }
+        ])
       },
       {
-        title: '显隐',
+        title: '外观',
         body: [
-          {
-            type: 'switch',
-            name: 'mountOnEnter',
-            label: '激活时才渲染',
-            mode: 'inline',
-            className: 'block',
-            description:
-              '设置后选项卡的内容只有点开才会渲染，如果有选项卡放的可拉取接口的组件，那么这个接口只有在点开的时候才会拉取。'
-          },
+          getSchemaTpl('collapseGroup', [
+            {
+              title: '基本',
+              body: [
+                {
+                  name: 'tabsMode',
+                  label: '样式',
+                  type: 'select',
+                  options: [
+                    {
+                      label: '默认',
+                      value: ''
+                    },
+                    {
+                      label: '线型',
+                      value: 'line'
+                    },
+                    {
+                      label: '简约',
+                      value: 'simple'
+                    },
+                    {
+                      label: '加强',
+                      value: 'strong'
+                    },
+                    {
+                      label: '卡片',
+                      value: 'card'
+                    },
+                    {
+                      label: '仿 Chrome',
+                      value: 'chrome'
+                    },
+                    {
+                      label: '水平铺满',
+                      value: 'tiled'
+                    },
+                    {
+                      label: '选择器',
+                      value: 'radio'
+                    },
+                    {
+                      label: '垂直',
+                      value: 'vertical'
+                    },
+                    {
+                      label: '侧边栏',
+                      value: 'sidebar'
+                    }
+                  ],
+                  pipeIn: defaultValue('')
+                },
 
-          {
-            type: 'switch',
-            name: 'unmountOnExit',
-            label: '隐藏即销毁',
-            mode: 'inline',
-            className: 'block',
-            description:
-              '设置后，如果选项卡内容关闭则销毁，配置「激活时才渲染」选项可以做到卡片内容每次点开都重新加载的效果。'
-          },
-          getSchemaTpl('visible')
+                getSchemaTpl('horizontal-align', {
+                  label: '标题区位置',
+                  name: 'sidePosition',
+                  pipeIn: defaultValue('left'),
+                  visibleOn: 'data.tabsMode === "sidebar"',
+                  clearValueOnHidden: true
+                })
+              ]
+            },
+            getSchemaTpl('style:classNames', {
+              isFormItem: false,
+              schema: [
+                getSchemaTpl('className', {
+                  name: 'linksClassName',
+                  label: '标题区'
+                }),
+
+                getSchemaTpl('className', {
+                  name: 'toolbarClassName',
+                  label: '工具栏'
+                }),
+
+                getSchemaTpl('className', {
+                  name: 'contentClassName',
+                  label: '内容区'
+                }),
+
+                getSchemaTpl('className', {
+                  name: 'showTipClassName',
+                  label: '提示',
+                  visibleOn: 'data.showTip',
+                  clearValueOnHidden: true
+                })
+              ]
+            })
+          ])
+        ]
+      },
+      {
+        title: '事件',
+        className: 'p-none',
+        body: [
+          getSchemaTpl('eventControl', {
+            name: 'onEvent',
+            ...getEventControlConfig(this.manager, context)
+          })
         ]
       }
-    ])
-  ];
+    ]);
+  };
 
   patchContainers = ['tabs.body'];
 
@@ -162,70 +302,89 @@ export class TabsPlugin extends BasePlugin {
       }
     },
     panelTitle: '卡片',
-    panelBody: [
-      getSchemaTpl('tabs', [
+    panelJustify: true,
+    panelBodyCreator: (context: BaseEventContext) => {
+      return getSchemaTpl('tabs', [
         {
-          title: '常规',
-          body: [
+          title: '属性',
+          body: getSchemaTpl('collapseGroup', [
             {
-              name: 'title',
-              label: '标题',
-              type: 'input-text',
-              required: true
+              title: '基本',
+              body: [
+                {
+                  name: 'title',
+                  label: '标题',
+                  type: 'input-text',
+                  required: true
+                },
+
+                {
+                  type: 'ae-switch-more',
+                  formType: 'extend',
+                  mode: 'normal',
+                  label: '标题图标',
+                  form: {
+                    body: [
+                      getSchemaTpl('icon'),
+
+                      getSchemaTpl('horizontal-align', {
+                        label: '位置',
+                        name: 'iconPosition',
+                        pipeIn: defaultValue('left'),
+                        visibleOn: 'data.icon',
+                        clearValueOnHidden: true
+                      })
+                    ]
+                  }
+                },
+
+                {
+                  label: tipedLabel(
+                    'Hash',
+                    '设置后，会同步更新地址栏的 Hash。'
+                  ),
+                  name: 'hash',
+                  type: 'input-text'
+                }
+              ]
             },
-            getSchemaTpl('icon'),
+            getSchemaTpl('status', {disabled: true}),
             {
-              label: 'Hash',
-              name: 'hash',
-              type: 'input-text',
-              description: '设置后，会同步更新地址栏的 Hash。'
+              title: '高级',
+              body: [
+                getSchemaTpl('switch', {
+                  name: 'mountOnEnter',
+                  label: tipedLabel(
+                    '激活时才渲染',
+                    '当选项卡选中后才渲染其内容区，可提高渲染性能。'
+                  ),
+                  visibleOn: '!this.reload',
+                  clearValueOnHidden: true
+                }),
+
+                getSchemaTpl('switch', {
+                  name: 'unmountOnExit',
+                  label: tipedLabel(
+                    '隐藏即销毁',
+                    '关闭选项卡则销毁其内容去，配置「激活时才渲染」选项可实现每次选中均重新加载的效果。'
+                  ),
+                  visibleOn: '!this.reload',
+                  clearValueOnHidden: true
+                })
+              ]
             }
-          ]
+          ])
         },
         {
           title: '外观',
-          body: [getSchemaTpl('className')]
-        },
-        {
-          title: '显隐',
-          body: [getSchemaTpl('visible'), getSchemaTpl('disabled')]
-        },
-        {
-          title: '其他',
-          body: [
-            {
-              type: 'switch',
-              name: 'reload',
-              label: '内容刷新',
-              mode: 'inline',
-              className: 'block',
-              description:
-                '配置后，每次点开内容都会重新刷新，如果配置了，下面两个选项就不用配置了。'
-            },
-            {
-              type: 'switch',
-              name: 'mountOnEnter',
-              visibleOn: '!this.reload',
-              label: '激活时才渲染',
-              mode: 'inline',
-              className: 'block',
-              description:
-                '设置后选项卡的内容只有点开才会渲染，如果有选项卡放的可拉取接口的组件，那么这个接口只有在点开的时候才会拉取。'
-            },
-            {
-              visibleOn: '!this.reload',
-              type: 'switch',
-              name: 'unmountOnExit',
-              label: '隐藏即销毁',
-              mode: 'inline',
-              className: 'block',
-              description:
-                '设置后，如果选项卡内容关闭则销毁，配置「激活时才渲染」选项可以做到卡片内容每次点开都重新加载的效果。'
-            }
-          ]
+          body: getSchemaTpl('collapseGroup', [
+            getSchemaTpl('style:classNames', {
+              isFormItem: false
+            })
+          ])
         }
-      ])
-    ]
+      ]);
+    }
   };
 
   wrapperProps = {
@@ -258,6 +417,7 @@ export class TabsPlugin extends BasePlugin {
                 children: (
                   <VRenderer
                     key={id}
+                    type={info.type}
                     plugin={info.plugin}
                     renderer={info.renderer}
                     $schema="/schemas/TabSchema.json"