@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
189 lines (188 loc) • 7.82 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.CountUp = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _taro = require("@tarojs/taro");
var _components = require("@tarojs/components");
var _react = require("react");
var _defaultProps = require("../default-props");
var _utils = require("../common/utils");
require("./index.css");
var _jsxRuntime = require("react/jsx-runtime");
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) { (0, _defineProperty2.default)(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; }
var ensureNumber = function ensureNumber(val) {
// eslint-disable-next-line no-restricted-globals
return typeof val === 'number' && !isNaN(val);
};
var d = (0, _defaultProps.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 = (0, _react.useState)(formatNumber(startVal)),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
displayValue = _useState2[0],
setDisplayValue = _useState2[1];
var localRef = (0, _react.useRef)({
localStartVal: startVal,
localDuration: duration
});
var remaining = (0, _react.useRef)(null);
var paused = (0, _react.useRef)(true);
var rAF = (0, _react.useRef)(null);
var startTime = (0, _react.useRef)(null);
var printVal = (0, _react.useRef)(startVal);
var lastTime = (0, _react.useRef)(0);
var countDown = (0, _react.useMemo)(function () {
return startVal > endVal;
}, [startVal, endVal]);
(0, _react.useEffect)(function () {
autoStart && _start();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [autoStart, startVal, endVal]);
(0, _taro.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 = (0, _utils.requestAnimationFrame)(count);
};
var _pause = function pause() {
if (paused.current) return;
paused.current = true;
(0, _utils.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 = (0, _utils.requestAnimationFrame)(count);
};
var _reset = function reset() {
paused.current = true;
(0, _utils.cancelAnimationFrame)(rAF.current);
localRef.current = {
localStartVal: startVal,
localDuration: duration
};
printVal.current = startVal;
remaining.current = null;
startTime.current = null;
lastTime.current = 0;
setDisplayValue(formatNumber(startVal));
};
(0, _react.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 = (0, _utils.requestAnimationFrame)(count);
} else {
onFinish && onFinish();
}
};
(0, _react.useEffect)(function () {
return function () {
(0, _utils.cancelAnimationFrame)(rAF.current);
};
}, []);
(0, _taro.useDidHide)(function () {
(0, _utils.cancelAnimationFrame)(rAF.current);
});
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
className: 'vant-count-up ' + className || '',
children: [prefix && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Text, {
className: "vant-count-up__prefix",
children: prefix
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Text, {
className: "vant-count-up",
children: displayValue
}), suffix && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Text, {
className: "vant-count-up__suffix",
children: suffix
})]
});
};
var CountUp = /*#__PURE__*/(0, _react.forwardRef)(Index);
exports.CountUp = CountUp;
var _default = CountUp;
exports.default = _default;