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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ReactDom from 'react-dom';
import classnames from 'classnames';
const scrollTo = (element, to, duration) => {
const requestAnimationFrame = window.requestAnimationFrame ||
function requestAnimationFrameTimeout() {
return setTimeout(arguments[0], 10);
};
// jump to target if duration zero
if (duration <= 0) {
element.scrollTop = to;
return;
}
const difference = to - element.scrollTop;
const perTick = difference / duration * 10;
requestAnimationFrame(() => {
element.scrollTop = element.scrollTop + perTick;
if (element.scrollTop === to) return;
scrollTo(element, to, duration - 10);
});
};
class Select extends Component {
static propTypes = {
prefixCls: PropTypes.string,
options: PropTypes.array,
selectedIndex: PropTypes.number,
type: PropTypes.string,
onSelect: PropTypes.func,
onMouseEnter: PropTypes.func,
};
state = {
active: false,
};
componentDidMount() {
// jump to selected option
this.scrollToSelected(0);
}
componentDidUpdate(prevProps) {
// smooth scroll to selected option
if (prevProps.selectedIndex !== this.props.selectedIndex) {
this.scrollToSelected(120);
}
}
onSelect = (value) => {
const { onSelect, type } = this.props;
onSelect(type, value);
}
getOptions() {
const { options, selectedIndex, prefixCls } = this.props;
return options.map((item, index) => {
const cls = classnames({
[`${prefixCls}-select-option-selected`]: selectedIndex === index,
[`${prefixCls}-select-option-disabled`]: item.disabled,
});
let onclick = null;
if (!item.disabled) {
onclick = this.onSelect.bind(this, item.value);
}
return (<li
className={cls}
key={index}
onClick={onclick}
disabled={item.disabled}
>
{item.value}
</li>);
});
}
scrollToSelected(duration) {
// move to selected item
const select = ReactDom.findDOMNode(this);
const list = ReactDom.findDOMNode(this.list);
if (!list) {
return;
}
let index = this.props.selectedIndex;
if (index < 0) {
index = 0;
}
const topOption = list.children[index];
const to = topOption.offsetTop;
scrollTo(select, to, duration);
}
handleMouseEnter = (e) => {
this.setState({ active: true });
this.props.onMouseEnter(e);
}
handleMouseLeave = () => {
this.setState({ active: false });
}
saveList = (node) => {
this.list = node;
}
render() {
if (this.props.options.length === 0) {
return null;
}
const { prefixCls } = this.props;
const cls = classnames({
[`${prefixCls}-select`]: 1,
[`${prefixCls}-select-active`]: this.state.active,
});
return (
<div
className={cls}
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
>
<ul ref={this.saveList}>{this.getOptions()}</ul>
</div>
);
}
}
export default Select;
|
