1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 | import React, { Component } from 'react';
|
10 | import Transfer from '../../src';
|
11 |
|
12 | const mockData = [];
|
13 | for (let i = 0; i < 20; i++) {
|
14 | mockData.push({
|
15 | key: i.toString(),
|
16 | title: `content${i + 1}`,
|
17 | description: `description of content${i + 1}`,
|
18 | disabled: i % 3 < 1,
|
19 |
|
20 | });
|
21 | }
|
22 |
|
23 | const targetKeys = mockData
|
24 | .filter(item => +item.key % 3 > 1)
|
25 | .map(item => item.key);
|
26 |
|
27 | class Demo1 extends React.Component {
|
28 | state = {
|
29 | targetKeys,
|
30 | selectedKeys: [],
|
31 | showModal: false,
|
32 | modalSize: ''
|
33 | }
|
34 |
|
35 | handleChange = (nextTargetKeys, direction, moveKeys) => {
|
36 | this.setState({ targetKeys: nextTargetKeys });
|
37 |
|
38 | console.log('targetKeys: ', targetKeys);
|
39 | console.log('direction: ', direction);
|
40 | console.log('moveKeys: ', moveKeys);
|
41 | }
|
42 |
|
43 | handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
|
44 | this.setState({ selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys] });
|
45 |
|
46 | console.log('sourceSelectedKeys: ', sourceSelectedKeys);
|
47 | console.log('targetSelectedKeys: ', targetSelectedKeys);
|
48 | }
|
49 |
|
50 | handleScroll = (direction, e) => {
|
51 | console.log('direction:', direction);
|
52 | console.log('target:', e.target);
|
53 | }
|
54 |
|
55 |
|
56 | render() {
|
57 | const state = this.state;
|
58 |
|
59 | return (
|
60 | <Transfer
|
61 | dataSource={mockData}
|
62 | titles={['Source', 'Target']}
|
63 | targetKeys={state.targetKeys}
|
64 | selectedKeys={state.selectedKeys}
|
65 | onChange={this.handleChange}
|
66 | onSelectChange={this.handleSelectChange}
|
67 | onScroll={this.handleScroll}
|
68 | render={item => item.title}
|
69 | />
|
70 | );
|
71 | }
|
72 | }
|
73 |
|
74 |
|
75 | export default Demo1
|