Updated react-spring to latest.

This commit is contained in:
Mike Cao 2022-03-02 15:23:47 -08:00
parent 5a88f2f002
commit f1d97660fb
5 changed files with 108 additions and 32 deletions

View File

@ -2,9 +2,9 @@ import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import { useSpring, animated } from 'react-spring';
import styles from './Toast.module.css';
import Icon from 'components/common/Icon';
import Close from 'assets/times.svg';
import styles from './Toast.module.css';
function Toast({ message, timeout = 3000, onClose }) {
const props = useSpring({

View File

@ -1,5 +1,5 @@
.toast {
position: absolute;
position: fixed;
top: 30px;
left: 0;
right: 0;

View File

@ -9,7 +9,8 @@ import Icon from '../common/Icon';
export default function ThemeButton() {
const [theme, setTheme] = useTheme();
const transitions = useTransition(theme, theme => theme, {
const transitions = useTransition(theme, {
initial: { opacity: 1 },
from: {
opacity: 0,
transform: `translateY(${theme === 'light' ? '20px' : '-20px'}) scale(0.5)`,
@ -27,17 +28,11 @@ export default function ThemeButton() {
return (
<div className={styles.button} onClick={handleClick}>
{transitions.map(({ item, key, props }) =>
item === 'light' ? (
<animated.div key={key} style={props}>
<Icon icon={<Sun />} />
</animated.div>
) : (
<animated.div key={key} style={props}>
<Icon icon={<Moon />} />
</animated.div>
),
)}
{transitions((styles, item) => (
<animated.div key={item} style={styles}>
<Icon icon={item === 'light' ? <Sun /> : <Moon />} />
</animated.div>
))}
</div>
);
}

View File

@ -79,7 +79,7 @@
"react-dom": "^17.0.2",
"react-intl": "^5.20.6",
"react-simple-maps": "^2.3.0",
"react-spring": "^8.0.27",
"react-spring": "^9.4.3",
"react-tooltip": "^4.2.21",
"react-use-measure": "^2.0.4",
"react-window": "^1.8.6",

115
yarn.lock
View File

@ -1151,7 +1151,7 @@
core-js-pure "^3.20.2"
regenerator-runtime "^0.13.4"
"@babel/runtime@^7.0.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.8.4":
"@babel/runtime@^7.0.0", "@babel/runtime@^7.8.4":
version "7.15.4"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==
@ -1599,6 +1599,92 @@
resolved "https://registry.yarnpkg.com/@prisma/engines/-/engines-3.9.0-58.bcc2ff906db47790ee902e7bbc76d7ffb1893009.tgz#e5c345cdedb7be83d11c1e0c5ab61d866b411256"
integrity sha512-qM+uJbkelB21bnK44gYE049YTHIjHysOuj0mj5U2gDGyNLfmiazlggzFPCgEjgme4U5YB2tYs6Z5Hq08Kl8pjA==
"@react-spring/animated@~9.4.3-beta.0":
version "9.4.3"
resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.4.3.tgz#2f8d2b50dfc1975fa490ed3bc03f5ad865180866"
integrity sha512-hKKmeXPoGpJ/zrG/RC8stwW8PmMH0BbewHD8aUPLbyzD9fNvZEJ0mjKmOI0CcSwMpb43kuwY2nX3ZJVImPQCoQ==
dependencies:
"@react-spring/shared" "~9.4.3-beta.0"
"@react-spring/types" "~9.4.3-beta.0"
"@react-spring/core@~9.4.3-beta.0":
version "9.4.3"
resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.4.3.tgz#95c883fa53ff534ff882ba42f863a26a26a6a1c8"
integrity sha512-Jr6/GjHwXYxAtttcYDXOtH36krO0XGjYaSsGR6g+vOUO4y0zAPPXoAwpK6vS7Haip5fRwk7rMdNG+OzU7bB4Bg==
dependencies:
"@react-spring/animated" "~9.4.3-beta.0"
"@react-spring/rafz" "~9.4.3-beta.0"
"@react-spring/shared" "~9.4.3-beta.0"
"@react-spring/types" "~9.4.3-beta.0"
"@react-spring/konva@~9.4.3-beta.0":
version "9.4.3"
resolved "https://registry.yarnpkg.com/@react-spring/konva/-/konva-9.4.3.tgz#ef5332fc0960fa4313ac0ab6a122fd9247b3b111"
integrity sha512-JWxx0YIwipjJTDs7q9XtArlBCTjejyAJZrbhvxmizOM6ZukUj8hcEFYU03Vt5HUTSC4WfG0rkg2O9V1EAXuzCQ==
dependencies:
"@react-spring/animated" "~9.4.3-beta.0"
"@react-spring/core" "~9.4.3-beta.0"
"@react-spring/shared" "~9.4.3-beta.0"
"@react-spring/types" "~9.4.3-beta.0"
"@react-spring/native@~9.4.3-beta.0":
version "9.4.3"
resolved "https://registry.yarnpkg.com/@react-spring/native/-/native-9.4.3.tgz#748ee1f588c1515a76766e319aa48151308bd5ad"
integrity sha512-dfOwzSxJcbHKTNJ26pceZ7xCrqf2+L6W/U17/7aogQwGec4yf1zocWXV3QS+h0HDuY0Bk/yYa7PEy+D+HWc7Og==
dependencies:
"@react-spring/animated" "~9.4.3-beta.0"
"@react-spring/core" "~9.4.3-beta.0"
"@react-spring/shared" "~9.4.3-beta.0"
"@react-spring/types" "~9.4.3-beta.0"
"@react-spring/rafz@~9.4.3-beta.0":
version "9.4.3"
resolved "https://registry.yarnpkg.com/@react-spring/rafz/-/rafz-9.4.3.tgz#0d578072c9692ef5ab74a3b1d49c1432dce32ab6"
integrity sha512-KnujiZNIHzXsRq1D4tVbCajl8Lx+e6vtvUk7o69KbuneSpEgil9P/x3b+hMDk8U0NHGhJjzhU7723/CNsQansA==
"@react-spring/shared@~9.4.3-beta.0":
version "9.4.3"
resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.4.3.tgz#86e03ddd47911ba89be1d0f5a6d11966e305ee04"
integrity sha512-mB1UUD/pl1LzaY0XeNWZtvJzxMa8gLQf02nY12HAz4Rukm9dFRj0jeYwQYLdfYLsGFo1ldvHNurun6hZMG7kiQ==
dependencies:
"@react-spring/rafz" "~9.4.3-beta.0"
"@react-spring/types" "~9.4.3-beta.0"
"@react-spring/three@~9.4.3-beta.0":
version "9.4.3"
resolved "https://registry.yarnpkg.com/@react-spring/three/-/three-9.4.3.tgz#1836ea12f7cb7ccb4c4a1f39101f4fb17955c386"
integrity sha512-AhCPqoZZXUnzVcKal01sdYBRqkVd2iNxDMk7BGXZsQNWeqaOMaaBT/a6d3oG3wwPX6xIa9ogBtzmzEasN6HYzA==
dependencies:
"@react-spring/animated" "~9.4.3-beta.0"
"@react-spring/core" "~9.4.3-beta.0"
"@react-spring/shared" "~9.4.3-beta.0"
"@react-spring/types" "~9.4.3-beta.0"
"@react-spring/types@~9.4.3-beta.0":
version "9.4.3"
resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.4.3.tgz#8926d7a09812374127b1f8a904a755c7579124e6"
integrity sha512-dzJrPvUc42K2un9y6D1IsrPQO5tKsbWwUo+wsATnXjG3ePWyuDBIOMJuPe605NhIXUmPH+Vik2wMoZz06hD1uA==
"@react-spring/web@~9.4.3-beta.0":
version "9.4.3"
resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.4.3.tgz#b59c1491de344545590598b7fde52b607c4e5d10"
integrity sha512-llKve/uJ73JVagBAVvA74S/LfZP4oSB3XP1qmggSUNXzPZZo5ylIMrs55PxpLyxgzzihuhDU5N17ct3ATViOHw==
dependencies:
"@react-spring/animated" "~9.4.3-beta.0"
"@react-spring/core" "~9.4.3-beta.0"
"@react-spring/shared" "~9.4.3-beta.0"
"@react-spring/types" "~9.4.3-beta.0"
"@react-spring/zdog@~9.4.3-beta.0":
version "9.4.3"
resolved "https://registry.yarnpkg.com/@react-spring/zdog/-/zdog-9.4.3.tgz#0a76564ea635ab00a1720a3843faf4f46ca3c82a"
integrity sha512-ujRJBKEWC6miwPhCwHkn13h9OfqK+Kkq49crebo5neY4kCK2efNoagQo54DwXFgbVNFJV+6GwcAZVI2ybS5L1Q==
dependencies:
"@react-spring/animated" "~9.4.3-beta.0"
"@react-spring/core" "~9.4.3-beta.0"
"@react-spring/shared" "~9.4.3-beta.0"
"@react-spring/types" "~9.4.3-beta.0"
"@rollup/plugin-buble@^0.21.3":
version "0.21.3"
resolved "https://registry.yarnpkg.com/@rollup/plugin-buble/-/plugin-buble-0.21.3.tgz#1649a915b1d051a4f430d40e7734a7f67a69b33e"
@ -5397,15 +5483,6 @@ prompts@2.4.2:
kleur "^3.0.3"
sisteransi "^1.0.5"
prop-types@^15.5.8:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
dependencies:
loose-envify "^1.4.0"
object-assign "^4.1.1"
react-is "^16.8.1"
prop-types@^15.7.2, prop-types@^15.8.1:
version "15.8.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
@ -5467,7 +5544,7 @@ react-intl@^5.20.6:
intl-messageformat "9.11.4"
tslib "^2.1.0"
react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
react-is@^16.13.1, react-is@^16.7.0:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@ -5482,13 +5559,17 @@ react-simple-maps@^2.3.0:
d3-zoom "^2.0.0"
topojson-client "^3.1.0"
react-spring@^8.0.27:
version "8.0.27"
resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-8.0.27.tgz#97d4dee677f41e0b2adcb696f3839680a3aa356a"
integrity sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==
react-spring@^9.4.3:
version "9.4.3"
resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.4.3.tgz#3f697d3d6e990dbf7d182619dc75a72a63a302c1"
integrity sha512-GGKAqQQ790JLoA2SAUgdJErFRG8oFR6pzX8jnJoqORVWX5Wo9bJUWs4563f2oN19+yQkVhc77neAkqQ7GCN8Lw==
dependencies:
"@babel/runtime" "^7.3.1"
prop-types "^15.5.8"
"@react-spring/core" "~9.4.3-beta.0"
"@react-spring/konva" "~9.4.3-beta.0"
"@react-spring/native" "~9.4.3-beta.0"
"@react-spring/three" "~9.4.3-beta.0"
"@react-spring/web" "~9.4.3-beta.0"
"@react-spring/zdog" "~9.4.3-beta.0"
react-tooltip@^4.2.21:
version "4.2.21"