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

React component library

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