| 1 |
import {useEffect} from '@wordpress/element'; |
| 2 |
import {dispatch} from '@wordpress/data'; |
| 3 |
import cx from 'classnames'; |
| 4 |
import type {Notification} from '../types'; |
| 5 |
import {CloseIcon} from '../Icons'; |
| 6 |
|
| 7 |
import styles from './Notices.module.scss'; |
| 8 |
|
| 9 |
const Snackbar = ({notification, onDismiss}: { notification: Notification, onDismiss: () => void }) => { |
| 10 |
return ( |
| 11 |
|
| 12 |
<div |
| 13 |
className={cx(styles.snackbar, styles[`type-${notification.type}-snackbar`])} |
| 14 |
> |
| 15 |
<div> |
| 16 |
{typeof notification.content === 'function' ? notification.content(onDismiss, notification) : notification.content} |
| 17 |
</div> |
| 18 |
{notification.isDismissible && ( |
| 19 |
<a href="#" onClick={onDismiss}> |
| 20 |
<CloseIcon /> |
| 21 |
</a> |
| 22 |
)} |
| 23 |
|
| 24 |
</div> |
| 25 |
); |
| 26 |
}; |
| 27 |
|
| 28 |
const Notice = ({notification, onDismiss}: { notification: Notification, onDismiss: () => void }) => { |
| 29 |
return ( |
| 30 |
|
| 31 |
<div |
| 32 |
className={cx(styles.notice, styles[`type-${notification.type}`])} |
| 33 |
> |
| 34 |
<div className={styles.notificationContent}> |
| 35 |
{typeof notification.content === 'function' ? notification.content(onDismiss, notification) : notification.content} |
| 36 |
</div> |
| 37 |
{notification.isDismissible && ( |
| 38 |
<a href="#" onClick={onDismiss}> |
| 39 |
<CloseIcon /> |
| 40 |
</a> |
| 41 |
)} |
| 42 |
|
| 43 |
</div> |
| 44 |
); |
| 45 |
}; |
| 46 |
|
| 47 |
export default ({notification}: { notification: Notification }) => { |
| 48 |
|
| 49 |
useEffect(() => { |
| 50 |
if (notification.autoHide) { |
| 51 |
setTimeout(() => { |
| 52 |
dispatch('givewp/admin-details-page-notifications').dismissNotification(notification.id); |
| 53 |
}, notification.duration); |
| 54 |
} |
| 55 |
}, []); |
| 56 |
|
| 57 |
const onDismiss = () => { |
| 58 |
dispatch('givewp/admin-details-page-notifications').dismissNotification(notification.id); |
| 59 |
|
| 60 |
if (typeof notification.onDismiss === 'function') { |
| 61 |
notification.onDismiss(); |
| 62 |
} |
| 63 |
}; |
| 64 |
|
| 65 |
|
| 66 |
switch (notification.notificationType) { |
| 67 |
case 'snackbar': |
| 68 |
return <Snackbar notification={notification} onDismiss={onDismiss} /> |
| 69 |
case 'notice': |
| 70 |
return <Notice notification={notification} onDismiss={onDismiss} /> |
| 71 |
default: |
| 72 |
return null; |
| 73 |
} |
| 74 |
} |
| 75 |
|
