aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--assets/index/Select.less2
-rw-r--r--src/Select.jsx24
-rw-r--r--tests/Select.spec.jsx28
3 files changed, 51 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>
diff --git a/tests/Select.spec.jsx b/tests/Select.spec.jsx
index fd2ec32..2d30098 100644
--- a/tests/Select.spec.jsx
+++ b/tests/Select.spec.jsx
@@ -33,6 +33,34 @@ describe('Select', () => {
33 document.body.removeChild(container); 33 document.body.removeChild(container);
34 }); 34 });
35 35
36 describe('select panel', () => {
37 it('select panel reacts to mouseenter and mouseleave correctly', (done) => {
38 const picker = renderPicker();
39 const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
40 'rc-time-picker-input')[0];
41 async.series([(next) => {
42 Simulate.click(input);
43 setTimeout(next, 100);
44 }, (next) => {
45 const re = /(^|\s+)rc-time-picker-panel-select-active(\s+|$)/;
46 const selector = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
47 'rc-time-picker-panel-select')[0];
48
49 expect(re.test(selector.className)).to.be(false);
50
51 Simulate.mouseEnter(selector);
52 expect(re.test(selector.className)).to.be(true);
53
54 Simulate.mouseLeave(selector);
55 expect(re.test(selector.className)).to.be(false);
56
57 next();
58 }], () => {
59 done();
60 });
61 });
62 });
63
36 describe('select number', () => { 64 describe('select number', () => {
37 it('select number correctly', (done) => { 65 it('select number correctly', (done) => {
38 const picker = renderPicker(); 66 const picker = renderPicker();