@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
239 lines (238 loc) • 8.24 kB
JavaScript
import { jsx as e, jsxs as t, Fragment as y } from "react/jsx-runtime";
import { useFormikContext as c, FieldArray as b, Field as f } from "formik";
import { useContext as g, useRef as v, useState as M, useEffect as z } from "react";
import { useIntl as h, FormattedMessage as s } from "react-intl";
import "../../components/formio/tabs.js";
import C from "../../components/formio/component.js";
import "@floating-ui/react";
import "clsx";
import { BuilderContext as N } from "../../context.js";
import "@formio/vanilla-text-mask";
import "formiojs";
/* empty css */
import "lodash";
/* empty css */
import "react-select";
import "dompurify";
import "../../components/formio/datagrid.js";
import "../../components/builder/messages.js";
import x from "../../components/builder/key.js";
import F from "../../components/builder/hidden.js";
import S from "../../components/builder/clear-on-hide.js";
import "@ckeditor/ckeditor5-react";
import "../../components/CKEditor.js";
/* empty css */
import "react-use";
import "../addressNL/edit.js";
import "../validation.js";
/* empty css */
import "../bsn/edit.js";
import "../checkbox/edit.js";
import "../children/edit.js";
import "zod";
/* empty css */
import "../content/edit.js";
import "../cosignV1/edit.js";
import "../cosignV2/edit.js";
import "../cosignV2/edit-validation.js";
import "../currency/edit.js";
import "../currency/edit-validation.js";
import "../customerProfile/edit.js";
import "../customerProfile/edit-validation.js";
import "../customerProfile/preview.js";
import "../date/edit.js";
import "../date/edit-validation.js";
import "../datetime/edit.js";
import "../datetime/edit-validation.js";
import "../editgrid/edit.js";
/* empty css */
import "../email/edit.js";
import "../email/edit-validation.js";
/* empty css */
import "../fieldset/edit.js";
import "../file/edit.js";
import "../file/edit-validation.js";
import "../iban/edit.js";
import "../iban/edit-validation.js";
import "../licenseplate/edit.js";
import "../licenseplate/edit-validation.js";
import "proj4leaflet";
import "../map/edit.js";
import "@open-formulieren/leaflet-tools/lib/tiles.js";
import "@open-formulieren/leaflet-tools";
import "react-leaflet";
import "react-leaflet-draw";
/* empty css */
import "../npFamilyMembers/edit.js";
import "../number/edit.js";
import "../number/edit-validation.js";
import "../partners/edit.js";
import "../phonenumber/edit.js";
import "../postcode/edit.js";
import "../postcode/edit-validation.js";
import "../radio/edit.js";
import "../select/edit.js";
import "../selectboxes/edit.js";
import "../signature/edit.js";
import "react-signature-canvas";
import "../softRequiredErrors/edit.js";
import "../textarea/edit.js";
import "../textarea/edit-validation.js";
import "../textfield/edit.js";
import "../time/edit.js";
import "../../components/builder/prefill/identifierRole.js";
import "../../components/builder/i18n.js";
import "../../components/builder/tabs.js";
import "@open-formulieren/monaco-json-editor";
import "../../components/builder/values/values-src.js";
/* empty css */
const k = () => {
const {
uniquifyKey: o
} = g(N), m = v(!1), {
values: i
} = c(), r = o(i.key);
return /* @__PURE__ */ e("div", { className: "card", children: /* @__PURE__ */ t("div", { className: "card-body", children: [
/* @__PURE__ */ e(x, { isManuallySetRef: m, generatedValue: r }),
/* @__PURE__ */ e(F, {}),
/* @__PURE__ */ e(S, {}),
/* @__PURE__ */ e(w, {})
] }) });
};
k.defaultValues = {
key: "",
clearOnHide: !0,
columns: [{
size: 6,
sizeMobile: 4,
components: []
}, {
size: 6,
sizeMobile: 4,
components: []
}]
};
const R = ({
index: o,
arrayHelpers: m
}) => {
var d;
const i = h(), {
getFieldProps: r,
setFieldError: n
} = c(), p = ((d = r("columns").value) == null ? void 0 : d.length) || 0, l = `columns.${o}`, {
value: a
} = r(l);
return /* @__PURE__ */ t(y, { children: [
/* @__PURE__ */ e("td", { style: {
verticalAlign: "middle"
}, children: /* @__PURE__ */ t("div", { style: {
display: "flex",
gap: "1em"
}, children: [
/* @__PURE__ */ e(f, { as: "input", type: "range", name: `${l}.size`, className: "form-control-range", min: 1, max: 12, "aria-label": i.formatMessage({
id: "yrz/oC",
defaultMessage: [{
type: 0,
value: "Column size, value between 1 and 12."
}]
}) }),
/* @__PURE__ */ t("span", { style: {
flexShrink: "0"
}, children: [
a.size,
" / 12"
] })
] }) }),
/* @__PURE__ */ e("td", { style: {
verticalAlign: "middle"
}, children: /* @__PURE__ */ t("div", { style: {
display: "flex",
gap: "1em"
}, children: [
/* @__PURE__ */ e(f, { as: "input", type: "range", name: `${l}.sizeMobile`, className: "form-control-range", min: 1, max: 4, "aria-label": i.formatMessage({
id: "pT5jx/",
defaultMessage: [{
type: 0,
value: "Column size on mobile, value between 1 and 4."
}]
}) }),
/* @__PURE__ */ t("span", { style: {
flexShrink: "0"
}, children: [
a.sizeMobile,
" / 4"
] })
] }) }),
/* @__PURE__ */ e("td", { children: /* @__PURE__ */ e(
"button",
{
type: "button",
className: "btn btn-secondary formio-button-remove-row",
disabled: p <= 1,
"aria-label": i.formatMessage({
id: "Xj1uvL",
defaultMessage: [{
type: 0,
value: "Remove"
}]
}),
onClick: () => {
m.remove(o), n("columns", void 0);
},
children: /* @__PURE__ */ e("i", { className: "fa fa-times-circle-o" })
}
) })
] });
}, w = () => {
const o = h(), {
getFieldProps: m,
validateField: i
} = c(), {
value: r = []
} = m("columns"), [n, p] = M(!1), l = o.formatMessage({
id: "GjumK9",
defaultMessage: [{
type: 0,
value: "Specify the size of each column. The sum of all the widths should be 100%."
}]
});
return z(() => {
n && (i("columns"), p(!1));
}, [n, i]), /* @__PURE__ */ e(C, { type: "datagrid", field: "columns", label: /* @__PURE__ */ e(s, { id: "Fn2vnC", defaultMessage: [{
type: 0,
value: "Column sizes"
}] }), tooltip: l, children: /* @__PURE__ */ e(b, { name: "columns", children: (a) => /* @__PURE__ */ t("table", { className: "table table-bordered", children: [
/* @__PURE__ */ e("thead", { children: /* @__PURE__ */ t("tr", { children: [
/* @__PURE__ */ e("th", { className: "field-required", children: /* @__PURE__ */ e(s, { id: "nSRkSW", defaultMessage: [{
type: 0,
value: "Size"
}] }) }),
/* @__PURE__ */ e("th", { className: "field-required", children: /* @__PURE__ */ e(s, { id: "KMbfsU", defaultMessage: [{
type: 0,
value: "Size (mobile)"
}] }) }),
/* @__PURE__ */ e("th", { children: /* @__PURE__ */ e("span", { className: "sr-only", children: /* @__PURE__ */ e(s, { id: "BR10QN", defaultMessage: [{
type: 0,
value: "Add/remove"
}] }) }) })
] }) }),
/* @__PURE__ */ e("tbody", { children: r.map((d, u) => /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e(R, { index: u, arrayHelpers: a }) }, u)) }),
/* @__PURE__ */ e("tfoot", { children: /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e("td", { colSpan: 3, children: /* @__PURE__ */ t("button", { type: "button", className: "btn btn-primary formio-button-add-row", onClick: () => {
a.push({
size: 6,
sizeMobile: 4,
components: []
}), p(!0);
}, children: [
/* @__PURE__ */ e("i", { className: "fa fa-plus", "aria-hidden": "true" }),
/* @__PURE__ */ e(s, { id: "ee4oWr", defaultMessage: [{
type: 0,
value: "Add column"
}] })
] }) }) }) })
] }) }) });
};
export {
k as default
};