@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
216 lines (215 loc) • 7.47 kB
JavaScript
import { jsx as e, jsxs as t, Fragment as h } from "react/jsx-runtime";
import { useFormikContext as p, FieldArray as y, Field as u } from "formik";
import { useContext as b, useRef as g } from "react";
import { useIntl as f, FormattedMessage as a } from "react-intl";
import "../../components/formio/tabs.js";
import v from "../../components/formio/component.js";
import "@floating-ui/react";
import "../../components/formio/textfield.js";
import "clsx";
import "../../components/formio/datefield.js";
import "../../components/formio/datetimefield.js";
import "../../components/formio/timefield.js";
/* empty css */
import "react-select";
import "dompurify";
import "../../components/formio/textarea.js";
import "../../components/formio/datagrid.js";
/* empty css */
import "../../components/builder/messages.js";
import { BuilderContext as M } from "../../context.js";
import z from "../../components/builder/key.js";
import C from "../../components/builder/hidden.js";
import N from "../../components/builder/clear-on-hide.js";
import "../addressNL/index.js";
import "../bsn/index.js";
import "../checkbox/index.js";
import "../children/index.js";
import "./index.js";
import "../content/index.js";
import "../cosignV1/index.js";
import "../cosignV2/index.js";
import "../currency/index.js";
import "../customerProfile/index.js";
import "../date/index.js";
import "../datetime/index.js";
import "../editgrid/index.js";
import "../email/index.js";
import "../fieldset/index.js";
import "../file/index.js";
import "../iban/index.js";
import "../licenseplate/index.js";
import "../map/index.js";
import "../npFamilyMembers/index.js";
import "../number/index.js";
import "../partners/index.js";
import "../phonenumber/index.js";
import "../postcode/index.js";
import "../radio/index.js";
import "../select/index.js";
import "../selectboxes/index.js";
import "../signature/index.js";
import "../softRequiredErrors/index.js";
import "../textarea/index.js";
import "../textfield/index.js";
import "../time/index.js";
import "@ckeditor/ckeditor5-react";
import "../../components/CKEditor.js";
/* empty css */
import "react-use";
import "lodash";
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 */
/* empty css */
const x = () => {
const {
uniquifyKey: o
} = b(M), l = g(!1), {
values: i
} = p(), r = o(i.key);
return /* @__PURE__ */ e("div", { className: "card", children: /* @__PURE__ */ t("div", { className: "card-body", children: [
/* @__PURE__ */ e(z, { isManuallySetRef: l, generatedValue: r }),
/* @__PURE__ */ e(C, {}),
/* @__PURE__ */ e(N, {}),
/* @__PURE__ */ e(S, {})
] }) });
};
x.defaultValues = {
key: "",
clearOnHide: !0,
columns: [{
size: 6,
sizeMobile: 4,
components: []
}, {
size: 6,
sizeMobile: 4,
components: []
}]
};
const F = ({
index: o,
arrayHelpers: l
}) => {
var c;
const i = f(), {
getFieldProps: r,
setFieldError: d
} = p(), s = ((c = r("columns").value) == null ? void 0 : c.length) || 0, n = `columns.${o}`, {
value: m
} = r(n);
return /* @__PURE__ */ t(h, { children: [
/* @__PURE__ */ e("td", { style: {
verticalAlign: "middle"
}, children: /* @__PURE__ */ t("div", { style: {
display: "flex",
gap: "1em"
}, children: [
/* @__PURE__ */ e(u, { as: "input", type: "range", name: `${n}.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: [
m.size,
" / 12"
] })
] }) }),
/* @__PURE__ */ e("td", { style: {
verticalAlign: "middle"
}, children: /* @__PURE__ */ t("div", { style: {
display: "flex",
gap: "1em"
}, children: [
/* @__PURE__ */ e(u, { as: "input", type: "range", name: `${n}.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: [
m.sizeMobile,
" / 4"
] })
] }) }),
/* @__PURE__ */ e("td", { children: /* @__PURE__ */ e(
"button",
{
type: "button",
className: "btn btn-secondary formio-button-remove-row",
disabled: s <= 1,
"aria-label": i.formatMessage({
id: "Xj1uvL",
defaultMessage: [{
type: 0,
value: "Remove"
}]
}),
onClick: () => {
l.remove(o), d("columns", void 0);
},
children: /* @__PURE__ */ e("i", { className: "fa fa-times-circle-o" })
}
) })
] });
}, S = () => {
const o = f(), {
getFieldProps: l,
validateField: i
} = p(), {
value: r = []
} = l("columns"), d = o.formatMessage({
id: "GjumK9",
defaultMessage: [{
type: 0,
value: "Specify the size of each column. The sum of all the widths should be 100%."
}]
});
return /* @__PURE__ */ e(v, { type: "datagrid", field: "columns", label: /* @__PURE__ */ e(a, { id: "Fn2vnC", defaultMessage: [{
type: 0,
value: "Column sizes"
}] }), tooltip: d, children: /* @__PURE__ */ e(y, { name: "columns", children: (s) => /* @__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(a, { id: "nSRkSW", defaultMessage: [{
type: 0,
value: "Size"
}] }) }),
/* @__PURE__ */ e("th", { className: "field-required", children: /* @__PURE__ */ e(a, { id: "KMbfsU", defaultMessage: [{
type: 0,
value: "Size (mobile)"
}] }) }),
/* @__PURE__ */ e("th", { children: /* @__PURE__ */ e("span", { className: "sr-only", children: /* @__PURE__ */ e(a, { id: "BR10QN", defaultMessage: [{
type: 0,
value: "Add/remove"
}] }) }) })
] }) }),
/* @__PURE__ */ e("tbody", { children: r.map((n, m) => /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e(F, { index: m, arrayHelpers: s }) }, m)) }),
/* @__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: () => {
s.push({
size: 6,
sizeMobile: 4,
components: []
}), window.queueMicrotask(() => i("columns"));
}, children: [
/* @__PURE__ */ e("i", { className: "fa fa-plus", "aria-hidden": "true" }),
/* @__PURE__ */ e(a, { id: "ee4oWr", defaultMessage: [{
type: 0,
value: "Add column"
}] })
] }) }) }) })
] }) }) });
};
export {
x as default
};