Fixed #1138 - Enhance Dialog Positioning

primefaces · Jan 8, 2020 · 7a4051c · 7a4051c
1 parent 85b3b5a
commit 7a4051c
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 72 deletions.
diff --git a/src/components/dialog/Dialog.css b/src/components/dialog/Dialog.css
@@ -1,13 +1,28 @@
+.p-dialog-wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: none;
+    pointer-events: none;
+}
+.p-dialog-wrapper-visible {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.p-dialog-wrapper.p-dialog-mask {
+    pointer-events: auto;
+}
 .p-dialog {
     position: fixed;
     padding: 0;
-    display: none;
     top: 50%;
     left: 50%;
     transform: translateX(-50%) translateY(-50%);
-}
-.p-dialog-visible {
-    display: block;
+    pointer-events: auto;
 }
 .p-dialog .p-dialog-titlebar {
 	padding: .5em .75em;
@@ -64,12 +79,6 @@
     text-align: right;
 }
 
-.p-dialog-mask {
-    position: fixed;
-    width: 100%;
-    height: 100%;
-}
-
 /* ConfirmDialog */
 .p-confirmdialog {
     width: 30em;
@@ -109,7 +118,6 @@
 
 /* Animation */
 .p-dialog-enter {
-    display: block;
     opacity: 0;
     transform: translateX(-50%) translateY(-50%) scale(0.7);
 }
@@ -121,23 +129,21 @@
 }
 
 .p-dialog-enter-done {
-    display: block;
+    position: static;
+    transform: none;
+    top: auto;
+    left: auto;
 }
 
 .p-dialog-exit {
     opacity: 1;
-    display: block;
 }
 
 .p-dialog-exit-active {
     opacity: 0;
     transition: all 75ms cubic-bezier(0.4, 0.0, 0.2, 1);
 }
 
-.p-dialog-exit-done {
-    display: none;
-}
-
 /* Maximize */
 .p-dialog-maximized {
     -webkit-transition: none;
@@ -151,4 +157,4 @@
 .p-dialog-maximized .p-dialog-content {
     -webkit-transition: height .3s;
     transition: height .3s;
-}
+}
diff --git a/src/components/dialog/Dialog.js b/src/components/dialog/Dialog.js
@@ -27,7 +27,7 @@ export class Dialog extends Component {
         appendTo: null,
         baseZIndex: 0,
         maximizable: false,
-        blockScroll: true,
+        blockScroll: false,
         iconsTemplate: null,
         ariaCloseIconLabel: 'Close',
         focusOnShow: true
@@ -57,14 +57,15 @@ export class Dialog extends Component {
         ariaCloseIconLabel: PropTypes.string,
         focusOnShow: PropTypes.bool
     };
-    
+
     constructor(props) {
         super(props);
         this.state = {
             maximized: false
         };
         this.onClose = this.onClose.bind(this);
         this.toggleMaximize = this.toggleMaximize.bind(this);
+        this.onMaskClick = this.onMaskClick.bind(this);
 
         this.id = this.props.id || UniqueComponentId();
     }
@@ -75,14 +76,11 @@ export class Dialog extends Component {
     }
 
     hide() {
-        this.unbindMaskClickListener();
         this.unbindGlobalListeners();
-        
+
         this.props.onHide();
 
-        if (this.props.modal) {
-            this.disableModality();
-        }
+        this.disableModality();
 
         if (this.state.maximized) {
             DomHandler.removeClass(document.body, 'p-overflow-hidden');
@@ -98,26 +96,24 @@ export class Dialog extends Component {
 
     show() {
         this.bindGlobalListeners();
-        
+
         if (this.props.onShow) {
             this.props.onShow();
         }
-        
+
         this.container.style.zIndex = String(this.props.baseZIndex + DomHandler.generateZIndex());
-        
+
         if (this.props.focusOnShow) {
             this.focus();
         }
 
-        if (this.props.modal) {
-            this.enableModality();
-        }
+        this.enableModality();
 
         if (this.state.maximized) {
             DomHandler.removeClass(document.body, 'p-overflow-hidden');
         }
     }
-    
+
     toggleMaximize(event) {
         this.setState({
             maximized: !this.state.maximized
@@ -138,21 +134,10 @@ export class Dialog extends Component {
         DomHandler.removeClass(document.body, 'p-overflow-hidden');
         this.contentElement.style.minHeight = 'auto';
     }
-   
+
     enableModality() {
-        if (!this.mask) {
-            this.mask = document.createElement('div');
+        if (this.mask) {
             this.mask.style.zIndex = String(parseInt(this.container.style.zIndex, 10) - 1);
-            DomHandler.addMultipleClasses(this.mask, 'p-component-overlay p-dialog-mask');
-
-            if (this.props.closable && this.props.dismissableMask) {
-                this.maskClickListener = (event) => {
-                   this.onClose(event);
-                };
-
-                this.mask.addEventListener('click', this.maskClickListener);
-            }
-            document.body.appendChild(this.mask);
 
             if (this.props.blockScroll) {
                 DomHandler.addClass(document.body, 'p-overflow-hidden');
@@ -161,34 +146,27 @@ export class Dialog extends Component {
     }
 
     disableModality() {
-        if (this.mask) {
-            this.unbindMaskClickListener();
-
-            document.body.removeChild(this.mask);
-            if (this.props.blockScroll) {
-                DomHandler.removeClass(document.body, 'p-overflow-hidden');
-            }
-            this.mask = null;
+        if (this.props.blockScroll) {
+            DomHandler.removeClass(document.body, 'p-overflow-hidden');
         }
     }
 
-    unbindMaskClickListener() {
-        if (this.maskClickListener) {
-            this.mask.removeEventListener('click', this.maskClickListener);
-            this.maskClickListener = null;
-		}
+    onMaskClick(event) {
+        if (this.props.modal && this.props.closable && this.props.dismissableMask) {
+            this.onClose(event);
+        }
     }
 
-    bindGlobalListeners() {     
+    bindGlobalListeners() {
         if (this.props.closeOnEscape && this.props.closable) {
             this.bindDocumentEscapeListener();
         }
     }
-    
+
     unbindGlobalListeners() {
         this.unbindDocumentEscapeListener();
     }
-    
+
     bindDocumentEscapeListener() {
         this.documentEscapeListener = (event) => {
             if (event.which === 27) {
@@ -199,7 +177,7 @@ export class Dialog extends Component {
         };
         document.addEventListener('keydown', this.documentEscapeListener);
     }
-    
+
     unbindDocumentEscapeListener() {
         if (this.documentEscapeListener) {
             document.removeEventListener('keydown', this.documentEscapeListener);
@@ -235,7 +213,6 @@ export class Dialog extends Component {
     componentWillUnmount() {
         this.disableModality();
         this.unbindGlobalListeners();
-		this.unbindMaskClickListener();
     }
 
     renderCloseIcon() {
@@ -327,22 +304,24 @@ export class Dialog extends Component {
         const footer = this.renderFooter();
 
         return (
-            <CSSTransition classNames="p-dialog" timeout={{enter: 150, exit: 75}} in={this.props.visible}>
-                <div id={this.id} className={className} style={this.props.style} ref={el => this.container = el} aria-labelledby={this.id + '_label'} role="dialog">
-                    {header}
-                    {content}
-                    {footer}
-                </div>
-            </CSSTransition>
+            <div ref={(el) => this.mask = el} className={classNames('p-dialog-wrapper', { 'p-component-overlay p-dialog-mask': this.props.modal, 'p-dialog-wrapper-visible': this.props.visible })} onClick={this.onMaskClick}>
+                <CSSTransition classNames="p-dialog" timeout={{enter: 150, exit: 75}} in={this.props.visible}>
+                    <div id={this.id} className={className} style={this.props.style} ref={el => this.container = el} aria-labelledby={this.id + '_label'} role="dialog">
+                        {header}
+                        {content}
+                        {footer}
+                    </div>
+                </CSSTransition>
+            </div>
         );
     }
 
     render() {
         const element = this.renderElement();
-    
+
         if (this.props.appendTo)
             return ReactDOM.createPortal(element, this.props.appendTo);
         else
             return element;
     }
-}
+}