@rws-aoa/react-library
Version:
RWS AOA Design System
231 lines (230 loc) • 8.22 kB
JavaScript
import { jsx as m, jsxs as R } from "react/jsx-runtime";
import { c as I } from "./compiler-runtime.CrLvXwKf.js";
import { createFormHookContexts as ee, createFormHook as te } from "@tanstack/react-form";
import { AoaNotification as j } from "../components/atoms/notification/Notification.js";
import { DialogTitle as oe, DialogContent as re, Dialog as ae, DialogActions as se, TextField as ie, inputBaseClasses as J } from "@mui/material";
import { l as $ } from "./lodash.DPVO3Hgf.js";
import { AoaButton as z } from "../components/atoms/button/Button.js";
import { AoaModalCloseButton as ne } from "../components/molecules/modal-close-button/ModalCloseButton.js";
import { AoaTooltip as le } from "../components/atoms/tooltip/Tooltip.js";
function me(a) {
const e = I.c(5), {
"data-qa": n
} = a, r = V();
let i;
e[0] !== n ? (i = (s) => {
if (s.length) {
const o = s.at(0);
if (typeof o == "string")
return /* @__PURE__ */ m(j, { "data-qa": n ?? "form-error", message: o, severity: "error" });
if (o && typeof o == "object") {
const l = ["error", "info", "success", "warning"].includes(o.level) ? o.level : "error";
return /* @__PURE__ */ m(j, { "data-qa": n ?? "form-error", message: o.message, severity: l });
}
}
return null;
}, e[0] = n, e[1] = i) : i = e[1];
let t;
return e[2] !== r.Subscribe || e[3] !== i ? (t = /* @__PURE__ */ m(r.Subscribe, { selector: ce, children: i }), e[2] = r.Subscribe, e[3] = i, e[4] = t) : t = e[4], t;
}
function ce(a) {
return a.errors;
}
function de(a) {
const e = I.c(56), {
formModalQas: n,
formLabels: r,
formName: i,
DialogProps: t,
DialogTitleProps: s,
DialogContentProps: o,
AoaSubmitButtonProps: l,
modalQas: c,
open: u,
topic: P,
dialogContent: w,
closeAction: p
} = a;
let b;
e[0] !== l ? (b = l === void 0 ? {} : l, e[0] = l, e[1] = b) : b = e[1];
let f, g;
e[2] !== b ? ({
disableWithFormState: g,
...f
} = b, e[2] = b, e[3] = f, e[4] = g) : (f = e[3], g = e[4]);
const d = V();
let D;
e[5] !== f || e[6] !== g || e[7] !== d.Subscribe || e[8] !== r.submit || e[9] !== n?.submitButton ? (D = g ? /* @__PURE__ */ m(d.Subscribe, { selector: ue, children: (T) => {
const [L, G] = T;
return /* @__PURE__ */ m(z, { ...f, "aria-disabled": L || !G, buttonType: "submit", "data-qa": n?.submitButton ?? "submit-form", disabled: L || !G, type: "primary", children: r.submit });
} }) : /* @__PURE__ */ m(z, { ...f, buttonType: "submit", "data-qa": n?.submitButton ?? "submit-form", type: "primary", children: r.submit }), e[5] = f, e[6] = g, e[7] = d.Subscribe, e[8] = r.submit, e[9] = n?.submitButton, e[10] = D) : D = e[10];
const E = D, k = c?.modal ?? "modal", Q = !!u;
let x;
e[11] !== t?.sx ? (x = $.merge({
"> div > div": {
borderRadius: 0
}
}, t?.sx), e[11] = t?.sx, e[12] = x) : x = e[12];
const U = c?.title ?? "modal-title";
let h;
e[13] !== s?.sx ? (h = $.merge({
padding: "3rem 3rem 1rem",
color: "var(--color-rijks-logoblue)",
fontSize: "1.1rem",
fontWeight: "bolder"
}, s?.sx), e[13] = s?.sx, e[14] = h) : h = e[14];
let v;
e[15] !== s || e[16] !== U || e[17] !== h || e[18] !== P ? (v = /* @__PURE__ */ m(oe, { ...s, "data-qa": U, maxWidth: "sm", sx: h, children: P }), e[15] = s, e[16] = U, e[17] = h, e[18] = P, e[19] = v) : v = e[19];
let C;
e[20] !== p ? (C = /* @__PURE__ */ m(ne, { closeAction: p }), e[20] = p, e[21] = C) : C = e[21];
const _ = n?.form ?? "form";
let y;
e[22] !== d ? (y = async (T) => {
T.preventDefault(), T.stopPropagation(), await d.handleSubmit();
}, e[22] = d, e[23] = y) : y = e[23];
const M = c?.content ?? "modal-content";
let A;
e[24] !== o?.sx ? (A = $.merge({
padding: "0 3rem 2rem"
}, o?.sx), e[24] = o?.sx, e[25] = A) : A = e[25];
let F;
e[26] !== o || e[27] !== w || e[28] !== M || e[29] !== A ? (F = /* @__PURE__ */ m(re, { ...o, "data-qa": M, sx: A, children: w }), e[26] = o, e[27] = w, e[28] = M, e[29] = A, e[30] = F) : F = e[30];
const W = n?.dialogActions ?? "dialog-actions", H = n?.cancelButton ?? "cancel-form";
let S;
e[31] !== p || e[32] !== d ? (S = () => {
d.reset(), p();
}, e[31] = p, e[32] = d, e[33] = S) : S = e[33];
let q;
e[34] !== r.cancel || e[35] !== H || e[36] !== S ? (q = /* @__PURE__ */ m(z, { "data-qa": H, onClick: S, type: "secondary", children: r.cancel }), e[34] = r.cancel, e[35] = H, e[36] = S, e[37] = q) : q = e[37];
let B;
e[38] !== E || e[39] !== W || e[40] !== q ? (B = /* @__PURE__ */ R(se, { "data-qa": W, children: [
q,
E
] }), e[38] = E, e[39] = W, e[40] = q, e[41] = B) : B = e[41];
let N;
e[42] !== i || e[43] !== _ || e[44] !== y || e[45] !== F || e[46] !== B ? (N = /* @__PURE__ */ R("form", { "data-qa": _, name: i, onSubmit: y, children: [
F,
B
] }), e[42] = i, e[43] = _, e[44] = y, e[45] = F, e[46] = B, e[47] = N) : N = e[47];
let O;
return e[48] !== t || e[49] !== C || e[50] !== N || e[51] !== k || e[52] !== Q || e[53] !== x || e[54] !== v ? (O = /* @__PURE__ */ R(ae, { ...t, "data-qa": k, open: Q, sx: x, children: [
v,
C,
N
] }), e[48] = t, e[49] = C, e[50] = N, e[51] = k, e[52] = Q, e[53] = x, e[54] = v, e[55] = O) : O = e[55], O;
}
function ue(a) {
return [a.isSubmitting, a.canSubmit];
}
var fe = Object.defineProperty, K = (a, e) => fe(a, "name", { value: e, configurable: !0 });
function X(a) {
return a == null;
}
K(X, "isNullOrUndefined");
function Y(a) {
return X(a) || a.length === 0;
}
K(Y, "isNullOrUndefinedOrEmpty");
function pe({
"data-qa": a,
fieldId: e,
isDisabled: n,
maxLength: r,
resetValues: i,
step: t,
sx: s,
tooltip: o
}) {
const l = Z(), c = /* @__PURE__ */ m(
ie,
{
"data-qa": `${a}-field`,
disabled: n,
id: e,
name: e,
onBlur: l.handleBlur,
onChange: (u) => {
i && i(), l.handleChange((P) => Y(u.target.value) ? void 0 : u.target.valueAsNumber);
},
onInput: (u) => {
u.target.value.length > r && (u.target.value = u.target.value.slice(0, r));
},
slotProps: {
htmlInput: {
maxLength: r,
min: 0,
max: Number("9".repeat(r)),
step: t
}
},
sx: $.merge({
[`.${J.root}`]: {
[`.${J.input}`]: {
":disabled": {
backgroundColor: "var(--color-disabled)",
borderColor: "var(--color-disabled)"
}
}
}
}, s),
type: "number",
value: l.state.value ?? ""
}
);
return o ? /* @__PURE__ */ m(le, { placement: "top", title: o, children: c }) : c;
}
const {
fieldContext: be,
formContext: ge,
useFieldContext: Z,
useFormContext: V
} = ee(), {
useAppForm: Ne,
withForm: Pe
} = te({
fieldContext: be,
formContext: ge,
fieldComponents: {
AoaFieldError: xe
},
formComponents: {
AoaFormModal: de,
AoaFormError: me,
AoaNoLabelNumberField: pe
}
});
function xe(a) {
const e = I.c(11), {
"data-qa": n
} = a, r = Z();
if (r.state.meta.isTouched && r.state.meta.errors.length) {
let i;
e[0] !== r.state.meta.errors ? (i = r.state.meta.errors.at(0), e[0] = r.state.meta.errors, e[1] = i) : i = e[1];
const t = i;
if (typeof t == "string") {
const s = n ?? "field-error";
let o;
return e[2] !== t || e[3] !== s ? (o = /* @__PURE__ */ m(j, { "data-qa": s, message: t, severity: "error" }), e[2] = t, e[3] = s, e[4] = o) : o = e[4], o;
} else if (t && typeof t == "object") {
let s;
e[5] !== t.level ? (s = ["error", "info", "success", "warning"].includes(t.level) ? t.level : "error", e[5] = t.level, e[6] = s) : s = e[6];
const o = s, l = n ?? "field-error";
let c;
return e[7] !== t.message || e[8] !== o || e[9] !== l ? (c = /* @__PURE__ */ m(j, { "data-qa": l, message: t.message, severity: o }), e[7] = t.message, e[8] = o, e[9] = l, e[10] = c) : c = e[10], c;
}
}
return null;
}
export {
xe as A,
me as a,
de as b,
pe as c,
be as d,
ge as e,
Z as f,
V as g,
Ne as u,
Pe as w
};
//# sourceMappingURL=FieldError.Bo2QpEMu.js.map