@lanaco/lnc-react-ui
Version:
React component library
308 lines (307 loc) • 7.03 kB
JavaScript
import { jsxs as m, jsx as e, Fragment as b } from "react/jsx-runtime";
import { forwardRef as E } from "react";
import { s as x } from "./emotion-styled.browser.esm-DfbrHHed.js";
import M from "./FlexGrid.js";
import O from "./FlexGridItem.js";
import f from "./Button.js";
import g from "./IconButton.js";
import U from "./TextInput.js";
import _ from "./CheckBoxInput.js";
import q from "./RadioGroup.js";
import H from "./NumberInput.js";
import J from "./DecimalInput.js";
import K from "./PasswordInput.js";
import L from "./TextAreaInput.js";
import P from "./TimeInput.js";
import Q from "./ColorInput.js";
import X from "./FileInput.js";
import Y from "./RangeSlider.js";
import { g as Z, b as z, c as ee } from "./utils-BUdHa0nB.js";
import re from "./FormField.js";
import { u as te } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const ae = x.div`
display: flex;
justify-content: space-between;
`, oe = x.form`
display: flex;
flex-direction: column;
gap: 1rem;
box-shadow: ${(l) => Z(
l.theme,
"Popover",
l.color,
"enabled",
"boxShadow"
)};
border-radius: ${(l) => z(l.theme, l.borderRadius)};
border-top: 1px solid rgba(0, 0, 0, 0.04);
padding: 12px;
background-color: ${(l) => ee(l.theme, "Popover", "default", "enabled", "bg")};
`, ne = (l, a, o, n, t, d) => {
var i;
switch (l || "") {
case "text":
return /* @__PURE__ */ e(
U,
{
name: o,
color: t,
size: d,
...a,
defaultValue: n
}
);
case "checkbox":
return /* @__PURE__ */ e(
_,
{
color: t,
size: d,
name: o,
...a
}
);
case "radioGroup":
return /* @__PURE__ */ e(
q,
{
color: t,
size: d,
value: n,
radioProps: a.radioProps,
name: o,
items: [
...((i = a.items) == null ? void 0 : i.map((u) => ({ value: u.value, label: u.label }))) ?? []
]
}
);
case "number":
return /* @__PURE__ */ e(
H,
{
color: t,
size: d,
name: o,
...a,
defaultValue: n
}
);
case "decimal":
return /* @__PURE__ */ e(
J,
{
name: o,
color: t,
size: d,
...a,
defaultValue: n
}
);
case "file":
return /* @__PURE__ */ e(
X,
{
name: o,
color: t,
size: d,
...a,
defaultValue: n
}
);
case "password":
return /* @__PURE__ */ e(
K,
{
name: o,
color: t,
...a,
defaultValue: n
}
);
case "textArea":
return /* @__PURE__ */ e(
L,
{
name: o,
color: t,
size: d,
...a,
defaultValue: n
}
);
case "time":
return /* @__PURE__ */ e(
P,
{
name: o,
color: t,
size: d,
...a,
defaultValue: n
}
);
case "color":
return /* @__PURE__ */ e(
Q,
{
name: o,
color: t,
size: d,
...a,
defaultValue: n
}
);
case "range":
return /* @__PURE__ */ e(
Y,
{
name: o,
color: t,
size: d,
...a,
defaultValue: n
}
);
default:
return n;
}
}, de = E((l, a) => {
const {
goToPreviousView: o,
id: n,
data: t,
fields: d = [],
errors: i = {},
flexGridProps: u,
goBackText: h = "Go back",
backActive: y = !0,
nextActive: I = !0,
previousActive: T = !0,
disableGoBack: V = !1,
disableNext: k = !1,
disablePrevious: w = !1,
disableDiscard: C = !1,
disableSave: F = !1,
discardText: B = "Discard",
saveText: G = "Save",
//------------------
goToNext: R = () => {
},
goToPrevious: v = () => {
},
goBack: S = () => {
},
onSubmit: A = () => {
},
onDiscard: D = () => {
},
//------------------
color: c = "primary",
size: p = "small",
children: N,
...$
} = l, j = te(), W = (r, s) => {
o && o(), S(r, s);
};
return /* @__PURE__ */ m(
oe,
{
ref: a,
theme: j,
color: c,
borderRadius: "regular",
...$,
children: [
y && /* @__PURE__ */ e(
f,
{
leadingIcon: "arrow-circle-left",
text: h,
btnType: "outline",
style: { width: "fit-content" },
onClick: (r) => W(r, t),
disabled: V,
type: "button"
},
0
),
/* @__PURE__ */ e(b, { children: N || /* @__PURE__ */ e(M, { spacing: 10, ...u, children: d.map((r, s) => /* @__PURE__ */ e(O, { ...r, children: /* @__PURE__ */ e(
re,
{
label: r.label,
text: i[r.accessor],
color: i[r.accessor] ? "danger" : c,
size: p,
children: r.type == "custom" ? r.element : ne(
r.type,
r.inputProps,
r.accessor,
t[r.accessor],
i[r.accessor] ? "danger" : c,
p
)
},
s
) }, s)) }) }),
/* @__PURE__ */ m(ae, { children: [
/* @__PURE__ */ m("div", { children: [
I && /* @__PURE__ */ m(b, { children: [
/* @__PURE__ */ e(
g,
{
btnType: "outline",
icon: "angle-left",
disabled: w,
onClick: (r) => v(t, r),
type: "button"
}
),
" "
] }),
T && /* @__PURE__ */ e(
g,
{
btnType: "outline",
icon: "angle-right",
disabled: k,
onClick: (r) => R(t, r),
type: "button"
}
)
] }),
/* @__PURE__ */ m("div", { children: [
/* @__PURE__ */ e(
f,
{
leadingIcon: "eraser",
btnType: "outline",
color: "warning",
text: B,
disabled: C,
onClick: D,
type: "button"
}
),
" ",
/* @__PURE__ */ e(
f,
{
leadingIcon: "floppy-disk",
btnType: "tinted",
color: "success",
text: G,
disabled: F,
onClick: A
}
)
] })
] })
]
},
n
);
});
de.displayName = "FORM_VIEW";
export {
de as default
};