feat: collapse-group组件支持change事件 (#7213)

* feat: collapse-group组件支持对外抛出折叠状态改变事件 * feat: collapse-group组件支持对外抛出折叠状态改变事件 * feat: collapse-group组件支持对外抛出折叠状态改变事件 * feat: collapse-group组件支持对外抛出折叠状态改变事件 * feat: collapse-group组件支持对外抛出折叠状态改变事件 --------- Co-authored-by: zhangzhulei <zhangzhulei@baidu.com>
2024-11-29 18:48:45 +08:00 · 2023-06-30 13:55:25 +08:00 · 2023-06-30 13:55:25 +08:00 · 340bb31d73
commit 340bb31d73
parent 55622c1f25
7 changed files with 296 additions and 36 deletions
--- a/docs/zh-CN/components/collapse.md
+++ b/docs/zh-CN/components/collapse.md
@ -213,23 +213,144 @@ order: 36

 ## CollapseGroup 属性表

-| 属性名 | 类型 | 默认值 | 说明 |
-| - | - | - | - |
-| type | `string` | `"collapse-group"` | 指定为 collapse-group 渲染器 |
-| activeKey | `Array<string \| number \| never> \| string \| number` | - | 初始化激活面板的key |
-| accordion | `boolean` | `false` | 手风琴模式 |
-| expandIcon | `SchemaNode` | - | 自定义切换图标 |
-| expandIconPosition | `string` | `"left"` | 设置图标位置，可选值`left \| right` |
+| 属性名             | 类型                                                   | 默认值             | 说明                                |
+| ------------------ | ------------------------------------------------------ | ------------------ | ----------------------------------- |
+| type               | `string`                                               | `"collapse-group"` | 指定为 collapse-group 渲染器        |
+| activeKey          | `Array<string \| number \| never> \| string \| number` | -                  | 初始化激活面板的 key                |
+| accordion          | `boolean`                                              | `false`            | 手风琴模式                          |
+| expandIcon         | `SchemaNode`                                           | -                  | 自定义切换图标                      |
+| expandIconPosition | `string`                                               | `"left"`           | 设置图标位置，可选值`left \| right` |
+
+## CollapseGroup 事件表
+
+当前组件会对外派发以下事件，可以通过 onEvent 来监听这些事件，并通过 actions 来配置执行的动作，在 actions 中可以通过${事件参数名}或${event.data.[事件参数名]}来获取事件产生的数据，详细查看事件动作。
+
+| 事件名称 | 事件参数                                                                                                                                        | 说明                       |
+| -------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- |
+| change   | `activeKeys: Array<string \| number>` 当前展开的索引列表 <br /> `collapseId: string \| number` 折叠器索引 <br/> `collapsed: boolean` 折叠器状态 | 折叠面板折叠状态改变时触发 |
+
+### change
+
+折叠面板折叠状态改变时触发。
+
+```schema: scope="body"
+{
+  "type": "collapse-group",
+  "activeKey": [
+    "1"
+  ],
+  "body": [
+    {
+      "type": "collapse",
+      "key": "1",
+      "active": true,
+      "header": "标题1",
+      "body": [
+        {
+          "type": "tpl",
+          "tpl": "这里是内容1",
+          "wrapperComponent": "",
+          "inline": false,
+          "id": "u:757ad799da08"
+        }
+      ],
+      "id": "u:b1b68dfbb08d"
+    },
+    {
+      "type": "collapse",
+      "key": "2",
+      "header": "标题2",
+      "body": [
+        {
+          "type": "tpl",
+          "tpl": "这里是内容1",
+          "wrapperComponent": "",
+          "inline": false,
+          "id": "u:92caa03f227e"
+        }
+      ],
+      "id": "u:621a22c8b18c"
+    }
+  ],
+  "id": "u:23e4c5ec9c89",
+  "onEvent": {
+    "change": {
+      "weight": 0,
+      "actions": [
+        {
+          "actionType": "toast",
+          "args": {
+            "msgType": "info",
+            "position": "top-right",
+            "closeButton": true,
+            "showIcon": true,
+            "title": "折叠状态改变",
+            "msg": "activeKeys: ${event.data.activeKeys | json}, collapseId: ${event.data.collapseId}, collapsed: ${event.data.collapsed}",
+            "className": "theme-toast-action-scope"
+          }
+        }
+      ]
+    }
+  }
+}
+```

 ## Collapse 属性表

-| 属性名 | 类型 | 默认值 | 说明 |
-| - | - | - | - |
-| type | `string` | `"collapse"` | 指定为 collapse 渲染器 |
-| disabled | `boolean` | `false` | 禁用 |
-| collapsed | `boolean` | `true` | 初始状态是否折叠 |
-| key | `string \| number` | - | 标识 |
-| header | `string \| SchemaNode` | - | 标题 |
-| body | `string \| SchemaNode` | - | 内容 |
-| showArrow | `boolean` | `true` | 是否展示图标 |
+| 属性名    | 类型                   | 默认值       | 说明                   |
+| --------- | ---------------------- | ------------ | ---------------------- |
+| type      | `string`               | `"collapse"` | 指定为 collapse 渲染器 |
+| disabled  | `boolean`              | `false`      | 禁用                   |
+| collapsed | `boolean`              | `true`       | 初始状态是否折叠       |
+| key       | `string \| number`     | -            | 标识                   |
+| header    | `string \| SchemaNode` | -            | 标题                   |
+| body      | `string \| SchemaNode` | -            | 内容                   |
+| showArrow | `boolean`              | `true`       | 是否展示图标           |

+## Collapse 事件表
+
+当前组件会对外派发以下事件，可以通过 onEvent 来监听这些事件，并通过 actions 来配置执行的动作，在 actions 中可以通过${事件参数名}或${event.data.[事件参数名]}来获取事件产生的数据，详细查看事件动作。
+
+| 事件名称 | 事件参数                        | 说明                     |
+| -------- | ------------------------------- | ------------------------ |
+| change   | `collapsed: boolean` 折叠器状态 | 折叠器折叠状态改变时触发 |
+
+### change
+
+折叠面板折叠状态改变时触发。
+
+```schema: scope="body"
+{
+  "type": "collapse",
+  "header": "标题",
+  "body": [
+    {
+      "type": "tpl",
+      "tpl": "内容",
+      "wrapperComponent": "",
+      "inline": false,
+      "id": "u:6588c12ee3b0"
+    }
+  ],
+  "id": "u:62aa2f0c7fd9",
+  "onEvent": {
+    "change": {
+      "weight": 0,
+      "actions": [
+        {
+          "actionType": "toast",
+          "args": {
+            "msgType": "info",
+            "position": "top-right",
+            "closeButton": true,
+            "showIcon": true,
+            "title": "collapsedChange",
+            "msg": "collapsed: ${event.data.collapsed}",
+            "className": "theme-toast-action-scope"
+          }
+        }
+      ]
+    }
+  }
+}
+```
--- a/packages/amis-editor/src/plugin/Collapse.tsx
+++ b/packages/amis-editor/src/plugin/Collapse.tsx
@ -1,6 +1,11 @@
-import {getI18nEnabled, registerEditorPlugin} from 'amis-editor-core';
+import {
+  RendererPluginEvent,
+  getI18nEnabled,
+  registerEditorPlugin
+} from 'amis-editor-core';
 import {BasePlugin, RegionConfig, BaseEventContext} from 'amis-editor-core';
 import {defaultValue, getSchemaTpl} from 'amis-editor-core';
+import {getEventControlConfig} from '../renderer/event-control/helper';

 export class CollapsePlugin extends BasePlugin {
  static id = 'CollapsePlugin';
@ -35,6 +40,31 @@ export class CollapsePlugin extends BasePlugin {

  panelJustify = true;

+  events: RendererPluginEvent[] = [
+    {
+      eventName: 'change',
+      eventLabel: '折叠状态改变',
+      description: '折叠器折叠状态改变时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            data: {
+              type: 'object',
+              title: '数据',
+              properties: {
+                collapsed: {
+                  type: 'boolean',
+                  title: '折叠器状态'
+                }
+              }
+            }
+          }
+        }
+      ]
+    }
+  ];
+
  panelBodyCreator = (context: BaseEventContext) => {
    const i18nEnabled = getI18nEnabled();
    return getSchemaTpl('tabs', [
@ -121,6 +151,16 @@ export class CollapsePlugin extends BasePlugin {
            ]
          })
        ])
