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
|
import React, { PropTypes } from 'react';
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);
});
};
const Select = React.createClass({
propTypes: {
prefixCls: PropTypes.string,
options: PropTypes.array,
selectedIndex: PropTypes.number,
type: PropTypes.string,
onSelect: PropTypes.func,
onMouseEnter: PropTypes.func,
},
getInitialState() {
return {
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.refs.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 });
},
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="list">{this.getOptions()}</ul>
</div>
);
},
});
export default Select;
|
