443 lines
14 KiB
JavaScript
443 lines
14 KiB
JavaScript
'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. <span ref={containerRef} />.");
|
|
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;
|