Fixed #1203 - Add position property to Dialog

primefaces · Feb 25, 2020 · f67734e · f67734e
1 parent c8dbbe3
commit f67734e
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 35 deletions.
diff --git a/src/components/dialog/Dialog.css b/src/components/dialog/Dialog.css
@@ -8,11 +8,11 @@
     pointer-events: none;
 }
 
-.p-dialog-mask.p-component-overlay {
+.p-component-overlay {
     pointer-events: auto;
 }
 
-.p-dialog-mask.p-dialog-visible {
+.p-dialog-visible {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -128,11 +128,6 @@
     transform: none;
 }
 
-.p-dialog-exit {
-    opacity: 1;
-    transform: scale(1);
-}
-
 .p-dialog-exit-active {
     opacity: 0;
     transform: scale(0.7);
@@ -149,50 +144,48 @@
 .p-dialog-bottomleft .p-dialog,
 .p-dialog-bottomright .p-dialog {
     margin: .75em;
-    transform: translate3d(0px, 0px, 0px);
-}
-.p-dialog-top .p-dialog-enter-active,
-.p-dialog-top .p-dialog-leave-active,
-.p-dialog-bottom .p-dialog-enter-active,
-.p-dialog-bottom .p-dialog-leave-active,
-.p-dialog-left .p-dialog-enter-active,
-.p-dialog-left .p-dialog-leave-active,
-.p-dialog-right .p-dialog-enter-active,
-.p-dialog-right .p-dialog-leave-active,
-.p-dialog-topleft .p-dialog-enter-active,
-.p-dialog-topleft .p-dialog-leave-active,
-.p-dialog-topright .p-dialog-enter-active,
-.p-dialog-topright .p-dialog-leave-active,
-.p-dialog-bottomleft .p-dialog-enter-active,
-.p-dialog-bottomleft .p-dialog-leave-active,
-.p-dialog-bottomright .p-dialog-enter-active,
-.p-dialog-bottomright .p-dialog-leave-active {
     transition: all .3s ease-out;
 }
+
 .p-dialog-top .p-dialog-enter,
-.p-dialog-top .p-dialog-leave-to {
+.p-dialog-top .p-dialog-exit-active  {
     transform: translate3d(0px, -100%, 0px);
 }
+
 .p-dialog-bottom .p-dialog-enter,
-.p-dialog-bottom .p-dialog-leave-to {
+.p-dialog-bottom .p-dialog-exit-active {
     transform: translate3d(0px, 100%, 0px);
 }
+
 .p-dialog-left .p-dialog-enter,
-.p-dialog-left .p-dialog-leave-to,
+.p-dialog-left .p-dialog-exit-active,
 .p-dialog-topleft .p-dialog-enter,
-.p-dialog-topleft .p-dialog-leave-to,
+.p-dialog-topleft .p-dialog-exit-active,
 .p-dialog-bottomleft .p-dialog-enter,
-.p-dialog-bottomleft .p-dialog-leave-to {
+.p-dialog-bottomleft .p-dialog-exit-active {
     transform: translate3d(-100%, 0px, 0px);
 }
+
 .p-dialog-right .p-dialog-enter,
-.p-dialog-right .p-dialog-leave-to,
+.p-dialog-right .p-dialog-exit-active,
 .p-dialog-topright .p-dialog-enter,
-.p-dialog-topright .p-dialog-leave-to,
+.p-dialog-topright .p-dialog-exit-active,
 .p-dialog-bottomright .p-dialog-enter,
-.p-dialog-bottomright .p-dialog-leave-to {
+.p-dialog-bottomright .p-dialog-exit-active {
     transform: translate3d(100%, 0px, 0px);
 }
+
+.p-dialog-top .p-dialog-enter-active,
+.p-dialog-bottom .p-dialog-enter-active,
+.p-dialog-left .p-dialog-enter-active,
+.p-dialog-topleft .p-dialog-enter-active,
+.p-dialog-bottomleft .p-dialog-enter-active,
+.p-dialog-right .p-dialog-enter-active,
+.p-dialog-topright .p-dialog-enter-active,
+.p-dialog-bottomright .p-dialog-enter-active {
+    transform: translate3d(0px, 0px, 0px);
+}
+
 /* Maximize */
 .p-dialog-maximized {
     -webkit-transition: none;

diff --git a/src/components/dialog/Dialog.js b/src/components/dialog/Dialog.js
@@ -13,6 +13,7 @@ export class Dialog extends Component {
         header: null,
         footer: null,
         visible: false,
+        position: 'center',
         modal: true,
         onHide: null,
         onShow: null,
@@ -39,6 +40,7 @@ export class Dialog extends Component {
         header: PropTypes.any,
         footer: PropTypes.any,
         visible: PropTypes.bool,
+        position: PropTypes.string,
         modal: PropTypes.bool,
         onHide: PropTypes.func.isRequired,
         onShow: PropTypes.func,
@@ -111,6 +113,13 @@ export class Dialog extends Component {
         event.preventDefault();
     }
 
+    getPositionClass() {
+        const positions = ['center', 'left', 'right', 'top', 'topleft', 'topright', 'bottom', 'bottomleft', 'bottomright'];
+        const pos = positions.find(item => item === this.props.position);
+
+        return pos ? `p-dialog-${pos}` : '';
+    }
+
     get zIndex() {
         return this.props.baseZIndex + DomHandler.generateZIndex();
     }
@@ -336,15 +345,20 @@ export class Dialog extends Component {
         const maskClassName = classNames('p-dialog-mask', {
             'p-component-overlay': this.props.modal,
             'p-dialog-visible': this.state.maskVisible
-        }, this.props.maskClassName);
+        }, this.props.maskClassName, this.getPositionClass());
 
         const header = this.renderHeader();
         const content = this.renderContent();
         const footer = this.renderFooter();
 
+        let transitionTimeout = {
+            enter: this.props.position === 'center' ? 150 : 300,
+            exit: this.props.position === 'center' ? 150 : 300,
+        };
+
         return (
             <div ref={(el) => this.mask = el} className={maskClassName} onClick={this.onMaskClick}>
-                <CSSTransition classNames="p-dialog" timeout={{enter: 150, exit: 150}} in={this.props.visible} unmountOnExit
+                <CSSTransition classNames="p-dialog" timeout={transitionTimeout} in={this.props.visible} unmountOnExit
                     onEntered={this.onEntered} onExit={this.onExit} onExited={this.onExited}>
                     <div ref={el => this.dialog = el} id={this.id} className={className} style={this.props.style} onClick={this.onDialogClick}
                          aria-labelledby={this.id + '_label'} role="dialog" aria-modal={this.props.model}>