// to be kept in sync with app/views/_mixins/notification.pug import classNames from 'classnames' import React, { ReactElement, useState } from 'react' import { useTranslation } from 'react-i18next' import MaterialIcon from './material-icon' export type NotificationType = | 'info' | 'success' | 'warning' | 'error' | 'offer' export type NotificationProps = { action?: React.ReactElement ariaLive?: 'polite' | 'off' | 'assertive' className?: string content: React.ReactNode customIcon?: React.ReactElement | null disclaimer?: React.ReactElement | string isDismissible?: boolean isActionBelowContent?: boolean onDismiss?: () => void title?: string type: NotificationType id?: string } function NotificationIcon({ notificationType, customIcon, }: { notificationType: NotificationType customIcon?: ReactElement }) { let icon = if (customIcon) { icon = customIcon } else if (notificationType === 'success') { icon = } else if (notificationType === 'warning') { icon = } else if (notificationType === 'error') { icon = } else if (notificationType === 'offer') { icon = } return
{icon}
} function Notification({ action, ariaLive, className = '', content, customIcon, disclaimer, isActionBelowContent, isDismissible, onDismiss, title, type, id, }: NotificationProps) { type = type || 'info' const { t } = useTranslation() const [show, setShow] = useState(true) const notificationClassName = classNames( 'notification', `notification-type-${type}`, isActionBelowContent ? 'notification-cta-below-content' : '', className ) const handleDismiss = () => { setShow(false) if (onDismiss) onDismiss() } // return null if (!show) { return null } return ( ) } export default Notification