Make window & document references iframe-aware

README.md

@@ -253,7 +253,7 @@ on itself and thus must have callbacks attached to be useful.
   handle: string,
   onStart: DraggableEventHandler,
   onDrag: DraggableEventHandler,
-  onStop: DraggableEventHandler
+  onStop: DraggableEventHandler,
   onMouseDown: (e: MouseEvent) => void
 }
 ```

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;

specs/draggable.spec.jsx

@@ -122,23 +122,35 @@ describe('react-draggable', function () {
 
       TestUtils.renderIntoDocument(drag);
 
-      expect(console.error).toHaveBeenCalledWith('Warning: Failed propType: Invalid prop className passed to Draggable - do not set this, set it on the child.');
+      expect(
+        console.error.calls.argsFor(0)[0].replace('propType:', 'prop type:').split('\n')[0]
+      ).toBe(
+        'Warning: Failed prop type: Invalid prop className passed to Draggable - do not set this, set it on the child.'
+      );
     });
 
     it('should throw when setting style', function () {
       drag = (<Draggable style={{color: 'red'}}><span /></Draggable>);
 
       TestUtils.renderIntoDocument(drag);
 
-      expect(console.error).toHaveBeenCalledWith('Warning: Failed propType: Invalid prop style passed to Draggable - do not set this, set it on the child.');
+      expect(
+        console.error.calls.argsFor(0)[0].replace('propType:', 'prop type:').split('\n')[0]
+      ).toBe(
+        'Warning: Failed prop type: Invalid prop style passed to Draggable - do not set this, set it on the child.'
+      );
     });
 
     it('should throw when setting transform', function () {
       drag = (<Draggable transform="translate(100, 100)"><span /></Draggable>);
 
       TestUtils.renderIntoDocument(drag);
 
-      expect(console.error).toHaveBeenCalledWith('Warning: Failed propType: Invalid prop transform passed to Draggable - do not set this, set it on the child.');
+      expect(
+        console.error.calls.argsFor(0)[0].replace('propType:', 'prop type:').split('\n')[0]
+      ).toBe(
+        'Warning: Failed prop type: Invalid prop transform passed to Draggable - do not set this, set it on the child.'
+      );
     });
 
     it('should call onStart when dragging begins', function () {