# Collapse

折叠面板组件，用于将内容分组折叠展示。支持手风琴模式和多面板同时展开。

## 适用场景

- 内容分组展示，节省页面空间
- FAQ 问答列表
- 配置项分组折叠
- 手风琴模式（同时只展开一个面板）

## Props - Collapse

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| className | `string` | `""` | 否 | 自定义 class |
| size | `"md" \| "sm"` | `-` | 否 | 尺寸，默认使用 config context `baseSize` |
| defaultExpandedIds | `CollapsePanelId[]` | `[]` | 否 | 展开的面板 id 列表默认值 |
| expandedIds | `CollapsePanelId[]` | `-` | 否 | 展开的面板 id 列表控制值 |
| onExpand | `(id, expandedIds, currentExpandedIds) => void` | `-` | 否 | 面板展开时的回调 |
| onCollapse | `(id, expandedIds, currentExpandedIds) => void` | `-` | 否 | 面板折叠时的回调 |
| onChange | `(expandedIds: CollapsePanelId[]) => void` | `-` | 否 | expandedIds 变化时的回调，expand/collapse 均会调用 |
| expandIconPosition | `"left" \| "right"` | `"left"` | 否 | 展开图标位置 |
| singleExpanded | `boolean` | `false` | 否 | 同时只展开一个面板（手风琴模式） |
| shouldExtraTriggerHeaderClick | `boolean` | `-` | 否 | 整体设置所有 CollapsePanel 的 shouldExtraTriggerHeaderClick |
| contentType | `"plain" \| "common"` | `"plain"` | 否 | 内容类型。plain 为简单文本；common 为通用，还原 panel content 的左 padding 缩进 |
| shouldDestroyCollapsedPanelContent | `boolean` | `true` | 否 | 是否销毁折叠面板的内容节点。设为 false 可维持 uncontrolled components 的交互状态 |

## Props - CollapsePanel

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| className | `string` | `""` | 否 | 自定义 class |
| id | `CollapsePanelId` | `-` | 否 | 唯一标识 |
| disabled | `boolean` | `false` | 否 | 是否禁用 |
| headline | `ReactNode` | `-` | 否 | 头部标题 |
| onClickHeader | `MouseEventHandler<Element>` | `-` | 否 | 点击头部回调 |
| extra | `ReactNode` | `-` | 否 | 头部右侧的额外内容 |
| shouldExtraTriggerHeaderClick | `boolean` | `-` | 否 | 点击 extra 内容是否触发展开/收起，extra 为可点击元素时可设为 false |

## 典型用法

### 基础折叠面板

```tsx
import {Collapse, CollapsePanel} from '@befe/brick'

<Collapse defaultExpandedIds={[1]}>
    <CollapsePanel headline={'可以折叠1'} id={1}>
        面板内容文本
    </CollapsePanel>
    <CollapsePanel headline={'可以折叠2'} id={2}>
        <div>面板内容 in div</div>
    </CollapsePanel>
    <CollapsePanel headline={'可以折叠3'} id={3} disabled>
        禁用的面板
    </CollapsePanel>
</Collapse>
```

### 手风琴模式

```tsx
<Collapse singleExpanded>
    {[1, 2, 3].map(id => (
        <CollapsePanel key={id} headline={`可以折叠_${id}`} id={id}>
            面板内容
        </CollapsePanel>
    ))}
</Collapse>
```

### 展开图标在右侧

```tsx
<Collapse expandIconPosition={'right'}>
    {[1, 2, 3].map(id => (
        <CollapsePanel key={id} headline={`可以折叠_${id}`} id={id}>
            面板内容
        </CollapsePanel>
    ))}
</Collapse>
```

### 头部额外操作

```tsx
import {Button} from '@befe/brick'
import {SvgGear, SvgCalendar} from '@befe/brick-icon'

const extra = (
    <div>
        <Button type={'plain'} icon={SvgGear} />
        <Button type={'plain'} icon={SvgCalendar} />
    </div>
)

// shouldExtraTriggerHeaderClick={false} 使点击 extra 不触发展开/收起
<Collapse shouldExtraTriggerHeaderClick={false}>
    {[1, 2, 3].map(id => (
        <CollapsePanel key={id} headline={`可以折叠_${id}`} id={id} extra={extra}>
            面板内容
        </CollapsePanel>
    ))}
</Collapse>
```

### 通用内容类型（放置表格等）

> `contentType="common"` 还原 panel content 因缩进需要增加的左 padding

```tsx
<Collapse defaultExpandedIds={[1]} contentType={'common'} shouldDestroyCollapsedPanelContent={false}>
    <CollapsePanel headline={'可以折叠1'} id={1}>
        <Table columns={columns} data={data} />
    </CollapsePanel>
</Collapse>
```

## 注意事项

- `contentType="common"` 适合 panel 内放置表格等需要还原左缩进的内容
- `shouldDestroyCollapsedPanelContent={false}` 可维持折叠面板中 uncontrolled components 的交互状态，默认折叠时销毁内容节点
- `shouldExtraTriggerHeaderClick={false}` 可让 extra 区域的点击不触发展开/收起，避免使用 `event.stopPropagation()`