@linkdesign/screen/lib/count-up/index.js

屏组件库，但使用场景又不局限于屏。主要用于BI、大盘和屏

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _context = _interopRequireDefault(require("../context"));
var _excluded = ["endVal"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var _require = require('countup.js'),
  CoUp = _require.CountUp;
var CountUp = /*#__PURE__*/function (_Component) {
  (0, _inheritsLoose2["default"])(CountUp, _Component);
  function CountUp() {
    var _this;
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
    _this.instance = void 0;
    _this.timeoutId = void 0;
    _this.containerRef = /*#__PURE__*/_react["default"].createRef();
    _this.checkProps = function (updatedProps) {
      var _this$props = _this.props,
        startVal = _this$props.startVal,
        suffix = _this$props.suffix,
        prefix = _this$props.prefix,
        redraw = _this$props.redraw,
        duration = _this$props.duration,
        separator = _this$props.separator,
        decimalPlaces = _this$props.decimalPlaces,
        decimal = _this$props.decimal;
      var hasPropsChanged = duration !== updatedProps.duration || startVal !== updatedProps.startVal || suffix !== updatedProps.suffix || prefix !== updatedProps.prefix || separator !== updatedProps.separator || decimalPlaces !== updatedProps.decimalPlaces || decimal !== updatedProps.decimal;
      return hasPropsChanged || redraw;
    };
    _this.createInstance = function () {
      var _this$props2 = _this.props,
        endVal = _this$props2.endVal,
        others = (0, _objectWithoutPropertiesLoose2["default"])(_this$props2, _excluded);

      // if (typeof this.props.children === 'function') {
      //   // Warn when user didn't use containerRef at all
      //   warning(
      //     this.containerRef.current &&
      //     (this.containerRef.current instanceof HTMLElement ||
      //       this.containerRef.current instanceof SVGTextElement ||
      //       this.containerRef.current instanceof SVGTSpanElement),
      //     `Couldn't find attached element to hook the CountUp instance into! Try to attach "containerRef" from the render prop to a an HTMLElement, eg. <span ref={containerRef} />.`,
      //   );
      // }

      // @ts-ignore
      return new CoUp(_this.containerRef.current, endVal, others);
    };
    _this.pauseResume = function () {
      var _assertThisInitialize = (0, _assertThisInitialized2["default"])(_this),
        reset = _assertThisInitialize.reset,
        start = _assertThisInitialize.restart,
        update = _assertThisInitialize.update;
      var onPauseResume = _this.props.onPauseResume;
      _this.instance.pauseResume();
      onPauseResume({
        reset: reset,
        start: start,
        update: update
      });
    };
    _this.reset = function () {
      var _assertThisInitialize2 = (0, _assertThisInitialized2["default"])(_this),
        pauseResume = _assertThisInitialize2.pauseResume,
        start = _assertThisInitialize2.restart,
        update = _assertThisInitialize2.update;
      var onReset = _this.props.onReset;
      _this.instance.reset();
      onReset({
        pauseResume: pauseResume,
        start: start,
        update: update
      });
    };
    _this.restart = function () {
      _this.reset();
      _this.start();
    };
    _this.start = function () {
      var _assertThisInitialize3 = (0, _assertThisInitialized2["default"])(_this),
        pauseResume = _assertThisInitialize3.pauseResume,
        reset = _assertThisInitialize3.reset,
        start = _assertThisInitialize3.restart,
        update = _assertThisInitialize3.update;
      var _this$props3 = _this.props,
        delay = _this$props3.delay,
        onEnd = _this$props3.onEnd,
        onStart = _this$props3.onStart;
      var run = function run() {
        return _this.instance.start(function () {
          return onEnd({
            pauseResume: pauseResume,
            reset: reset,
            start: start,
            update: update
          });
        });
      };
      if (delay > 0) {
        _this.timeoutId = setTimeout(run, delay * 1000);
      } else {
        run();
      }
      onStart({
        pauseResume: pauseResume,
        reset: reset,
        update: update
      });
    };
    _this.update = function (newEnd) {
      var _assertThisInitialize4 = (0, _assertThisInitialized2["default"])(_this),
        pauseResume = _assertThisInitialize4.pauseResume,
        reset = _assertThisInitialize4.reset,
        start = _assertThisInitialize4.restart;
      var onUpdate = _this.props.onUpdate;
      _this.instance.update(newEnd);
      onUpdate({
        pauseResume: pauseResume,
        reset: reset,
        start: start
      });
    };
    return _this;
  }
  var _proto = CountUp.prototype;
  _proto.componentDidMount = function componentDidMount() {
    var _this$props4 = this.props,
      children = _this$props4.children,
      delay = _this$props4.delay;
    this.instance = this.createInstance();
    if (typeof children === 'function' && delay !== 0) return;
    this.start();
  };
  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
    var endVal = this.props.endVal;
    return this.checkProps(nextProps) || endVal !== nextProps.endVal;
  };
  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    var _this$props5 = this.props,
      endVal = _this$props5.endVal,
      fromPreserveVal = _this$props5.fromPreserveVal;
    if (this.checkProps(prevProps)) {
      this.instance.reset();
      this.instance = this.createInstance();
      this.start();
    }
    if (endVal !== prevProps.endVal) {
      if (!fromPreserveVal) {
        this.instance.reset();
      }
      this.instance.update(endVal);
    }
  };
  _proto.componentWillUnmount = function componentWillUnmount() {
    if (this.timeoutId) {
      clearTimeout(this.timeoutId);
    }
    this.instance.reset();
  };
  _proto.render = function render() {
    var _cssPrefix = this.context._cssPrefix;
    var _this$props6 = this.props,
      children = _this$props6.children,
      className = _this$props6.className,
      style = _this$props6.style;
    var containerRef = this.containerRef,
      pauseResume = this.pauseResume,
      reset = this.reset,
      restart = this.restart,
      update = this.update;
    if (typeof children === 'function') {
      return children({
        countUpRef: containerRef,
        pauseResume: pauseResume,
        reset: reset,
        start: restart,
        update: update
      });
    }
    return /*#__PURE__*/_react["default"].createElement("span", {
      className: (0, _classnames["default"])(_cssPrefix + "count-up-wrapper", className),
      style: style
      // @ts-ignore
      ,
      ref: containerRef
    });
  };
  return CountUp;
}(_react.Component);
CountUp.propTypes = {
  startVal: _propTypes["default"].number,
  endVal: _propTypes["default"].number.isRequired,
  decimalPlaces: _propTypes["default"].number,
  duration: _propTypes["default"].number,
  useGrouping: _propTypes["default"].bool,
  useEasing: _propTypes["default"].bool,
  smartEasingThreshold: _propTypes["default"].number,
  smartEasingAmount: _propTypes["default"].number,
  separator: _propTypes["default"].string,
  decimal: _propTypes["default"].string,
  delay: _propTypes["default"].number,
  prefix: _propTypes["default"].string,
  suffix: _propTypes["default"].string,
  redraw: _propTypes["default"].bool,
  fromPreserveVal: _propTypes["default"].bool,
  onStart: _propTypes["default"].func,
  onEnd: _propTypes["default"].func,
  onPauseResume: _propTypes["default"].func,
  onReset: _propTypes["default"].func,
  onUpdate: _propTypes["default"].func
};
CountUp.defaultProps = {
  startVal: 0,
  decimalPlaces: 0,
  duration: 2,
  useGrouping: true,
  useEasing: true,
  smartEasingThreshold: 999,
  smartEasingAmount: 333,
  separator: ',',
  decimal: '.',
  delay: 0,
  prefix: '',
  suffix: '',
  redraw: false,
  fromPreserveVal: false,
  // easingFn: null,
  // formattingFn: null,
  onStart: function onStart() {},
  onEnd: function onEnd() {},
  onPauseResume: function onPauseResume() {},
  onReset: function onReset() {},
  onUpdate: function onUpdate() {}
};
CountUp.contextType = _context["default"];
var _default = exports["default"] = CountUp;