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")["default"];

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

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

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

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

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();
}

function defaultFormatter(value) {
  return value;
}

var Countdown = function Countdown(props) {
  var value = props.value,
      format = props.format,
      onFinish = props.onFinish,
      _props$formatter = props.formatter,
      formatter = _props$formatter === void 0 ? defaultFormatter : _props$formatter; // 强制渲染界面

  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
    });
  };

  var countdownFormatter = function countdownFormatter(valueFormatter, config) {
    var value = (0, _utils.formatCountdown)(valueFormatter, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, config), {}, {
      format: format
    }));

    if (typeof formatter === 'function') {
      return formatter(value);
    }

    return value;
  };

  return /*#__PURE__*/_react["default"].createElement(_Statistic["default"], (0, _extends2["default"])({
    valueRender: valueRender
  }, props, {
    formatter: countdownFormatter
  }));
};

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