93 lines
2.3 KiB
TypeScript
93 lines
2.3 KiB
TypeScript
import { useEffect, useRef, useState } from 'react'
|
|
import styles from './Notification.module.css'
|
|
|
|
type Status = 'success' | 'error' | 'info' | 'warning'
|
|
|
|
interface Props {
|
|
message: string
|
|
status: Status
|
|
onClose: () => void
|
|
title?: string
|
|
duration?: number
|
|
}
|
|
|
|
const ICONS: Record<Status, string> = {
|
|
success: '✓',
|
|
error: '✕',
|
|
info: 'i',
|
|
warning: '!',
|
|
}
|
|
|
|
const DEFAULT_TITLES: Record<Status, string> = {
|
|
success: 'Успех',
|
|
error: 'Ошибка',
|
|
info: 'Информация',
|
|
warning: 'Внимание',
|
|
}
|
|
|
|
export function Notification({ message, status, onClose, title, duration }: Props) {
|
|
const [closing, setClosing] = useState(false)
|
|
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
|
|
|
|
function handleClose() {
|
|
setClosing(true)
|
|
}
|
|
|
|
function handleAnimationEnd() {
|
|
if (closing) onClose()
|
|
}
|
|
|
|
function clearTimer() {
|
|
if (timerRef.current !== null) {
|
|
clearTimeout(timerRef.current)
|
|
timerRef.current = null
|
|
}
|
|
}
|
|
|
|
function startTimer() {
|
|
if (duration) {
|
|
clearTimer()
|
|
timerRef.current = setTimeout(() => setClosing(true), duration)
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
startTimer()
|
|
|
|
function handleKeyDown(e: KeyboardEvent) {
|
|
if (e.key === 'Escape') setClosing(true)
|
|
}
|
|
|
|
window.addEventListener('keydown', handleKeyDown)
|
|
|
|
return () => {
|
|
clearTimer()
|
|
window.removeEventListener('keydown', handleKeyDown)
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [duration])
|
|
|
|
const heading = title ?? DEFAULT_TITLES[status]
|
|
const ariaLive = status === 'error' || status === 'warning' ? 'assertive' : 'polite'
|
|
|
|
return (
|
|
<div
|
|
className={`${styles.notification} ${styles[status]} ${closing ? styles.closing : ''}`}
|
|
onAnimationEnd={handleAnimationEnd}
|
|
onMouseEnter={clearTimer}
|
|
onMouseLeave={startTimer}
|
|
role="alert"
|
|
aria-live={ariaLive}
|
|
>
|
|
<div className={styles.notificationWrapper}>
|
|
<span className={styles.icon}>{ICONS[status]}</span>
|
|
<div className={styles.content}>
|
|
<p className={styles.title}>{heading}</p>
|
|
<p className={styles.message}>{message}</p>
|
|
</div>
|
|
</div>
|
|
<button className={styles.close} onClick={handleClose} aria-label="Закрыть">✕</button>
|
|
</div>
|
|
)
|
|
}
|