@etsoo/materialui/lib/mjs/CountdownButton.js

TypeScript Material-UI Implementation

import { jsx as _jsx } from "react/jsx-runtime";
import Button from "@mui/material/Button";
import CircularProgress from "@mui/material/CircularProgress";
import React from "react";
/**
 * Countdown button
 * @param props Props
 * @returns Button
 */
export const CountdownButton = React.forwardRef((props, ref) => {
    // Destructure
    const { initState = 0, onAction, onClick, ...rest } = props;
    // State
    // 0 - normal
    // 1 - loading
    // >= 2 - countdown seconds
    const [state, updateState] = React.useState(0);
    // Ignore seconds
    const ignoreSeconds = 2;
    // Refs
    const refs = React.useRef({ isMounted: false, maxLength: 0 });
    // Set state
    const setState = React.useCallback((result) => {
        // Seconds to wait, 120
        if (result > ignoreSeconds) {
            // Here 122
            result += ignoreSeconds;
            updateState(result);
            // Update max length
            refs.current.maxLength = result.toString().length;
            const seed = setInterval(() => {
                // Mounted?
                if (!refs.current.isMounted)
                    return;
                // Last 1 second and then complete
                if (result > ignoreSeconds + 1) {
                    result--;
                    updateState(result);
                }
                else {
                    clearInterval(seed);
                    updateState(0);
                }
            }, 1000);
        }
        else {
            updateState(0);
        }
    }, []);
    // endIcon
    let endIcon;
    if (state === 0) {
        endIcon = undefined;
    }
    else if (state === 1) {
        endIcon = _jsx(CircularProgress, { size: 12 });
    }
    else {
        const countdown = (state - ignoreSeconds)
            .toString()
            .padStart(refs.current.maxLength, "0");
        endIcon = _jsx("span", { style: { fontSize: "smaller" }, children: countdown });
    }
    // Disabled?
    const disabled = state > 0;
    // Local click
    const localClick = (event) => {
        // Show loading
        updateState(1);
        // Callback
        if (onClick != null)
            onClick(event);
        // Return any countdown
        onAction().then(setState);
    };
    React.useEffect(() => {
        refs.current.isMounted = true;
        return () => {
            refs.current.isMounted = false;
        };
    }, []);
    React.useEffect(() => {
        setState(initState);
    }, [initState]);
    return (_jsx(Button, { disabled: disabled, endIcon: endIcon, onClick: localClick, ref: ref, ...rest }));
});