+      },
+      {
+        title: '事件',
+        className: 'p-none',
+        body: [
+          getSchemaTpl('eventControl', {
+            name: 'onEvent',
+            ...getEventControlConfig(this.manager, context)
+          })
+        ]
      }
    ]);
  };
--- a/packages/amis-editor/src/plugin/CollapseGroup.tsx
+++ b/packages/amis-editor/src/plugin/CollapseGroup.tsx
@ -1,9 +1,14 @@
-import {getI18nEnabled, registerEditorPlugin} from 'amis-editor-core';
+import {
+  RendererPluginEvent,
+  getI18nEnabled,
+  registerEditorPlugin
+} from 'amis-editor-core';
 import {BasePlugin, RegionConfig, BaseEventContext} from 'amis-editor-core';
 import {defaultValue, getSchemaTpl} from 'amis-editor-core';

 import {tipedLabel} from 'amis-editor-core';
 import {isObject} from 'amis-editor-core';
+import {getEventControlConfig} from '../renderer/event-control/helper';

 export class CollapseGroupPlugin extends BasePlugin {
  static id = 'CollapseGroupPlugin';
@ -56,6 +61,39 @@ export class CollapseGroupPlugin extends BasePlugin {
    ...this.scaffold
  };

+  events: RendererPluginEvent[] = [
+    {
+      eventName: 'change',
+      eventLabel: '折叠状态改变',
+      description: '折叠面板折叠状态改变时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            data: {
+              title: '数据',
+              type: 'object',
+              properties: {
+                activeKeys: {
+                  type: 'array',
+                  title: '当前展开的索引列表'
+                },
+                collapseId: {
+                  type: 'string | number',
+                  title: '折叠器索引'
+                },
+                collapsed: {
+                  type: 'boolean',
+                  title: '折叠器状态'
+                }
+              }
+            }
+          }
+        }
+      ]
+    }
+  ];
+
  activeKeyData: any = [];
  panelTitle = '折叠面板';

