pouncejs/dist/esm/components/utils/ControlledAlert/ControlledAlert.js

A collection of UI components from Panther labs

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import React from 'react';
import { useId } from '@reach/auto-id';
import Box from '../../Box';
import Flex from '../../Flex';
import IconButton from '../../IconButton';
import Icon from '../../Icon';
import Heading from '../../Heading';
import useAlertStyles from './useAlertStyles';

/** An ControlledAlert component is simply a container for text that should capture the user's attention */
var ControlledAlert = /*#__PURE__*/React.forwardRef(function ControlledAlert(_ref, ref) {
  var title = _ref.title,
      open = _ref.open,
      onClose = _ref.onClose,
      description = _ref.description,
      _ref$variant = _ref.variant,
      variant = _ref$variant === void 0 ? 'default' : _ref$variant,
      _ref$variantBackgroun = _ref.variantBackgroundStyle,
      variantBackgroundStyle = _ref$variantBackgroun === void 0 ? 'transparent' : _ref$variantBackgroun,
      discardable = _ref.discardable,
      _ref$actions = _ref.actions,
      actions = _ref$actions === void 0 ? null : _ref$actions,
      rest = _objectWithoutPropertiesLoose(_ref, ["title", "open", "onClose", "description", "variant", "variantBackgroundStyle", "discardable", "actions"]);

  var _useAlertStyles = useAlertStyles({
    variant: variant,
    variantBackgroundStyle: variantBackgroundStyle
  }),
      icon = _useAlertStyles.icon,
      iconColor = _useAlertStyles.iconColor,
      titleColor = _useAlertStyles.titleColor,
      discardButtonColor = _useAlertStyles.discardButtonColor,
      styles = _objectWithoutPropertiesLoose(_useAlertStyles, ["icon", "iconColor", "titleColor", "discardButtonColor"]);

  var id = useId();

  if (!open) {
    return null;
  }

  return /*#__PURE__*/React.createElement(Flex, _extends({
    ref: ref,
    role: "dialog",
    "aria-labelledby": id + "-title",
    "aria-describedby": id + "-description"
  }, styles, rest), /*#__PURE__*/React.createElement(Flex, {
    flexGrow: 1,
    direction: variantBackgroundStyle === 'solid' ? 'column' : 'row',
    align: variantBackgroundStyle === 'solid' ? 'flex-start' : 'center'
  }, /*#__PURE__*/React.createElement(Box, null, title && /*#__PURE__*/React.createElement(Flex, {
    as: "header",
    align: "center"
  }, icon && /*#__PURE__*/React.createElement(Icon, {
    type: icon,
    mr: 2,
    color: iconColor,
    size: "large"
  }), /*#__PURE__*/React.createElement(Box, {
    as: Heading,
    color: titleColor,
    fontWeight: description ? 'bold' : 'normal',
    fontSize: description ? 'large' : 'medium',
    flexGrow: 1,
    mr: "auto",
    pr: 6,
    id: id + "-title"
  }, title)), description && /*#__PURE__*/React.createElement(Box, {
    as: "p",
    mt: title ? 3 : 0,
    color: titleColor,
    fontSize: "medium"
  }, description)), actions && /*#__PURE__*/React.createElement(Flex, {
    mt: variantBackgroundStyle === 'solid' ? 6 : 0,
    mr: 0,
    ml: "auto"
  }, typeof actions === 'function' ? actions({
    close: close
  }) : actions)), discardable && /*#__PURE__*/React.createElement(Box, {
    my: -2,
    mr: -2,
    ml: 2
  }, /*#__PURE__*/React.createElement(IconButton, {
    "aria-label": "Discard",
    variant: "unstyled",
    iconColor: discardButtonColor,
    icon: "close",
    onClick: onClose
  })));
});
export default /*#__PURE__*/React.memo(ControlledAlert);