diff options
-rw-r--r-- | assets/index/Select.less | 6 | ||||
-rw-r--r-- | src/module/Select.jsx | 12 |
2 files changed, 13 insertions, 5 deletions
diff --git a/assets/index/Select.less b/assets/index/Select.less index e93e8f7..bca25f9 100644 --- a/assets/index/Select.less +++ b/assets/index/Select.less | |||
@@ -1,12 +1,16 @@ | |||
1 | .@{prefixClass}-panel-select { | 1 | .@{prefixClass}-panel-select { |
2 | float: left; | 2 | float: left; |
3 | overflow-y:auto; | ||
4 | font-size: 12px; | 3 | font-size: 12px; |
5 | border: 1px solid #e9e9e9; | 4 | border: 1px solid #e9e9e9; |
6 | border-width: 0 1px; | 5 | border-width: 0 1px; |
7 | margin-left: -1px; | 6 | margin-left: -1px; |
8 | box-sizing: border-box; | 7 | box-sizing: border-box; |
9 | width: 56px; | 8 | width: 56px; |
9 | overflow: hidden; | ||
10 | |||
11 | &:hover { | ||
12 | overflow-y: auto; | ||
13 | } | ||
10 | 14 | ||
11 | &:first-child { | 15 | &:first-child { |
12 | border-left: 0; | 16 | border-left: 0; |
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 | } |