epn-ui/umd/dist/components/Countdown/index.js

Дизайн система кабинета ВМ

import React, { useState, useEffect } from 'react';
import clsx from 'clsx';

var TIMER_TICK = 1000;
var Countdown = function (_a) {
    var id = _a.id, className = _a.className, _b = _a.animate, animate = _b === void 0 ? false : _b, seconds = _a.seconds, renderer = _a.renderer, onCompleted = _a.onCompleted, onComplete = _a.onComplete;
    var _c = useState(0), timer = _c[0], setTimer = _c[1];
    var formatNumber = function (num) {
        try {
            return num.toLocaleString('en-US', {
                minimumIntegerDigits: 2,
                useGrouping: false,
            });
        }
        catch (err) {
            console.error(err);
            return "".concat(num);
        }
    };
    useEffect(function () {
        setTimer(seconds);
    }, [seconds]);
    useEffect(function () {
        var interval = setInterval(function () {
            setTimer(function (sec) {
                if (sec === 0) {
                    clearInterval(interval);
                    return sec;
                }
                return sec - 1;
            });
        }, TIMER_TICK);
        return function () { return clearInterval(interval); };
    }, [seconds]);
    useEffect(function () {
        if (timer === 0 && typeof onCompleted === 'function') {
            onCompleted();
        }
        if (timer === 0 && typeof onComplete === 'function') {
            onComplete();
        }
    }, [onCompleted, onComplete, timer]);
    var min = formatNumber(Math.floor((timer / 60) % 60));
    var sec = formatNumber(Math.floor(timer % 60));
    if (typeof renderer === 'function') {
        return renderer({
            minutes: min,
            seconds: sec,
            completed: timer === 0,
        });
    }
    return (React.createElement("span", { id: id || undefined, className: clsx('epn-countdown', className) },
        React.createElement("span", { className: clsx('epn-countdown--sec', {
                'epn-countdown--min-animate': min !== '00' && animate,
            }) }, min),
        React.createElement("span", { className: "epn-countdown__separator" }, ":"),
        React.createElement("span", { className: clsx('epn-countdown--sec', {
                'epn-countdown--sec-animate': sec !== '00' && animate,
            }) }, sec)));
};
var Countdown$1 = Countdown;

export { Countdown$1 as default };