Skip to content

I
interface
Commit a3e567bc authored by Connor McEwen's avatar Connor McEwen Committed by GitHub
Browse files
Options

chore: upgrade react-spring version (#4770) 

* chore: upgrade react-spring version

* remove interpolate
Co-authored-by: default avatarCharles Bachmeier <charlie@genie.xyz>
parent a887666b
Hide whitespace changes
Inline Side-by-side
Showing with 121 additions and 30 deletions
src/components/Modal/index.tsx
View file @ a3e567bc
......@@ -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 && (
<StyledDialogOverlay
key={key}
style={props}
as={AnimatedDialogOverlay}
style={{ opacity: opacity.to({ range: [0.0, 1.0], output: [0, 1] }) }}
onDismiss={onDismiss}
initialFocusRef={initialFocusRef}
unstable_lockFocusAcrossFrames={false}
......
src/components/Popups/PopupItem.tsx
View file @ a3e567bc
......@@ -2,7 +2,7 @@ import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
import { useCallback, useEffect } from 'react'
import { X } from 'react-feather'
import { animated } from 'react-spring'
import { useSpring } from 'react-spring/web'
import { useSpring } from 'react-spring'
import styled, { useTheme } from 'styled-components/macro'
import { useRemovePopup } from '../../state/application/hooks'
......
src/nft/components/Box.ts
View file @ a3e567bc
......@@ -40,7 +40,10 @@ export const Box = React.forwardRef<HTMLElement, Props>(({ 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<typeof Box>[0]
......
src/nft/components/sell/select/FilterSidebar.tsx
View file @ a3e567bc
......@@ -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)`) }}
>
<Box
paddingTop={{ sm: '24', md: '0' }}
......
src/nft/components/sell/select/SelectPage.tsx
View file @ a3e567bc
......@@ -32,7 +32,7 @@ import { Dispatch, FormEvent, SetStateAction, useEffect, useMemo, useReducer, us
import InfiniteScroll from 'react-infinite-scroll-component'
import { useInfiniteQuery, useQuery } from 'react-query'
import { Link } from 'react-router-dom'
import { useSpring } from 'react-spring/web'
import { useSpring } from 'react-spring'
import * as styles from './SelectPage.css'
......@@ -261,10 +261,8 @@ export const SelectPage = () => {
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)`),
}}
>
<Row gap="8" flexWrap="nowrap">
......
src/nft/pages/asset/Asset.tsx
View file @ a3e567bc
......@@ -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 = () => {
<AnimatedBox
style={{
// @ts-ignore
width: gridWidthOffset.interpolate((x) => `calc(100% - ${x}px)`),
width: gridWidthOffset.to((x) => `calc(100% - ${x}px)`),
}}
className={styles.container}
>
......
src/nft/pages/collection/index.tsx
View file @ a3e567bc
......@@ -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 */}
<AnimatedBox
style={{
transform: gridX.interpolate((x) => `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
......
tsconfig.json
View file @ a3e567bc
......@@ -23,7 +23,7 @@
"strict": true,
"strictNullChecks": true,
"target": "es5",
"types": ["react-spring", "jest"],
"types": ["jest"],
"useUnknownInCatchVariables": false
},
"exclude": ["node_modules", "cypress"],
......
yarn.lock
View file @ a3e567bc
......@@ -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==
dependencies:
"@babel/runtime" "^7.3.1"
prop-types "^15.5.8"
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:
"@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"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment