Add a prop to configure whether `<kbd>esc</kbd>` should close the panel

diff --git a/README.md b/README.md
index c0ce889fb8aad71844a93eb0838a5fa96ed47a5e..0370e4067f3c2425caedf8c651802e85bdccad7b 100644 (file)
--- 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 <kbd>esc</kbd> 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 21d557edb2c02591589fcaa4234a053728df7a7f..50fecb82a14966cc904d46021ef4ecd073f10dff 100644 (file)
--- 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 648944d5182ed067e7f795c55727b3c0f8b96b25..1bfe883ac25a6c7996b533236769be5e5eab6d57 100644 (file)
--- 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 26166f48f7790c72920e06d1f465523f83bc975c..1a374f206c301b04aa9d7959393521718a3ca558 100644 (file)
--- 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 (
       <Panel
@@ -202,6 +204,7 @@ export default class Picker extends Component {
         secondStep={secondStep}
         addon={addon}
         focusOnOpen={focusOnOpen}
+        closeOnEsc={closeOnEsc}
         onKeyDown={onKeyDown}
       />
     );

diff --git a/tests/Header.spec.jsx b/tests/Header.spec.jsx
index 4b27abb85fe0fa55ccb924547f7e0091b37341a3..291f9387962a19c159c73151f5eeed6a78297707 100644 (file)
--- 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({