chore: update to React 18 (#401)

* chore: update to React 18 * fix: support drag with 2 fingers
ValentinH · Jul 26, 2022 · 8ae122c · 8ae122c
1 parent 8ed0f98
commit 8ae122c
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 46 deletions.
diff --git a/examples/src/index.tsx b/examples/src/index.tsx
@@ -1,6 +1,6 @@
 import queryString from 'query-string'
 import * as React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import debounce from 'lodash/debounce'
 import Cropper, { Area, Point } from '../../src/index'
 import './styles.css'
@@ -365,4 +365,12 @@ class App extends React.Component<{}, State> {
 }
 
 const rootElement = document.getElementById('root')
-ReactDOM.render(<App />, rootElement)
+if (!rootElement) {
+  throw new Error('No root element found')
+}
+const root = createRoot(rootElement)
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)
diff --git a/package.json b/package.json
@@ -63,8 +63,8 @@
     "@percy/cypress": "^3.1.1",
     "@types/jest": "^26.0.14",
     "@types/lodash.debounce": "^4.0.6",
-    "@types/react": "^16.9.17",
-    "@types/react-dom": "^16.9.4",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "18.0.6",
     "@typescript-eslint/eslint-plugin": "4.2.0",
     "@typescript-eslint/parser": "4.2.0",
     "all-contributors-cli": "^6.4.0",
@@ -93,8 +93,8 @@
     "prettier": "^2.1.2",
     "query-string": "^6.1.0",
     "raw-loader": "^4.0.1",
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rimraf": "^3.0.0",
     "rollup-plugin-typescript2": "^0.27.1",
     "start-server-and-test": "^1.4.1",

