aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorCyril Sobierajewicz <38043722+cyrilfretlink@users.noreply.github.com>2018-06-11 11:42:36 +0200
committerGitHub <noreply@github.com>2018-06-11 11:42:36 +0200
commit273181d5cc2d23808d4302d763bbb7f7fa440c11 (patch)
tree6308553bb431137c20d2d3babb75ff23d4a137ed
parent77862aea6a529152c46fd43dee5fc48fce8100e8 (diff)
parent3931819e40ce408d8f7c1a969e160631b376c07e (diff)
downloadtime-picker-master.tar.gz
time-picker-master.tar.zst
time-picker-master.zip
Merge pull request #1 from cyrilfretlink/close-on-esc-propHEADmaster
Add a prop to configure whether `<kbd>esc</kbd>` should close the panel
-rw-r--r--README.md1
-rw-r--r--src/Header.jsx2
-rw-r--r--src/Panel.jsx5
-rw-r--r--src/TimePicker.jsx5
-rw-r--r--tests/Header.spec.jsx12
5 files changed, 18 insertions, 7 deletions
diff --git a/README.md b/README.md
index c0ce889..0370e40 100644
--- a/README.md
+++ b/README.md
@@ -82,6 +82,7 @@ API
82| minuteStep | Number | 1 | interval between minutes in picker | 82| minuteStep | Number | 1 | interval between minutes in picker |
83| secondStep | Number | 1 | interval between seconds in picker | 83| secondStep | Number | 1 | interval between seconds in picker |
84| focusOnOpen | Boolean | false | automatically focus the input when the picker opens | 84| focusOnOpen | Boolean | false | automatically focus the input when the picker opens |
85| closeOnEsc | Boolean | true | whether <kbd>esc</kbd> should close the picker |
85| inputReadOnly | Boolean | false | set input to read only | 86| inputReadOnly | Boolean | false | set input to read only |
86 87
87## Test Case 88## Test Case
diff --git a/src/Header.jsx b/src/Header.jsx
index 21d557e..50fecb8 100644
--- a/src/Header.jsx
+++ b/src/Header.jsx
@@ -141,7 +141,7 @@ class Header extends Component {
141 141
142 onKeyDown = (e) => { 142 onKeyDown = (e) => {
143 const { onEsc, onKeyDown } = this.props; 143 const { onEsc, onKeyDown } = this.props;
144 if (e.keyCode === 27) { 144 if (e.keyCode === 27 && onEsc) {
145 onEsc(); 145 onEsc();
146 } 146 }
147 147
diff --git a/src/Panel.jsx b/src/Panel.jsx
index 648944d..1bfe883 100644
--- a/src/Panel.jsx
+++ b/src/Panel.jsx
@@ -45,6 +45,7 @@ class Panel extends Component {
45 secondStep: PropTypes.number, 45 secondStep: PropTypes.number,
46 addon: PropTypes.func, 46 addon: PropTypes.func,
47 focusOnOpen: PropTypes.bool, 47 focusOnOpen: PropTypes.bool,
48 closeOnEsc: PropTypes.bool,
48 onKeyDown: PropTypes.func, 49 onKeyDown: PropTypes.func,
49 }; 50 };
50 51
@@ -60,6 +61,7 @@ class Panel extends Component {
60 addon: noop, 61 addon: noop,
61 onKeyDown: noop, 62 onKeyDown: noop,
62 inputReadOnly: false, 63 inputReadOnly: false,
64 closeOnEsc: true,
63 }; 65 };
64 66
65 constructor(props) { 67 constructor(props) {
@@ -117,6 +119,7 @@ class Panel extends Component {
117 disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showMinute, showSecond, 119 disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showMinute, showSecond,
118 format, defaultOpenValue, clearText, onEsc, addon, use12Hours, onClear, 120 format, defaultOpenValue, clearText, onEsc, addon, use12Hours, onClear,
119 focusOnOpen, onKeyDown, hourStep, minuteStep, secondStep, inputReadOnly, 121 focusOnOpen, onKeyDown, hourStep, minuteStep, secondStep, inputReadOnly,
122 closeOnEsc,
120 } = this.props; 123 } = this.props;
121 const { 124 const {
122 value, currentSelectPanel, 125 value, currentSelectPanel,
@@ -143,7 +146,7 @@ class Panel extends Component {
143 defaultOpenValue={defaultOpenValue} 146 defaultOpenValue={defaultOpenValue}
144 value={value} 147 value={value}
145 currentSelectPanel={currentSelectPanel} 148 currentSelectPanel={currentSelectPanel}
146 onEsc={onEsc} 149 onEsc={closeOnEsc ? onEsc : undefined}
147 format={format} 150 format={format}
148 placeholder={placeholder} 151 placeholder={placeholder}
149 hourOptions={hourOptions} 152 hourOptions={hourOptions}
diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx
index 26166f4..1a374f2 100644
--- a/src/TimePicker.jsx
+++ b/src/TimePicker.jsx
@@ -53,6 +53,7 @@ export default class Picker extends Component {
53 minuteStep: PropTypes.number, 53 minuteStep: PropTypes.number,
54 secondStep: PropTypes.number, 54 secondStep: PropTypes.number,
55 focusOnOpen: PropTypes.bool, 55 focusOnOpen: PropTypes.bool,
56 closeOnEsc: PropTypes.bool,
56 onKeyDown: PropTypes.func, 57 onKeyDown: PropTypes.func,
57 autoFocus: PropTypes.bool, 58 autoFocus: PropTypes.bool,
58 id: PropTypes.string, 59 id: PropTypes.string,
@@ -86,6 +87,7 @@ export default class Picker extends Component {
86 addon: noop, 87 addon: noop,
87 use12Hours: false, 88 use12Hours: false,
88 focusOnOpen: false, 89 focusOnOpen: false,
90 closeOnEsc: true,
89 onKeyDown: noop, 91 onKeyDown: noop,
90 }; 92 };
91 93
@@ -173,7 +175,7 @@ export default class Picker extends Component {
173 prefixCls, placeholder, disabledHours, 175 prefixCls, placeholder, disabledHours,
174 disabledMinutes, disabledSeconds, hideDisabledOptions, inputReadOnly, 176 disabledMinutes, disabledSeconds, hideDisabledOptions, inputReadOnly,
175 allowEmpty, showHour, showMinute, showSecond, defaultOpenValue, clearText, 177 allowEmpty, showHour, showMinute, showSecond, defaultOpenValue, clearText,
176 addon, use12Hours, focusOnOpen, onKeyDown, hourStep, minuteStep, secondStep, 178 addon, use12Hours, focusOnOpen, closeOnEsc, onKeyDown, hourStep, minuteStep, secondStep,
177 } = this.props; 179 } = this.props;
178 return ( 180 return (
179 <Panel 181 <Panel
@@ -202,6 +204,7 @@ export default class Picker extends Component {
202 secondStep={secondStep} 204 secondStep={secondStep}
203 addon={addon} 205 addon={addon}
204 focusOnOpen={focusOnOpen} 206 focusOnOpen={focusOnOpen}
207 closeOnEsc={closeOnEsc}
205 onKeyDown={onKeyDown} 208 onKeyDown={onKeyDown}
206 /> 209 />
207 ); 210 );
diff --git a/tests/Header.spec.jsx b/tests/Header.spec.jsx
index 4b27abb..291f938 100644
--- a/tests/Header.spec.jsx
+++ b/tests/Header.spec.jsx
@@ -335,8 +335,8 @@ describe('Header', () => {
335 }); 335 });
336 }); 336 });
337 337
338 it('exit correctly', (done) => { 338 const closeOnEscSpec = (closeOnEsc) => (done) => {
339 const picker = renderPicker(); 339 const picker = renderPicker({ closeOnEsc });
340 expect(picker.state.open).not.to.be.ok(); 340 expect(picker.state.open).not.to.be.ok();
341 const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 341 const input = TestUtils.scryRenderedDOMComponentsWithClass(picker,
342 'rc-time-picker-input')[0]; 342 'rc-time-picker-input')[0];
@@ -359,7 +359,7 @@ describe('Header', () => {
359 }); 359 });
360 setTimeout(next, 100); 360 setTimeout(next, 100);
361 }, (next) => { 361 }, (next) => {
362 expect(picker.state.open).to.be(false); 362 expect(picker.state.open).to.be(!closeOnEsc);
363 expect((header).value).to.be('01:02:03'); 363 expect((header).value).to.be('01:02:03');
364 expect((input).value).to.be('01:02:03'); 364 expect((input).value).to.be('01:02:03');
365 365
@@ -367,7 +367,11 @@ describe('Header', () => {
367 }], () => { 367 }], () => {
368 done(); 368 done();
369 }); 369 });
370 }); 370 };
371
372 it('exit correctly', closeOnEscSpec(true));
373
374 it('stays open if `closeOnEsc` is `false`', closeOnEscSpec(false));
371 375
372 it('focus on open', (done) => { 376 it('focus on open', (done) => {
373 const picker = renderPicker({ 377 const picker = renderPicker({