PasteBarApp/packages/pastebar-app-ui/src/hooks/use-delete-confirmation-items.ts

82 lines
1.9 KiB
TypeScript
Raw Normal View History

import { useCallback, useEffect, useRef, useState } from 'react'
import { UniqueIdentifier } from '@dnd-kit/core'
import { Signal } from '@preact/signals-react'
import { useHotkeys } from 'react-hotkeys-hook'
const useDeleteConfirmationTimer = ({
onConfirmedDelete,
hoveringHistoryRowId,
onConfirmedReset,
selectedHistoryItems,
timerDuration = 3000,
}: {
onConfirmedDelete: () => Promise<void>
onConfirmedReset?: () => void
selectedHistoryItems: UniqueIdentifier[]
hoveringHistoryRowId: Signal<UniqueIdentifier | null>
timerDuration?: number
}) => {
const timerRef = useRef(null) as React.MutableRefObject<NodeJS.Timeout | null>
const [showConfirmation, setShowConfirmation] = useState(false)
const [hoveringHistoryIdDelete, seHoveringHistoryIdDelete] =
useState<UniqueIdentifier | null>(null)
const resetTimer = useCallback(() => {
if (timerRef.current) {
clearTimeout(timerRef.current)
}
seHoveringHistoryIdDelete(null)
setShowConfirmation(false)
onConfirmedReset?.()
}, [])
const startTimer = useCallback(() => {
if (timerRef.current) {
clearTimeout(timerRef.current)
}
if (selectedHistoryItems.length === 0) {
seHoveringHistoryIdDelete(hoveringHistoryRowId.value)
}
setShowConfirmation(true)
timerRef.current = setTimeout(() => {
resetTimer()
}, timerDuration)
}, [timerDuration, resetTimer, selectedHistoryItems, hoveringHistoryRowId])
useEffect(() => {
return () => {
if (timerRef.current) {
clearTimeout(timerRef.current)
}
}
}, [])
useHotkeys(
['delete', 'backspace'],
async e => {
e.preventDefault()
if (showConfirmation) {
await onConfirmedDelete()
resetTimer()
} else {
startTimer()
}
},
{
enableOnFormTags: false,
}
)
return {
showConfirmation,
hoveringHistoryIdDelete,
resetTimer,
}
}
export default useDeleteConfirmationTimer