@nutui/nutui-react/dist/esm/AnimatingNumbers.js

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

import React__default, { useRef, useMemo, useEffect, Component } from "react";
import { _ as __rest } from "./tslib.es6.js";
import { C as ComponentDefaults } from "./typings.js";
import { m as mergeProps } from "./merge-props.js";
const defaultProps$1 = Object.assign(Object.assign({}, ComponentDefaults), { length: 0, value: "", delay: 300, duration: 1, thousands: false });
const CountUp = (props) => {
  const _a = mergeProps(defaultProps$1, 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 = useMemo(getShowNumber, [value, length, thousands]);
  const setNumberTransform = () => {
    if (countupRef.current) {
      const numberItems = countupRef.current.querySelectorAll(".nut-countup-number");
      const numberFilterArr = numerArr.filter((item) => !Number.isNaN(Number(item)));
      Object.keys(numberItems).forEach((key) => {
        const elem = numberItems[Number(key)];
        const idx = Number(numberFilterArr[Number(key)]);
        if ((idx || idx === 0) && elem) {
          const transform = `translate(0, -${(idx === 0 ? 10 : idx) * 5}%)`;
          elem.style.transform = transform;
          elem.style.webkitTransform = transform;
        }
      });
    }
  };
  const numberEaseStyle = {
    transition: `transform ${duration}s ease-in-out`
  };
  useEffect(() => {
    timerRef.current = window.setTimeout(() => {
      setNumberTransform();
    }, delay);
    return () => {
      window.clearTimeout(timerRef.current);
    };
  }, [numerArr]);
  return React__default.createElement(
    "div",
    { className: `${classPrefix} ${className}`, ref: countupRef },
    React__default.createElement("ul", { className: `${classPrefix}-list` }, numerArr.map((item, idx) => {
      return React__default.createElement("li", { className: `${classPrefix}-listitem ${!Number.isNaN(Number(item)) ? `${classPrefix}-listitem-number` : ""}`, key: idx }, !Number.isNaN(Number(item)) ? React__default.createElement("span", { className: `${classPrefix}-number`, style: numberEaseStyle }, [...numbers, ...numbers].map((number, subidx) => {
        return React__default.createElement("span", { key: subidx }, number);
      })) : React__default.createElement("span", { className: `${classPrefix}-separator` }, item));
    }))
  );
};
CountUp.displayName = "NutCountUp";
const defaultProps = {};
class AnimatingNumbers extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return React__default.createElement("div", { className: "nut-animatingnumbers" });
  }
}
AnimatingNumbers.defaultProps = defaultProps;
AnimatingNumbers.displayName = "NutAnimatingNumbers";
AnimatingNumbers.CountUp = CountUp;
AnimatingNumbers.CountUp = CountUp;
export {
  AnimatingNumbers as default
};