Added AnimatedDiv component.

This commit is contained in:
Mike Cao 2025-02-14 17:16:09 -08:00
parent 2978bf3c6f
commit a8a1ccce18
26 changed files with 83 additions and 80 deletions

View file

@ -1,6 +1,7 @@
import { FixedSizeList } from 'react-window';
import { useSpring, animated, config } from '@react-spring/web';
import { useSpring, config } from '@react-spring/web';
import classNames from 'classnames';
import { AnimatedDiv } from '@/components/common/AnimatedDiv';
import { Empty } from '@/components/common/Empty';
import { formatLongNumber } from '@/lib/format';
import { useMessages } from '@/components/hooks';
@ -94,14 +95,14 @@ const AnimatedRow = ({ label, value = 0, percent, change, animate, showPercentag
<div className={styles.label}>{label}</div>
<div className={styles.value}>
{change}
<animated.div className={styles.value} title={props?.y as any}>
<AnimatedDiv className={styles.value} title={props?.y as any}>
{props.y?.to(formatLongNumber)}
</animated.div>
</AnimatedDiv>
</div>
{showPercentage && (
<div className={styles.percent}>
<animated.div className={styles.bar} style={{ width: props.width.to(n => `${n}%`) }} />
<animated.span>{props.width.to(n => `${n?.toFixed?.(0)}%`)}</animated.span>
<AnimatedDiv className={styles.bar} style={{ width: props.width.to(n => `${n}%`) }} />
<AnimatedDiv>{props.width.to(n => `${n?.toFixed?.(0)}%`)}</AnimatedDiv>
</div>
)}
</div>