@ -235,6 +273,16 @@ export class CollapseGroupPlugin extends BasePlugin {
              isFormItem: false
            })
          ])
+        },
+        {
+          title: '事件',
+          className: 'p-none',
+          body: [
+            getSchemaTpl('eventControl', {
+              name: 'onEvent',
+              ...getEventControlConfig(this.manager, context)
+            })
+          ]
        }
      ])
    ];
--- a/packages/amis-ui/src/components/Collapse.tsx
+++ b/packages/amis-ui/src/components/Collapse.tsx
@ -110,9 +110,10 @@ export class Collapse extends React.Component<CollapseProps, CollapseState> {
    if (props.disabled || props.collapsable === false) {
      return;
    }
-    props.onCollapse && props.onCollapse(props, !this.state.collapsed);
+    const newCollapsed = !this.state.collapsed;
+    props.onCollapse?.(props, newCollapsed);
    this.setState({
-      collapsed: !this.state.collapsed
+      collapsed: newCollapsed
    });
  }

--- a/packages/amis-ui/src/components/CollapseGroup.tsx
+++ b/packages/amis-ui/src/components/CollapseGroup.tsx
@ -28,10 +28,15 @@ export interface CollapseGroupProps {
  classPrefix: string;
  children?: React.ReactNode | Array<React.ReactNode>;
  useMobileUI?: boolean;
+  onCollapseChange?: (
+    activeKeys: Array<string | number>,
+    collapseId: string | number,
+    collapsed: boolean
+  ) => void;
 }

 export interface CollapseGroupState {
-  activeKey: Array<string | number | never>;
+  activeKeys: Array<string | number | never>;
 }

 class CollapseGroup extends React.Component<
