tree-select/examples/big-data.js at bfd511ec21642f1ad38f620465b0cffa1d0ab22f · react-component/tree-select · GitHub

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
81
82
83
84
85
/* eslint react/no-multi-comp:0, no-console:0 */

import 'rc-tree-select/assets/index.less';
import React from 'react';
import TreeSelect, { SHOW_PARENT } from 'rc-tree-select';
import Gen from './big-data-generator';
import './demo.less';

class Demo extends React.Component {
  state = {
    gData: [],
    gData1: [],
    value: '',
    value1: '',
  };

  onChange = value => {
    console.log('onChange', value);
    this.setState({ value });
  };

  onChangeStrictly = value1 => {
    console.log('onChangeStrictly', value1);
    const ind = parseInt(Math.random() * 3, 10);
    value1.push({ value: `0-0-0-${ind}-value`, label: `0-0-0-${ind}-label`, halfChecked: true });
    this.setState({
      value1,
    });
  };

  onGen = data => {
    this.setState({
      gData: data,
      gData1: [...data],
      value: '0-0-0-value',
      value1: [
        { value: '0-0-value', label: '0-0-label', halfChecked: true },
        { value: '0-0-0-value', label: '0-0-0-label' },
      ],
      // value: ['0-0-0-0-value', '0-0-0-1-value', '0-0-0-2-value'],
    });
  };

  render() {
    const { value1, gData1, value, gData } = this.state;
    return (
      <div style={{ padding: '0 20px' }}>
        <Gen onGen={this.onGen} />
        <div style={{ display: 'flex' }}>
          <div style={{ marginRight: 20 }}>
            <h3>normal check</h3>
            <TreeSelect
              style={{ width: 300 }}
              dropdownStyle={{ maxHeight: 200, overflow: 'auto' }}
              treeData={gData}
              treeLine
              value={value}
              placeholder={<i>请下拉选择</i>}
              treeCheckable
              showCheckedStrategy={SHOW_PARENT}
              onChange={this.onChange}
            />
          </div>
          <div>
            <h3>checkStrictly</h3>
            <TreeSelect
              style={{ width: 300 }}
              dropdownStyle={{ maxHeight: 200, overflow: 'auto' }}
              treeData={gData1}
              treeLine
              value={value1}
              placeholder={<i>请下拉选择</i>}
              treeCheckable
              treeCheckStrictly
              showCheckedStrategy={SHOW_PARENT}
              onChange={this.onChangeStrictly}
            />
          </div>
        </div>
      </div>
    );
  }
}

export default () => <Demo />;