ukelli-ui/other/countdown/countdown-cycle.js

Base on React's UI lib. Make frontend's dev simpler and faster.

var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import React, { Component } from 'react';
import { Call, ToFixed, TimeFormat } from 'basic-helper';
import CountdownBg from './countdown-svg-bg';
var timeTitleMapper = {
    hour: '时',
    min: '分',
    sec: '秒'
};
var Countdown = /** @class */ (function (_super) {
    __extends(Countdown, _super);
    function Countdown(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            isTimerStart: false,
            countdown: 0
        };
        return _this;
    }
    Countdown.prototype.startCountdown = function () {
        var start = this.props.start;
        if (this.state.isTimerStart || start === 0)
            return;
        this._clearTimer();
        this.interval = this.startTimer();
    };
    Countdown.prototype.setJumpElemCount = function (timeObj) {
        if (!this.jumpElem)
            return;
        this.jumpElem.innerHTML = timeObj.hour + ":" + timeObj.min + ":" + timeObj.sec || 0;
    };
    Countdown.prototype.shouldComponentUpdate = function (nextProps, nextState) {
        var isReceiveNewStart = this.props.start !== nextProps.start;
        var isNewCount = this.state.countdown !== nextState.countdown;
        if (nextProps.start !== this.props.start) {
            this.clearTimer();
        }
        return isNewCount
            || !nextState.isTimeout
            || !nextState.isTimerStart
            || isReceiveNewStart;
    };
    Countdown.prototype.componentDidMount = function () {
        this.startCountdown();
    };
    Countdown.prototype.componentDidUpdate = function () {
        this.startCountdown();
    };
    Countdown.prototype._clearTimer = function () {
        this.interval && clearInterval(this.interval);
        this.interval = null;
    };
    Countdown.prototype.clearTimer = function () {
        this._clearTimer();
        this.setState({
            isTimerStart: false
        });
    };
    Countdown.prototype.componentWillUnmount = function () {
        this.clearTimer();
    };
    Countdown.prototype.startTimer = function () {
        var _this = this;
        // if (this.state.isTimerStart) return;
        var _a = this.props, start = _a.start, _b = _a.freq, freq = _b === void 0 ? 10 : _b, countdownNotifyTimer = _a.countdownNotifyTimer, onCountdownNotify = _a.onCountdownNotify, onTimeout = _a.onTimeout;
        var countdown = start - 1;
        this.setState({
            isTimerStart: true,
            // isTimeout: false,
            countdown: countdown
        });
        var oneRound = setInterval(function () {
            countdown--;
            _this.setState({
                countdown: (countdown < 0) ? 0 : countdown
            });
            if (countdown == +countdownNotifyTimer)
                Call(onCountdownNotify, countdown);
            if (countdown === -1) {
                countdown = freq - 1;
                onTimeout();
            }
        }, 1000);
        return oneRound;
    };
    Countdown.prototype.getBgDOM = function (timeObj, time, idx) {
        var _a = this.props, _b = _a.needBg, needBg = _b === void 0 ? true : _b, freq = _a.freq, firstStopColor = _a.firstStopColor, secondStopColor = _a.secondStopColor;
        if (!needBg)
            return '';
        var currTime = timeObj[time];
        var currCycle = freq > 60 ? 60 : freq;
        var hourCycle = freq / 3600;
        switch (time) {
            case 'hour':
                currCycle = hourCycle;
                break;
            case 'min':
                currCycle = hourCycle > 1 ? 60 : freq / 60;
                break;
        }
        var currPercent = +(currTime / currCycle * 100);
        var percent = currPercent == 0 ? 0 : ToFixed(100 - currPercent, 0);
        // if(time == 'sec') console.log(percent);
        return (React.createElement(CountdownBg, { percent: percent, firstStopColor: firstStopColor, secondStopColor: secondStopColor }));
    };
    Countdown.prototype.render = function () {
        var _this = this;
        var _a = this.props, freq = _a.freq, _b = _a.needProgress, needProgress = _b === void 0 ? false : _b;
        var countdown = this.state.countdown;
        var timeObj = TimeFormat(countdown);
        var percent = +(countdown / freq * 100);
        var progressDOM = needProgress ? (React.createElement("span", { className: "progress", style: { right: percent + "%" } })) : '';
        this.setJumpElemCount(timeObj);
        return (React.createElement("section", { className: "countdown" },
            Object.keys(timeObj).map(function (time, idx) {
                var currTime = timeObj[time];
                var countBg = _this.getBgDOM(timeObj, time, idx);
                return (React.createElement("span", { className: "item " + time, key: time },
                    React.createElement("span", { className: "text" }, currTime),
                    countBg,
                    React.createElement("span", { className: "foot" }, timeTitleMapper[time])));
            }),
            progressDOM));
    };
    Countdown.defaultProps = {
        firstStopColor: '#fe0362',
        secondStopColor: '#7473e3'
    };
    return Countdown;
}(Component));
export default Countdown;