diff options
Diffstat (limited to 'src/Select.jsx')
-rw-r--r-- | src/Select.jsx | 24 |
1 files changed, 22 insertions, 2 deletions
diff --git a/src/Select.jsx b/src/Select.jsx index 5733b1a..deb155d 100644 --- a/src/Select.jsx +++ b/src/Select.jsx | |||
@@ -32,6 +32,12 @@ const Select = React.createClass({ | |||
32 | onMouseEnter: PropTypes.func, | 32 | onMouseEnter: PropTypes.func, |
33 | }, | 33 | }, |
34 | 34 | ||
35 | getInitialState() { | ||
36 | return { | ||
37 | active: false, | ||
38 | }; | ||
39 | }, | ||
40 | |||
35 | componentDidMount() { | 41 | componentDidMount() { |
36 | // jump to selected option | 42 | // jump to selected option |
37 | this.scrollToSelected(0); | 43 | this.scrollToSelected(0); |
@@ -87,17 +93,31 @@ const Select = React.createClass({ | |||
87 | scrollTo(select, to, duration); | 93 | scrollTo(select, to, duration); |
88 | }, | 94 | }, |
89 | 95 | ||
96 | handleMouseEnter(e) { | ||
97 | this.setState({ active: true }); | ||
98 | this.props.onMouseEnter(e); | ||
99 | }, | ||
100 | |||
101 | handleMouseLeave() { | ||
102 | this.setState({ active: false }); | ||
103 | }, | ||
104 | |||
90 | render() { | 105 | render() { |
91 | if (this.props.options.length === 0) { | 106 | if (this.props.options.length === 0) { |
92 | return null; | 107 | return null; |
93 | } | 108 | } |
94 | 109 | ||
95 | const { prefixCls } = this.props; | 110 | const { prefixCls } = this.props; |
111 | const cls = classnames({ | ||
112 | [`${prefixCls}-select`]: 1, | ||
113 | [`${prefixCls}-select-active`]: this.state.active, | ||
114 | }); | ||
96 | 115 | ||
97 | return ( | 116 | return ( |
98 | <div | 117 | <div |
99 | className={`${prefixCls}-select`} | 118 | className={cls} |
100 | onMouseEnter={this.props.onMouseEnter} | 119 | onMouseEnter={this.handleMouseEnter} |
120 | onMouseLeave={this.handleMouseLeave} | ||
101 | > | 121 | > |
102 | <ul ref="list">{this.getOptions()}</ul> | 122 | <ul ref="list">{this.getOptions()}</ul> |
103 | </div> | 123 | </div> |