# drag-collapse-form-list LLMs.txt

> 供 LLM 快速理解 `@flatbiz/antd/drag-collapse-form-list` 的使用方式。

## 模块定位

可拖拽 折叠面板+FormList

## 导入方式

```ts
import { DragCollapseFormList } from '@flatbiz/antd/drag-collapse-form-list';
// 也可以从主入口导入：import { ... } from '@flatbiz/antd';
```

## 公开导出

- `DragCollapseFormList` - 可拖拽 折叠面板+FormList
- `* from ./drag-collapse.jsx`
- `SortableItem`
- `SortableItemProps`
- `DragCollapseFormListContentProps`
- `DragCollapseFormListHeaderProps`
- `DragCollapseFormListProps`

## 依赖的 antd 能力

`Collapse`、`CollapseProps`、`Form`、`FormListFieldData`、`FormListOperation`

## Props / 配置要点

### SortableItemProps

- `formListFieldData`（必填）：: FormListFieldData
- `formListOperate`（必填）：: FormListOperation
- `onChange`（必填）：: (activeKey: number | string) => void
- `header`（必填）：: DragCollapseFormListProps['header']
- `content`（必填）：: DragCollapseFormListProps['content']
- `collapsible`（可选）：: DragCollapseFormListProps['collapsible']
- `expandIcon`（可选）：: DragCollapseFormListProps['expandIcon']
- `expandIconPosition`（可选）：: DragCollapseFormListProps['expandIconPosition']
- `size`（可选）：: DragCollapseFormListProps['size']
- `dragIcon`（可选）：: DragCollapseFormListProps['dragIcon']
- `getItemDragDisabled`（可选）：: DragCollapseFormListProps['getItemDragDisabled']
- `dragDisabled`（可选）：: DragCollapseFormListProps['dragDisabled']
- `isGray`（可选）：: boolean
- `isLast`（可选）：: boolean
- `className`（可选）：: string
- `style`（可选）：: CSSProperties
- `uid`（必填）：: string | number
- `isActive`（可选）：: boolean
- `headerStyle`（可选）：: CSSProperties
- `index`（必填）：: number
- `isOverlay`（可选）：: boolean
- `formStageCompleteName`（必填）：: Array<string | number>

### DragCollapseFormListContentProps

- `formListFieldData`（必填）：: FormListFieldData；Form.List item fieldData
- `formStageCompleteName`（必填）：: Array<string | number>；当前阶段 完整 formItem name
- `operation`（必填）：: FormListOperation；Form.List 操作项
- `uid`（必填）：: string | number
- `getInsideFormItemName`（必填）：: (key: string | string[]) => Array<string | number>；获取当前FormList 内部 Form.Item name
- `getInsideFormItemData`（必填）：: () => TPlainObject；获取当前 FormList Item 数据
- `index`（必填）：: number；索引

### DragCollapseFormListHeaderProps

- 声明：`export type DragCollapseFormListHeaderProps = DragCollapseFormListContentProps;`

### DragCollapseFormListProps

- `uidFieldName`（可选）：: string；formList item 数据中的唯一值，默认值：uid
- `className`（可选）：: string
- `style`（可选）：: CSSProperties
- `formListName`（必填）：: string | number | (string | number)[]；formList name
- `formListCompleteName`（可选）：: (string | number)[]；当前组件嵌套在formList内部时，必传 例如：
- `onDropChange`（可选）：: (items: TPlainObject[]) => void；拖拽面板回调
- `accordion`（可选）：: boolean；手风琴模式，只允许单个内容区域展开
- `activeKey`（可选）：: number | string | (number | string)[]；当前激活 tab 面板的key
- `collapsible`（可选）：: CollapseProps['collapsible']；所有子面板是否可折叠或指定可折叠触发区域，可选: header | icon | disabled
- `defaultActiveKey`（可选）：: number | string | (number | string)[]；初始化选中面板的 key
- `expandIcon`（可选）：: CollapseProps['expandIcon']；自定义切换图标
- `expandIconPosition`（可选）：: CollapseProps['expandIconPosition']；设置图标位置，可选：start | end
- `size`（可选）：: CollapseProps['size']；设置折叠面板大小
- `dragIcon`（可选）：: ReactElement；设置拖拽图标
- `onChange`（可选）：: (activeKey?: number | string | (number | string)[]) => void；切换面板的回调
- `dragDisabled`（可选）：: boolean；禁用拖拽，拖拽图标隐藏
- `header`（必填）：: (data: DragCollapseFormListHeaderProps) => ReactElement；折叠面板 header 渲染
- `content`（必填）：: (data: DragCollapseFormListContentProps) => ReactElement；折叠面板 content 渲染
- `getItemDragDisabled`（可选）：: (uid: string | number, index: number) => boolean；设置面板禁止拖拽
- `rules`（可选）：: FormListProps['rules']

## 使用规则与行为

- 可拖拽 折叠面板+FormList
- Form.List item fieldData
- 当前阶段 完整 formItem name
- Form.List 操作项
- 获取当前FormList 内部 Form.Item name
- 获取当前 FormList Item 数据
- 索引
- formList item 数据中的唯一值，默认值：uid
- formList name
- 当前组件嵌套在formList内部时，必传 例如：

## 基础示例

```tsx
import { DragCollapseFormList, type SortableItemProps } from '@flatbiz/antd/drag-collapse-form-list';

const props: SortableItemProps = {
  // 按业务传入必要参数
};

<DragCollapseFormList {...props} />;
```

## 源码索引

- `src/drag-collapse-form-list/drag-collapse.tsx`
- `src/drag-collapse-form-list/index.ts`
- `src/drag-collapse-form-list/sortable-item.tsx`
- `src/drag-collapse-form-list/types.ts`

## 给 LLM 的注意事项

- 优先使用 `@flatbiz/antd/drag-collapse-form-list` 或主入口 `@flatbiz/antd` 的公开导出，不要引用内部实现文件。
- 当 Props 与 antd 原组件同名能力冲突时，以本模块导出的 Props 类型为准。
- 若文档未覆盖某个边缘参数，请读取上方源码索引中的类型定义和 JSDoc。