@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
182 lines • 7.25 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import { useDidHide, useDidShow } from '@tarojs/taro';
import { View, Text } from '@tarojs/components';
import { useEffect, useState, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
import { get } from '../default-props';
import { requestAnimationFrame, cancelAnimationFrame } from '../common/utils';
import './index.css';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var ensureNumber = function ensureNumber(val) {
// eslint-disable-next-line no-restricted-globals
return typeof val === 'number' && !isNaN(val);
};
var d = get().CountUp;
var Index = function Index(props, ref) {
var _d$props = _objectSpread(_objectSpread({}, d), props),
_d$props$startVal = _d$props.startVal,
startVal = _d$props$startVal === void 0 ? 0 : _d$props$startVal,
_d$props$endVal = _d$props.endVal,
endVal = _d$props$endVal === void 0 ? 0 : _d$props$endVal,
_d$props$duration = _d$props.duration,
duration = _d$props$duration === void 0 ? 3000 : _d$props$duration,
_d$props$autoStart = _d$props.autoStart,
autoStart = _d$props$autoStart === void 0 ? true : _d$props$autoStart,
_d$props$decimals = _d$props.decimals,
decimals = _d$props$decimals === void 0 ? 0 : _d$props$decimals,
_d$props$useEasing = _d$props.useEasing,
useEasing = _d$props$useEasing === void 0 ? true : _d$props$useEasing,
_d$props$decimal = _d$props.decimal,
decimal = _d$props$decimal === void 0 ? '.' : _d$props$decimal,
_d$props$separator = _d$props.separator,
separator = _d$props$separator === void 0 ? '' : _d$props$separator,
_d$props$className = _d$props.className,
className = _d$props$className === void 0 ? '' : _d$props$className,
prefix = _d$props.prefix,
suffix = _d$props.suffix,
onFinish = _d$props.onFinish;
var formatNumber = function formatNumber(num) {
num = Number(num);
num = num.toFixed(Number(decimals));
num += '';
var x = num.split('.');
var x1 = x[0];
var x2 = x.length > 1 ? decimal + x[1] : '';
var rgx = /(\d+)(\d{3})/;
if (separator && !ensureNumber(separator)) {
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + separator + '$2');
}
}
return x1 + x2;
};
var _useState = useState(formatNumber(startVal)),
_useState2 = _slicedToArray(_useState, 2),
displayValue = _useState2[0],
setDisplayValue = _useState2[1];
var localRef = useRef({
localStartVal: startVal,
localDuration: duration
});
var remaining = useRef(null);
var paused = useRef(true);
var rAF = useRef(null);
var startTime = useRef(null);
var printVal = useRef(startVal);
var lastTime = useRef(0);
var countDown = useMemo(function () {
return startVal > endVal;
}, [startVal, endVal]);
useEffect(function () {
autoStart && _start();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [autoStart, startVal, endVal]);
useDidShow(function () {
autoStart && _start();
});
var easingFn = function easingFn(t, b, c, d) {
return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
};
var _start = function start() {
if (!paused.current) return;
localRef.current = {
localStartVal: startVal,
localDuration: duration
};
startTime.current = null;
paused.current = false;
rAF.current = requestAnimationFrame(count);
};
var _pause = function pause() {
if (paused.current) return;
paused.current = true;
cancelAnimationFrame(rAF.current);
};
var _resume = function resume() {
if (!paused.current) return;
paused.current = false;
startTime.current = null;
localRef.current = {
localStartVal: printVal.current,
localDuration: remaining.current || duration
};
rAF.current = requestAnimationFrame(count);
};
var _reset = function reset() {
paused.current = true;
cancelAnimationFrame(rAF.current);
localRef.current = {
localStartVal: startVal,
localDuration: duration
};
printVal.current = startVal;
remaining.current = null;
startTime.current = null;
lastTime.current = 0;
setDisplayValue(formatNumber(startVal));
};
useImperativeHandle(ref, function () {
return {
start: function start() {
return _start();
},
pause: function pause() {
return _pause();
},
resume: function resume() {
return _resume();
},
reset: function reset() {
return _reset();
}
};
});
var count = function count(timestamp) {
if (!startTime.current) startTime.current = timestamp;
var _localRef$current = localRef.current,
localDuration = _localRef$current.localDuration,
localStartVal = _localRef$current.localStartVal;
var progress = timestamp - (startTime.current || 0);
remaining.current = localDuration - progress;
var value;
if (useEasing) {
value = countDown ? easingFn(progress, 0, localStartVal - endVal, localDuration) : easingFn(progress, localStartVal, endVal - localStartVal, localDuration);
} else {
value = countDown ? localStartVal - (localStartVal - endVal) * (progress / localDuration) : localStartVal + (endVal - localStartVal) * (progress / localDuration);
}
printVal.current = countDown ? Math.max(value, endVal) : Math.min(value, endVal);
setDisplayValue(formatNumber(printVal.current) || '0');
if (progress < localDuration) {
rAF.current = requestAnimationFrame(count);
} else {
onFinish && onFinish();
}
};
useEffect(function () {
return function () {
cancelAnimationFrame(rAF.current);
};
}, []);
useDidHide(function () {
cancelAnimationFrame(rAF.current);
});
return /*#__PURE__*/_jsxs(View, {
className: 'vant-count-up ' + className || '',
children: [prefix && /*#__PURE__*/_jsx(Text, {
className: "vant-count-up__prefix",
children: prefix
}), /*#__PURE__*/_jsx(Text, {
className: "vant-count-up",
children: displayValue
}), suffix && /*#__PURE__*/_jsx(Text, {
className: "vant-count-up__suffix",
children: suffix
})]
});
};
var CountUp = /*#__PURE__*/forwardRef(Index);
export { CountUp };
export default CountUp;