-import React, { PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
import ReactDom from 'react-dom';
import classnames from 'classnames';
});
};
-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,
- },
+ };
- getInitialState() {
- return {
- active: false,
- };
- },
+ 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;
{item.value}
</li>);
});
- },
+ }
scrollToSelected(duration) {
// move to selected item
const topOption = list.children[index];
const to = topOption.offsetTop;
scrollTo(select, to, duration);
- },
+ }
- handleMouseEnter(e) {
+ handleMouseEnter = (e) => {
this.setState({ active: true });
this.props.onMouseEnter(e);
- },
+ }
- handleMouseLeave() {
+ handleMouseLeave = () => {
this.setState({ active: false });
- },
+ }
render() {
if (this.props.options.length === 0) {
<ul ref="list">{this.getOptions()}</ul>
</div>
);
- },
-});
+ }
+}
export default Select;