Use window/document relative to DOM element

Use the ownerDocument and window of the DOM element being manipulated
rather than the global window and document objects. This makes
react-draggable work with a tool like
https://github.com/ryanseddon/react-frame-component

Author: acusti

lib/DraggableCore.es6

@@ -171,10 +171,11 @@ export default class DraggableCore extends React.Component {
   componentWillUnmount() {
     // Remove any leftover event handlers. Remove both touch and mouse handlers in case
     // some browser quirk caused a touch event to fire during a mouse move, or vice versa.
-    removeEvent(document, eventsFor.mouse.move, this.handleDrag);
-    removeEvent(document, eventsFor.touch.move, this.handleDrag);
-    removeEvent(document, eventsFor.mouse.stop, this.handleDragStop);
-    removeEvent(document, eventsFor.touch.stop, this.handleDragStop);
+    const {ownerDocument} = ReactDOM.findDOMNode(this);
+    removeEvent(ownerDocument, eventsFor.mouse.move, this.handleDrag);
+    removeEvent(ownerDocument, eventsFor.touch.move, this.handleDrag);
+    removeEvent(ownerDocument, eventsFor.mouse.stop, this.handleDragStop);
+    removeEvent(ownerDocument, eventsFor.touch.stop, this.handleDragStop);
     if (this.props.enableUserSelectHack) removeUserSelectStyles();
   }
 
@@ -185,11 +186,12 @@ export default class DraggableCore extends React.Component {
     // Only accept left-clicks.
     if (!this.props.allowAnyClick && typeof e.button === 'number' && e.button !== 0) return false;
 
+    const domNode = ReactDOM.findDOMNode(this);
     // Short circuit if handle or cancel prop was provided and selector doesn't match.
     if (this.props.disabled ||
-      (!(e.target instanceof Node)) ||
-      (this.props.handle && !matchesSelectorAndParentsTo(e.target, this.props.handle, ReactDOM.findDOMNode(this))) ||
-      (this.props.cancel && matchesSelectorAndParentsTo(e.target, this.props.cancel, ReactDOM.findDOMNode(this)))) {
+      (!(e.target instanceof domNode.ownerDocument.defaultView.Node)) ||
+      (this.props.handle && !matchesSelectorAndParentsTo(e.target, this.props.handle, domNode)) ||
+      (this.props.cancel && matchesSelectorAndParentsTo(e.target, this.props.cancel, domNode))) {
       return;
     }
 
@@ -231,8 +233,8 @@ export default class DraggableCore extends React.Component {
     // Add events to the document directly so we catch when the user's mouse/touch moves outside of
     // this element. We use different events depending on whether or not we have detected that this
     // is a touch-capable device.
-    addEvent(document, dragEventFor.move, this.handleDrag);
-    addEvent(document, dragEventFor.stop, this.handleDragStop);
+    addEvent(domNode.ownerDocument, dragEventFor.move, this.handleDrag);
+    addEvent(domNode.ownerDocument, dragEventFor.stop, this.handleDragStop);
   };
 
   handleDrag: EventHandler<MouseEvent> = (e) => {
@@ -302,9 +304,10 @@ export default class DraggableCore extends React.Component {
     this.props.onStop(e, coreEvent);
 
     // Remove event handlers
+    const {ownerDocument} = ReactDOM.findDOMNode(this);
     log('DraggableCore: Removing handlers');
-    removeEvent(document, dragEventFor.move, this.handleDrag);
-    removeEvent(document, dragEventFor.stop, this.handleDragStop);
+    removeEvent(ownerDocument, dragEventFor.move, this.handleDrag);
+    removeEvent(ownerDocument, dragEventFor.stop, this.handleDragStop);
   };
 
   onMouseDown: EventHandler<MouseEvent> = (e) => {

lib/utils/domFns.es6

@@ -63,7 +63,7 @@ export function outerHeight(node: HTMLElement): number {
   // This is deliberately excluding margin for our calculations, since we are using
   // offsetTop which is including margin. See getBoundPosition
   let height = node.clientHeight;
-  const computedStyle = window.getComputedStyle(node);
+  const computedStyle = node.ownerDocument.defaultView.getComputedStyle(node);
   height += int(computedStyle.borderTopWidth);
   height += int(computedStyle.borderBottomWidth);
   return height;
@@ -73,31 +73,31 @@ export function outerWidth(node: HTMLElement): number {
   // This is deliberately excluding margin for our calculations, since we are using
   // offsetLeft which is including margin. See getBoundPosition
   let width = node.clientWidth;
-  const computedStyle = window.getComputedStyle(node);
+  const computedStyle = node.ownerDocument.defaultView.getComputedStyle(node);
   width += int(computedStyle.borderLeftWidth);
   width += int(computedStyle.borderRightWidth);
   return width;
 }
 export function innerHeight(node: HTMLElement): number {
   let height = node.clientHeight;
-  const computedStyle = window.getComputedStyle(node);
+  const computedStyle = node.ownerDocument.defaultView.getComputedStyle(node);
   height -= int(computedStyle.paddingTop);
   height -= int(computedStyle.paddingBottom);
   return height;
 }
 
 export function innerWidth(node: HTMLElement): number {
   let width = node.clientWidth;
-  const computedStyle = window.getComputedStyle(node);
+  const computedStyle = node.ownerDocument.defaultView.getComputedStyle(node);
   width -= int(computedStyle.paddingLeft);
   width -= int(computedStyle.paddingRight);
   return width;
 }
 
 // Get from offsetParent
 export function offsetXYFromParentOf(evt: {clientX: number, clientY: number}, node: HTMLElement & {offsetParent: HTMLElement}): ControlPosition {
-  const offsetParent = node.offsetParent || document.body;
-  const offsetParentRect = node.offsetParent === document.body ? {left: 0, top: 0} : offsetParent.getBoundingClientRect();
+  const offsetParent = node.offsetParent || node.ownerDocument.body;
+  const offsetParentRect = node.offsetParent === node.ownerDocument.body ? {left: 0, top: 0} : offsetParent.getBoundingClientRect();
 
   const x = evt.clientX + offsetParent.scrollLeft - offsetParentRect.left;
   const y = evt.clientY + offsetParent.scrollTop - offsetParentRect.top;