dora-ui/lib/countdown/index.js

A React.js Mobile UI Library

"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

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

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

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

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

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

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

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

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

var _classnames = _interopRequireDefault(require("classnames"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var Countdown =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(Countdown, _Component);

  /** 计时器句柄 */

  /** 计数器用于校正定时器偏差 */
  function Countdown(props) {
    var _this;

    (0, _classCallCheck2.default)(this, Countdown);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Countdown).call(this, props));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "beginTime", new Date().getTime());
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "interval", 1000);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "timeCounter", null);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "count", 0);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "initCounter", function () {
      if (_this.timeCounter) clearTimeout(_this.timeCounter);
      var endTime = _this.props.endTime;
      var ms = endTime - _this.beginTime;
      if (ms < 0) return;

      _this.setState({
        ms: ms
      }, function () {
        _this.timeCounter = setTimeout(_this.startCountDown, _this.interval);
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "startCountDown", function () {
      var ms = _this.state.ms;
      var onEnd = _this.props.onEnd;
      _this.count += 1;

      var offset = new Date().getTime() - (_this.beginTime + _this.count * _this.interval); // 误差校正


      var nextTime = _this.interval - offset;

      if (nextTime < 0) {
        nextTime = 0;
      }

      _this.setState({
        ms: Math.max(ms - _this.interval, 0)
      }); // console.log(
      //   `误差：${offset} ms，下一次执行：${nextTime} ms 后，离活动开始还有：${this.state.ms} ms`
      // );


      if (_this.state.ms <= 0) {
        clearTimeout(_this.timeCounter);
        typeof onEnd === 'function' && onEnd();
      } else {
        _this.timeCounter = setTimeout(_this.startCountDown, nextTime);
      }
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "padNumber", function (mark, num) {
      var _this$props = _this.props,
          padding = _this$props.padding,
          daysPadding = _this$props.daysPadding;
      if (mark === 'dd' && !daysPadding) return num;
      if (padding) return num.toString().padStart(2, '0');
      return num;
    });
    _this.state = {
      ms: 1
    };
    return _this;
  }

  (0, _createClass2.default)(Countdown, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.initCounter();
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      var endTime = this.props.endTime;

      if (endTime !== prevProps.endTime) {
        this.initCounter();
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      clearTimeout(this.timeCounter);
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
          prefixCls = _this$props2.prefixCls,
          wrapClassName = _this$props2.wrapClassName;
      var rootCls = (0, _classnames.default)(prefixCls, wrapClassName);
      return _react.default.createElement("div", {
        className: rootCls
      }, this.formatTime);
    }
  }, {
    key: "parseTime",
    // 毫秒 => 天 时 分 秒
    get: function get() {
      var ms = this.state.ms;
      return {
        days: Math.floor(ms / (1000 * 60 * 60 * 24)),
        hours: Math.floor(ms / (1000 * 60 * 60) % 24),
        minutes: Math.floor(ms / (1000 * 60) % 60),
        seconds: Math.floor(ms / 1000 % 60)
      };
    } // 天 时 分 秒 => 展示字符串

  }, {
    key: "formatTime",
    get: function get() {
      var _this2 = this;

      var _this$props3 = this.props,
          format = _this$props3.format,
          prefixCls = _this$props3.prefixCls;
      var _this$parseTime = this.parseTime,
          days = _this$parseTime.days,
          hours = _this$parseTime.hours,
          minutes = _this$parseTime.minutes,
          seconds = _this$parseTime.seconds;
      var timeMap = {
        dd: days,
        hh: hours,
        mm: minutes,
        ss: seconds
      };
      return format.split(' ').map(function (item) {
        var _item$split = item.split('-'),
            _item$split2 = (0, _slicedToArray2.default)(_item$split, 2),
            mark = _item$split2[0],
            _item$split2$ = _item$split2[1],
            unit = _item$split2$ === void 0 ? '' : _item$split2$;

        return _react.default.createElement("span", {
          className: "".concat(prefixCls, "-time-block"),
          key: mark + unit
        }, _react.default.createElement("span", {
          className: "".concat(prefixCls, "-time")
        }, String(_this2.padNumber(mark, timeMap[mark])).split('').map(function (s, i) {
          return (
            /* eslint-disable-next-line react/no-array-index-key */
            _react.default.createElement("span", {
              key: i,
              className: "".concat(prefixCls, "-num")
            }, s)
          );
        })), _react.default.createElement("span", {
          className: "".concat(prefixCls, "-unit")
        }, unit));
      });
    }
  }]);
  return Countdown;
}(_react.Component);

(0, _defineProperty2.default)(Countdown, "propTypes", {
  endTime: _propTypes.default.number.isRequired,
  onEnd: _propTypes.default.func,
  prefixCls: _propTypes.default.string,
  wrapClassName: _propTypes.default.string,
  format: _propTypes.default.string,
  padding: _propTypes.default.bool,
  daysPadding: _propTypes.default.bool
});
(0, _defineProperty2.default)(Countdown, "defaultProps", {
  prefixCls: 'dora-countdown',
  wrapClassName: '',
  format: 'dd-天 hh-时 mm-分 ss-秒',
  padding: true,
  daysPadding: false
});
var _default = Countdown;
exports.default = _default;