Notification.tsx
| 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 |