From 3931819e40ce408d8f7c1a969e160631b376c07e Mon Sep 17 00:00:00 2001 From: Cyril Sobierajewicz Date: Mon, 11 Jun 2018 10:35:05 +0200 Subject: Add a prop to configure whether `esc` should close the panel --- README.md | 1 + src/Header.jsx | 2 +- src/Panel.jsx | 5 ++++- src/TimePicker.jsx | 5 ++++- tests/Header.spec.jsx | 12 ++++++++---- 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 | minuteStep | Number | 1 | interval between minutes in picker | | secondStep | Number | 1 | interval between seconds in picker | | focusOnOpen | Boolean | false | automatically focus the input when the picker opens | +| closeOnEsc | Boolean | true | whether esc should close the picker | | inputReadOnly | Boolean | false | set input to read only | ## 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 { onKeyDown = (e) => { const { onEsc, onKeyDown } = this.props; - if (e.keyCode === 27) { + if (e.keyCode === 27 && onEsc) { onEsc(); } 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 { secondStep: PropTypes.number, addon: PropTypes.func, focusOnOpen: PropTypes.bool, + closeOnEsc: PropTypes.bool, onKeyDown: PropTypes.func, }; @@ -60,6 +61,7 @@ class Panel extends Component { addon: noop, onKeyDown: noop, inputReadOnly: false, + closeOnEsc: true, }; constructor(props) { @@ -117,6 +119,7 @@ class Panel extends Component { disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showMinute, showSecond, format, defaultOpenValue, clearText, onEsc, addon, use12Hours, onClear, focusOnOpen, onKeyDown, hourStep, minuteStep, secondStep, inputReadOnly, + closeOnEsc, } = this.props; const { value, currentSelectPanel, @@ -143,7 +146,7 @@ class Panel extends Component { defaultOpenValue={defaultOpenValue} value={value} currentSelectPanel={currentSelectPanel} - onEsc={onEsc} + onEsc={closeOnEsc ? onEsc : undefined} format={format} placeholder={placeholder} 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 { minuteStep: PropTypes.number, secondStep: PropTypes.number, focusOnOpen: PropTypes.bool, + closeOnEsc: PropTypes.bool, onKeyDown: PropTypes.func, autoFocus: PropTypes.bool, id: PropTypes.string, @@ -86,6 +87,7 @@ export default class Picker extends Component { addon: noop, use12Hours: false, focusOnOpen: false, + closeOnEsc: true, onKeyDown: noop, }; @@ -173,7 +175,7 @@ export default class Picker extends Component { prefixCls, placeholder, disabledHours, disabledMinutes, disabledSeconds, hideDisabledOptions, inputReadOnly, allowEmpty, showHour, showMinute, showSecond, defaultOpenValue, clearText, - addon, use12Hours, focusOnOpen, onKeyDown, hourStep, minuteStep, secondStep, + addon, use12Hours, focusOnOpen, closeOnEsc, onKeyDown, hourStep, minuteStep, secondStep, } = this.props; return ( ); 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', () => { }); }); - it('exit correctly', (done) => { - const picker = renderPicker(); + const closeOnEscSpec = (closeOnEsc) => (done) => { + const picker = renderPicker({ closeOnEsc }); expect(picker.state.open).not.to.be.ok(); const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, 'rc-time-picker-input')[0]; @@ -359,7 +359,7 @@ describe('Header', () => { }); setTimeout(next, 100); }, (next) => { - expect(picker.state.open).to.be(false); + expect(picker.state.open).to.be(!closeOnEsc); expect((header).value).to.be('01:02:03'); expect((input).value).to.be('01:02:03'); @@ -367,7 +367,11 @@ describe('Header', () => { }], () => { done(); }); - }); + }; + + it('exit correctly', closeOnEscSpec(true)); + + it('stays open if `closeOnEsc` is `false`', closeOnEscSpec(false)); it('focus on open', (done) => { const picker = renderPicker({ -- cgit v1.2.3