diff options
Diffstat (limited to 'src/Select.jsx')
-rw-r--r-- | src/Select.jsx | 41 |
1 files changed, 20 insertions, 21 deletions
diff --git a/src/Select.jsx b/src/Select.jsx index deb155d..49fed5b 100644 --- a/src/Select.jsx +++ b/src/Select.jsx | |||
@@ -1,4 +1,5 @@ | |||
1 | import React, { PropTypes } from 'react'; | 1 | import React, { Component } from 'react'; |
2 | import PropTypes from 'prop-types'; | ||
2 | import ReactDom from 'react-dom'; | 3 | import ReactDom from 'react-dom'; |
3 | import classnames from 'classnames'; | 4 | import classnames from 'classnames'; |
4 | 5 | ||
@@ -22,38 +23,36 @@ const scrollTo = (element, to, duration) => { | |||
22 | }); | 23 | }); |
23 | }; | 24 | }; |
24 | 25 | ||
25 | const Select = React.createClass({ | 26 | class Select extends Component { |
26 | propTypes: { | 27 | static propTypes = { |
27 | prefixCls: PropTypes.string, | 28 | prefixCls: PropTypes.string, |
28 | options: PropTypes.array, | 29 | options: PropTypes.array, |
29 | selectedIndex: PropTypes.number, | 30 | selectedIndex: PropTypes.number, |
30 | type: PropTypes.string, | 31 | type: PropTypes.string, |
31 | onSelect: PropTypes.func, | 32 | onSelect: PropTypes.func, |
32 | onMouseEnter: PropTypes.func, | 33 | onMouseEnter: PropTypes.func, |
33 | }, | 34 | }; |
34 | 35 | ||
35 | getInitialState() { | 36 | state = { |
36 | return { | 37 | active: false, |
37 | active: false, | 38 | }; |
38 | }; | ||
39 | }, | ||
40 | 39 | ||
41 | componentDidMount() { | 40 | componentDidMount() { |
42 | // jump to selected option | 41 | // jump to selected option |
43 | this.scrollToSelected(0); | 42 | this.scrollToSelected(0); |
44 | }, | 43 | } |
45 | 44 | ||
46 | componentDidUpdate(prevProps) { | 45 | componentDidUpdate(prevProps) { |
47 | // smooth scroll to selected option | 46 | // smooth scroll to selected option |
48 | if (prevProps.selectedIndex !== this.props.selectedIndex) { | 47 | if (prevProps.selectedIndex !== this.props.selectedIndex) { |
49 | this.scrollToSelected(120); | 48 | this.scrollToSelected(120); |
50 | } | 49 | } |
51 | }, | 50 | } |
52 | 51 | ||
53 | onSelect(value) { | 52 | onSelect = (value) => { |
54 | const { onSelect, type } = this.props; | 53 | const { onSelect, type } = this.props; |
55 | onSelect(type, value); | 54 | onSelect(type, value); |
56 | }, | 55 | } |
57 | 56 | ||
58 | getOptions() { | 57 | getOptions() { |
59 | const { options, selectedIndex, prefixCls } = this.props; | 58 | const { options, selectedIndex, prefixCls } = this.props; |
@@ -75,7 +74,7 @@ const Select = React.createClass({ | |||
75 | {item.value} | 74 | {item.value} |
76 | </li>); | 75 | </li>); |
77 | }); | 76 | }); |
78 | }, | 77 | } |
79 | 78 | ||
80 | scrollToSelected(duration) { | 79 | scrollToSelected(duration) { |
81 | // move to selected item | 80 | // move to selected item |
@@ -91,16 +90,16 @@ const Select = React.createClass({ | |||
91 | const topOption = list.children[index]; | 90 | const topOption = list.children[index]; |
92 | const to = topOption.offsetTop; | 91 | const to = topOption.offsetTop; |
93 | scrollTo(select, to, duration); | 92 | scrollTo(select, to, duration); |
94 | }, | 93 | } |
95 | 94 | ||
96 | handleMouseEnter(e) { | 95 | handleMouseEnter = (e) => { |
97 | this.setState({ active: true }); | 96 | this.setState({ active: true }); |
98 | this.props.onMouseEnter(e); | 97 | this.props.onMouseEnter(e); |
99 | }, | 98 | } |
100 | 99 | ||
101 | handleMouseLeave() { | 100 | handleMouseLeave = () => { |
102 | this.setState({ active: false }); | 101 | this.setState({ active: false }); |
103 | }, | 102 | } |
104 | 103 | ||
105 | render() { | 104 | render() { |
106 | if (this.props.options.length === 0) { | 105 | if (this.props.options.length === 0) { |
@@ -122,7 +121,7 @@ const Select = React.createClass({ | |||
122 | <ul ref="list">{this.getOptions()}</ul> | 121 | <ul ref="list">{this.getOptions()}</ul> |
123 | </div> | 122 | </div> |
124 | ); | 123 | ); |
125 | }, | 124 | } |
126 | }); | 125 | } |
127 | 126 | ||
128 | export default Select; | 127 | export default Select; |