aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/Select.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/Select.jsx')
-rw-r--r--src/Select.jsx41
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 @@
1import React, { PropTypes } from 'react'; 1import React, { Component } from 'react';
2import PropTypes from 'prop-types';
2import ReactDom from 'react-dom'; 3import ReactDom from 'react-dom';
3import classnames from 'classnames'; 4import classnames from 'classnames';
4 5
@@ -22,38 +23,36 @@ const scrollTo = (element, to, duration) => {
22 }); 23 });
23}; 24};
24 25
25const Select = React.createClass({ 26class 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
128export default Select; 127export default Select;