@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
77 lines (76 loc) • 7.23 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const formik_1 = require("formik");
const react_1 = require("react");
const react_intl_1 = require("react-intl");
const builder_1 = require("../../components/builder");
const formio_1 = require("../../components/formio");
const context_1 = require("../../context");
/**
* Form to configure a Formio 'columns' type component.
*/
const EditForm = () => {
const { uniquifyKey } = (0, react_1.useContext)(context_1.BuilderContext);
const isKeyManuallySetRef = (0, react_1.useRef)(false);
const { values } = (0, formik_1.useFormikContext)();
const generatedKey = uniquifyKey(values.key);
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "card-body" }, { children: [(0, jsx_runtime_1.jsx)(builder_1.Key, { isManuallySetRef: isKeyManuallySetRef, generatedValue: generatedKey }), (0, jsx_runtime_1.jsx)(builder_1.Hidden, {}), (0, jsx_runtime_1.jsx)(builder_1.ClearOnHide, {}), (0, jsx_runtime_1.jsx)(Columns, {})] })) })));
};
EditForm.defaultValues = {
key: '',
hidden: false,
clearOnHide: true,
columns: [
{
size: 6,
sizeMobile: 4,
components: [],
},
{
size: 6,
sizeMobile: 4,
components: [],
},
],
};
const ColumnRow = ({ index, arrayHelpers }) => {
var _a;
const intl = (0, react_intl_1.useIntl)();
const { getFieldProps, setFieldError } = (0, formik_1.useFormikContext)();
const numCols = ((_a = getFieldProps('columns').value) === null || _a === void 0 ? void 0 : _a.length) || 0;
const prefix = `columns.${index}`;
const { value: column } = getFieldProps(prefix);
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("td", Object.assign({ style: { verticalAlign: 'middle' } }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ style: { display: 'flex', gap: '1em' } }, { children: [(0, jsx_runtime_1.jsx)(formik_1.Field, { as: "input", type: "range", name: `${prefix}.size`, className: "form-control-range", min: 1, max: 12, "aria-label": intl.formatMessage({ id: "yrz/oC", defaultMessage: [{ type: 0, value: "Column size, value between 1 and 12." }] }) }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ style: { flexShrink: '0' } }, { children: [column.size, " / 12"] }))] })) })), (0, jsx_runtime_1.jsx)("td", Object.assign({ style: { verticalAlign: 'middle' } }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ style: { display: 'flex', gap: '1em' } }, { children: [(0, jsx_runtime_1.jsx)(formik_1.Field, { as: "input", type: "range", name: `${prefix}.sizeMobile`, className: "form-control-range", min: 1, max: 4, "aria-label": intl.formatMessage({ id: "pT5jx/", defaultMessage: [{ type: 0, value: "Column size on mobile, value between 1 and 4." }] }) }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ style: { flexShrink: '0' } }, { children: [column.sizeMobile, " / 4"] }))] })) })), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("button", Object.assign({ type: "button", className: "btn btn-secondary formio-button-remove-row",
// TODO: in new design -> implement this in a proper accessible way
disabled: numCols <= 1, "aria-label": intl.formatMessage({ id: "Xj1uvL", defaultMessage: [{ type: 0, value: "Remove" }] }), onClick: () => {
arrayHelpers.remove(index);
// Reset possible array-level validation error, to work around the mangled
// validation errors. This effectively masks the problem described in
// https://github.com/jaredpalmer/formik/issues/3352, it does not *solve*
// it. A fresh submit attempt will re-run validation.
setFieldError('columns', undefined);
} }, { children: (0, jsx_runtime_1.jsx)("i", { className: "fa fa-times-circle-o" }) })) })] }));
};
const Columns = () => {
const intl = (0, react_intl_1.useIntl)();
const { getFieldProps, validateField } = (0, formik_1.useFormikContext)();
const { value: columns = [] } = getFieldProps('columns');
const [mustValidate, setMustValidate] = (0, react_1.useState)(false);
const tooltip = intl.formatMessage({ id: "GjumK9", defaultMessage: [{ type: 0, value: "Specify the size of each column. The sum of all the widths should be 100%." }] });
(0, react_1.useEffect)(() => {
if (!mustValidate)
return;
validateField('columns');
setMustValidate(false);
}, [mustValidate, validateField]);
return ((0, jsx_runtime_1.jsx)(formio_1.Component, Object.assign({ type: "datagrid", field: "columns", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'Fn2vnC', defaultMessage: [{ type: 0, value: "Column sizes" }] }), tooltip: tooltip }, { children: (0, jsx_runtime_1.jsx)(formik_1.FieldArray, Object.assign({ name: "columns" }, { children: arrayHelpers => ((0, jsx_runtime_1.jsxs)("table", Object.assign({ className: "table table-bordered" }, { children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", Object.assign({ className: "field-required" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'nSRkSW', defaultMessage: [{ type: 0, value: "Size" }] }) })), (0, jsx_runtime_1.jsx)("th", Object.assign({ className: "field-required" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'KMbfsU', defaultMessage: [{ type: 0, value: "Size (mobile)" }] }) })), (0, jsx_runtime_1.jsx)("th", { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "sr-only" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'BR10QN', defaultMessage: [{ type: 0, value: "Add/remove" }] }) })) })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: columns.map((_, index) => ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)(ColumnRow, { index: index, arrayHelpers: arrayHelpers }) }, index))) }), (0, jsx_runtime_1.jsx)("tfoot", { children: (0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", Object.assign({ colSpan: 3 }, { children: (0, jsx_runtime_1.jsxs)("button", Object.assign({ type: "button", className: "btn btn-primary formio-button-add-row", onClick: () => {
arrayHelpers.push({
size: 6,
sizeMobile: 4,
components: [],
});
setMustValidate(true);
} }, { children: [(0, jsx_runtime_1.jsx)("i", { className: "fa fa-plus", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'ee4oWr', defaultMessage: [{ type: 0, value: "Add column" }] })] })) })) }) })] }))) })) })));
};
exports.default = EditForm;