Fixed #1046 - Add closeOnEscape property to Sidebar

primefaces · Oct 15, 2019 · 0955f28 · 0955f28
1 parent 8a246da
commit 0955f28
Showing 1 changed file with 25 additions and 0 deletions.
diff --git a/src/components/sidebar/Sidebar.js b/src/components/sidebar/Sidebar.js
@@ -16,6 +16,7 @@ export class Sidebar extends Component {
         baseZIndex: 0,
         dismissable: true,
         showCloseIcon: true,
+        closeOnEscape: true,
         iconsTemplate: null,
         modal: true,
         onShow: null,
@@ -33,6 +34,7 @@ export class Sidebar extends Component {
         baseZIndex: PropTypes.number,
         dismissable: PropTypes.bool,
         showCloseIcon: PropTypes.bool,
+        closeOnEscape: PropTypes.bool,
         iconsTemplate: PropTypes.func,
         modal: PropTypes.bool,
         onShow: PropTypes.func,
@@ -71,6 +73,10 @@ export class Sidebar extends Component {
             this.enableModality();
         }
 
+        if (this.props.closeOnEscape) {
+            this.bindDocumentEscapeListener();
+        }
+
         if (this.closeIcon) {
             this.closeIcon.focus();
         }
@@ -133,12 +139,31 @@ export class Sidebar extends Component {
 
     onHide() {
         this.unbindMaskClickListener();
+        this.unbindDocumentEscapeListener();
 
         if (this.props.modal) {
             this.disableModality();
         }
     }
 
+    bindDocumentEscapeListener() {
+        this.documentEscapeListener = (event) => {
+            if (event.which === 27) {
+                if (parseInt(this.container.style.zIndex, 10) === (DomHandler.getCurrentZIndex() + this.props.baseZIndex)) {
+                    this.onCloseClick(event);
+                }
+            }
+        };
+        document.addEventListener('keydown', this.documentEscapeListener);
+    }
+
+    unbindDocumentEscapeListener() {
+        if (this.documentEscapeListener) {
+            document.removeEventListener('keydown', this.documentEscapeListener);
+            this.documentEscapeListener = null;
+        }
+    }
+
     bindMaskClickListener() {
         if (!this.maskClickListener) {
             this.maskClickListener = (event) => {