aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--README.md1
-rw-r--r--examples/open.js7
-rw-r--r--src/Header.jsx12
-rw-r--r--src/Panel.jsx4
-rw-r--r--src/TimePicker.jsx5
-rw-r--r--tests/Header.spec.jsx28
6 files changed, 54 insertions, 3 deletions
diff --git a/README.md b/README.md
index a2758b9..0698d7d 100644
--- a/README.md
+++ b/README.md
@@ -77,6 +77,7 @@ API
77| name | String | - | sets the name of the generated input | 77| name | String | - | sets the name of the generated input |
78| onOpen | Function({ open }) | | when TimePicker panel is opened | 78| onOpen | Function({ open }) | | when TimePicker panel is opened |
79| onClose | Function({ open }) | | when TimePicker panel is opened | 79| onClose | Function({ open }) | | when TimePicker panel is opened |
80| focusOnOpen | Boolean | false | automatically focus the input when the picker opens |
80 81
81## Test Case 82## Test Case
82 83
diff --git a/examples/open.js b/examples/open.js
index 8e4f5de..12d8a8d 100644
--- a/examples/open.js
+++ b/examples/open.js
@@ -22,7 +22,12 @@ class App extends React.Component {
22 return ( 22 return (
23 <div> 23 <div>
24 <button onClick={this.toggleOpen}>Toggle open</button> 24 <button onClick={this.toggleOpen}>Toggle open</button>
25 <TimePicker open={this.state.open} onOpen={this.setOpen} onClose={this.setOpen} /> 25 <TimePicker
26 open={this.state.open}
27 onOpen={this.setOpen}
28 onClose={this.setOpen}
29 focusOnOpen
30 />
26 </div> 31 </div>
27 ); 32 );
28 } 33 }
diff --git a/src/Header.jsx b/src/Header.jsx
index f6dd241..1520d25 100644
--- a/src/Header.jsx
+++ b/src/Header.jsx
@@ -22,6 +22,7 @@ class Header extends Component {
22 allowEmpty: PropTypes.bool, 22 allowEmpty: PropTypes.bool,
23 defaultOpenValue: PropTypes.object, 23 defaultOpenValue: PropTypes.object,
24 currentSelectPanel: PropTypes.string, 24 currentSelectPanel: PropTypes.string,
25 focusOnOpen: PropTypes.bool,
25 onKeyDown: PropTypes.func, 26 onKeyDown: PropTypes.func,
26 }; 27 };
27 28
@@ -34,6 +35,17 @@ class Header extends Component {
34 }; 35 };
35 } 36 }
36 37
38 componentDidMount() {
39 if (this.props.focusOnOpen) {
40 // Wait one frame for the panel to be positioned before focusing
41 const requestAnimationFrame = (window.requestAnimationFrame || window.setTimeout);
42 requestAnimationFrame(() => {
43 this.refs.input.focus();
44 this.refs.input.select();
45 });
46 }
47 }
48
37 componentWillReceiveProps(nextProps) { 49 componentWillReceiveProps(nextProps) {
38 const { value, format } = nextProps; 50 const { value, format } = nextProps;
39 this.setState({ 51 this.setState({
diff --git a/src/Panel.jsx b/src/Panel.jsx
index 8a6c872..957c021 100644
--- a/src/Panel.jsx
+++ b/src/Panel.jsx
@@ -40,6 +40,7 @@ class Panel extends Component {
40 onClear: PropTypes.func, 40 onClear: PropTypes.func,
41 use12Hours: PropTypes.bool, 41 use12Hours: PropTypes.bool,
42 addon: PropTypes.func, 42 addon: PropTypes.func,
43 focusOnOpen: PropTypes.bool,
43 onKeyDown: PropTypes.func, 44 onKeyDown: PropTypes.func,
44 }; 45 };
45 46
@@ -91,7 +92,7 @@ class Panel extends Component {
91 const { 92 const {
92 prefixCls, className, placeholder, disabledHours, disabledMinutes, 93 prefixCls, className, placeholder, disabledHours, disabledMinutes,
93 disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showMinute, showSecond, 94 disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showMinute, showSecond,
94 format, defaultOpenValue, clearText, onEsc, addon, use12Hours, onClear, onKeyDown, 95 format, defaultOpenValue, clearText, onEsc, addon, use12Hours, onClear, focusOnOpen, onKeyDown,
95 } = this.props; 96 } = this.props;
96 const { 97 const {
97 value, currentSelectPanel, 98 value, currentSelectPanel,
@@ -124,6 +125,7 @@ class Panel extends Component {
124 onChange={this.onChange} 125 onChange={this.onChange}
125 onClear={onClear} 126 onClear={onClear}
126 allowEmpty={allowEmpty} 127 allowEmpty={allowEmpty}
128 focusOnOpen={focusOnOpen}
127 onKeyDown={onKeyDown} 129 onKeyDown={onKeyDown}
128 /> 130 />
129 <Combobox 131 <Combobox
diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx
index 271515d..70327d7 100644
--- a/src/TimePicker.jsx
+++ b/src/TimePicker.jsx
@@ -48,6 +48,7 @@ export default class Picker extends Component {
48 name: PropTypes.string, 48 name: PropTypes.string,
49 autoComplete: PropTypes.string, 49 autoComplete: PropTypes.string,
50 use12Hours: PropTypes.bool, 50 use12Hours: PropTypes.bool,
51 focusOnOpen: PropTypes.bool,
51 onKeyDown: PropTypes.func, 52 onKeyDown: PropTypes.func,
52 }; 53 };
53 54
@@ -76,6 +77,7 @@ export default class Picker extends Component {
76 onBlur: noop, 77 onBlur: noop,
77 addon: noop, 78 addon: noop,
78 use12Hours: false, 79 use12Hours: false,
80 focusOnOpen: false,
79 onKeyDown: noop, 81 onKeyDown: noop,
80 }; 82 };
81 83
@@ -163,7 +165,7 @@ export default class Picker extends Component {
163 prefixCls, placeholder, disabledHours, 165 prefixCls, placeholder, disabledHours,
164 disabledMinutes, disabledSeconds, hideDisabledOptions, 166 disabledMinutes, disabledSeconds, hideDisabledOptions,
165 allowEmpty, showHour, showMinute, showSecond, defaultOpenValue, clearText, 167 allowEmpty, showHour, showMinute, showSecond, defaultOpenValue, clearText,
166 addon, use12Hours, onKeyDown, 168 addon, use12Hours, focusOnOpen, onKeyDown,
167 } = this.props; 169 } = this.props;
168 return ( 170 return (
169 <Panel 171 <Panel
@@ -187,6 +189,7 @@ export default class Picker extends Component {
187 hideDisabledOptions={hideDisabledOptions} 189 hideDisabledOptions={hideDisabledOptions}
188 use12Hours={use12Hours} 190 use12Hours={use12Hours}
189 addon={addon} 191 addon={addon}
192 focusOnOpen={focusOnOpen}
190 onKeyDown={onKeyDown} 193 onKeyDown={onKeyDown}
191 /> 194 />
192 ); 195 );
diff --git a/tests/Header.spec.jsx b/tests/Header.spec.jsx
index 5ab0ba0..4b27abb 100644
--- a/tests/Header.spec.jsx
+++ b/tests/Header.spec.jsx
@@ -368,5 +368,33 @@ describe('Header', () => {
368 done(); 368 done();
369 }); 369 });
370 }); 370 });
371
372 it('focus on open', (done) => {
373 const picker = renderPicker({
374 focusOnOpen: true,
375 });
376 expect(picker.state.open).not.to.be.ok();
377 const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
378 'rc-time-picker-input')[0];
379 let header;
380 async.series([(next) => {
381 expect(picker.state.open).to.be(false);
382
383 Simulate.click(input);
384 setTimeout(next, 100);
385 }, (next) => {
386 // this touches the focusOnOpen code, but we cannot verify the input is in focus
387 expect(picker.state.open).to.be(true);
388 header = TestUtils.scryRenderedDOMComponentsWithClass(picker.panelInstance,
389 'rc-time-picker-panel-input')[0];
390 expect(header).to.be.ok();
391 expect((header).value).to.be('01:02:03');
392 expect((input).value).to.be('01:02:03');
393
394 next();
395 }], () => {
396 done();
397 });
398 });
371 }); 399 });
372}); 400});