@clayui/modal/lib/esm/Header.js

ClayModal component

import ClayButton from "@clayui/button";
import ClayIcon from "@clayui/icon";
import classNames from "classnames";
import React from "react";
import Context from "./Context";
function ItemGroup({
  children,
  className,
  ...otherProps
}) {
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      className: classNames("modal-item-group", className),
      ...otherProps
    },
    children
  );
}
function Item({ children, className, shrink, ...otherProps }) {
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      className: classNames("modal-item", className, {
        "modal-item-shrink": shrink
      }),
      ...otherProps
    },
    children
  );
}
function TitleSection({
  children,
  className,
  ...otherProps
}) {
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      className: classNames("modal-title-section", className),
      ...otherProps
    },
    children
  );
}
function Title({
  children,
  className,
  ...otherProps
}) {
  const { ariaLabelledby } = React.useContext(Context);
  return /* @__PURE__ */ React.createElement(
    "h1",
    {
      className: classNames("modal-title", className),
      tabIndex: -1,
      ...otherProps,
      id: ariaLabelledby
    },
    children
  );
}
function TitleIndicator({
  children,
  className,
  ...otherProps
}) {
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      className: classNames("modal-title-indicator", className),
      ...otherProps
    },
    children
  );
}
function SubtitleSection({
  children,
  className,
  ...otherProps
}) {
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      className: classNames("modal-subtitle-section", className),
      ...otherProps
    },
    children
  );
}
function Subtitle({
  children,
  className,
  ...otherProps
}) {
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      className: classNames("modal-subtitle", className),
      ...otherProps
    },
    children
  );
}
const ICON_MAP = {
  danger: "exclamation-full",
  info: "info-circle",
  success: "check-circle-full",
  warning: "warning-full"
};
function HighLevel({
  children,
  closeButtonAriaLabel = "Close",
  onClose,
  spritemap,
  status
}) {
  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Title, null, status && /* @__PURE__ */ React.createElement(TitleIndicator, null, /* @__PURE__ */ React.createElement(
    ClayIcon,
    {
      spritemap,
      symbol: ICON_MAP[status]
    }
  )), children), /* @__PURE__ */ React.createElement(
    ClayButton,
    {
      "aria-label": closeButtonAriaLabel,
      className: "close",
      displayType: "unstyled",
      onClick: onClose
    },
    /* @__PURE__ */ React.createElement(ClayIcon, { spritemap, symbol: "times" })
  ));
}
function ClayModalHeader({
  children,
  className,
  ...otherProps
}) {
  return /* @__PURE__ */ React.createElement("div", { className: classNames("modal-header", className), ...otherProps }, children);
}
function Header({
  children,
  closeButtonAriaLabel,
  withTitle = true,
  ...otherProps
}) {
  const { onClose, spritemap, status } = React.useContext(Context);
  return /* @__PURE__ */ React.createElement(ClayModalHeader, { ...otherProps }, withTitle && /* @__PURE__ */ React.createElement(
    HighLevel,
    {
      closeButtonAriaLabel,
      onClose,
      spritemap,
      status
    },
    children
  ), !withTitle && children);
}
var Header_default = Header;
export {
  Item,
  ItemGroup,
  Subtitle,
  SubtitleSection,
  Title,
  TitleIndicator,
  TitleSection,
  Header_default as default
};