scrivito-pisasales-questionnaire-builder
Version:
Scrivito widgets for building PisaSales questionnaires
287 lines (286 loc) • 8.91 kB
JavaScript
import { jsx as t, jsxs as N, Fragment as G } from "react/jsx-runtime";
import * as W from "scrivito";
import { ContentTag as _, isInPlaceEditingActive as B } from "scrivito";
import { M as $, H as U, a as j, b as Y, u as K } from "./useValidationField-BrRv6UCn.js";
import { H as X, O as P, T as g, c as x, E as O, S as k, M as z, D as J, Q as Z, a as H, t as V, u as w, v as ee, w as te, I as ne, A as se, V as ae, j as y, P as ie, b as oe } from "./scrivitoConfig-WST4rsmc.js";
import * as re from "react";
import { useState as ce, useCallback as le, useMemo as de, useEffect as L } from "react";
import { u as ue } from "./useDynamicBackground-BE1lGpvw.js";
import { i as fe } from "./isSelectAlignmentEnabled-CKryiF0r.js";
import { C as me } from "./ConditionContext-e5qF-3Gv.js";
import { u as pe, Q as he } from "./FormContext-CyyAThXO.js";
const Q = ({
value: e,
externalId: r,
identifier: i
}) => /* @__PURE__ */ t("option", { value: e, id: r, "data-identifier": i, children: e }), ge = ({ widget: e, value: r, title: i, externalId: c, required: u, isInvalid: l, onChange: n }) => {
const f = e.get(X), d = e.get(P);
return /* @__PURE__ */ N("div", { className: "dropdown-wrapper", children: [
i && /* @__PURE__ */ N("label", { htmlFor: c, className: "dropdown-label", children: [
/* @__PURE__ */ t(
_,
{
attribute: g,
content: e,
tag: "span"
}
),
u && /* @__PURE__ */ t($, {}),
f && /* @__PURE__ */ t(U, { widget: e })
] }),
/* @__PURE__ */ N(
"select",
{
className: `dropdown-select form-select ${l ? "is-invalid" : ""}`,
name: c,
id: c,
onChange: (s) => {
const m = s.target.options[s.target.selectedIndex], h = m.value, T = m.dataset.identifier || "";
n([m.id], [h], [T]);
},
value: r,
children: [
/* @__PURE__ */ t(
Q,
{
value: "",
externalId: "empty-option",
identifier: ""
},
"empty-option"
),
d.map((s) => /* @__PURE__ */ t(
Q,
{
value: s.get(g),
externalId: s.get(O),
identifier: s.get(x)
},
s.id()
))
]
}
)
] });
}, Ie = W.connect(
({ type: e, options: r, values: i, required: c, isInvalid: u, externalId: l, inlineView: n, onChange: f }) => {
const d = re.useRef(null), I = () => {
if (!d.current)
return;
const s = d.current.getElementsByTagName("input"), m = Array.from(s), h = [], T = [], C = [];
m.forEach((E) => {
E.checked && (h.push(E.value), T.push(E.dataset.identifier || ""), C.push(E.id));
}), f(C, h, T);
};
return /* @__PURE__ */ t("div", { ref: d, className: `${n ? "inline" : "row"}`, children: r.map((s, m) => /* @__PURE__ */ t(
Ce,
{
type: e,
externalQuestionId: l,
value: s.get(g),
identifier: s.get(x),
externalId: s.get(O),
isInvalid: u,
onChange: I,
isChecked: i.includes(s.get(g))
},
m
)) });
}
), Ce = ({
value: e,
identifier: r,
type: i,
externalQuestionId: c,
externalId: u,
isInvalid: l,
onChange: n,
isChecked: f
}) => /* @__PURE__ */ N("label", { className: `select-label ${i}`, children: [
/* @__PURE__ */ t(
"input",
{
className: `form-check-input ${l ? "is-invalid" : ""}`,
name: c,
id: u,
type: i == k ? "radio" : "checkbox",
value: e,
checked: f,
onChange: n,
"data-identifier": r,
"data-group": i == k ? null : c
}
),
/* @__PURE__ */ t("span", { children: e })
] }), Ee = ({
parentRef: e,
text: r,
onReset: i
}) => /* @__PURE__ */ t("div", { className: "text-end fade-in", children: /* @__PURE__ */ t("div", { className: "reset-label", onClick: () => {
if (e.current) {
const u = e.current.getElementsByTagName("input");
Array.from(u).forEach((n) => {
n.type === "radio" && (n.checked = !1);
}), i();
}
}, children: /* @__PURE__ */ t("span", { children: r }) }) }), Te = (e) => {
const r = e.get(O), i = e.get(z), c = e.get(g), u = e.get(X), l = e.get(J), n = e.get(P), f = e.get(Z), d = e.get(H) || V, I = d === oe, s = e.get(w), m = e.get(ee), h = e.get(te) || "Clear selection", T = e.get(ne), C = fe(e) && e.get(se) || "left", E = e.get(ae) || "Please select an item", [D, R] = ce([]), b = ue(".header-info"), A = j(r, i);
Y(e);
const v = le(() => {
if (y(l))
return { values: [], identifiers: [] };
if (I) {
const a = n.filter((o) => {
const p = o.get(x);
return p && l.includes(p);
});
return {
values: a.map((o) => o.get(g)),
identifiers: a.map((o) => o.get(x))
};
} else {
const a = n.find((o) => {
const p = o.get(x);
return !y(p) && l.includes(p);
});
if (a)
return {
values: [a.get(g)],
identifiers: [a.get(x)]
};
}
return { values: [], identifiers: [] };
}, [l, n, I]), M = de(() => v(), [v]), { values: S, handleChange: q } = K(f, M.values, M.identifiers);
L(() => {
B() && n.forEach((a, o) => {
if (!a.get(H)) {
const p = d === V ? "dropdown" : I ? "checkbox" : "radio";
a.update({ type: p });
}
a.get(ie) !== (o + 1) * 10 && a.update({ position: (o + 1) * 10 });
});
}, [n]), L(() => {
B() && n.forEach((a) => a.update({ isCondition: s }));
}, [s]), L(() => {
if (s) {
const a = [];
if (I)
n.forEach((o) => {
S.includes(o.get(g)) && a.push(o.get(O));
});
else {
const o = n.find(
(p) => S.includes(p.get(g))
);
o && a.push(o.get(O));
}
R(a);
}
}, [S]);
const F = (a, o, p) => {
R(a), A == null || A.setIsLocallyValid(!y(o[0])), q(o, p);
};
return {
externalId: r,
required: i,
text: c,
helpText: u,
options: n,
type: d,
useAsConditionals: s,
values: S,
titleBgColor: b,
clearSelectionButtonText: h,
inlineView: T,
alignment: C,
validationText: E,
validator: A,
onChangeSelect: F,
getConditionData: (a) => ({ isActive: D.includes(a) }),
showReset: () => m && !y(S) && !i && d == k,
onReset: () => {
F([], []);
}
};
}, Be = ({ widget: e }) => {
const {
externalId: r,
required: i,
text: c,
helpText: u,
options: l,
type: n,
useAsConditionals: f,
values: d,
titleBgColor: I,
clearSelectionButtonText: s,
inlineView: m,
alignment: h,
validationText: T,
validator: C,
onChangeSelect: E,
getConditionData: D,
showReset: R,
onReset: b
} = Te(e);
if (!pe() || !C)
return /* @__PURE__ */ t(he, { status: "noFormContext" });
const v = i && !C.isLocallyValid;
return /* @__PURE__ */ t(me, { value: { getConditionData: D }, children: /* @__PURE__ */ N(G, { children: [
f && B() && /* @__PURE__ */ t("span", { className: "header-info", style: { backgroundColor: I || "transparent" }, children: "Conditional Header" }),
/* @__PURE__ */ N(
"div",
{
ref: C.ref,
className: `select-container mb-3 ${f ? "conditional-header-border" : ""}`,
children: [
n == V ? /* @__PURE__ */ t("div", { className: h, children: /* @__PURE__ */ t(
ge,
{
widget: e,
externalId: r,
required: i,
isInvalid: v,
onChange: E,
title: c,
value: d[0]
}
) }) : /* @__PURE__ */ N("div", { className: h, children: [
c && /* @__PURE__ */ N("div", { className: "select-title", children: [
/* @__PURE__ */ t(_, { attribute: g, content: e, tag: "span" }),
i && /* @__PURE__ */ t($, {}),
u && /* @__PURE__ */ t(U, { widget: e })
] }),
/* @__PURE__ */ t(
Ie,
{
type: n,
options: l,
required: i,
isInvalid: v,
externalId: r,
values: d,
inlineView: m,
onChange: E
}
),
R() && /* @__PURE__ */ t(
Ee,
{
onReset: b,
text: s,
parentRef: C.ref
}
)
] }),
v && /* @__PURE__ */ t("div", { className: `invalid-feedback ${h}`, children: T })
]
}
),
f && /* @__PURE__ */ t(_, { content: e, attribute: P })
] }) });
};
export {
Be as default
};
//# sourceMappingURL=SelectQuestionWidgetContent-B4FA15ii.js.map