diff options
author | MG12 <wuzhao.mail@gmail.com> | 2015-11-30 10:47:40 +0800 |
---|---|---|
committer | MG12 <wuzhao.mail@gmail.com> | 2015-11-30 10:47:40 +0800 |
commit | c572b1cd5336b63b0bd47215384727c8c93f52a9 (patch) | |
tree | 37f3176b98ce650e3fd06342b842ee091d829f75 /src/module/Select.jsx | |
parent | 8133e8cf3b37b2be764616493ade7c7a7678fce1 (diff) | |
parent | 0b9ef41f8507b6d5f11b4c42d57397e9a1850402 (diff) | |
download | time-picker-c572b1cd5336b63b0bd47215384727c8c93f52a9.tar.gz time-picker-c572b1cd5336b63b0bd47215384727c8c93f52a9.tar.zst time-picker-c572b1cd5336b63b0bd47215384727c8c93f52a9.zip |
Merge pull request #3 from react-component/feature-hide-scrollbar
Feature hide scrollbar
Diffstat (limited to 'src/module/Select.jsx')
-rw-r--r-- | src/module/Select.jsx | 12 |
1 files changed, 8 insertions, 4 deletions
diff --git a/src/module/Select.jsx b/src/module/Select.jsx index be4c025..0b91ac5 100644 --- a/src/module/Select.jsx +++ b/src/module/Select.jsx | |||
@@ -3,6 +3,10 @@ import ReactDom from 'react-dom'; | |||
3 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
4 | 4 | ||
5 | const scrollTo = (element, to, duration) => { | 5 | const scrollTo = (element, to, duration) => { |
6 | const requestAnimationFrame = window.requestAnimationFrame || | ||
7 | function requestAnimationFrameTimeout() { | ||
8 | return setTimeout(arguments[0], 10); | ||
9 | }; | ||
6 | // jump to target if duration zero | 10 | // jump to target if duration zero |
7 | if (duration <= 0) { | 11 | if (duration <= 0) { |
8 | element.scrollTop = to; | 12 | element.scrollTop = to; |
@@ -11,11 +15,11 @@ const scrollTo = (element, to, duration) => { | |||
11 | const difference = to - element.scrollTop; | 15 | const difference = to - element.scrollTop; |
12 | const perTick = difference / duration * 10; | 16 | const perTick = difference / duration * 10; |
13 | 17 | ||
14 | setTimeout(() => { | 18 | requestAnimationFrame(() => { |
15 | element.scrollTop = element.scrollTop + perTick; | 19 | element.scrollTop = element.scrollTop + perTick; |
16 | if (element.scrollTop === to) return; | 20 | if (element.scrollTop === to) return; |
17 | scrollTo(element, to, duration - 10); | 21 | scrollTo(element, to, duration - 10); |
18 | }, 10); | 22 | }); |
19 | }; | 23 | }; |
20 | 24 | ||
21 | const Select = React.createClass({ | 25 | const Select = React.createClass({ |
@@ -35,7 +39,7 @@ const Select = React.createClass({ | |||
35 | 39 | ||
36 | componentDidUpdate() { | 40 | componentDidUpdate() { |
37 | // smooth scroll to selected option | 41 | // smooth scroll to selected option |
38 | this.scrollToSelected(200); | 42 | this.scrollToSelected(120); |
39 | }, | 43 | }, |
40 | 44 | ||
41 | onSelect(value) { | 45 | onSelect(value) { |
@@ -58,7 +62,7 @@ const Select = React.createClass({ | |||
58 | // move to selected item | 62 | // move to selected item |
59 | const select = ReactDom.findDOMNode(this); | 63 | const select = ReactDom.findDOMNode(this); |
60 | const list = ReactDom.findDOMNode(this.refs.list); | 64 | const list = ReactDom.findDOMNode(this.refs.list); |
61 | let index = this.props.selectedIndex - 2; | 65 | let index = this.props.selectedIndex - 1; |
62 | if (index < 0) { | 66 | if (index < 0) { |
63 | index = 0; | 67 | index = 0; |
64 | } | 68 | } |