@bubbles-ui/notifications/es/Notification/Notification.js

The Bubbles Design System is Leemonade's open-source design system for products and experiences.

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React, { forwardRef, useMemo } from 'react';
import PropTypes from 'prop-types';
import { isEmpty } from 'lodash';
import { Notification as MantineNotification } from '@mantine/core';
import { ALERT_SEVERITIES, Avatar, Box, Text } from '@bubbles-ui/components';
import { AlertInformationCircleIcon, AlertWarningTriangleIcon, BlockIcon, CheckIcon } from '@bubbles-ui/icons/solid';
import { NotificationStyles } from './Notification.styles';
import { CONTEXT_TYPES } from '../NotificationProvider/context';
export const NOTIFICATION_DEFAULT_PROPS = {
  severity: 'none',
  loading: false,
  disallowClose: false,
  icon: null,
  type: CONTEXT_TYPES.DEFAULT,
  avatar: ''
};
export const NOTIFICATION_PROP_TYPES = {
  /** Called when close button is clicked */
  onClose: PropTypes.func,
  /** Notification line or icon color */
  severity: PropTypes.oneOf(['none', ...ALERT_SEVERITIES]),
  /** Notification icon, displayed at left of body */
  icon: PropTypes.node,
  /** Notification title, displayed before body */
  title: PropTypes.string,
  /** Notification message, place main text here */
  message: PropTypes.string,
  /** Notification body, place main text here */
  children: PropTypes.node,
  /** Replaces colored line or icon with Loader component */
  loading: PropTypes.bool,
  /** Removes close button */
  disallowClose: PropTypes.bool,
  /** Notification type */
  type: PropTypes.string,
  /** Notification avatar */
  avatar: PropTypes.string
};
const SEVERITY_ICONS = {
  info: AlertInformationCircleIcon,
  success: CheckIcon,
  error: BlockIcon,
  warning: AlertWarningTriangleIcon
};
const Notification = /*#__PURE__*/forwardRef((_ref, ref) => {
  let {
    children,
    message,
    leftSide,
    severity,
    icon: iconProp,
    type,
    avatar,
    ...props
  } = _ref;
  const icon = useMemo(() => {
    if (leftSide) {
      return /*#__PURE__*/React.createElement(React.Fragment, null);
    }
    if (!isEmpty(avatar)) {
      return /*#__PURE__*/React.createElement(React.Fragment, null);
    }
    if (!isEmpty(severity) && severity !== 'none') {
      const IconComp = SEVERITY_ICONS[severity];
      return /*#__PURE__*/React.createElement(IconComp, null);
    }
    return iconProp;
  }, [severity, iconProp, avatar]);
  const {
    classes,
    cx
  } = NotificationStyles({
    hasIcon: !isEmpty(icon),
    severity,
    type
  }, {
    name: `Notification_${type}`
  });
  return /*#__PURE__*/React.createElement(MantineNotification, _extends({}, props, {
    ref: ref,
    classNames: classes,
    icon: icon
  }), leftSide ? /*#__PURE__*/React.createElement(Box, {
    style: {
      position: 'absolute',
      left: 15,
      top: 15
    }
  }, leftSide) : null, !isEmpty(avatar) && /*#__PURE__*/React.createElement(Box, {
    style: {
      position: 'absolute',
      left: 15,
      top: 15
    }
  }, /*#__PURE__*/React.createElement(Avatar, {
    image: avatar
  })), !isEmpty(message) && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Text, {
    role: "productive",
    size: "xs",
    className: classes.message
  }, message)), children);
});
Notification.defaultProps = NOTIFICATION_DEFAULT_PROPS;
Notification.propTypes = NOTIFICATION_PROP_TYPES;
export { Notification };