'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); var React = require('react'); var countup_js = require('countup.js'); function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } } function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } function _objectSpread2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); } function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; } function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } /** * Silence SSR Warnings. * Borrowed from Formik v2.1.1, Licensed MIT. * * https://github.com/formium/formik/blob/9316a864478f8fcd4fa99a0735b1d37afdf507dc/LICENSE */ var useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? React.useLayoutEffect : React.useEffect; /* eslint-disable @typescript-eslint/no-explicit-any */ /** * Create a stable reference to a callback which is updated after each render is committed. * Typed version borrowed from Formik v2.2.1. Licensed MIT. * * https://github.com/formium/formik/blob/9316a864478f8fcd4fa99a0735b1d37afdf507dc/LICENSE */ function useEventCallback(fn) { var ref = React.useRef(fn); // we copy a ref to the callback scoped to the current state/props on each render useIsomorphicLayoutEffect(function () { ref.current = fn; }); return React.useCallback(function () { for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } return ref.current.apply(void 0, args); }, []); } var createCountUpInstance = function createCountUpInstance(el, props) { var decimal = props.decimal, decimals = props.decimals, duration = props.duration, easingFn = props.easingFn, end = props.end, formattingFn = props.formattingFn, numerals = props.numerals, prefix = props.prefix, separator = props.separator, start = props.start, suffix = props.suffix, useEasing = props.useEasing, useGrouping = props.useGrouping, useIndianSeparators = props.useIndianSeparators, enableScrollSpy = props.enableScrollSpy, scrollSpyDelay = props.scrollSpyDelay, scrollSpyOnce = props.scrollSpyOnce, plugin = props.plugin; return new countup_js.CountUp(el, end, { startVal: start, duration: duration, decimal: decimal, decimalPlaces: decimals, easingFn: easingFn, formattingFn: formattingFn, numerals: numerals, separator: separator, prefix: prefix, suffix: suffix, plugin: plugin, useEasing: useEasing, useIndianSeparators: useIndianSeparators, useGrouping: useGrouping, enableScrollSpy: enableScrollSpy, scrollSpyDelay: scrollSpyDelay, scrollSpyOnce: scrollSpyOnce }); }; var _excluded$1 = ["ref", "startOnMount", "enableReinitialize", "delay", "onEnd", "onStart", "onPauseResume", "onReset", "onUpdate"]; var DEFAULTS = { decimal: '.', separator: ',', delay: null, prefix: '', suffix: '', duration: 2, start: 0, decimals: 0, startOnMount: true, enableReinitialize: true, useEasing: true, useGrouping: true, useIndianSeparators: false }; var useCountUp = function useCountUp(props) { var filteredProps = Object.fromEntries(Object.entries(props).filter(function (_ref) { var _ref2 = _slicedToArray(_ref, 2), value = _ref2[1]; return value !== undefined; })); var _useMemo = React.useMemo(function () { return _objectSpread2(_objectSpread2({}, DEFAULTS), filteredProps); }, [props]), ref = _useMemo.ref, startOnMount = _useMemo.startOnMount, enableReinitialize = _useMemo.enableReinitialize, delay = _useMemo.delay, onEnd = _useMemo.onEnd, onStart = _useMemo.onStart, onPauseResume = _useMemo.onPauseResume, onReset = _useMemo.onReset, onUpdate = _useMemo.onUpdate, instanceProps = _objectWithoutProperties(_useMemo, _excluded$1); var countUpRef = React.useRef(); var timerRef = React.useRef(); var isInitializedRef = React.useRef(false); var createInstance = useEventCallback(function () { return createCountUpInstance(typeof ref === 'string' ? ref : ref.current, instanceProps); }); var getCountUp = useEventCallback(function (recreate) { var countUp = countUpRef.current; if (countUp && !recreate) { return countUp; } var newCountUp = createInstance(); countUpRef.current = newCountUp; return newCountUp; }); var start = useEventCallback(function () { var run = function run() { return getCountUp(true).start(function () { onEnd === null || onEnd === void 0 || onEnd({ pauseResume: pauseResume, reset: reset, start: restart, update: update }); }); }; if (delay && delay > 0) { timerRef.current = setTimeout(run, delay * 1000); } else { run(); } onStart === null || onStart === void 0 || onStart({ pauseResume: pauseResume, reset: reset, update: update }); }); var pauseResume = useEventCallback(function () { getCountUp().pauseResume(); onPauseResume === null || onPauseResume === void 0 || onPauseResume({ reset: reset, start: restart, update: update }); }); var reset = useEventCallback(function () { // Quick fix for https://github.com/glennreyes/react-countup/issues/736 - should be investigated // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore if (getCountUp().el) { timerRef.current && clearTimeout(timerRef.current); getCountUp().reset(); onReset === null || onReset === void 0 || onReset({ pauseResume: pauseResume, start: restart, update: update }); } }); var update = useEventCallback(function (newEnd) { getCountUp().update(newEnd); onUpdate === null || onUpdate === void 0 || onUpdate({ pauseResume: pauseResume, reset: reset, start: restart }); }); var restart = useEventCallback(function () { reset(); start(); }); var maybeInitialize = useEventCallback(function (shouldReset) { if (startOnMount) { if (shouldReset) { reset(); } start(); } }); React.useEffect(function () { if (!isInitializedRef.current) { isInitializedRef.current = true; maybeInitialize(); } else if (enableReinitialize) { maybeInitialize(true); } }, [enableReinitialize, isInitializedRef, maybeInitialize, delay, props.start, props.suffix, props.prefix, props.duration, props.separator, props.decimals, props.decimal, props.formattingFn]); React.useEffect(function () { return function () { reset(); }; }, [reset]); return { start: restart, pauseResume: pauseResume, reset: reset, update: update, getCountUp: getCountUp }; }; var _excluded = ["className", "redraw", "containerProps", "children", "style"]; var CountUp = function CountUp(props) { var className = props.className, redraw = props.redraw, containerProps = props.containerProps, children = props.children, style = props.style, useCountUpProps = _objectWithoutProperties(props, _excluded); var containerRef = React.useRef(null); var isInitializedRef = React.useRef(false); var _useCountUp = useCountUp(_objectSpread2(_objectSpread2({}, useCountUpProps), {}, { ref: containerRef, startOnMount: typeof children !== 'function' || props.delay === 0, // component manually restarts enableReinitialize: false })), start = _useCountUp.start, reset = _useCountUp.reset, updateCountUp = _useCountUp.update, pauseResume = _useCountUp.pauseResume, getCountUp = _useCountUp.getCountUp; var restart = useEventCallback(function () { start(); }); var update = useEventCallback(function (end) { if (!props.preserveValue) { reset(); } updateCountUp(end); }); var initializeOnMount = useEventCallback(function () { if (typeof props.children === 'function') { // Warn when user didn't use containerRef at all if (!(containerRef.current instanceof Element)) { console.error("Couldn't find attached element to hook the CountUp instance into! Try to attach \"containerRef\" from the render prop to a an Element, eg. ."); return; } } // unlike the hook, the CountUp component initializes on mount getCountUp(); }); React.useEffect(function () { initializeOnMount(); }, [initializeOnMount]); React.useEffect(function () { if (isInitializedRef.current) { update(props.end); } }, [props.end, update]); var redrawDependencies = redraw && props; // if props.redraw, call this effect on every props change React.useEffect(function () { if (redraw && isInitializedRef.current) { restart(); } }, [restart, redraw, redrawDependencies]); // if not props.redraw, call this effect only when certain props are changed React.useEffect(function () { if (!redraw && isInitializedRef.current) { restart(); } }, [restart, redraw, props.start, props.suffix, props.prefix, props.duration, props.separator, props.decimals, props.decimal, props.className, props.formattingFn]); React.useEffect(function () { isInitializedRef.current = true; }, []); if (typeof children === 'function') { // TypeScript forces functional components to return JSX.Element | null. return children({ countUpRef: containerRef, start: start, reset: reset, update: updateCountUp, pauseResume: pauseResume, getCountUp: getCountUp }); } return /*#__PURE__*/React.createElement("span", _extends({ className: className, ref: containerRef, style: style }, containerProps), typeof props.start !== 'undefined' ? getCountUp().formattingFn(props.start) : ''); }; exports.default = CountUp; exports.useCountUp = useCountUp;