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