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