From 2c61bf3b71b114673fe5c6eb12eac9e37729bd52 Mon Sep 17 00:00:00 2001 From: Kerry Liu Date: Mon, 13 Sep 2021 11:55:59 -0700 Subject: [PATCH] Block Editor: update react-spring to 9.2.4 (#30979) --- .eslintrc.js | 6 -- package-lock.json | 60 +++++++++++++++---- packages/block-editor/package.json | 2 +- .../src/components/list-view/leaf.js | 2 +- .../components/use-moving-animation/index.js | 17 +++--- 5 files changed, 61 insertions(+), 26 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 4bb1966dde3759..5ad3dc1731cbc4 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -120,12 +120,6 @@ module.exports = { message: 'Path access on WordPress dependencies is not allowed.', }, - { - selector: - 'ImportDeclaration[source.value=/^react-spring(?!\\u002Fweb.cjs)/]', - message: - 'The react-spring dependency must specify CommonJS bundle: react-spring/web.cjs', - }, { selector: 'CallExpression[callee.name="deprecated"] Property[key.name="version"][value.value=/' + diff --git a/package-lock.json b/package-lock.json index 5a43b70126b647..a0a50d434e25e9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7856,6 +7856,55 @@ "react-native-iphone-x-helper": "^1.2.1" } }, + "@react-spring/animated": { + "version": "9.2.4", + "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.2.4.tgz", + "integrity": "sha512-AfV6ZM8pCCAT29GY5C8/1bOPjZrv/7kD0vedjiE/tEYvNDwg9GlscrvsTViWR2XykJoYrDfdkYArrldWpsCJ5g==", + "requires": { + "@react-spring/shared": "~9.2.0", + "@react-spring/types": "~9.2.0" + } + }, + "@react-spring/core": { + "version": "9.2.4", + "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.2.4.tgz", + "integrity": "sha512-R+PwyfsjiuYCWqaTTfCpYpRmsP0h87RNm7uxC1Uxy7QAHUfHEm2sAHn+AdHPwq/MbVwDssVT8C5yf2WGcqiXGg==", + "requires": { + "@react-spring/animated": "~9.2.0", + "@react-spring/shared": "~9.2.0", + "@react-spring/types": "~9.2.0" + } + }, + "@react-spring/rafz": { + "version": "9.2.4", + "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.2.4.tgz", + "integrity": "sha512-SOKf9eue+vAX+DGo7kWYNl9i9J3gPUlQjifIcV9Bzw9h3i30wPOOP0TjS7iMG/kLp2cdHQYDNFte6nt23VAZkQ==" + }, + "@react-spring/shared": { + "version": "9.2.4", + "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.2.4.tgz", + "integrity": "sha512-ZEr4l2BxmyFRUvRA2VCkPfCJii4E7cGkwbjmTBx1EmcGrOnde/V2eF5dxqCTY3k35QuCegkrWe0coRJVkh8q2Q==", + "requires": { + "@react-spring/rafz": "~9.2.0", + "@react-spring/types": "~9.2.0" + } + }, + "@react-spring/types": { + "version": "9.2.4", + "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.2.4.tgz", + "integrity": "sha512-zHUXrWO8nweUN/ISjrjqU7GgXXvoEbFca1CgiE0TY0H/dqJb3l+Rhx8ecPVNYimzFg3ZZ1/T0egpLop8SOv4aA==" + }, + "@react-spring/web": { + "version": "9.2.4", + "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.2.4.tgz", + "integrity": "sha512-vtPvOalLFvuju/MDBtoSnCyt0xXSL6Amyv82fljOuWPl1yGd4M1WteijnYL9Zlriljl0a3oXcPunAVYTD9dbDQ==", + "requires": { + "@react-spring/animated": "~9.2.0", + "@react-spring/core": "~9.2.0", + "@react-spring/shared": "~9.2.0", + "@react-spring/types": "~9.2.0" + } + }, "@samverschueren/stream-to-observable": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz", @@ -18010,6 +18059,7 @@ "version": "file:packages/block-editor", "requires": { "@babel/runtime": "^7.13.10", + "@react-spring/web": "^9.2.4", "@wordpress/a11y": "file:packages/a11y", "@wordpress/blob": "file:packages/blob", "@wordpress/block-serialization-default-parser": "file:packages/block-serialization-default-parser", @@ -18043,7 +18093,6 @@ "lodash": "^4.17.21", "memize": "^1.1.0", "react-autosize-textarea": "^7.1.0", - "react-spring": "^8.0.19", "redux-multi": "^0.1.12", "rememo": "^3.0.0", "tinycolor2": "^1.4.2", @@ -53957,15 +54006,6 @@ "throttle-debounce": "^3.0.1" } }, - "react-spring": { - "version": "8.0.20", - "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.20.tgz", - "integrity": "sha512-40ZUQ5uI5YHsoQWLPchWNcEUh6zQ6qvcVDeTI2vW10ldoCN3PvDsII9wBH2xEbMl+BQvYmHzGdfLTQxPxJWGnQ==", - "requires": { - "@babel/runtime": "^7.3.1", - "prop-types": "^15.5.8" - } - }, "react-syntax-highlighter": { "version": "13.5.3", "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-13.5.3.tgz", diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json index 64e0b52b50c725..55dbff4b4e89a2 100644 --- a/packages/block-editor/package.json +++ b/packages/block-editor/package.json @@ -32,6 +32,7 @@ ], "dependencies": { "@babel/runtime": "^7.13.10", + "@react-spring/web": "^9.2.4", "@wordpress/a11y": "file:../a11y", "@wordpress/blob": "file:../blob", "@wordpress/block-serialization-default-parser": "file:../block-serialization-default-parser", @@ -65,7 +66,6 @@ "lodash": "^4.17.21", "memize": "^1.1.0", "react-autosize-textarea": "^7.1.0", - "react-spring": "^8.0.19", "redux-multi": "^0.1.12", "rememo": "^3.0.0", "tinycolor2": "^1.4.2", diff --git a/packages/block-editor/src/components/list-view/leaf.js b/packages/block-editor/src/components/list-view/leaf.js index 9a2409d141e196..8098d44647fc98 100644 --- a/packages/block-editor/src/components/list-view/leaf.js +++ b/packages/block-editor/src/components/list-view/leaf.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { animated } from 'react-spring/web.cjs'; +import { animated } from '@react-spring/web'; import classnames from 'classnames'; /** diff --git a/packages/block-editor/src/components/use-moving-animation/index.js b/packages/block-editor/src/components/use-moving-animation/index.js index c3c17a36498c41..af4ded8bb984de 100644 --- a/packages/block-editor/src/components/use-moving-animation/index.js +++ b/packages/block-editor/src/components/use-moving-animation/index.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { useSpring } from 'react-spring/web.cjs'; +import { useSpring } from '@react-spring/web'; /** * WordPress dependencies @@ -136,19 +136,20 @@ function useMovingAnimation( { } // Called for every frame computed by useSpring. - function onFrame( { x, y } ) { + function onChange( { value } ) { + let { x, y } = value; x = Math.round( x ); y = Math.round( y ); - if ( x !== onFrame.x || y !== onFrame.y ) { + if ( x !== onChange.x || y !== onChange.y ) { onFrameChange( { x, y } ); - onFrame.x = x; - onFrame.y = y; + onChange.x = x; + onChange.y = y; } } - onFrame.x = 0; - onFrame.y = 0; + onChange.x = 0; + onChange.y = 0; useSpring( { from: { @@ -162,7 +163,7 @@ function useMovingAnimation( { reset: triggeredAnimation !== finishedAnimation, config: { mass: 5, tension: 2000, friction: 200 }, immediate: prefersReducedMotion, - onFrame, + onChange, } ); return ref;