Fix primefaces#2562: Sidebar allow dismissable on non-modal

melloware · Jan 5, 2022 · 6e44423 · 6e44423
1 parent 0d63772
commit 6e44423
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 5 deletions.
diff --git a/components/doc/sidebar/index.js b/components/doc/sidebar/index.js
@@ -57,7 +57,7 @@ export class SidebarDemo extends Component {
                         <h3>Top Sidebar</h3>
                     </Sidebar>
 
-                    <Sidebar visible={this.state.visibleBottom} position="bottom" onHide={() => this.setState({ visibleBottom: false })}>
+                    <Sidebar visible={this.state.visibleBottom} position="bottom" onHide={() => this.setState({ visibleBottom: false })} modal={false} dismissable>
                         <h3>Bottom Sidebar</h3>
                     </Sidebar>
 
@@ -123,7 +123,7 @@ const SidebarDemo = () => {
                     <h3>Top Sidebar</h3>
                 </Sidebar>
 
-                <Sidebar visible={visibleBottom} position="bottom" onHide={() => setVisibleBottom(false)}>
+                <Sidebar visible={visibleBottom} position="bottom" onHide={() => setVisibleBottom(false)} modal={false} dismissable>
                     <h3>Bottom Sidebar</h3>
                 </Sidebar>
 
@@ -188,7 +188,7 @@ const SidebarDemo = () => {
                     <h3>Top Sidebar</h3>
                 </Sidebar>
 
-                <Sidebar visible={visibleBottom} position="bottom" onHide={() => setVisibleBottom(false)}>
+                <Sidebar visible={visibleBottom} position="bottom" onHide={() => setVisibleBottom(false)} modal={false} dismissable>
                     <h3>Bottom Sidebar</h3>
                 </Sidebar>
 
@@ -256,7 +256,7 @@ const SidebarDemo = () => {
                     <h3>Top Sidebar</h3>
                 </Sidebar>
 
-                <Sidebar visible={visibleBottom} position="bottom" onHide={() => setVisibleBottom(false)}>
+                <Sidebar visible={visibleBottom} position="bottom" onHide={() => setVisibleBottom(false)} modal={false} dismissable>
                     <h3>Bottom Sidebar</h3>
                 </Sidebar>
 

diff --git a/components/lib/sidebar/Sidebar.js b/components/lib/sidebar/Sidebar.js
@@ -139,10 +139,14 @@ export class Sidebar extends Component {
         if (this.props.closeOnEscape) {
             this.bindDocumentEscapeListener();
         }
+        if (this.props.dismissable && !this.props.modal) {
+            this.bindDocumentClickListener();
+        }
     }
 
     unbindGlobalListeners() {
         this.unbindDocumentEscapeListener();
+        this.unbindDocumentClickListener();
     }
 
     bindDocumentEscapeListener() {
@@ -163,6 +167,33 @@ export class Sidebar extends Component {
         }
     }
 
+    bindDocumentClickListener() {
+        if (!this.documentClickListener) {
+            this.documentClickListener = (event) => {
+                if (event.which === 2) { // left click
+                    return;
+                }
+
+                if (this.isOutsideClicked(event)) {
+                    this.onClose(event);
+                }
+            };
+
+            document.addEventListener('click', this.documentClickListener);
+        }
+    }
+
+    unbindDocumentClickListener() {
+        if (this.documentClickListener) {
+            document.removeEventListener('click', this.documentClickListener);
+            this.documentClickListener = null;
+        }
+    }
+
+    isOutsideClicked(event) {
+        return this.sidebarRef && (this.sidebarRef && this.sidebarRef.current && !this.sidebarRef.current.contains(event.target));
+    }
+
     componentDidMount() {
         if (this.props.visible) {
             this.setState({ visible: true }, () => {

diff --git a/pages/sidebar/index.js b/pages/sidebar/index.js
@@ -59,7 +59,7 @@ export default class SidebarDemo extends Component {
                             <h3>Top Sidebar</h3>
                         </Sidebar>
 
-                        <Sidebar visible={this.state.visibleBottom} position="bottom" onHide={() => this.setState({ visibleBottom: false })}>
+                        <Sidebar visible={this.state.visibleBottom} position="bottom" onHide={() => this.setState({ visibleBottom: false })} modal={false} dismissable>
                             <h3>Bottom Sidebar</h3>
                         </Sidebar>