From cf08ea95ce0d71637ec59fe6c1b3c93cd13afa62 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= Date: Sun, 4 Jan 2026 14:39:17 +0100 Subject: [PATCH] pl-fe: migrate AnimatedNumber, remove react-motion dependency MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: nicole mikołajczyk --- packages/pl-fe/package.json | 2 - .../pl-fe/src/components/animated-number.tsx | 49 +++++++++---------- pnpm-lock.yaml | 42 ---------------- 3 files changed, 23 insertions(+), 70 deletions(-) diff --git a/packages/pl-fe/package.json b/packages/pl-fe/package.json index fbcd3fa7c..fdec41fb6 100644 --- a/packages/pl-fe/package.json +++ b/packages/pl-fe/package.json @@ -122,7 +122,6 @@ "react-hot-toast": "^2.5.2", "react-inlinesvg": "^4.1.8", "react-intl": "^7.0.4", - "react-motion": "^0.5.2", "react-redux": "^9.0.4", "react-sparklines": "^1.7.0", "react-sticky-box": "^2.0.5", @@ -158,7 +157,6 @@ "@types/react": "^18.3.18", "@types/react-color": "^3.0.13", "@types/react-dom": "^18.3.5", - "@types/react-motion": "^0.0.40", "@types/react-router-dom": "^5.3.3", "@types/react-sparklines": "^1.7.5", "@types/react-swipeable-views": "^0.13.6", diff --git a/packages/pl-fe/src/components/animated-number.tsx b/packages/pl-fe/src/components/animated-number.tsx index c1f73b563..712d064b4 100644 --- a/packages/pl-fe/src/components/animated-number.tsx +++ b/packages/pl-fe/src/components/animated-number.tsx @@ -1,6 +1,6 @@ +import { animated, config, useTransition } from '@react-spring/web'; import React, { useEffect, useState } from 'react'; import { useIntl, type IntlShape } from 'react-intl'; -import { TransitionMotion, spring } from 'react-motion'; import { useSettings } from 'pl-fe/stores/settings'; import { isNumber, roundDown } from 'pl-fe/utils/numbers'; @@ -52,7 +52,7 @@ const AnimatedNumber: React.FC = ({ value, obfuscate, short, ma const intl = useIntl(); const { reduceMotion } = useSettings(); - const [direction, setDirection] = useState(1); + const [direction, setDirection] = useState(0); const [displayedValue, setDisplayedValue] = useState(value); const [formattedValue, setFormattedValue] = useState(intl.formatNumber(value, { numberingSystem: 'latn' })); @@ -68,37 +68,34 @@ const AnimatedNumber: React.FC = ({ value, obfuscate, short, ma : short ? shortNumberFormat(value, intl, max) : intl.formatNumber(value, { numberingSystem: 'latn' })); - }, [value]); + }, [value, intl, max, obfuscate, short]); - const willEnter = () => ({ y: -1 * direction }); - - const willLeave = () => ({ y: spring(1 * direction, { damping: 35, stiffness: 400 }) }); + const transitions = useTransition(formattedValue, { + from: { y: -1 * direction }, + enter: { y: 0 }, + leave: { y: 1 * direction }, + config: config.slow, + immediate: reduceMotion || direction === 0, + }); if (reduceMotion) { return <>{formattedValue}; } - const styles = [{ - key: `${formattedValue}`, - data: formattedValue, - style: { y: spring(0, { damping: 35, stiffness: 400 }) }, - }]; - return ( - - {items => ( - - {items.map(({ key, data, style }) => ( - 0 ? 'absolute' : 'static', transform: `translateY(${style.y * 100}%)` }} - > - {data} - - ))} - - )} - + + {transitions((style, item) => ( + `translateY(${y * 100}%)`), + }} + > + {item} + + ))} + ); }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6b2f5729c..6f92f247b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -367,9 +367,6 @@ importers: react-intl: specifier: ^7.0.4 version: 7.1.11(react@18.3.1)(typescript@5.7.3) - react-motion: - specifier: ^0.5.2 - version: 0.5.2(react@18.3.1) react-redux: specifier: ^9.0.4 version: 9.2.0(@types/react@18.3.23)(react@18.3.1)(redux@5.0.1) @@ -470,9 +467,6 @@ importers: '@types/react-dom': specifier: ^18.3.5 version: 18.3.7(@types/react@18.3.23) - '@types/react-motion': - specifier: ^0.0.40 - version: 0.0.40 '@types/react-router-dom': specifier: ^5.3.3 version: 5.3.3 @@ -2620,9 +2614,6 @@ packages: peerDependencies: '@types/react': ^18.3.18 - '@types/react-motion@0.0.40': - resolution: {integrity: sha512-Bp6i9WTvW6QFN2E/XQPm8HPGMx1SVJ7H1DPsvptwWWh1XBymDZ7N7SK4nSZT/4tP4bTGvp1KHSAsswWZKO/WHA==} - '@types/react-router-dom@5.3.3': resolution: {integrity: sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==} @@ -5185,12 +5176,6 @@ packages: resolution: {integrity: sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==} engines: {node: '>= 14.16'} - performance-now@0.2.0: - resolution: {integrity: sha512-YHk5ez1hmMR5LOkb9iJkLKqoBlL7WD5M8ljC75ZfzXriuBIVNuecaXuU7e+hOwyqf24Wxhh7Vxgt7Hnw9288Tg==} - - performance-now@2.1.0: - resolution: {integrity: sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==} - picocolors@1.1.1: resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==} @@ -5508,9 +5493,6 @@ packages: queue-microtask@1.2.3: resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} - raf@3.4.1: - resolution: {integrity: sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==} - randombytes@2.1.0: resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==} @@ -5591,11 +5573,6 @@ packages: react-is@17.0.2: resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==} - react-motion@0.5.2: - resolution: {integrity: sha512-9q3YAvHoUiWlP3cK0v+w1N5Z23HXMj4IF4YuvjvWegWqNPfLXsOBE/V7UvQGpXxHFKRQQcNcVQE31g9SB/6qgQ==} - peerDependencies: - react: ^0.14.9 || ^15.3.0 || ^16.0.0 - react-property@2.0.2: resolution: {integrity: sha512-+PbtI3VuDV0l6CleQMsx2gtK0JZbZKbpdu5ynr+lbsuvtmgbNcS3VM0tuY2QjFNOcWxvXeHjDpy42RO+4U2rug==} @@ -9208,10 +9185,6 @@ snapshots: dependencies: '@types/react': 18.3.23 - '@types/react-motion@0.0.40': - dependencies: - '@types/react': 18.3.23 - '@types/react-router-dom@5.3.3': dependencies: '@types/history': 4.7.11 @@ -12237,10 +12210,6 @@ snapshots: pathval@2.0.1: {} - performance-now@0.2.0: {} - - performance-now@2.1.0: {} - picocolors@1.1.1: {} picomatch@2.3.1: {} @@ -12517,10 +12486,6 @@ snapshots: queue-microtask@1.2.3: {} - raf@3.4.1: - dependencies: - performance-now: 2.1.0 - randombytes@2.1.0: dependencies: safe-buffer: 5.2.1 @@ -12615,13 +12580,6 @@ snapshots: react-is@17.0.2: {} - react-motion@0.5.2(react@18.3.1): - dependencies: - performance-now: 0.2.0 - prop-types: 15.8.1 - raf: 3.4.1 - react: 18.3.1 - react-property@2.0.2: {} react-redux@9.2.0(@types/react@18.3.23)(react@18.3.1)(redux@5.0.1):