diff --git a/README.md b/README.md index 6549a5a8..aabb05a7 100644 --- a/README.md +++ b/README.md @@ -221,6 +221,18 @@ ReactDOM.render( true focus trigger element when dialog closed + + draggable + Boolean + false + whether dialog should be draggable based on react-draggble https://github.com/mzabriskie/react-draggable. default handle is the dialog element + + + draggableProps + Object + {} + draggable props to be passed to `` component, pass `handle` prop to override the default handle + diff --git a/package.json b/package.json index 32b858dc..c1119d76 100644 --- a/package.json +++ b/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" } } diff --git a/src/Dialog.tsx b/src/Dialog.tsx index 7d824b9b..618f8a7f 100644 --- a/src/Dialog.tsx +++ b/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 { destroyOnClose: false, prefixCls: 'rc-dialog', focusTriggerAfterClose: true, + draggable: false, }; private inTransition: boolean = false; @@ -251,7 +253,7 @@ export default class Dialog extends React.Component { const style = { ...props.style, ...dest }; const sentinelStyle = { width: 0, height: 0, overflow: 'hidden', outline: 'none' }; const transitionName = this.getTransitionName(); - const dialogElement = ( + const dialog = ( { /> ); + const dialogElement = props.draggable ? ( + + {dialog} + + ) : dialog; return (