# @beisen-phoenix/transfer

> #### API 属性如下：

Latest version **3.3.55** (published 2019-11-25) · ISC license · 0 weekly downloads

## Install

```sh
npm install @beisen-phoenix/transfer
pnpm add @beisen-phoenix/transfer
yarn add @beisen-phoenix/transfer
bun add @beisen-phoenix/transfer
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.3.55 |
| Published | 2019-11-25 |
| First published | 2019-09-03 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 148.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | beisencorp |

## Links

- npm: https://www.npmjs.com/package/@beisen-phoenix/transfer
- npm.io page: https://npm.io/package/@beisen-phoenix/transfer

## Dependencies (7)

- [react-dnd](https://npm.io/package/react-dnd.md) ^9.3.4
- [react-lazy-load](https://npm.io/package/react-lazy-load.md) 3.0.13
- [@beisen-phoenix/icon](https://npm.io/package/@beisen-phoenix/icon.md) ^3.2.54
- [@beisen-phoenix/search](https://npm.io/package/@beisen-phoenix/search.md) ^3.3.55
- [@beisen-phoenix/tooltip](https://npm.io/package/@beisen-phoenix/tooltip.md) ^3.3.55
- [react-dnd-html5-backend](https://npm.io/package/react-dnd-html5-backend.md) 9.3.4
- [@beisen-phoenix/base-tree](https://npm.io/package/@beisen-phoenix/base-tree.md) ^3.3.55

## Recent versions

- 3.3.55 (latest) — 2019-11-25
- 3.2.44-rc.1 (rc) — 2019-10-24
- 3.3.54 — 2019-11-25
- 3.3.53 — 2019-11-25
- 3.3.52 — 2019-11-24
- 3.3.51 — 2019-11-23
- 3.3.50 — 2019-11-22
- 3.3.49 — 2019-11-22
- 3.3.48 — 2019-11-22
- 3.3.47 — 2019-11-22
- 3.3.46 — 2019-11-22
- 3.3.45 — 2019-11-21
- 3.3.43 — 2019-11-21
- 3.3.42 — 2019-11-21
- 3.3.41-beta.1 — 2019-11-21
- … 236 more at https://npm.io/package/@beisen-phoenix/transfer/versions

## README

### 穿梭框

#### API 属性如下：

| 成员              |                                   说明                                    |                      类型                      | 默认值     |
| ----------------- | :-----------------------------------------------------------------------: | :--------------------------------------------: | ---------- |
| canDrag           |                                是否可拖拽                                 |                    boolean                     | false      |
| titles            |                          标题集合，顺序从左至右                           |                    string[]                    | ['', '']   |
| showSearch        |                              是否显示搜索框                               |                    boolean                     | false      |
| leastCount        |                             设置最少选择几条                              |                     number                     | -          |
| searchPlaceholder |                          搜索框 placeholder 内容                          |                     string                     | '请搜索'   |
| notFoundContent   |                             无数据时展示内容                              |            string, React.ReactNode             | '暂无数据' |
| width             |                                自定义宽度                                 |                     string                     | -          |
| height            |                                自定义高度                                 |                     string                     | -          |
| dataSource        | 穿梭框数据(type 在 group 模式下数据结构有些不同，具体见下方 TransferItem) |                 TransferItem[]                 | []         |
| targetKeys        |                         显示在右侧数据的 key 集合                         |                    string[]                    | []         |
| selectedKeys      |                           设置哪些项应该被选中                            |                    string[]                    | []         |
| type              |                                   类型                                    |          string（“group” / "normal"）          | normal     |
| lazy              |    使用 react-lazy-load 优化性能，可参照 react-lazy-load 设置相关参数     |                       -                        |
| onChange          |                      选项在两栏之间转移时的回调函数                       |    (targetKeys, direction, moveKeys): void     |
| onSelectChange    |                        选中项发生改变时的回调函数                         | (sourceSelectedKeys, targetSelectedKeys): void | -          |
| onSearch          |                       搜索框内容时改变时的回调函数                        |    (direction: 'left', value: string): void    | -          |
| onScroll          |                         选项列表滚动时的回调函数                          |            (direction, event): void            | -          |
| onDragChange      |                           选项拖拽时的回调函数                            |         (dataSource, targetkeys): void         | -          |

### changelog

2019/10/28
1、新增 type 属性（“group”|“normal”）
2、新增左侧选择支持分组（目前仅支持一级分组）
3、删除 rowKey 属性
4、删除 dataSource 里的 value 属性，key 属性为必填（key 就是 value）
5、type 为 group 的时候，dataSource 的数据结构

#### 注意：

按照 React 的规范，所有的组件数组必须绑定 key。在 Transfer 中，dataSource 里的数据值需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。

如果你的数据没有这个属性，务必使用 rowKey 来指定数据列的主键。

```
// 比如你的数据主键是 uid
return <Transfer rowKey={record => record.uid} />;
```

#### TransferItem 类型

```
//当type为normal或者不传的时候
const dataSource = [{
    key: ‘12345’,
    title: '测试1',
    disabled: false
}]
//当type为group当时候
const dataSource =[{
    key:"groupKey",
    title:"groupTitle",
    children:[{
        key:"12345",
        title:"名称",
        disabled:false
    }]
}]
```

---
_Source: https://npm.io/package/@beisen-phoenix/transfer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._