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

A collection of UI components from Panther labs

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _react = _interopRequireDefault(require("react"));

var _autoId = require("@reach/auto-id");

var _Box = _interopRequireDefault(require("../../Box"));

var _Flex = _interopRequireDefault(require("../../Flex"));

var _IconButton = _interopRequireDefault(require("../../IconButton"));

var _Icon = _interopRequireDefault(require("../../Icon"));

var _Heading = _interopRequireDefault(require("../../Heading"));

var _useAlertStyles2 = _interopRequireDefault(require("./useAlertStyles"));

/** An ControlledAlert component is simply a container for text that should capture the user's attention */
var ControlledAlert = /*#__PURE__*/_react.default.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 = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["title", "open", "onClose", "description", "variant", "variantBackgroundStyle", "discardable", "actions"]);

  var _useAlertStyles = (0, _useAlertStyles2.default)({
    variant: variant,
    variantBackgroundStyle: variantBackgroundStyle
  }),
      icon = _useAlertStyles.icon,
      iconColor = _useAlertStyles.iconColor,
      titleColor = _useAlertStyles.titleColor,
      discardButtonColor = _useAlertStyles.discardButtonColor,
      styles = (0, _objectWithoutPropertiesLoose2.default)(_useAlertStyles, ["icon", "iconColor", "titleColor", "discardButtonColor"]);

  var id = (0, _autoId.useId)();

  if (!open) {
    return null;
  }

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

var _default = /*#__PURE__*/_react.default.memo(ControlledAlert);

exports.default = _default;