feat: support draggable dialog

README.md

@@ -221,6 +221,18 @@ ReactDOM.render(
           <td>true</td>
           <td>focus trigger element when dialog closed</td>
       </tr>
+      <tr>
+          <td>draggable</td>
+          <td>Boolean</td>
+          <td>false</td>
+          <td>whether dialog should be draggable based on  react-draggble https://github.com/mzabriskie/react-draggable. default handle is the dialog element</td>
+      </tr>
+      <tr>
+          <td>draggableProps</td>
+          <td>Object</td>
+          <td>{}</td>
+          <td>draggable props to be passed to `<Draggable/>` component, pass `handle` prop to override the default handle</td>
+      </tr>
     </tbody>
 </table>
 

package.json

@@ -80,6 +80,7 @@
   "typings": "./lib/DialogWrap.d.ts",
   "dependencies": {
     "rc-animate": "3.x",
-    "rc-util": "^5.0.1"
+    "rc-util": "^5.0.1",
+    "react-draggable": "^3.3.0"
   }
 }

src/Dialog.tsx

@@ -5,6 +5,7 @@ import contains from 'rc-util/lib/Dom/contains';
 import Animate from 'rc-animate';
 import LazyRenderBox from './LazyRenderBox';
 import IDialogPropTypes from './IDialogPropTypes';
+import Draggable from 'react-draggable';
 
 let uuid = 0;
 
@@ -60,6 +61,7 @@ export default class Dialog extends React.Component<IDialogChildProps, any> {
     destroyOnClose: false,
     prefixCls: 'rc-dialog',
     focusTriggerAfterClose: true,
+    draggable: false,
   };
 
   private inTransition: boolean = false;
@@ -251,7 +253,7 @@ export default class Dialog extends React.Component<IDialogChildProps, any> {
     const style = { ...props.style, ...dest };
     const sentinelStyle = { width: 0, height: 0, overflow: 'hidden', outline: 'none' };
     const transitionName = this.getTransitionName();
-    const dialogElement = (
+    const dialog = (
       <LazyRenderBox
         key="dialog-element"
         role="document"
@@ -289,6 +291,11 @@ export default class Dialog extends React.Component<IDialogChildProps, any> {
         />
       </LazyRenderBox>
     );
+    const dialogElement = props.draggable ? (
+      <Draggable handle={`.${prefixCls}`} {...props.draggableProps}>
+        {dialog}
+      </Draggable>
+    ) : dialog;
 
     return (
       <Animate

src/IDialogPropTypes.tsx

@@ -41,6 +41,8 @@ interface IDialogPropTypes {
   // https://github.com/ant-design/ant-design/issues/19771
   // https://github.com/react-component/dialog/issues/95
   focusTriggerAfterClose?: boolean;
+  draggable?: boolean;
+  draggableProps?: any;
 }
 
 export default IDialogPropTypes;