UNPKG

zent

Version:

一套前端设计语言和基于React的实现

80 lines (60 loc) • 8.97 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
--- title: Transfer path: component/transfer group: Data Entry --- ## Transfer Double column transfer choice box. ### API | Property | Description | Type | Default | Required | | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- | ---------------------- | -------- | | keyName | The primary key of `dataSource` | `string` | | Yes | | dataSource | Used for setting the source data. The elements that are part of this array will be present the left column. Except the elements whose keys are included in targetKeys prop | `ITransferData[]` | | Yes | | onChange | A callback function that is executed when the transfer between columns is completed | `({ targetKeys, transferredKeys, direction, selectedKeys }) => void` | | Yes | | targetKeys | A set of keys of elements that are listed on the right column | `string[]` | `[]` | No | | selectedKeys | A set of keys of selected items | `string[]` | `[]` | No | | onSelectChange | A callback function which is executed when a check changes | `(selectedKeys: string[]) => void` | | No | | titles | A set of titles that are sorted from left to right | `[React.ReactNode, React.ReactNode]` | `['Source', 'Target']` | No | | showSearch | If included, a search box is shown on each column | `boolean` | `false` | No | | searchPlaceholder | Search input placeholder | `string` | `Please Enter` | No | | filterOption | A function to determine whether an item should show in search result list | `(inputValue: string, option: ITransferData) => boolean` | | No | | pagination | List pagination. Not work in render props. PageSize is 10 by default | `boolean` \| `{ pageSize: number }` | | No | | disabled | Whether disabled transfer | `boolean` | | No | | className | Extra custom class name | `string` | `''` | No | | list | Set list props | `Object ListType` \| `[ListType, ListType]` | | No | #### Render Props Transfer accept children to customize render list, using follow props: | Property | Description | Type | | ------------------ | ----------------------- | -------------------------- | | direction | List render direction | `left` \| `right` | | selectedKeys | Selected items | `string[]` | | handleSelectChange | Select a group of items | `(keys: string[]) => void` | #### list | Property | Descripition | Type | Required | | --------- | --------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | -------- | | columns | Columns | `TransferColumnType` | Yes | | selection | The configuration for selection(Currently only supports `getCheckboxProps`) | `object { getCheckboxProps: ( data: ITransferData) => { disabled?: boolean; reason?: React.ReactNode }; }` | No | The above props are different from `Grid`, `rowKey`、`scroll`、`emptyLabel`、`onRowClick`、`sortBy`、`sortType`、`defaultSortType`、`bordered`、`ellipsis`、`components`、`rowProps`、`autoStick`、`autoStickOffsetTop`、`disableHoverHighlight`、`onChange`、`loading`、`className`、`rowClassName` will be passed down.([View props description](https://youzan.github.io/zent/en/component/grid#api)). #### columns | Property | Description | Type | Default | Required | | -------- | ------------------------------ | ----------- | ------- | -------- | | name | Key for the corresponding data | `string` | | Yes | | title | Column title | `ReactNode` | `''` | No | The above props are different from `Grid`, [View other props descriptions](https://youzan.github.io/zent/en/component/grid#columns). ### useTransfer Hook for sending left and right data. #### Params | Property | Description | Type | Default | Required | | ------------ | ------------------------------------------------- | ---------- | ------- | -------- | | selectedKeys | Default Selected items | `string[]` | `[]` | No | | targetKeys | Default items that are listed on the right column | `string[]` | `[]` | No | | disabledKeys | disabled items | `string[]` | `[]` | No | #### Result | Property | Description | Type | | ------------------ | ------------------------------------------------------------- | -------------------------------------------------------- | | selectedKeys | A set of keys of selected items | `string[]` | | targetKeys | A set of keys of elements that are listed on the right column | `string[]` | | transferKeys | A function that transfer selected items on the left or right | `(direction: Direction) => void` | | changeSelectedKeys | A function that set selected items on the left or right | `(direction: Direction, selectedKeys: string[]) => void` | | resetSelectedKeys | A function that reset selected items | `(keys: string[]) => void` | | resetTargetKeys | A function that reset targetKeys | `(keys: string[]) => void` |