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; |