Allow document to be overwritten for iframes #482

sekoyo · May 11, 2022 · b78c36c · b78c36c
1 parent 44a9169
commit b78c36c
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-image-crop",
-  "version": "10.0.0",
+  "version": "10.0.1",
   "description": "A responsive image cropping tool for React",
   "repository": "https://github.com/DominicTobias/react-image-crop",
   "main": "dist/ReactCrop.min.js",

diff --git a/src/ReactCrop.tsx b/src/ReactCrop.tsx
@@ -108,6 +108,7 @@ class ReactCrop extends PureComponent<ReactCropProps, ReactCropState> {
     },
   }
 
+  document = document
   keysDown = new Set<string>()
   docMoveBound = false
   mouseDownOnCrop = false
@@ -167,9 +168,9 @@ class ReactCrop extends PureComponent<ReactCropProps, ReactCropState> {
       return
     }
 
-    document.addEventListener('pointermove', this.onDocPointerMove, DOC_MOVE_OPTS)
-    document.addEventListener('pointerup', this.onDocPointerDone, DOC_MOVE_OPTS)
-    document.addEventListener('pointercancel', this.onDocPointerDone, DOC_MOVE_OPTS)
+    this.document.addEventListener('pointermove', this.onDocPointerMove, DOC_MOVE_OPTS)
+    this.document.addEventListener('pointerup', this.onDocPointerDone, DOC_MOVE_OPTS)
+    this.document.addEventListener('pointercancel', this.onDocPointerDone, DOC_MOVE_OPTS)
 
     this.docMoveBound = true
   }
@@ -179,9 +180,9 @@ class ReactCrop extends PureComponent<ReactCropProps, ReactCropState> {
       return
     }
 
-    document.removeEventListener('pointermove', this.onDocPointerMove, DOC_MOVE_OPTS)
-    document.removeEventListener('pointerup', this.onDocPointerDone, DOC_MOVE_OPTS)
-    document.removeEventListener('pointercancel', this.onDocPointerDone, DOC_MOVE_OPTS)
+    this.document.removeEventListener('pointermove', this.onDocPointerMove, DOC_MOVE_OPTS)
+    this.document.removeEventListener('pointerup', this.onDocPointerDone, DOC_MOVE_OPTS)
+    this.document.removeEventListener('pointercancel', this.onDocPointerDone, DOC_MOVE_OPTS)
 
     this.docMoveBound = false
   }

diff --git a/test/index.tsx b/test/index.tsx
@@ -1,5 +1,5 @@
 import ReactDOM from 'react-dom'
-import React, { useState, useRef, useEffect, useCallback } from 'react'
+import React, { useState, useRef } from 'react'
 import ReactCrop, { centerCrop, makeAspectCrop, Crop, PixelCrop } from '../src'
 import { cropPreview } from './cropPreview'
 import { useDebounceEffect } from './useDebounceEffect'