# 说明文档

组件来源:办公系统v3-common组件

## 拖拽容器组件

### 1.功能描述

可包裹任意组件，使之成为可拖拽或可被拖拽组件
也可用于ant-table组件的行拖拽，需要定义接口属性nodeType='tr'

### 2.依赖

- react-dnd
  
- classnames

- react

### 3.接口

```tsx
type WrapperType = 'default' | 'tr';

interface Iprops<T> {
    // 容器子组件
    children?: ReactNode
    // 容器标签的样式名
    className?: string
    // 其它组件拖拽至该组件后触发的拖拽事件，传输其它组件搭载的数据
    onItemDrop?: (value: T) => void
    // 可接受的拖拽类型列表，字符串或字符串数组表示
    accept?: string[] | string
    // 当组件为可拖时，定义组件类型，字符串表示
    dragType?: string
    // 容器样式表
    style?: CSSProperties
    // 是否可被放置
    canDrop?: boolean
    // 是否可拖
    canDrag?: boolean
    // 容器标签类型，default表示div， tr用于表格内行拖拽
    nodeType: WrapperType
    // 当组件可拖时，用于搭载的数据
    value?: T
}
```

### 4.案例

#### (1)普通组件

```tsx
<DroppableWrapper<ProjectFile>
    style={{ display: 'inline-block' }}
    className="base-folder-tab-item"
    canDrag={false}
    canDrop={true}
    onItemDrop={file => {
        onMoveFileDrop(file, folder.id, folder)
    }}
    accept={['File']}
    key={folder.id}>
    <Radio.Button
        value={folder.id}
        style={{
            backgroundColor: +parentId === folder.id ? tabbarContext.themeColor : null,
            borderColor: +parentId === folder.id ? tabbarContext.themeColor : null
        }}>{folder.name}</Radio.Button>
</DroppableWrapper>
```

#### (2)与ant-table组合

```tsx
<Table
    dataSource={displayTableFiles}
    rowKey="id"
    pagination={false}
    loading={fileSpining}
    components={{
        body: {
            row: DroppableWrapper<ProjectFile>,
        }
    }}
    onRow={(record: ProjectFile, idx) => ({
        value: record,
        canDrag: record.id ? true : false,
        onItemDrop: (file) => {
            onMoveFileDrop(file, record.id, record)
        },
        nodeType: 'tr',
        accept: 'File',
        dragType: 'File',
    })}
>
</Table>
```