Fixed #377

primefaces · Jul 3, 2018 · 38adb83 · 38adb83
1 parent 465e813
commit 38adb83
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 8 deletions.
diff --git a/src/components/sidebar/Sidebar.d.ts b/src/components/sidebar/Sidebar.d.ts
@@ -9,6 +9,8 @@ interface SidebarProps {
     fullScreen?: boolean;
     blockScroll?: boolean;
     baseZIndex?: number;
+    dismissable?: boolean;
+    showCloseIcon?: boolean;
     onShow?(): void;
     onHide(): void;
 }

diff --git a/src/components/sidebar/Sidebar.js b/src/components/sidebar/Sidebar.js
@@ -14,6 +14,8 @@ export class Sidebar extends Component {
         fullScreen: false,
         blockScroll: false,
         baseZIndex: 0,
+        dismissable: true,
+        showCloseIcon: true,
         onShow: null,
         onHide: null
     };
@@ -27,6 +29,8 @@ export class Sidebar extends Component {
         fullScreen: PropTypes.bool,
         blockScroll: PropTypes.bool,
         baseZIndex: PropTypes.number,
+        dismissable: PropTypes.bool,
+        showCloseIcon: PropTypes.bool,
         onShow: PropTypes.func,
         onHide: PropTypes.func.isRequired
     };
@@ -70,11 +74,12 @@ export class Sidebar extends Component {
             this.mask = document.createElement('div');
             this.mask.style.zIndex = String(parseInt(this.container.style.zIndex, 10) - 1);
             DomHandler.addMultipleClasses(this.mask, 'ui-widget-overlay ui-sidebar-mask');
-            this.maskClickListener = (event) => {
-                this.onCloseClick(event);
-            };
-            this.mask.addEventListener('click', this.maskClickListener);
+            if (this.props.dismissable) {
+                this.bindMaskClickListener();
+            }
+
             document.body.appendChild(this.mask);
+
             if (this.props.blockScroll) {
                 DomHandler.addClass(document.body, 'ui-overflow-hidden');
             }
@@ -85,7 +90,7 @@ export class Sidebar extends Component {
         if (this.mask) {
             this.unbindMaskClickListener();
             document.body.removeChild(this.mask);
-            if(this.props.blockScroll) {
+            if (this.props.blockScroll) {
                 DomHandler.removeClass(document.body, 'ui-overflow-hidden');
             }
             this.mask = null;
@@ -102,22 +107,43 @@ export class Sidebar extends Component {
         this.disableModality();
     }
 
+    bindMaskClickListener() {
+        if (!this.maskClickListener) {
+            this.maskClickListener = (event) => {
+                this.onCloseClick(event);
+            };
+            this.mask.addEventListener('click', this.maskClickListener);
+        }
+    }
+
     unbindMaskClickListener() {
         if (this.maskClickListener) {
             this.mask.removeEventListener('click', this.maskClickListener);
             this.maskClickListener = null;
         }
     }
 
+    renderCloseIcon() {
+        if (this.props.showCloseIcon) {
+            return (
+                <a className="ui-sidebar-close ui-corner-all" role="button" onClick={this.onCloseClick}>
+                    <span className="pi pi-times"/>
+                </a>
+            );
+        }
+        else {
+            return null;
+        }
+    }
+
     render() {
         const className = classNames('ui-sidebar ui-widget ui-widget-content ui-shadow', this.props.className, 'ui-sidebar-' + this.props.position,
                                        {'ui-sidebar-active': this.props.visible, 'ui-sidebar-full': this.props.fullScreen});
+        const closeIcon = this.renderCloseIcon();
 
         return (
             <div ref={(el) => this.container=el} id={this.props.id} className={className} style={this.props.style}>
-                <a className="ui-sidebar-close ui-corner-all" role="button" onClick={this.onCloseClick}>
-                    <span className="pi pi-times"/>
-                </a>
+                {closeIcon}
                 {this.props.children}
             </div>
         );

diff --git a/src/showcase/sidebar/SidebarDemo.js b/src/showcase/sidebar/SidebarDemo.js
@@ -200,6 +200,18 @@ import {Sidebar} from 'primereact/sidebar';
                                         <td>0</td>
                                         <td>Base zIndex value to use in layering.</td>
                                     </tr>
+                                    <tr>
+                                        <td>dismissable</td>
+                                        <td>boolean</td>
+                                        <td>true</td>
+                                        <td>Whether clicking outside closes the panel.</td>
+                                    </tr>
+                                    <tr>
+                                        <td>showCloseIcon</td>
+                                        <td>boolean</td>
+                                        <td>true</td>
+                                        <td>Whether to display a close icon inside the panel.</td>
+                                    </tr>
                                 </tbody>
                             </table>
                         </div>