infinity-forge
Version:
34 lines • 1.69 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.CountUp = CountUp;
var jsx_runtime_1 = require("react/jsx-runtime");
var ui_1 = require("../../../ui/index.js");
var react_1 = require("react");
function CountUp(_a) {
var target = _a.target, afterCount = _a.afterCount, beforeCount = _a.beforeCount, className = _a.className, _b = _a.duration, duration = _b === void 0 ? 2000 : _b;
var _c = (0, react_1.useState)(0), count = _c[0], setCount = _c[1];
var countRef = (0, react_1.useRef)(null);
var countIsVisible = (0, ui_1.useIsVisible)({ ref: countRef, showOneTime: true });
(0, react_1.useEffect)(function () {
if (!countIsVisible)
return;
var start = 0;
var increment = target / (duration / 16); // Aproximadamente 60 FPS
var timer = setInterval(function () {
start += increment;
if (start >= target) {
setCount(target);
clearInterval(timer);
}
else {
setCount(Math.ceil(start));
}
}, 16); // A cada ~16ms, para manter 60 FPS
return function () {
clearInterval(timer);
};
}, [target, duration, countIsVisible]);
var formattedCount = new Intl.NumberFormat('pt-BR').format(count);
return ((0, jsx_runtime_1.jsxs)("div", { className: className, ref: countRef, children: [beforeCount && (0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: beforeCount } }), formattedCount, " ", afterCount && (0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: afterCount } })] }));
}
//# sourceMappingURL=index.js.map