jc-biz-components/lib/jc-count-down/index.js

jc component library based on Antd

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

function fixedZero(val) {
  return val * 1 < 10 ? '0' + val : val;
}

var CountDown = function (_Component) {
  (0, _inherits3['default'])(CountDown, _Component);

  function CountDown(props) {
    (0, _classCallCheck3['default'])(this, CountDown);

    var _this = (0, _possibleConstructorReturn3['default'])(this, (CountDown.__proto__ || Object.getPrototypeOf(CountDown)).call(this, props));

    _initialiseProps.call(_this);

    var _this$initTime = _this.initTime(props),
        lastTime = _this$initTime.lastTime;

    _this.state = {
      lastTime: lastTime
    };
    return _this;
  }

  (0, _createClass3['default'])(CountDown, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.tick();
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      var _this2 = this;

      if (this.props.target !== nextProps.target) {
        clearTimeout(this.timer);

        var _initTime = this.initTime(nextProps),
            lastTime = _initTime.lastTime;

        this.setState({
          lastTime: lastTime
        }, function () {
          _this2.tick();
        });
      }
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      clearTimeout(this.timer);
    }
    // defaultFormat = time => (
    //  <span>{moment(time).format('hh:mm:ss')}</span>
    // )

  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
          _props$format = _props.format,
          format = _props$format === undefined ? this.defaultFormat : _props$format,
          rest = (0, _objectWithoutProperties3['default'])(_props, ['format']);
      var lastTime = this.state.lastTime;


      var result = format(lastTime);

      return _react2['default'].createElement(
        'span',
        rest,
        result
      );
    }
  }]);
  return CountDown;
}(_react.Component);

var _initialiseProps = function _initialiseProps() {
  var _this3 = this;

  this.timer = 0;
  this.interval = 1000;

  this.initTime = function (props) {
    var lastTime = 0;
    var targetTime = 0;
    try {
      if (Object.prototype.toString.call(props.target) === '[object Date]') {
        targetTime = props.target.getTime();
      } else {
        targetTime = new Date(props.target).getTime();
      }
    } catch (e) {
      throw new Error('invalid target prop', e);
    }

    lastTime = targetTime;

    return {
      lastTime: lastTime
    };
  };

  this.defaultFormat = function (time) {
    var day = 24 * 60 * 60 * 1000;
    var hours = 60 * 60 * 1000;
    var minutes = 60 * 1000;

    var d = fixedZero(Math.floor(time / day));
    var h = fixedZero(Math.floor((time - day * d) / hours));
    var m = fixedZero(Math.floor((time - day * d - h * hours) / minutes));
    var s = fixedZero(Math.floor((time - day * d - h * hours - m * minutes) / 1000));
    return _react2['default'].createElement(
      'span',
      null,
      d,
      '\u5929',
      h,
      '\u65F6',
      m,
      '\u5206',
      s,
      '\u79D2'
    );
  };

  this.tick = function () {
    var onEnd = _this3.props.onEnd;
    var lastTime = _this3.state.lastTime;


    _this3.timer = setTimeout(function () {
      if (lastTime < _this3.interval) {
        clearTimeout(_this3.timer);
        _this3.setState({
          lastTime: 0
        }, function () {
          if (onEnd) {
            onEnd();
          }
        });
      } else {
        lastTime -= _this3.interval;
        _this3.setState({
          lastTime: lastTime
        }, function () {
          _this3.tick();
        });
      }
    }, _this3.interval);
  };
};

exports['default'] = CountDown;
module.exports = exports['default'];