@kiwicom/orbit-components/lib/Modal/ModalHeader/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com's products.

"use strict";
"use client";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.default = exports.ModalHeaderWrapper = void 0;
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _Text = _interopRequireDefault(require("../../Text"));
var _ModalContext = require("../ModalContext");
var _useModalContextFunctions = _interopRequireDefault(require("../helpers/useModalContextFunctions"));
const ModalHeaderWrapper = ({
  className,
  suppressed,
  dataTest,
  children
}) => {
  return /*#__PURE__*/React.createElement("div", {
    className: (0, _clsx.default)(className, "orbit-modal-header-container", "rounded-t-modal box-border block w-full", "lm:[&_~_.orbit-modal-section]:rounded-t-none", suppressed ? ["bg-cloud-light py-800 px-400 lm:p-800", "[&_~_.orbit-modal-section:first-of-type]:border-t-elevation-flat-border-color [&_~_.orbit-modal-section:first-of-type]:!mt-0 [&_~_.orbit-modal-section:first-of-type]:border-t [&_~_.orbit-modal-section:first-of-type]:border-solid"] : ["bg-white-normal pt-600 px-400 lm:pt-800 lm:px-800 lm:pb-0 pb-0"]),
    "data-test": dataTest
  }, children);
};
exports.ModalHeaderWrapper = ModalHeaderWrapper;
const ModalHeader = ({
  illustration,
  suppressed,
  children,
  description,
  title,
  dataTest
}) => {
  const {
    setHasModalTitle,
    setHasModalDescription,
    hasMobileHeader,
    isMobileFullPage,
    titleID,
    descriptionID
  } = React.useContext(_ModalContext.ModalContext);
  (0, _useModalContextFunctions.default)();
  React.useEffect(() => {
    if (title) setHasModalTitle?.(true);
    return () => {
      setHasModalTitle?.(false);
    };
  }, [title, setHasModalTitle]);
  React.useEffect(() => {
    if (description) setHasModalDescription?.(true);
    return () => {
      setHasModalDescription?.(false);
    };
  }, [description, setHasModalDescription]);
  const hasHeader = Boolean(title || description);
  return /*#__PURE__*/React.createElement(ModalHeaderWrapper, {
    suppressed: suppressed,
    dataTest: dataTest
  }, illustration, hasHeader && /*#__PURE__*/React.createElement("div", {
    className: (0, _clsx.default)(!!illustration && "mt-400", "[&_.orbit-modal-heading]:pe-800 de:[&_.orbit-modal-heading]:p-0")
  }, title && /*#__PURE__*/React.createElement("h2", {
    className: "orbit-modal-heading text-heading-title2 font-heading-title2 leading-heading-title2 text-heading-foreground lm:text-heading-title0 lm:font-heading-title0 lm:leading-heading-title0 m-0",
    id: titleID
  }, title), description && /*#__PURE__*/React.createElement("div", {
    className: "mt-200"
  }, /*#__PURE__*/React.createElement(_Text.default, {
    size: "large",
    as: "div",
    id: descriptionID
  }, description))), children && /*#__PURE__*/React.createElement("div", {
    className: (0, _clsx.default)(!hasHeader && !!children ? "mt-0" : [description ? "mt-800" : "mt-400"])
  }, children), title && hasMobileHeader && /*#__PURE__*/React.createElement("div", {
    className: (0, _clsx.default)("orbit-modal-mobile-header bg-white-normal", "font-base font-heading-display text-extra-large text-heading-foreground ps-600 z-overlay end-1200 h-1300 invisible fixed start-0 box-border inline-block truncate py-0 pe-0 leading-[52px] opacity-0", "lm:start-auto lm:end-auto lm:p-0", isMobileFullPage ? "top-0" : "top-400"),
    role: "presentation"
  }, title));
};
var _default = exports.default = ModalHeader;