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

React component library

import { jsx as r, jsxs as i, Fragment as T } from "react/jsx-runtime";
import { forwardRef as w } from "react";
import { s as u } from "./emotion-styled.browser.esm-DfbrHHed.js";
import j from "./FlexGrid.js";
import W from "./FlexGridItem.js";
import { d as A, c as C, g as O, b as U } from "./utils-BUdHa0nB.js";
import { u as P } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
import Y from "./Button.js";
import d from "./IconButton.js";
const q = u.label`
  display: block;
  margin-bottom: 4px;
  ${(e) => A(e.theme, "FormField", e.size, "enabled")}
  color: ${(e) => C(
  e.theme,
  "FormField",
  e.color,
  "enabled",
  "text"
)};
`, v = w((e, c) => {
  const {
    size: h = "small",
    color: s = "primary",
    className: l = "",
    style: m = {},
    children: b
  } = e, p = P();
  return /* @__PURE__ */ r(
    q,
    {
      theme: p,
      size: h,
      className: "lnc-ui-label " + l,
      style: m,
      color: s,
      ref: c,
      children: b
    }
  );
});
v.defaultProps = {
  style: {},
  size: "small",
  color: "primary"
};
const k = u.div`
  display: flex;
  justify-content: space-between;
`, H = u.div`
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: ${(e) => O(
  e.theme,
  "Popover",
  e.color,
  "enabled",
  "boxShadow"
)};
  border-radius: ${(e) => U(e.theme, e.borderRadius)};
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  padding: 12px;
  background-color: ${(e) => C(e.theme, "Popover", "default", "enabled", "bg")};
`, J = w((e, c) => {
  const {
    // eslint-disable-next-line no-unused-vars
    __TYPE__: h = "DETAILS_VIEW",
    goToPreviousView: s,
    data: l = {},
    fields: m = {},
    flexGridProps: b,
    goBackText: p = "Go back",
    showBack: B = !0,
    showNext: E = !0,
    showPrevious: V = !0,
    showEdit: f = !0,
    disableGoBack: F = !1,
    disableNext: N = !1,
    disablePrevious: G = !1,
    disableEdit: g = !1,
    editOnTop: y = !1,
    //------------------
    goToNext: I = () => {
    },
    goToPrevious: S = () => {
    },
    onEdit: x = () => {
    },
    goBack: _ = () => {
    },
    //------------------
    className: $ = "",
    color: t = "primary",
    size: a = "small",
    children: R,
    ...z
  } = e, D = P(), L = (o, n) => {
    s && s(), _(o, n);
  };
  return /* @__PURE__ */ i(
    H,
    {
      ref: c,
      theme: D,
      color: t,
      borderRadius: "regular",
      className: $,
      ...z,
      children: [
        /* @__PURE__ */ i(k, { children: [
          B && /* @__PURE__ */ r(
            Y,
            {
              leadingIcon: "arrow-circle-left",
              text: p,
              btnType: "outline",
              style: { width: "fit-content" },
              onClick: (o) => L(o, l),
              disabled: F,
              color: t,
              size: a
            },
            0
          ),
          f && y && /* @__PURE__ */ r(
            d,
            {
              btnType: "outline",
              icon: "pen",
              disabled: g,
              onClick: (o) => x(l, o),
              color: t,
              size: a
            }
          )
        ] }),
        /* @__PURE__ */ r(T, { children: R || /* @__PURE__ */ r(j, { spacing: 10, ...b, children: m.map((o, n) => /* @__PURE__ */ i(W, { ...o, children: [
          /* @__PURE__ */ i(v, { color: t, size: a, children: [
            o.label,
            ":"
          ] }, n),
          l[o.accessor]
        ] }, n)) }) }),
        /* @__PURE__ */ i(k, { children: [
          /* @__PURE__ */ i("div", { children: [
            E && /* @__PURE__ */ i(T, { children: [
              /* @__PURE__ */ r(
                d,
                {
                  btnType: "outline",
                  icon: "angle-left",
                  disabled: G,
                  onClick: (o) => S(l, o),
                  color: t,
                  size: a
                }
              ),
              "  "
            ] }),
            V && /* @__PURE__ */ r(
              d,
              {
                btnType: "outline",
                icon: "angle-right",
                disabled: N,
                onClick: (o) => I(l, o),
                color: t,
                size: a
              }
            )
          ] }),
          f && !y && /* @__PURE__ */ r(
            d,
            {
              btnType: "outline",
              icon: "pen",
              disabled: g,
              onClick: (o) => x(l, o),
              color: t,
              size: a
            }
          )
        ] })
      ]
    }
  );
});
J.displayName = "DETAILS_VIEW";
export {
  J as default
};