Merge pull request #41 from react-component/fix-react-15.5-warning

[github/fretlink/time-picker.git] / src / Select.jsx

diff --git a/src/Select.jsx b/src/Select.jsx
index 238a776811cc913eb21feb389c17b40b91f3d6a5..49fed5b83c6911767c60d2156d7dd552ffedc5d3 100644 (file)
--- a/src/Select.jsx
+++ b/src/Select.jsx
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import ReactDom from 'react-dom';
 import classnames from 'classnames';
 
@@ -22,32 +23,36 @@ const scrollTo = (element, to, duration) => {
   });
 };
 
-const Select = React.createClass({
-  propTypes: {
+class Select extends Component {
+  static propTypes = {
     prefixCls: PropTypes.string,
     options: PropTypes.array,
     selectedIndex: PropTypes.number,
     type: PropTypes.string,
     onSelect: PropTypes.func,
     onMouseEnter: PropTypes.func,
-  },
+  };
+
+  state = {
+    active: false,
+  };
 
   componentDidMount() {
     // jump to selected option
     this.scrollToSelected(0);
-  },
+  }
 
   componentDidUpdate(prevProps) {
     // smooth scroll to selected option
     if (prevProps.selectedIndex !== this.props.selectedIndex) {
       this.scrollToSelected(120);
     }
-  },
+  }
 
-  onSelect(value) {
+  onSelect = (value) => {
     const { onSelect, type } = this.props;
     onSelect(type, value);
-  },
+  }
 
   getOptions() {
     const { options, selectedIndex, prefixCls } = this.props;
@@ -58,7 +63,7 @@ const Select = React.createClass({
       });
       let onclick = null;
       if (!item.disabled) {
-        onclick = this.onSelect.bind(this, +item.value);
+        onclick = this.onSelect.bind(this, item.value);
       }
       return (<li
         className={cls}
@@ -69,7 +74,7 @@ const Select = React.createClass({
         {item.value}
       </li>);
     });
-  },
+  }
 
   scrollToSelected(duration) {
     // move to selected item
@@ -85,7 +90,16 @@ const Select = React.createClass({
     const topOption = list.children[index];
     const to = topOption.offsetTop;
     scrollTo(select, to, duration);
-  },
+  }
+
+  handleMouseEnter = (e) => {
+    this.setState({ active: true });
+    this.props.onMouseEnter(e);
+  }
+
+  handleMouseLeave = () => {
+    this.setState({ active: false });
+  }
 
   render() {
     if (this.props.options.length === 0) {
@@ -93,16 +107,21 @@ const Select = React.createClass({
     }
 
     const { prefixCls } = this.props;
+    const cls = classnames({
+      [`${prefixCls}-select`]: 1,
+      [`${prefixCls}-select-active`]: this.state.active,
+    });
 
     return (
       <div
-        className={`${prefixCls}-select`}
-        onMouseEnter={this.props.onMouseEnter}
+        className={cls}
+        onMouseEnter={this.handleMouseEnter}
+        onMouseLeave={this.handleMouseLeave}
       >
         <ul ref="list">{this.getOptions()}</ul>
       </div>
     );
-  },
-});
+  }
+}
 
 export default Select;