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

ClayModal component

"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var Header_exports = {};
__export(Header_exports, {
  Item: () => Item,
  ItemGroup: () => ItemGroup,
  Subtitle: () => Subtitle,
  SubtitleSection: () => SubtitleSection,
  Title: () => Title,
  TitleIndicator: () => TitleIndicator,
  TitleSection: () => TitleSection,
  default: () => Header_default
});
module.exports = __toCommonJS(Header_exports);
var import_button = __toESM(require("@clayui/button"));
var import_icon = __toESM(require("@clayui/icon"));
var import_classnames = __toESM(require("classnames"));
var import_react = __toESM(require("react"));
var import_Context = __toESM(require("./Context"));
function ItemGroup({
  children,
  className,
  ...otherProps
}) {
  return /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      className: (0, import_classnames.default)("modal-item-group", className),
      ...otherProps
    },
    children
  );
}
function Item({ children, className, shrink, ...otherProps }) {
  return /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      className: (0, import_classnames.default)("modal-item", className, {
        "modal-item-shrink": shrink
      }),
      ...otherProps
    },
    children
  );
}
function TitleSection({
  children,
  className,
  ...otherProps
}) {
  return /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      className: (0, import_classnames.default)("modal-title-section", className),
      ...otherProps
    },
    children
  );
}
function Title({
  children,
  className,
  ...otherProps
}) {
  const { ariaLabelledby } = import_react.default.useContext(import_Context.default);
  return /* @__PURE__ */ import_react.default.createElement(
    "h1",
    {
      className: (0, import_classnames.default)("modal-title", className),
      tabIndex: -1,
      ...otherProps,
      id: ariaLabelledby
    },
    children
  );
}
function TitleIndicator({
  children,
  className,
  ...otherProps
}) {
  return /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      className: (0, import_classnames.default)("modal-title-indicator", className),
      ...otherProps
    },
    children
  );
}
function SubtitleSection({
  children,
  className,
  ...otherProps
}) {
  return /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      className: (0, import_classnames.default)("modal-subtitle-section", className),
      ...otherProps
    },
    children
  );
}
function Subtitle({
  children,
  className,
  ...otherProps
}) {
  return /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      className: (0, import_classnames.default)("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__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(Title, null, status && /* @__PURE__ */ import_react.default.createElement(TitleIndicator, null, /* @__PURE__ */ import_react.default.createElement(
    import_icon.default,
    {
      spritemap,
      symbol: ICON_MAP[status]
    }
  )), children), /* @__PURE__ */ import_react.default.createElement(
    import_button.default,
    {
      "aria-label": closeButtonAriaLabel,
      className: "close",
      displayType: "unstyled",
      onClick: onClose
    },
    /* @__PURE__ */ import_react.default.createElement(import_icon.default, { spritemap, symbol: "times" })
  ));
}
function ClayModalHeader({
  children,
  className,
  ...otherProps
}) {
  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("modal-header", className), ...otherProps }, children);
}
function Header({
  children,
  closeButtonAriaLabel,
  withTitle = true,
  ...otherProps
}) {
  const { onClose, spritemap, status } = import_react.default.useContext(import_Context.default);
  return /* @__PURE__ */ import_react.default.createElement(ClayModalHeader, { ...otherProps }, withTitle && /* @__PURE__ */ import_react.default.createElement(
    HighLevel,
    {
      closeButtonAriaLabel,
      onClose,
      spritemap,
      status
    },
    children
  ), !withTitle && children);
}
var Header_default = Header;