aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/module/Select.jsx
diff options
context:
space:
mode:
authoryiminghe <yiminghe@gmail.com>2016-08-04 19:53:55 +0800
committeryiminghe <yiminghe@gmail.com>2016-08-04 19:53:55 +0800
commit4984ed85e54f442998a335db70618d6184fa397e (patch)
tree6ae348b2cac5f48f3afb6f7b8dd0c2fd02f044fc /src/module/Select.jsx
parentdeaa6062ea2e274d50d58c70251c1237c0c03c67 (diff)
downloadtime-picker-2.0.0.tar.gz
time-picker-2.0.0.tar.zst
time-picker-2.0.0.zip
2.x :boom:2.0.0
Diffstat (limited to 'src/module/Select.jsx')
-rw-r--r--src/module/Select.jsx97
1 files changed, 0 insertions, 97 deletions
diff --git a/src/module/Select.jsx b/src/module/Select.jsx
deleted file mode 100644
index 2ab9e61..0000000
--- a/src/module/Select.jsx
+++ /dev/null
@@ -1,97 +0,0 @@
1import React, {PropTypes} from 'react';
2import ReactDom from 'react-dom';
3import classnames from 'classnames';
4
5const scrollTo = (element, to, duration) => {
6 const requestAnimationFrame = window.requestAnimationFrame ||
7 function requestAnimationFrameTimeout() {
8 return setTimeout(arguments[0], 10);
9 };
10 // jump to target if duration zero
11 if (duration <= 0) {
12 element.scrollTop = to;
13 return;
14 }
15 const difference = to - element.scrollTop;
16 const perTick = difference / duration * 10;
17
18 requestAnimationFrame(() => {
19 element.scrollTop = element.scrollTop + perTick;
20 if (element.scrollTop === to) return;
21 scrollTo(element, to, duration - 10);
22 });
23};
24
25const Select = React.createClass({
26 propTypes: {
27 prefixCls: PropTypes.string,
28 options: PropTypes.array,
29 gregorianCalendarLocale: PropTypes.object,
30 selectedIndex: PropTypes.number,
31 type: PropTypes.string,
32 onSelect: PropTypes.func,
33 onMouseEnter: PropTypes.func,
34 },
35
36 componentDidMount() {
37 // jump to selected option
38 this.scrollToSelected(0);
39 },
40
41 componentDidUpdate(prevProps) {
42 // smooth scroll to selected option
43 if (prevProps.selectedIndex !== this.props.selectedIndex) {
44 this.scrollToSelected(120);
45 }
46 },
47
48 onSelect(value) {
49 const { onSelect, type } = this.props;
50 onSelect(type, value);
51 },
52
53 getOptions() {
54 const { options, selectedIndex, prefixCls } = this.props;
55 return options.map((item, index) => {
56 const cls = classnames({
57 [`${prefixCls}-select-option-selected`]: selectedIndex === index,
58 [`${prefixCls}-select-option-disabled`]: item.disabled,
59 });
60 let onclick = null;
61 if (!item.disabled) {
62 onclick = this.onSelect.bind(this, +item.value);
63 }
64 return <li className={cls} key={index} onClick={onclick} disabled={item.disabled}>{item.value}</li>;
65 });
66 },
67
68 scrollToSelected(duration) {
69 // move to selected item
70 const select = ReactDom.findDOMNode(this);
71 const list = ReactDom.findDOMNode(this.refs.list);
72 let index = this.props.selectedIndex;
73 if (index < 0) {
74 index = 0;
75 }
76 const topOption = list.children[index];
77 const to = topOption.offsetTop;
78 scrollTo(select, to, duration);
79 },
80
81 render() {
82 if (this.props.options.length === 0) {
83 return null;
84 }
85
86 const { prefixCls } = this.props;
87
88 return (
89 <div className={`${prefixCls}-select`}
90 onMouseEnter={this.props.onMouseEnter}>
91 <ul ref="list">{this.getOptions()}</ul>
92 </div>
93 );
94 },
95});
96
97export default Select;