@redocly/theme/lib/components/Toast/Toast.js

Shared UI components lib

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.spin = exports.Toast = void 0;
const react_1 = __importStar(require("react"));
const styled_components_1 = __importStar(require("styled-components"));
const CheckmarkFilledIcon_1 = require("../../icons/CheckmarkFilledIcon/CheckmarkFilledIcon");
const CircleDashIcon_1 = require("../../icons/CircleDashIcon/CircleDashIcon");
const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
const ErrorFilledIcon_1 = require("../../icons/ErrorFilledIcon/ErrorFilledIcon");
const InformationFilledIcon_1 = require("../../icons/InformationFilledIcon/InformationFilledIcon");
const WarningFilledIcon_1 = require("../../icons/WarningFilledIcon/WarningFilledIcon");
const hooks_1 = require("../../core/hooks");
const Button_1 = require("../../components/Button/Button");
const toast_1 = require("../../core/constants/toast");
function renderToastIcon(type) {
    switch (type) {
        case 'success':
            return react_1.default.createElement(CheckmarkFilledIcon_1.CheckmarkFilledIcon, { size: "--toast-icon-size", color: "--toast-icon-color-success" });
        case 'warning':
            return react_1.default.createElement(WarningFilledIcon_1.WarningFilledIcon, { size: "--toast-icon-size", color: "--toast-icon-color-warning" });
        case 'error':
            return react_1.default.createElement(ErrorFilledIcon_1.ErrorFilledIcon, { size: "--toast-icon-size", color: "--toast-icon-color-error" });
        case 'loading':
            return react_1.default.createElement(CircleDashIcon_1.CircleDashIcon, { size: "--toast-icon-size", color: "--toast-icon-color-loading" });
        case 'info':
        default:
            return react_1.default.createElement(InformationFilledIcon_1.InformationFilledIcon, { size: "--toast-icon-size", color: "--toast-icon-color-info" });
    }
}
function renderDismissButton(onClick) {
    return (react_1.default.createElement(CloseButton, { "aria-label": "Dismiss notification", title: "Dismiss notification", icon: react_1.default.createElement(CloseIcon_1.CloseIcon, { size: "--toast-close-button-icon-size", color: "--toast-close-button-icon-color" }), onClick: onClick }));
}
function ToastComponent({ toast, onDismiss, stackIndex, stackZIndex = 1, className, }) {
    const { wrapperRef, hasDetails, dismissToast, handleMouseEnter, handleMouseLeave, ariaRole, ariaLive, } = (0, hooks_1.useToastLogic)({
        toast,
        onDismiss,
        stackIndex,
    });
    const icon = renderToastIcon(toast.type);
    const content = !hasDetails ? (react_1.default.createElement(SimpleToastSurface, { "$isExiting": toast.isExiting, "aria-live": ariaLive, role: ariaRole },
        react_1.default.createElement(ContentWrapper, null,
            react_1.default.createElement(IconWrapper, null, icon),
            react_1.default.createElement(SimpleContent, null,
                react_1.default.createElement(SimpleText, null, toast.title))),
        renderDismissButton(dismissToast))) : (react_1.default.createElement(DetailedToastSurface, { "$isExiting": toast.isExiting, "aria-live": ariaLive, role: ariaRole },
        react_1.default.createElement(ContentWrapper, null,
            react_1.default.createElement(IconWrapper, null, icon),
            react_1.default.createElement(Body, null,
                react_1.default.createElement(TitleRow, null,
                    react_1.default.createElement(TitleText, null, toast.title),
                    renderDismissButton(dismissToast)),
                toast.description ? (react_1.default.createElement(DescriptionRow, null,
                    react_1.default.createElement(DescriptionText, null, toast.description))) : null))));
    return (react_1.default.createElement(ToastWrapper, { ref: wrapperRef, "$stackZIndex": stackZIndex, className: className, "data-component-name": "Toast/Toast", "data-testid": `toast-${toast.type}`, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, content));
}
exports.Toast = (0, react_1.memo)(ToastComponent);
const slideIn = (0, styled_components_1.keyframes) `
  from {
    opacity: 0;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
`;
const slideOut = (0, styled_components_1.keyframes) `
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(100%);
  }
`;
exports.spin = (0, styled_components_1.keyframes) `
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
`;
const ToastWrapper = styled_components_1.default.div `
  position: relative;
  z-index: ${({ $stackZIndex }) => $stackZIndex};
  width: 100%;
  pointer-events: auto;
  will-change: transform;
`;
const ToastSurface = styled_components_1.default.div `
  display: flex;
  align-items: flex-start;
  width: 100%;
  min-width: var(--toast-min-width);
  max-width: var(--toast-max-width);
  background-color: var(--toast-bg-color);
  border: var(--toast-border);
  border-radius: var(--toast-border-radius);
  box-shadow: var(--toast-box-shadow);
  color: var(--toast-text-color);
  font-family: var(--toast-font-family);
  animation: ${({ $isExiting }) => $isExiting
    ? (0, styled_components_1.css) `
          ${slideOut} ${toast_1.TOAST_SLIDE_DURATION_MS}ms ease-in forwards
        `
    : (0, styled_components_1.css) `
          ${slideIn} ${toast_1.TOAST_SLIDE_DURATION_MS}ms ease-out
        `};

  @media (max-width: 480px) {
    min-width: 0;
    max-width: none;
  }
`;
const SimpleToastSurface = (0, styled_components_1.default)(ToastSurface) `
  gap: var(--toast-simple-gap);
  padding: var(--toast-simple-padding);
`;
const DetailedToastSurface = (0, styled_components_1.default)(ToastSurface) `
  padding: var(--toast-detailed-padding);
`;
const ContentWrapper = styled_components_1.default.div `
  display: flex;
  flex: 1 1 auto;
  gap: var(--toast-content-gap);
  min-width: 0;
`;
const IconWrapper = styled_components_1.default.div `
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--toast-icon-size);
  min-width: var(--toast-icon-size);
  height: var(--toast-icon-line-height);

  ${CircleDashIcon_1.CircleDashIcon} {
    animation: ${exports.spin} var(--toast-loading-animation-duration) linear infinite;
  }
`;
const flexItemStyles = (0, styled_components_1.css) `
  flex: 1 1 auto;
  min-width: 0;
`;
const SimpleContent = styled_components_1.default.div `
  ${flexItemStyles}
`;
const Body = styled_components_1.default.div `
  display: flex;
  ${flexItemStyles}
  flex-direction: column;
`;
const TitleRow = styled_components_1.default.div `
  display: flex;
  align-items: center;
  gap: var(--toast-title-gap);
  min-width: 0;
`;
const DescriptionRow = styled_components_1.default.div `
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--toast-description-gap);
  min-width: 0;
`;
const textStyles = (0, styled_components_1.css) `
  margin: 0;
  font-size: var(--toast-text-font-size);
  line-height: var(--toast-text-line-height);
  color: var(--toast-text-color);
  overflow-wrap: anywhere;
`;
const TitleText = styled_components_1.default.p `
  ${textStyles}
  ${flexItemStyles}
  font-weight: var(--toast-title-font-weight);
`;
const SimpleText = styled_components_1.default.p `
  ${textStyles}
  font-weight: var(--toast-body-font-weight);
`;
const DescriptionText = styled_components_1.default.p `
  ${textStyles}
  ${flexItemStyles}
  font-weight: var(--toast-body-font-weight);
`;
const CloseButton = (0, styled_components_1.default)(Button_1.Button).attrs({
    variant: 'ghost',
    size: 'small',
}) `
  flex: 0 0 auto;
  min-height: unset;
  margin: 0;
  padding: var(--toast-close-button-padding);
  color: var(--toast-close-button-icon-color);

  &:hover,
  &:focus-visible {
    border: none;
  }
`;
//# sourceMappingURL=Toast.js.map