@mijadesign/mjui-react-taro/dist/esm/AnimatingNumbers.js

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

import { AnimatingNumbers } from "@nutui/nutui-react-taro";
import { AnimatingNumbers as AnimatingNumbers2 } from "@nutui/nutui-react-taro";
import { _ as __rest } from "./tslib.es6-iWu3F_1J.js";
import React, { useRef, useState, useEffect } from "react";
import { createSelectorQuery } from "@tarojs/taro";
const ComponentDefaults = {
  className: "",
  style: {}
};
const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { length: 0, value: "", delay: 300, duration: 1, thousands: false });
const CountUp = (props) => {
  const _a = Object.assign(Object.assign({}, defaultProps), props), { length, value, delay, duration, className, thousands, style } = _a;
  __rest(_a, ["length", "value", "delay", "duration", "className", "thousands", "style"]);
  const classPrefix = "nut-countup";
  const countupRef = useRef(null);
  const timerRef = useRef(0);
  const numbers = Array.from({ length: 10 }, (v, i) => i);
  const getShowNumber = () => {
    const splitArr = value.split(".");
    const intNumber = length && splitArr[0].length < length ? (Array(length).join("0") + splitArr[0]).slice(-length) : splitArr[0];
    const currNumber = `${thousands ? intNumber.replace(/(\d)(?=(?:\d{3})+$)/g, "$1,") : intNumber}${splitArr[1] ? "." : ""}${splitArr[1] || ""}`;
    return currNumber.split("");
  };
  const [numerArr, setNumerArr] = useState([]);
  const [transformArr, setTransformArr] = useState([]);
  const isLoaded = useRef(false);
  const setNumberTransform = () => {
    if (countupRef.current && numerArr.length) {
      createSelectorQuery().selectAll(".nut-countup-listitem").node((numberItems) => {
        const transformArrCache = [];
        Object.keys(numberItems).forEach((key) => {
          const elem = numberItems[Number(key)];
          const idx = Number(numerArr[Number(key)]);
          if (elem) {
            const transform = idx || idx === 0 ? `translate(0, -${(idx === 0 ? 10 : idx) * 5}%)` : "";
            transformArrCache.push(transform);
          }
        });
        setTransformArr([...transformArrCache]);
      }).exec();
    }
  };
  const numberEaseStyle = (idx) => {
    return {
      transition: `transform ${duration}s ease-in-out`,
      transform: transformArr[idx] ? transformArr[idx] : null
    };
  };
  useEffect(() => {
    setNumberTransform();
  }, [numerArr]);
  useEffect(() => {
    if (!isLoaded.current) {
      isLoaded.current = true;
      timerRef.current = window.setTimeout(() => {
        setNumerArr(getShowNumber());
      }, delay);
    } else {
      setNumerArr(getShowNumber());
    }
    return () => {
      window.clearTimeout(timerRef.current);
    };
  }, [value]);
  return React.createElement(
    "div",
    { className: `${classPrefix} ${className}`, ref: countupRef },
    React.createElement("ul", { className: `${classPrefix}-list` }, numerArr.map((item, idx) => {
      return React.createElement("li", { className: `${classPrefix}-listitem ${!Number.isNaN(Number(item)) ? `${classPrefix}-listitem-number` : ""}`, key: idx }, !Number.isNaN(Number(item)) ? React.createElement("span", { className: `${classPrefix}-number`, style: numberEaseStyle(idx) }, [...numbers, ...numbers].map((number, subidx) => {
        return React.createElement("span", { key: subidx }, number);
      })) : React.createElement("span", { className: `${classPrefix}-separator` }, item));
    }))
  );
};
CountUp.defaultProps = defaultProps;
CountUp.displayName = "NutCountUp";
AnimatingNumbers.CountUp = CountUp;
AnimatingNumbers.CountUp = CountUp;
export {
  AnimatingNumbers2 as default
};