@ -73,38 +78,43 @@ class CollapseGroup extends React.Component<

    if (isInit) {
      this.state = {
-        activeKey: curActiveKey.map((key: number | string) => String(key))
+        activeKeys: curActiveKey.map((key: number | string) => String(key))
      };
    } else {
      this.setState({
-        activeKey: curActiveKey.map((key: number | string) => String(key))
+        activeKeys: curActiveKey.map((key: number | string) => String(key))
      });
    }
  }

  collapseChange(collapseId: string, collapsed: boolean) {
-    let activeKey = this.state.activeKey.concat();
+    let activeKeys = this.state.activeKeys.concat();
    if (!collapsed) {
      // 开启状态
      if (this.props.accordion) {
-        activeKey = [];
+        activeKeys = [];
      } else {
-        for (let i = 0; i < activeKey.length; i++) {
-          if (activeKey[i] === collapseId) {
-            activeKey.splice(i, 1); // 剔除开启状态
+        for (let i = 0; i < activeKeys.length; i++) {
+          if (activeKeys[i] === collapseId) {
+            activeKeys.splice(i, 1); // 剔除开启状态
            break;
          }
        }
      }
    } else {
      if (this.props.accordion) {
-        activeKey = [collapseId as string];
+        activeKeys = [collapseId as string];
      } else {
-        activeKey.push(collapseId as string);
+        activeKeys.push(collapseId as string);
      }
    }
+    this.props.onCollapseChange?.(
+      activeKeys,
+      collapseId,
+      activeKeys.indexOf(collapseId) === -1
+    );
    this.setState({
-      activeKey
+      activeKeys
    });
  }

@ -118,7 +128,7 @@ class CollapseGroup extends React.Component<

      const collapseId = props.propKey || String(index);
      // 判断是否折叠
-      const collapsed = this.state.activeKey.indexOf(collapseId) === -1;
+      const collapsed = this.state.activeKeys.indexOf(collapseId) === -1;

      return React.cloneElement(child as any, {
        ...props,
--- a/packages/amis/src/renderers/Collapse.tsx
+++ b/packages/amis/src/renderers/Collapse.tsx
@ -3,7 +3,9 @@ import {
  Renderer,
  RendererProps,
  generateIcon,
-  IconCheckedSchema
+  IconCheckedSchema,
+  autobind,
+  resolveEventData
 } from 'amis-core';
 import {Collapse as BasicCollapse} from 'amis-ui';
 import {BaseSchema, SchemaCollection, SchemaTpl, SchemaObject} from '../Schema';
@ -121,6 +123,21 @@ export default class Collapse extends React.Component<CollapseProps, {}> {
    'size'
  ];

+  @autobind
+  async handleCollapseChange(props: any, collapsed: boolean) {
+    const {dispatchEvent, onCollapse} = this.props;
+    const rendererEvent = await dispatchEvent(
+      'change',
+      resolveEventData(this.props, {
+        collapsed
+      })
+    );
+    if (rendererEvent?.prevented) {
+      return;
+    }
+    onCollapse?.(props, collapsed);
+  }
+
  render() {
    const {
      id,
@ -151,7 +168,6 @@ export default class Collapse extends React.Component<CollapseProps, {}> {
      disabled,
      collapsed,
      propsUpdate,
-      onCollapse,
      useMobileUI,
      divideLine
    } = this.props;
@ -203,7 +219,7 @@ export default class Collapse extends React.Component<CollapseProps, {}> {
            : null
        }
        useMobileUI={useMobileUI}
-        onCollapse={onCollapse}
+        onCollapse={this.handleCollapseChange}
        divideLine={divideLine}
      ></BasicCollapse>
    );
--- a/packages/amis/src/renderers/CollapseGroup.tsx
+++ b/packages/amis/src/renderers/CollapseGroup.tsx
@ -1,5 +1,5 @@
 import React from 'react';
-import {Renderer, RendererProps} from 'amis-core';
+import {Renderer, RendererProps, autobind, resolveEventData} from 'amis-core';
 import {BaseSchema, SchemaCollection, SchemaObject} from '../Schema';
 import {CollapseGroup} from 'amis-ui';

@ -44,6 +44,7 @@ export interface CollapseGroupProps
  children?: JSX.Element | ((props?: any) => JSX.Element);
 }

+export type CollapseGroupRenderEvent = 'collapseChange';
 export class CollapseGroupRender extends React.Component<
  CollapseGroupProps,
  {}
@ -51,6 +52,28 @@ export class CollapseGroupRender extends React.Component<
  constructor(props: CollapseGroupProps) {
    super(props);
  }
+
+  @autobind
+  async handleCollapseChange(
+    activeKeys: Array<string | number>,
+    collapseId: string | number,
+    collapsed: boolean
+  ) {
+    const {dispatchEvent, onCollapse} = this.props;
+    const renderEvent = await dispatchEvent(
+      'change',
+      resolveEventData(this.props, {
+        activeKeys,
+        collapseId,
+        collapsed
+      })
+    );
+    if (renderEvent?.prevented) {
+      return;
+    }
+    onCollapse?.(activeKeys, collapseId, collapsed);
+  }
+
  render() {
    const {
      defaultActiveKey,
@ -72,6 +95,7 @@ export class CollapseGroupRender extends React.Component<
        className={className}
        style={style}
        useMobileUI={useMobileUI}
+        onCollapseChange={this.handleCollapseChange}
      >
        {render('body', body || '')}
      </CollapseGroup>