choerodon-ui/lib/statistic/Countdown.js

An enterprise-class UI design language and React-based implementation

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireWildcard(require("react"));

var _Statistic = _interopRequireDefault(require("./Statistic"));

var _utils = require("./utils");

var _reactNode = require("../_util/reactNode");

var REFRESH_INTERVAL = 1000 / 30;

function getTime(value) {
  return new Date(value).getTime();
}

var Countdown = function Countdown(props) {
  var value = props.value,
      format = props.format,
      onFinish = props.onFinish; // 强制渲染界面

  var _useReducer = (0, _react.useReducer)(function (x) {
    return x + 1;
  }, 0),
      _useReducer2 = (0, _slicedToArray2["default"])(_useReducer, 2),
      forceUpdate = _useReducer2[1];

  var timeStamp = getTime(value);
  var countdownRef = (0, _react.useRef)();
  var idRef = (0, _react.useRef)(); // 触发渲染界面，如果达到目标位置不执行

  countdownRef.current = function () {
    forceUpdate();

    if (timeStamp <= Date.now()) {
      clearInterval(Number(idRef.current));

      if (onFinish && timeStamp < Date.now()) {
        onFinish();
      }
    }
  }; // 启动计时器


  (0, _react.useEffect)(function () {
    if (timeStamp >= Date.now()) {
      if (!idRef.current) {
        idRef.current = setInterval(function () {
          countdownRef.current();
        }, REFRESH_INTERVAL);
      }
    } else {
      clearInterval(Number(idRef.current));
    }

    return function () {
      return clearInterval(Number(idRef.current));
    };
  }, [format, value]); // Countdown do not need display the timeStamp

  var valueRender = function valueRender(node) {
    return (0, _reactNode.cloneElement)(node, {
      title: undefined
    });
  };

  return _react["default"].createElement(_Statistic["default"], (0, _extends2["default"])({
    valueRender: valueRender
  }, props, {
    formatter: function formatter(valueFormatter, config) {
      return (0, _utils.formatCountdown)(valueFormatter, (0, _objectSpread2["default"])({}, config, {
        format: format
      }));
    }
  }));
};

Countdown.defaultProps = {
  format: 'HH:mm:ss'
};
var _default = Countdown;
exports["default"] = _default;
//# sourceMappingURL=Countdown.js.map