100 lines
2.7 KiB
TypeScript
100 lines
2.7 KiB
TypeScript
|
'use client';
|
|||
|
|
|
|||
|
|
import { useEffect, useRef, useState } from 'react';
|
|||
|
|
|
|||
|
|
const FA_DIGITS = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'] as const;
|
|||
|
|
|
|||
|
|
function toAscii(str: string) {
|
|||
|
|
return str.replace(/[۰-۹]/g, (d) =>
|
|||
|
|
String(FA_DIGITS.indexOf(d as (typeof FA_DIGITS)[number])),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function toFa(n: number) {
|
|||
|
|
return n.toString().replace(/\d/g, (d) => FA_DIGITS[Number(d)]);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Parses a metric string like "18+", "۱۲ms", "99%", "۹۹٪" into a numeric
|
|||
|
|
* target plus a trailing suffix that survives the count animation.
|
|||
|
|
*/
|
|||
|
|
function parse(value: string) {
|
|||
|
|
const ascii = toAscii(value);
|
|||
|
|
const match = ascii.match(/^(\d+(?:\.\d+)?)(.*)$/);
|
|||
|
|
if (!match) return { target: 0, suffix: value, decimals: 0 };
|
|||
|
|
const target = parseFloat(match[1]);
|
|||
|
|
const decimals = match[1].includes('.') ? match[1].split('.')[1].length : 0;
|
|||
|
|
return { target, suffix: match[2], decimals };
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3);
|
|||
|
|
|
|||
|
|
type Props = {
|
|||
|
|
/** Final string, e.g. "18+", "۱۲ms", "99%" */
|
|||
|
|
value: string;
|
|||
|
|
/** Locale controls digit script in the rendered output */
|
|||
|
|
locale: 'fa' | 'en';
|
|||
|
|
/** Animation duration in ms */
|
|||
|
|
duration?: number;
|
|||
|
|
className?: string;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export function Counter({ value, locale, duration = 1600, className }: Props) {
|
|||
|
|
const { target, suffix, decimals } = parse(value);
|
|||
|
|
const [display, setDisplay] = useState(0);
|
|||
|
|
const elRef = useRef<HTMLSpanElement>(null);
|
|||
|
|
const started = useRef(false);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
const el = elRef.current;
|
|||
|
|
if (!el) return;
|
|||
|
|
|
|||
|
|
const start = () => {
|
|||
|
|
if (started.current) return;
|
|||
|
|
started.current = true;
|
|||
|
|
const t0 = performance.now();
|
|||
|
|
const tick = (now: number) => {
|
|||
|
|
const p = Math.min(1, (now - t0) / duration);
|
|||
|
|
const eased = easeOutCubic(p);
|
|||
|
|
setDisplay(target * eased);
|
|||
|
|
if (p < 1) requestAnimationFrame(tick);
|
|||
|
|
else setDisplay(target);
|
|||
|
|
};
|
|||
|
|
requestAnimationFrame(tick);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if (typeof IntersectionObserver === 'undefined') {
|
|||
|
|
start();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const io = new IntersectionObserver(
|
|||
|
|
(entries) => {
|
|||
|
|
for (const e of entries) {
|
|||
|
|
if (e.isIntersecting) {
|
|||
|
|
start();
|
|||
|
|
io.disconnect();
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{ threshold: 0.4 },
|
|||
|
|
);
|
|||
|
|
io.observe(el);
|
|||
|
|
return () => io.disconnect();
|
|||
|
|
}, [target, duration]);
|
|||
|
|
|
|||
|
|
const formatted = decimals
|
|||
|
|
? display.toFixed(decimals)
|
|||
|
|
: Math.round(display).toString();
|
|||
|
|
const rendered = locale === 'fa' ? toFa(Number(formatted)) : formatted;
|
|||
|
|
const sfx = locale === 'fa' ? suffix : toAscii(suffix);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<span ref={elRef} className={className}>
|
|||
|
|
{rendered}
|
|||
|
|
{sfx}
|
|||
|
|
</span>
|
|||
|
|
);
|
|||
|
|
}
|