diff --git a/src/Cropper.tsx b/src/Cropper.tsx
@@ -120,7 +120,7 @@ class Cropper extends React.Component<CropperProps, State> {
       this.styleRef = document.createElement('style')
       this.styleRef.setAttribute('type', 'text/css')
       if (this.props.nonce) {
-        this.styleRef.setAttribute('nonce', this.props.nonce);
+        this.styleRef.setAttribute('nonce', this.props.nonce)
       }
       this.styleRef.innerHTML = cssStyles
       document.head.appendChild(this.styleRef)
@@ -257,8 +257,10 @@ class Cropper extends React.Component<CropperProps, State> {
     if (mediaRef && this.containerRef) {
       this.containerRect = this.containerRef.getBoundingClientRect()
       const containerAspect = this.containerRect.width / this.containerRect.height
-      const naturalWidth = this.imageRef.current?.naturalWidth || this.videoRef.current?.videoWidth || 0
-      const naturalHeight = this.imageRef.current?.naturalHeight || this.videoRef.current?.videoHeight || 0
+      const naturalWidth =
+        this.imageRef.current?.naturalWidth || this.videoRef.current?.videoWidth || 0
+      const naturalHeight =
+        this.imageRef.current?.naturalHeight || this.videoRef.current?.videoHeight || 0
       const isMediaScaledDown =
         mediaRef.offsetWidth < naturalWidth || mediaRef.offsetHeight < naturalHeight
       const mediaAspect = naturalWidth / naturalHeight
@@ -447,7 +449,7 @@ class Cropper extends React.Component<CropperProps, State> {
     this.rafPinchTimeout = window.requestAnimationFrame(() => {
       const distance = getDistanceBetweenPoints(pointA, pointB)
       const newZoom = this.props.zoom * (distance / this.lastPinchDistance)
-      this.setNewZoom(newZoom, center)
+      this.setNewZoom(newZoom, center, { shouldUpdatePosition: false })
       this.lastPinchDistance = distance
 
       const rotation = getRotationBetweenPoints(pointA, pointB)
@@ -466,7 +468,7 @@ class Cropper extends React.Component<CropperProps, State> {
     const point = Cropper.getMousePoint(e)
     const { pixelY } = normalizeWheel(e)
     const newZoom = this.props.zoom - (pixelY * this.props.zoomSpeed) / 200
-    this.setNewZoom(newZoom, point)
+    this.setNewZoom(newZoom, point, { shouldUpdatePosition: true })
 
     if (!this.state.hasWheelJustStarted) {
       this.setState({ hasWheelJustStarted: true }, () => this.props.onInteractionStart?.())
@@ -499,7 +501,7 @@ class Cropper extends React.Component<CropperProps, State> {
     }
   }
 
-  setNewZoom = (zoom: number, point: Point) => {
+  setNewZoom = (zoom: number, point: Point, { shouldUpdatePosition = true } = {}) => {
     if (!this.state.cropSize || !this.props.onZoomChange) return
 
     const zoomPoint = this.getPointOnContainer(point)
@@ -509,17 +511,20 @@ class Cropper extends React.Component<CropperProps, State> {
       x: zoomTarget.x * newZoom - zoomPoint.x,
       y: zoomTarget.y * newZoom - zoomPoint.y,
     }
-    const newPosition = this.props.restrictPosition
-      ? restrictPosition(
-          requestedPosition,
-          this.mediaSize,
-          this.state.cropSize,
-          newZoom,
-          this.props.rotation
-        )
-      : requestedPosition
 
-    this.props.onCropChange(newPosition)
+    if (shouldUpdatePosition) {
+      const newPosition = this.props.restrictPosition
+        ? restrictPosition(
+            requestedPosition,
+            this.mediaSize,
+            this.state.cropSize,
+            newZoom,
+            this.props.rotation
+          )
+        : requestedPosition
+
+      this.props.onCropChange(newPosition)
+    }
     this.props.onZoomChange(newZoom)
   }
 

diff --git a/yarn.lock b/yarn.lock
@@ -2098,21 +2098,30 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
   integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
 
-"@types/react-dom@^16.9.4":
-  version "16.9.8"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.8.tgz#fe4c1e11dfc67155733dfa6aa65108b4971cb423"
-  integrity sha512-ykkPQ+5nFknnlU6lDd947WbQ6TE3NNzbQAkInC2EKY1qeYdTKp7onFusmYZb+ityzx2YviqT6BXSu+LyWWJwcA==
+"@types/react-dom@18.0.6":
+  version "18.0.6"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.6.tgz#36652900024842b74607a17786b6662dd1e103a1"
+  integrity sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.9.17":
+"@types/react@*":
   version "16.9.49"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.49.tgz#09db021cf8089aba0cdb12a49f8021a69cce4872"
   integrity sha512-DtLFjSj0OYAdVLBbyjhuV9CdGVHCkHn2R+xr3XkBvK2rS1Y1tkc14XSGjYgm5Fjjr90AxH9tiSzc1pCFMGO06g==
   dependencies:
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
+"@types/react@^18.0.15":
+  version "18.0.15"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.15.tgz#d355644c26832dc27f3e6cbf0c4f4603fc4ab7fe"
+  integrity sha512-iz3BtLuIYH1uWdsv6wXYdhozhqj20oD4/Hk2DNXIn1kFsmp9x8d9QB6FnPhfkbhd2PgEONt9Q1x/ebkwjfFLow==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/resolve@1.17.1":
   version "1.17.1"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6"
@@ -2127,6 +2136,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/scheduler@*":
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
+  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+
 "@types/sinonjs__fake-timers@^6.0.1":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-6.0.1.tgz#681df970358c82836b42f989188d133e218c458e"
@@ -10382,7 +10396,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.4"
 
-prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -10584,29 +10598,25 @@ rc@^1.2.8, rc@~1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-dom@^16.4.1:
-  version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
-  integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==
+react-dom@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.19.1"
+    scheduler "^0.23.0"
 
 react-is@^16.12.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react@^16.4.1:
-  version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
-  integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
+react@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
 
 read-pkg-up@^2.0.0:
   version "2.0.0"
@@ -11197,13 +11207,12 @@ saxes@^5.0.0:
   dependencies:
     xmlchars "^2.2.0"
 
-scheduler@^0.19.1:
-  version "0.19.1"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
-  integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
+scheduler@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 schema-utils@^1.0.0:
   version "1.0.0"