aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--assets/index/Select.less2
-rw-r--r--src/Select.jsx24
2 files changed, 23 insertions, 3 deletions
diff --git a/assets/index/Select.less b/assets/index/Select.less
index 13b5b18..8bec4a0 100644
--- a/assets/index/Select.less
+++ b/assets/index/Select.less
@@ -9,7 +9,7 @@
9 overflow: hidden; 9 overflow: hidden;
10 position: relative; // Fix chrome weird render bug 10 position: relative; // Fix chrome weird render bug
11 11
12 &:hover { 12 &-active {
13 overflow-y: auto; 13 overflow-y: auto;
14 } 14 }
15 15
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>