index.tsx
63 lines
| 1 | import {CloseIcon, ErrorIcon, InfoIcon, WarningIcon} from '@givewp/admin/components/Notices/Icons'; |
| 2 | import {useState} from '@wordpress/element'; |
| 3 | import {__} from '@wordpress/i18n'; |
| 4 | import styles from './styles.module.scss'; |
| 5 | |
| 6 | /** |
| 7 | * @since 4.8.0 |
| 8 | */ |
| 9 | interface Props { |
| 10 | type: 'info' | 'warning' | 'error'; |
| 11 | children: React.ReactNode; |
| 12 | dismissHandleClick?: () => void; |
| 13 | } |
| 14 | |
| 15 | /** |
| 16 | * @since 4.8.0 |
| 17 | */ |
| 18 | export default ({type, children, dismissHandleClick}: Props) => { |
| 19 | const [isVisible, setIsVisible] = useState(true); |
| 20 | |
| 21 | const handleDismiss = () => { |
| 22 | setIsVisible(false); |
| 23 | if (dismissHandleClick) { |
| 24 | dismissHandleClick(); |
| 25 | } |
| 26 | }; |
| 27 | |
| 28 | if (!isVisible) { |
| 29 | return null; |
| 30 | } |
| 31 | |
| 32 | const noticeClasses = `${styles.notice} ${ |
| 33 | type === 'warning' ? styles.warning : type === 'error' ? styles.error : styles.info |
| 34 | }`; |
| 35 | |
| 36 | const NoticeIcon = ({type}: {type: Props['type']}) => { |
| 37 | const icons = { |
| 38 | warning: WarningIcon, |
| 39 | error: ErrorIcon, |
| 40 | info: InfoIcon, |
| 41 | }; |
| 42 | const IconComponent = icons[type] ?? icons.info; |
| 43 | return <IconComponent />; |
| 44 | }; |
| 45 | |
| 46 | return ( |
| 47 | <div className={noticeClasses}> |
| 48 | <NoticeIcon type={type} /> |
| 49 | <div className={styles.content}>{children}</div> |
| 50 | {dismissHandleClick && ( |
| 51 | <button |
| 52 | type="button" |
| 53 | className={styles.dismissButton} |
| 54 | onClick={handleDismiss} |
| 55 | aria-label={__('Dismiss notice', 'give')} |
| 56 | > |
| 57 | <CloseIcon /> |
| 58 | </button> |
| 59 | )} |
| 60 | </div> |
| 61 | ); |
| 62 | }; |
| 63 |