From 41f627fae086106a3bb18ea69b738a174ea285c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Merve=20=C3=96z=C3=A7if=C3=A7i?= <merveozcifci7@gmail.com>
Date: Tue, 13 Mar 2018 10:08:40 +0300
Subject: [PATCH] Fixed #339

---
 src/components/dialog/Dialog.d.ts |  3 ++
 src/components/dialog/Dialog.js   | 48 ++++++++++++++++++++++++-------
 src/showcase/dialog/DialogDemo.js | 16 +++++++++--
 3 files changed, 54 insertions(+), 13 deletions(-)

diff --git a/src/components/dialog/Dialog.d.ts b/src/components/dialog/Dialog.d.ts
index fdc724a016..2eeca2300d 100644
--- a/src/components/dialog/Dialog.d.ts
+++ b/src/components/dialog/Dialog.d.ts
@@ -27,6 +27,9 @@ interface DialogProps {
     positionLeft?: number;
     positionTop?: number;
     appendTo?: HTMLElement;
+    baseZIndex?: number;
+    minX?: number;
+    minY?: number;
 }
 
 export class Dialog extends React.Component<DialogProps,any> {}
\ No newline at end of file
diff --git a/src/components/dialog/Dialog.js b/src/components/dialog/Dialog.js
index cfeffd8df8..2e476c1dc5 100644
--- a/src/components/dialog/Dialog.js
+++ b/src/components/dialog/Dialog.js
@@ -34,7 +34,9 @@ export class Dialog extends Component {
         positionLeft: -1,
         positionTop: -1,
         appendTo: null,
-        baseZIndex: 0
+        baseZIndex: 0,
+        minX: 0,
+        minY: 0
     }
 
     static propTypes = {
@@ -64,7 +66,9 @@ export class Dialog extends Component {
         positionLeft: PropTypes.number,
         positionTop: PropTypes.number,
         appendTo: PropTypes.object,
-        baseZIndex: PropTypes.number
+        baseZIndex: PropTypes.number,
+        minX: PropTypes.number,
+        minY: PropTypes.number
     };
     
     constructor(props) {
@@ -225,14 +229,20 @@ export class Dialog extends Component {
 
     onDrag(event) {
         if(this.dragging) {
-            var deltaX = event.pageX - this.lastPageX;
-            var deltaY = event.pageY - this.lastPageY;
-            var leftPos = parseFloat(this.container.style.left);
-            var topPos = parseFloat(this.container.style.top);
-
-            this.container.style.left = leftPos + deltaX + 'px';
-            this.container.style.top = topPos + deltaY + 'px';
-            
+            let deltaX = event.pageX - this.lastPageX;
+            let deltaY = event.pageY - this.lastPageY;
+            let leftPos = parseFloat(this.container.style.left) + deltaX;
+            let topPos = parseFloat(this.container.style.top) + deltaY;
+
+            if(leftPos >= this.props.minX) {
+                this.container.style.left = leftPos + 'px';
+            }
+
+            if(topPos >= this.props.minY) {
+                this.container.style.top = topPos + 'px';
+            }
+
+
             this.lastPageX = event.pageX;
             this.lastPageY = event.pageY;
         }
@@ -280,6 +290,7 @@ export class Dialog extends Component {
     bindGlobalListeners() {
         if(this.props.draggable) {
             this.bindDocumentDragListener();
+            this.bindDocumentDragEndListener();
         }
         
         if(this.props.resizable) {
@@ -297,6 +308,7 @@ export class Dialog extends Component {
     
     unbindGlobalListeners() {
         this.unbindDocumentDragListener();
+        this.unbindDocumentDragEndListener();
         this.unbindDocumentResizeListeners();
         this.unbindDocumentResponsiveListener();
         this.unbindDocumentEscapeListener();
@@ -315,6 +327,20 @@ export class Dialog extends Component {
             this.documentDragListener = null;
         }
     }
+
+    bindDocumentDragEndListener() {
+        this.documentDragEndListener = (event) => {
+            this.endDrag(event);
+        };
+        document.addEventListener('mouseup', this.documentDragEndListener);
+    }
+
+    unbindDocumentDragEndListener() {
+        if(this.documentDragEndListener) {
+            document.removeEventListener('mouseup', this.documentDragEndListener);
+            this.documentDragEndListener = null;
+        }
+    }
     
     bindDocumentResizeListeners() {
         this.documentResizeListener = (event) => {
@@ -428,7 +454,7 @@ export class Dialog extends Component {
             let closeIcon = this.renderCloseIcon();
 
             return (
-                <div className="ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-corner-top" onMouseDown={this.initDrag} onMouseUp={this.endDrag}>
+                <div className="ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-corner-top" onMouseDown={this.initDrag}>
                     <span id={this.id + '_label'} className="ui-dialog-title">{this.props.header}</span>
                     {closeIcon}
                 </div>
diff --git a/src/showcase/dialog/DialogDemo.js b/src/showcase/dialog/DialogDemo.js
index 01f96777cc..5f7b75c175 100644
--- a/src/showcase/dialog/DialogDemo.js
+++ b/src/showcase/dialog/DialogDemo.js
@@ -38,7 +38,7 @@ export class DialogDemo extends Component {
                 </div>
 
                 <div className="content-section implementation">
-                    <Dialog header="Godfather I" visible={this.state.visible} width="350px" modal={true} footer={footer} onHide={this.onHide} appendTo={document.body}>
+                    <Dialog header="Godfather I" visible={this.state.visible} width="350px" modal={true} footer={footer} minY={70} onHide={this.onHide} appendTo={document.body}>
                         The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. 
                         His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. 
                         Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, 
@@ -284,6 +284,18 @@ let footer = <div>
                             <td>0</td>
                             <td>Base zIndex value to use in layering.</td>
                         </tr>
+                        <tr>
+                            <td>minX</td>
+                            <td>number</td>
+                            <td>0</td>
+                            <td>Minimum value for the left coordinate of dialog in dragging.</td>
+                        </tr>
+                        <tr>
+                            <td>minY</td>
+                            <td>number</td>
+                            <td>0</td>
+                            <td>Minimum value for the top coordinate of dialog in dragging.</td>
+                        </tr>
                     </tbody>
                 </table>
             </div>
@@ -404,7 +416,7 @@ export class DialogDemo extends Component {
                 </div>
 
                 <div className="content-section implementation">
-                    <Dialog header="Godfather I" visible={this.state.visible} width="350px" modal={true} footer={footer} onHide={this.onHide}>
+                    <Dialog header="Godfather I" visible={this.state.visible} width="350px" modal={true} minY={70} footer={footer} onHide={this.onHide}>
                         The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. 
                         His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. 
                         Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,