@lanaco/lnc-react-ui/dist/ConfirmationForm.js

React component library

import { jsx as o, jsxs as S } from "react/jsx-runtime";
import { forwardRef as R, cloneElement as E } from "react";
import { P as r } from "./index-S5Cd7WrG.js";
import { n as f } from "./emotion-styled.browser.esm-CjCaF13H.js";
import m from "./Icon.js";
import { b as d } from "./utils-DtRLzzTZ.js";
import M from "./Modal.js";
import { u as V } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const q = f.div`
  display: flex;
  gap: 1rem;
  align-items: center;
  ${(e) => e.type == "centered" && "flex-direction: column; gap: 1.25rem;"}
  & .alert-icon {
    font-size: 2.2rem;
    color: ${(e) => d(
  e.theme,
  "ConfirmationForm",
  e.color,
  "enabled",
  "icon"
)};
  }
  ${(e) => e.type == "centered" && "padding-top: 0.5rem;"}
`, D = f.div`
  display: flex;
  flex-direction: ${(e) => e.type == "regular" ? "row" : "column"};
  width: 100%;
  flex: 1;
  gap: 0.5rem;
  justify-content: ${(e) => G(e.actionsAlignment)};
  ${(e) => e.type == "regular" && "height: 4rem; border-radius: 0 0 16px 16px; padding: 0.75rem 1.5rem 0.75rem 1.5rem;"}
  ${(e) => e.type == "regular" && e.actionsTrack == !1 && "padding: 0 1.5rem 1.5rem 1.5rem;"}
   ${(e) => e.type == "regular" && e.actionsTrack == !0 && `background-color: ${d(
  e.theme,
  "ConfirmationForm",
  "primary",
  "enabled",
  "trackBg"
)};`}
   ${(e) => e.type == "centered" && "padding: 1rem 0 0.5rem 0;"}
`, G = (e) => e == "right" ? "end" : e == "left" ? "start" : "center", H = R((e, u) => {
  const {
    color: p,
    statusIcon: g = !0,
    title: y,
    type: i = "regular",
    actions: h,
    actionsAlignment: x = "right",
    actionsTrack: T = !1,
    overlay: b = !0,
    showCloseButton: k = !0,
    onClose: C = () => {
    },
    zIndex: $ = 1e3,
    size: w = "fluid",
    clickOutsideToClose: A = !1,
    className: O = "",
    style: v = {},
    overlayProps: N,
    children: I,
    rest: P
  } = e;
  let l = {
    theme: V(),
    size: w,
    zIndex: $,
    className: "lnc-ui-confirmation-form " + O,
    style: v
  };
  const j = (t) => t == "danger" ? "times-circle" : t == "warning" ? "exclamation-triangle" : t == "success" ? "check-circle" : "exclamation-circle", z = ({ statusIcon: t, color: n }) => typeof t == "boolean" && t == !0 ? /* @__PURE__ */ o(m, { className: "alert-icon", icon: j(n) }) : typeof t == "string" && t !== "" ? /* @__PURE__ */ o(m, { className: "alert-icon", icon: t }) : E(t, {
    className: "alert-icon " + (t == null ? void 0 : t.className)
  }), B = ({ statusIcon: t, color: n, title: a, type: c, themeProps: s }) => /* @__PURE__ */ S(q, { ...s, color: n, type: c, children: [
    /* @__PURE__ */ o(z, { statusIcon: t, color: n }),
    /* @__PURE__ */ o("h3", { children: a })
  ] }), F = ({
    actions: t,
    type: n,
    actionsAlignment: a,
    actionsTrack: c,
    themeProps: s
  }) => /* @__PURE__ */ o(
    D,
    {
      type: n,
      actionsAlignment: a,
      actionsTrack: c,
      ...s,
      children: t
    }
  );
  return /* @__PURE__ */ o(
    M,
    {
      ref: u,
      ...l,
      header: i == "regular" ? /* @__PURE__ */ o(
        B,
        {
          statusIcon: g,
          color: p,
          title: y,
          type: i,
          themeProps: l
        }
      ) : null,
      footer: i == "regular" ? /* @__PURE__ */ o(
        F,
        {
          actions: h,
          type: i,
          actionsAlignment: x,
          actionsTrack: T,
          themeProps: l
        }
      ) : null,
      overlay: b,
      showCloseButton: k,
      onClose: C,
      clickOutsideToClose: A,
      overlayProps: N,
      ...P,
      children: /* @__PURE__ */ o("div", { children: "okej" })
    }
  );
});
H.propTypes = {
  color: r.oneOf([
    "primary",
    "secondary",
    "success",
    "danger",
    "warning",
    "information",
    "neutral",
    "gray"
  ]),
  /**
   * Can be boolean (true - display default icon, false - don't display icon at all), string (display custom icon), element (display custom element as icon)
   */
  statusIcon: r.oneOfType([
    r.string,
    r.element,
    r.bool
  ]),
  title: r.oneOfType([r.string, r.element]),
  type: r.oneOf(["regular", "centered"]),
  actions: r.element,
  /**
   * Aligmnent of actions when `type="regular"`
   */
  actionsAlignment: r.oneOf(["right", "center", "left"]),
  /**
   * Defines whether actions will be inside a track
   */
  actionsTrack: r.bool,
  showCloseButton: r.bool,
  overlay: r.bool,
  onClose: r.func,
  zIndex: r.number,
  clickOutsideToClose: r.bool,
  className: r.string,
  style: r.object,
  size: r.oneOf(["fluid", "xs", "s", "m", "l", "xl", "full"]),
  overlayProps: r.any
};
export {
  H as default
};