From a3e567bc8a697fedf452c4c61108ccc47a7ec638 Mon Sep 17 00:00:00 2001 From: Connor McEwen Date: Fri, 30 Sep 2022 13:09:06 -0400 Subject: [PATCH] chore: upgrade react-spring version (#4770) * chore: upgrade react-spring version * remove interpolate Co-authored-by: Charles Bachmeier --- package.json | 2 +- src/components/Modal/index.tsx | 10 +- src/components/Popups/PopupItem.tsx | 2 +- src/nft/components/Box.ts | 5 +- .../components/sell/select/FilterSidebar.tsx | 4 +- src/nft/components/sell/select/SelectPage.tsx | 8 +- src/nft/pages/asset/Asset.tsx | 4 +- src/nft/pages/collection/index.tsx | 6 +- tsconfig.json | 2 +- yarn.lock | 106 ++++++++++++++++-- 10 files changed, 120 insertions(+), 29 deletions(-) diff --git a/package.json b/package.json index d1ca9a9337..5914110fdc 100644 --- a/package.json +++ b/package.json @@ -207,7 +207,7 @@ "react-redux": "^8.0.2", "react-relay": "^14.1.0", "react-router-dom": "^6.3.0", - "react-spring": "^8.0.27", + "react-spring": "^9.5.5", "react-table": "^7.8.0", "react-use-gesture": "^6.0.14", "react-virtualized-auto-sizer": "^1.0.2", diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx index 0de85ca6d6..52c5136e27 100644 --- a/src/components/Modal/index.tsx +++ b/src/components/Modal/index.tsx @@ -98,7 +98,7 @@ export default function Modal({ children, redesignFlag, }: ModalProps) { - const fadeTransition = useTransition(isOpen, null, { + const fadeTransition = useTransition(isOpen, { config: { duration: 200 }, from: { opacity: 0 }, enter: { opacity: 1 }, @@ -119,12 +119,12 @@ export default function Modal({ return ( <> - {fadeTransition.map( - ({ item, key, props }) => + {fadeTransition( + ({ opacity }, item) => item && ( (({ as = 'div', className }) }) -export const AnimatedBox = animated(Box) +// We get this error around the codebase: https://github.com/microsoft/TypeScript/issues/34933 +// so you see ts-ignore almost everywhere this component is used +// since we are going to deprecate vanilla-extract, this will be `any` for now +export const AnimatedBox: any = animated(Box) as any export type BoxProps = Parameters[0] diff --git a/src/nft/components/sell/select/FilterSidebar.tsx b/src/nft/components/sell/select/FilterSidebar.tsx index b207254bd3..8aa29eab8b 100644 --- a/src/nft/components/sell/select/FilterSidebar.tsx +++ b/src/nft/components/sell/select/FilterSidebar.tsx @@ -7,7 +7,7 @@ import { themeVars } from 'nft/css/sprinkles.css' import { useFiltersExpanded, useIsMobile, useWalletCollections } from 'nft/hooks' import { WalletCollection } from 'nft/types' import { Dispatch, FormEvent, SetStateAction, useCallback, useEffect, useReducer, useState } from 'react' -import { useSpring } from 'react-spring/web' +import { useSpring } from 'react-spring' import * as styles from './SelectPage.css' @@ -35,7 +35,7 @@ export const FilterSidebar = ({ SortDropdown }: { SortDropdown: () => JSX.Elemen height={{ sm: 'full', md: 'auto' }} zIndex={{ sm: '3', md: 'auto' }} display={isFiltersExpanded ? 'flex' : 'none'} - style={{ transform: sidebarX.interpolate((x) => `translateX(${x}px)`) }} + style={{ transform: sidebarX.to((x) => `translateX(${x}px)`) }} > { paddingLeft={isFiltersExpanded ? '24' : '16'} flexShrink="0" style={{ - transform: gridX.interpolate( - (x) => `translate(${Number(x) - (!isMobile && isFiltersExpanded ? 300 : 0)}px)` - ), - width: gridWidthOffset.interpolate((x) => `calc(100% - ${x}px)`), + transform: gridX.to((x) => `translate(${Number(x) - (!isMobile && isFiltersExpanded ? 300 : 0)}px)`), + width: gridWidthOffset.to((x) => `calc(100% - ${x}px)`), }} > diff --git a/src/nft/pages/asset/Asset.tsx b/src/nft/pages/asset/Asset.tsx index fcfb1d48bc..57d32b93d2 100644 --- a/src/nft/pages/asset/Asset.tsx +++ b/src/nft/pages/asset/Asset.tsx @@ -6,7 +6,7 @@ import { useEffect, useMemo, useState } from 'react' import ReactMarkdown from 'react-markdown' import { useQuery } from 'react-query' import { Link, useLocation, useNavigate, useParams } from 'react-router-dom' -import { useSpring } from 'react-spring/web' +import { useSpring } from 'react-spring' import { MouseoverTooltip } from '../../../components/Tooltip/index' import { AnimatedBox, Box } from '../../components/Box' @@ -182,7 +182,7 @@ const Asset = () => { `calc(100% - ${x}px)`), + width: gridWidthOffset.to((x) => `calc(100% - ${x}px)`), }} className={styles.container} > diff --git a/src/nft/pages/collection/index.tsx b/src/nft/pages/collection/index.tsx index 967225478d..61854d2a58 100644 --- a/src/nft/pages/collection/index.tsx +++ b/src/nft/pages/collection/index.tsx @@ -9,7 +9,7 @@ import { GenieCollection } from 'nft/types' import { useEffect } from 'react' import { useQuery } from 'react-query' import { useLocation, useNavigate, useParams } from 'react-router-dom' -import { useSpring } from 'react-spring/web' +import { useSpring } from 'react-spring' const FILTER_WIDTH = 332 const BAG_WIDTH = 324 @@ -107,8 +107,8 @@ const Collection = () => { {/* @ts-ignore: https://github.com/microsoft/TypeScript/issues/34933 */} `translate(${x as number}px)`), - width: gridWidthOffset.interpolate((x) => `calc(100% - ${x as number}px)`), + transform: gridX.to((x) => `translate(${x as number}px)`), + width: gridWidthOffset.to((x) => `calc(100% - ${x as number}px)`), }} > {isActivityToggled diff --git a/tsconfig.json b/tsconfig.json index a42484eaba..5f29c41c9e 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -23,7 +23,7 @@ "strict": true, "strictNullChecks": true, "target": "es5", - "types": ["react-spring", "jest"], + "types": ["jest"], "useUnknownInCatchVariables": false }, "exclude": ["node_modules", "cypress"], diff --git a/yarn.lock b/yarn.lock index bfe1ec2434..23879ac98b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1074,7 +1074,7 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@>=7.17.0", "@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2": +"@babel/runtime@>=7.17.0", "@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2": version "7.18.9" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a" integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw== @@ -2840,6 +2840,92 @@ "@react-hook/event" "^1.2.1" "@react-hook/throttle" "^2.2.0" +"@react-spring/animated@~9.5.5": + version "9.5.5" + resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.5.5.tgz#d3bfd0f62ed13a337463a55d2c93bb23c15bbf3e" + integrity sha512-glzViz7syQ3CE6BQOwAyr75cgh0qsihm5lkaf24I0DfU63cMm/3+br299UEYkuaHNmfDfM414uktiPlZCNJbQA== + dependencies: + "@react-spring/shared" "~9.5.5" + "@react-spring/types" "~9.5.5" + +"@react-spring/core@~9.5.5": + version "9.5.5" + resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.5.5.tgz#1d8a4c64630ee26b2295361e1eedfd716a85b4ae" + integrity sha512-shaJYb3iX18Au6gkk8ahaF0qx0LpS0Yd+ajb4asBaAQf6WPGuEdJsbsNSgei1/O13JyEATsJl20lkjeslJPMYA== + dependencies: + "@react-spring/animated" "~9.5.5" + "@react-spring/rafz" "~9.5.5" + "@react-spring/shared" "~9.5.5" + "@react-spring/types" "~9.5.5" + +"@react-spring/konva@~9.5.5": + version "9.5.5" + resolved "https://registry.yarnpkg.com/@react-spring/konva/-/konva-9.5.5.tgz#ddbb30cfa268219d69552aa71188832ca8ab4905" + integrity sha512-0CNh+1vCIjNUklTFwMvxg+H83Jo2OWykBrdEA28ccmnpZgkQ8Kq5xyvaPFLzcDKV67OXHnaWiCYKpRbhLy2wng== + dependencies: + "@react-spring/animated" "~9.5.5" + "@react-spring/core" "~9.5.5" + "@react-spring/shared" "~9.5.5" + "@react-spring/types" "~9.5.5" + +"@react-spring/native@~9.5.5": + version "9.5.5" + resolved "https://registry.yarnpkg.com/@react-spring/native/-/native-9.5.5.tgz#4ecc420c7b4c3fefeebd55d852640d36c29ec9c8" + integrity sha512-kauqmyJ8u7aVy2bBs22vl1SdB2i5uYIL4rP53k1KDWrFSqJh4j3efWkbTt9uzR5cMXuNVbkNo9OYVFUcQBz50A== + dependencies: + "@react-spring/animated" "~9.5.5" + "@react-spring/core" "~9.5.5" + "@react-spring/shared" "~9.5.5" + "@react-spring/types" "~9.5.5" + +"@react-spring/rafz@~9.5.5": + version "9.5.5" + resolved "https://registry.yarnpkg.com/@react-spring/rafz/-/rafz-9.5.5.tgz#62a49c5e294104b79db2a8afdf4f3a274c7f44ca" + integrity sha512-F/CLwB0d10jL6My5vgzRQxCNY2RNyDJZedRBK7FsngdCmzoq3V4OqqNc/9voJb9qRC2wd55oGXUeXv2eIaFmsw== + +"@react-spring/shared@~9.5.5": + version "9.5.5" + resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.5.5.tgz#9be0b391d546e3e184a24ecbaf40acbaeab7fc73" + integrity sha512-YwW70Pa/YXPOwTutExHZmMQSHcNC90kJOnNR4G4mCDNV99hE98jWkIPDOsgqbYx3amIglcFPiYKMaQuGdr8dyQ== + dependencies: + "@react-spring/rafz" "~9.5.5" + "@react-spring/types" "~9.5.5" + +"@react-spring/three@~9.5.5": + version "9.5.5" + resolved "https://registry.yarnpkg.com/@react-spring/three/-/three-9.5.5.tgz#c6fbee977007d1980406db20a28ac3f5dc2ce153" + integrity sha512-9kTIaSceqFIl5EIrdwM7Z53o5I+9BGNVzbp4oZZYMao+GMAWOosnlQdDG5GeqNsIqfW9fZCEquGqagfKAxftcA== + dependencies: + "@react-spring/animated" "~9.5.5" + "@react-spring/core" "~9.5.5" + "@react-spring/shared" "~9.5.5" + "@react-spring/types" "~9.5.5" + +"@react-spring/types@~9.5.5": + version "9.5.5" + resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.5.5.tgz#c8e94f1b9232ca7cb9d860ea67762ec401b1de14" + integrity sha512-7I/qY8H7Enwasxr4jU6WmtNK+RZ4Z/XvSlDvjXFVe7ii1x0MoSlkw6pD7xuac8qrHQRm9BTcbZNyeeKApYsvCg== + +"@react-spring/web@~9.5.5": + version "9.5.5" + resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.5.5.tgz#d416abc591aaed930401f0c98a991a8c5b90c382" + integrity sha512-+moT8aDX/ho/XAhU+HRY9m0LVV9y9CK6NjSRaI+30Re150pB3iEip6QfnF4qnhSCQ5drpMF0XRXHgOTY/xbtFw== + dependencies: + "@react-spring/animated" "~9.5.5" + "@react-spring/core" "~9.5.5" + "@react-spring/shared" "~9.5.5" + "@react-spring/types" "~9.5.5" + +"@react-spring/zdog@~9.5.5": + version "9.5.5" + resolved "https://registry.yarnpkg.com/@react-spring/zdog/-/zdog-9.5.5.tgz#916dba337637d1151c3c2bc829b5105d15adacb5" + integrity sha512-LZgjo2kLlGmUqfE2fdVnvLXz+4eYyQARRvB9KQ4PTEynaETTG89Xgn9YxLrh1p57DzH7gEmTGDZ5hEw3pWqu8g== + dependencies: + "@react-spring/animated" "~9.5.5" + "@react-spring/core" "~9.5.5" + "@react-spring/shared" "~9.5.5" + "@react-spring/types" "~9.5.5" + "@reduxjs/toolkit@^1.6.1": version "1.8.0" resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.8.0.tgz#8ae875e481ed97e4a691aafa034f876bfd0413c4" @@ -14360,7 +14446,7 @@ prompts@2.4.0, prompts@^2.0.1: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -14888,13 +14974,17 @@ react-scripts@^4.0.3: optionalDependencies: fsevents "^2.1.3" -react-spring@^8.0.27: - version "8.0.27" - resolved "https://registry.npmjs.org/react-spring/-/react-spring-8.0.27.tgz" - integrity sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g== +react-spring@^9.5.5: + version "9.5.5" + resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.5.5.tgz#314009a65efc04d0ef157d3d60590dbb9de65f3c" + integrity sha512-vMGVd2yjgxWcRCzoLn9AD1d24+WpunHBRg5DoehcRdiBocaOH6qgle0xN9C5LPplXfv4yIpS5QWGN5MKrWxSZg== dependencies: - "@babel/runtime" "^7.3.1" - prop-types "^15.5.8" + "@react-spring/core" "~9.5.5" + "@react-spring/konva" "~9.5.5" + "@react-spring/native" "~9.5.5" + "@react-spring/three" "~9.5.5" + "@react-spring/web" "~9.5.5" + "@react-spring/zdog" "~9.5.5" react-style-singleton@^2.1.0: version "2.1.1"