gui-one-nutui-react-taro/dist/esm/animatingnumbers.taro-6f40a2e9.js

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

import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["maxLen", "endNumber", "delaySpeed", "easeSpeed", "className", "thousands"];
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
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 React__default, { useRef, useState, useEffect, Component } from 'react';
import Taro from '@tarojs/taro';
import { c as cn } from './bem-893ad28d.js';
var defaultProps$1 = {
  maxLen: 0,
  endNumber: '',
  delaySpeed: 300,
  easeSpeed: 1,
  thousands: false,
  className: ''
};
var CountUp = function CountUp(props) {
  var _defaultProps$1$props = _objectSpread(_objectSpread({}, defaultProps$1), props),
    maxLen = _defaultProps$1$props.maxLen,
    endNumber = _defaultProps$1$props.endNumber,
    delaySpeed = _defaultProps$1$props.delaySpeed,
    easeSpeed = _defaultProps$1$props.easeSpeed,
    className = _defaultProps$1$props.className,
    thousands = _defaultProps$1$props.thousands,
    reset = _objectWithoutProperties(_defaultProps$1$props, _excluded);
  var b = cn('countup');
  var countupRef = useRef(null);
  var timerRef = useRef(0);
  var numbers = Array.from({
    length: 10
  }, function (v, i) {
    return i;
  });
  var getShowNumber = function getShowNumber() {
    var splitArr = endNumber.split('.');
    var intNumber = maxLen && splitArr[0].length < maxLen ? (Array(maxLen).join('0') + splitArr[0]).slice(-maxLen) : splitArr[0];
    var currNumber = "".concat(thousands ? intNumber.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') : intNumber).concat(splitArr[1] ? '.' : '').concat(splitArr[1] || '');
    return currNumber.split('');
  };
  var _useState = useState([]),
    _useState2 = _slicedToArray(_useState, 2),
    numerArr = _useState2[0],
    setNumerArr = _useState2[1];
  var _useState3 = useState([]),
    _useState4 = _slicedToArray(_useState3, 2),
    transformArr = _useState4[0],
    setTransformArr = _useState4[1];
  var isLoaded = useRef(false);
  var setNumberTransform = function setNumberTransform() {
    if (countupRef.current && numerArr.length) {
      Taro.createSelectorQuery().selectAll('.nut-countup__listitem').node(function (numberItems) {
        var transformArrCache = [];
        Object.keys(numberItems).forEach(function (key) {
          var elem = numberItems[Number(key)];
          var idx = Number(numerArr[Number(key)]);
          if (elem) {
            // 计算规则：父元素和实际列表高度的百分比，分割成20等份
            var transform = idx || idx === 0 ? "translate(0, -".concat((idx === 0 ? 10 : idx) * 5, "%)") : '';
            transformArrCache.push(transform);
          }
        });
        setTransformArr([].concat(transformArrCache));
      }).exec();
    }
  };
  var numberEaseStyle = function numberEaseStyle(idx) {
    return {
      transition: "transform ".concat(easeSpeed, "s ease-in-out"),
      transform: transformArr[idx] ? transformArr[idx] : null
    };
  };
  useEffect(function () {
    setNumberTransform();
  }, [numerArr]);
  useEffect(function () {
    if (!isLoaded.current) {
      isLoaded.current = true;
      timerRef.current = window.setTimeout(function () {
        setNumerArr(getShowNumber());
      }, delaySpeed);
    } else {
      setNumerArr(getShowNumber());
    }
    return function () {
      window.clearTimeout(timerRef.current);
    };
  }, [endNumber]);
  return React__default.createElement("div", {
    className: "".concat(b(), " ").concat(className),
    ref: countupRef
  }, React__default.createElement("ul", {
    className: b('list')
  }, numerArr.map(function (item, idx) {
    return React__default.createElement("li", {
      className: "".concat(b('listitem', {
        number: !Number.isNaN(Number(item))
      })),
      key: idx
    }, !Number.isNaN(Number(item)) ? React__default.createElement("span", {
      className: b('number'),
      style: numberEaseStyle(idx)
    }, [].concat(numbers, numbers).map(function (number, subidx) {
      return React__default.createElement("span", {
        key: subidx
      }, number);
    })) : React__default.createElement("span", {
      className: b('separator')
    }, item));
  })));
};
CountUp.defaultProps = defaultProps$1;
CountUp.displayName = 'NutCountUp';
var defaultProps = {};
var AnimatingNumbers = /*#__PURE__*/function (_Component) {
  _inherits(AnimatingNumbers, _Component);
  var _super = _createSuper(AnimatingNumbers);
  function AnimatingNumbers(props) {
    var _this;
    _classCallCheck(this, AnimatingNumbers);
    _this = _super.call(this, props);
    _this.state = {};
    return _this;
  }
  _createClass(AnimatingNumbers, [{
    key: "render",
    value: function render() {
      return React__default.createElement("div", {
        className: "nut-animatingnumbers"
      });
    }
  }]);
  return AnimatingNumbers;
}(Component);
_defineProperty(AnimatingNumbers, "defaultProps", defaultProps);
_defineProperty(AnimatingNumbers, "displayName", 'NutAnimatingNumbers');
_defineProperty(AnimatingNumbers, "CountUp", CountUp);
export { AnimatingNumbers as A };