diff options
author | yiminghe <yiminghe@gmail.com> | 2016-08-04 19:53:55 +0800 |
---|---|---|
committer | yiminghe <yiminghe@gmail.com> | 2016-08-04 19:53:55 +0800 |
commit | 4984ed85e54f442998a335db70618d6184fa397e (patch) | |
tree | 6ae348b2cac5f48f3afb6f7b8dd0c2fd02f044fc /src/module/Select.jsx | |
parent | deaa6062ea2e274d50d58c70251c1237c0c03c67 (diff) | |
download | time-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.jsx | 97 |
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 @@ | |||
1 | import React, {PropTypes} from 'react'; | ||
2 | import ReactDom from 'react-dom'; | ||
3 | import classnames from 'classnames'; | ||
4 | |||
5 | const 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 | |||
25 | const 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 | |||
97 | export default Select; | ||