All files / Components ConfirmDeleteButton.js

100% Statements 25/25
100% Branches 4/4
100% Functions 7/7
100% Lines 24/24

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90            1x                   6x   6x 6x   6x   6x 2x   2x 2x   2x       6x   6x 1x 1x 1x     6x 2x 2x   2x   1x 1x         6x                                     1x                 1x                
import React, { useCallback, useEffect, useRef, useState } from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
 
import Button from './Button';
 
const ConfirmDeleteButton = props => {
    const {
        text,
        confirmText,
        onClick,
        timeout,
        initialColor,
        confirmColor,
        className,
        ...attributes
    } = props;
 
    const isMountedRef = useRef(true);
    const isMounted = useCallback(() => isMountedRef.current, []);
 
    let timer = null;
 
    useEffect(() => {
        return () => {
            /* istanbul ignore else */
            if (timer) {
                clearTimeout(timer);
            }
            void (isMountedRef.current = false);
        }
    },[]);
 
    const [waiting, setWaiting] = useState(false);
 
    const onConfirm = e => {
        e.preventDefault();
        setWaiting(false);
        onClick();
    }
 
    const onQuery = e => {
        e.preventDefault();
        setWaiting(true);
 
        timer = setTimeout(() => {
            /* istanbul ignore else */
            if (isMounted()) {
                setWaiting(false);
            }
        }, timeout)
    }
 
    return (
        (waiting)
            ?
            <Button className={classNames('flex', 'flex-row', 'items-center', className)} color={confirmColor} onClick={onConfirm} {...attributes}>
                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                </svg>
                {confirmText}
            </Button>
            :
            <Button className={classNames('flex', 'flex-row', 'items-center', className)} color={initialColor} onClick={onQuery} {...attributes}>
                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                </svg>
                {text}
            </Button>
    )
}
 
ConfirmDeleteButton.propTypes = {
    text: PropTypes.string,
    confirmText: PropTypes.string,
    onClick: PropTypes.func,
    timeout: PropTypes.number,
    initialColor: PropTypes.string,
    confirmColor: PropTypes.string,
}
 
ConfirmDeleteButton.defaultProps = {
    text: "Delete",
    confirmText: "Delete - Are you sure?",
    timeout: 2000,
    initialColor: 'red',
    confirmColor: 'orange',
}
 
export default ConfirmDeleteButton;