1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | import React, { Component } from 'react';
|
9 | import Button from 'bee-button';
|
10 | import Transfer from '../../src';
|
11 |
|
12 | class Demo3 extends React.Component {
|
13 | state = {
|
14 | mockData: [],
|
15 | targetKeys: [],
|
16 | }
|
17 | componentDidMount() {
|
18 | this.getMock();
|
19 | }
|
20 | getMock = () => {
|
21 | const targetKeys = [];
|
22 | const mockData = [];
|
23 | for (let i = 0; i < 20; i++) {
|
24 | const data = {
|
25 | key: i.toString(),
|
26 | title: `content${i + 1}`,
|
27 | description: `description of content${i + 1}`,
|
28 | chosen: Math.random() * 2 > 1,
|
29 | };
|
30 | if (data.chosen) {
|
31 | targetKeys.push(data.key);
|
32 | }
|
33 | mockData.push(data);
|
34 | }
|
35 | this.setState({ mockData, targetKeys });
|
36 | }
|
37 | handleChange = (targetKeys) => {
|
38 | this.setState({ targetKeys });
|
39 | }
|
40 | renderFooter = () => {
|
41 | return (
|
42 | <Button
|
43 | size="sm"
|
44 | style={{ float: 'right', margin: 5 }}
|
45 | onClick={this.getMock}
|
46 | >
|
47 | reload
|
48 | </Button>
|
49 | );
|
50 | }
|
51 | render() {
|
52 | return (
|
53 | <Transfer
|
54 | dataSource={this.state.mockData}
|
55 | showSearch
|
56 | listStyle={{
|
57 | width: 250,
|
58 | height: 300,
|
59 | }}
|
60 | targetKeys={this.state.targetKeys}
|
61 | onChange={this.handleChange}
|
62 | render={item => `${item.title}-${item.description}`}
|
63 | footer={this.renderFooter}
|
64 | />
|
65 | );
|
66 | }
|
67 | }
|
68 |
|
69 | export default Demo3
|