select/docs/examples/auto-adjust-dropdown.tsx at master · react-component/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
86
87
/* eslint-disable no-console */
import React from 'react';
import Select, { Option } from '@rc-component/select';
import '../../assets/index.less';

class Test extends React.Component {
  state = {
    value: '3',
  };

  onChange = (e) => {
    let value;
    if (e && e.target) {
      ({ value } = e.target);
    } else {
      value = e;
    }
    this.setState({
      value,
    });
  };

  render() {
    const { value } = this.state;

    return (
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'space-between',
          height: 'calc(100vh - 16px)',
        }}
      >
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <div>
            <Select onChange={this.onChange} popupMatchSelectWidth={500} value={value}>
              <Option value="1">Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack</Option>
              <Option value="2">Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy</Option>
              <Option value="3">Jill</Option>
            </Select>
          </div>
          <div>
            <Select onChange={this.onChange} popupMatchSelectWidth={500} value={value}>
              <Option value="1">Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack</Option>
              <Option value="2">Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy</Option>{' '}
              <Option value="3">Jill</Option>
            </Select>
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <div>
            <Select onChange={this.onChange} popupMatchSelectWidth={500} value={value}>
              <Option value="1">Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack</Option>
              <Option value="2">Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy</Option>
              <Option value="3">Jill</Option>
            </Select>
          </div>
        </div>
        <div
          style={{
            display: 'flex',
            justifyContent: 'space-between',
          }}
        >
          <div>
            <Select onChange={this.onChange} popupMatchSelectWidth={500} value={value}>
              <Option value="1">Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack</Option>
              <Option value="2">Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy</Option>
              <Option value="3">Jill</Option>
            </Select>
          </div>
          <div>
            <Select onChange={this.onChange} popupMatchSelectWidth={500} value={value}>
              <Option value="1">Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack</Option>
              <Option value="2">Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy</Option>
              <Option value="3">Jill</Option>
            </Select>
          </div>
        </div>
      </div>
    );
  }
}

export default Test;
/* eslint-enable */