-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,
- },
+ };
+
+ 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;
});
let onclick = null;
if (!item.disabled) {
- onclick = this.onSelect.bind(this, +item.value);
+ onclick = this.onSelect.bind(this, item.value);
}
return (<li
className={cls}
{item.value}
</li>);
});
- },
+ }
scrollToSelected(duration) {
// move to selected item
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) {
}
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;