import React from 'react'; import PropTypes from 'prop-types'; import { cx } from 'ramda-extension'; import { T, always, cond, equals, identity } from 'ramda'; import Grid from '../Grid'; import Box from '../Box'; import Icon from '../Icon'; import Button from '../Button'; const getIcon = cond([ [equals('danger'), always('status-rejected')], [equals('warning'), always('error')], [T, identity], ]); // TODO Mobile should not have A close button, // desired functionality is to hide notification with swipe up // (just like native notifications) const Notification = ({ children, className, type = 'success', onClose, id, ...otherProps }) => ( <Grid flex className={cx('notification', type, className)} {...otherProps}> <Box className="notification__icon" mx={3}> <Icon type={getIcon(type)} size={22} color={type} /> </Box> <Box className="notification__text">{children}</Box> <Box mx={3}> <Button className="py-0" kind="blank" size="xs" onClick={() => onClose(id)} > <Icon type="cancel" size={16} /> </Button> </Box> </Grid> ); Notification.propTypes = { children: PropTypes.node, className: PropTypes.string, icon: PropTypes.string, id: PropTypes.string, onClose: PropTypes.func, type: PropTypes.string, }; export const NotificationTypes = [ 'danger', 'warning', 'info', 'success', 'primary', 'secondary', ]; export default Notification;