@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
145 lines (144 loc) • 5.04 kB
JavaScript
import { jsxs as i, Fragment as d, jsx as e } from "react/jsx-runtime";
import { useFormikContext as k } from "formik";
import { camelCase as v } from "lodash";
import { useState as F } from "react";
import { useIntl as O, FormattedMessage as p } from "react-intl";
import "../../formio/tabs.js";
import "clsx";
import $ from "../../formio/component-label.js";
/* empty css */
import "@floating-ui/react";
import { TextFieldMultiple as h } from "../../formio/textfield.js";
import "../../../context.js";
/* empty css */
import "react-select";
import "dompurify";
import { TextArea as S } from "../../formio/textarea.js";
import "../../formio/datagrid.js";
/* empty css */
const Y = ({
name: c,
index: t,
arrayHelpers: r,
withOptionDescription: b = !1
}) => {
var f;
const a = O(), o = `${c}[${t}]`, {
getFieldProps: s,
getFieldHelpers: g
} = k(), m = ((f = s(c).value) == null ? void 0 : f.length) || 0, [M, u] = F(!1), y = (l) => {
const {
value: n
} = s(o), w = v(n.label);
if (n.value && n.value != w) return;
const D = v(l.target.value), {
setValue: N
} = g(`${o}.value`);
N(D);
}, C = s(o).value.description ?? "";
return /* @__PURE__ */ i(d, { children: [
/* @__PURE__ */ i("tr", { className: "offb-option-row", children: [
/* @__PURE__ */ e("td", { className: "offb-option-row__icons-cell", children: /* @__PURE__ */ i("div", { className: "offb-option-row__sort-icons", children: [
/* @__PURE__ */ e("button", { type: "button", "aria-label": a.formatMessage({
id: "UlVtQd",
defaultMessage: [{
type: 0,
value: "Move up"
}]
}), onClick: () => r.move(t, t - 1), disabled: t === 0, children: /* @__PURE__ */ e("i", { className: "fa fa-chevron-up" }) }),
/* @__PURE__ */ e("button", { type: "button", "aria-label": a.formatMessage({
id: "k1+ljn",
defaultMessage: [{
type: 0,
value: "Move down"
}]
}), onClick: () => r.move(t, t + 1), disabled: t === m - 1, children: /* @__PURE__ */ e("i", { className: "fa fa-chevron-down" }) })
] }) }),
/* @__PURE__ */ e("td", { children: /* @__PURE__ */ e(h, { name: `${o}.label`, "aria-label": a.formatMessage({
id: "5xNPpS",
defaultMessage: [{
type: 0,
value: "Option label"
}]
}), onChange: y }) }),
/* @__PURE__ */ e("td", { children: /* @__PURE__ */ e(h, { name: `${o}.value`, "aria-label": a.formatMessage({
id: "Kj8P8I",
defaultMessage: [{
type: 0,
value: "Option value"
}]
}) }) }),
/* @__PURE__ */ e("td", { style: {
borderBottom: "none"
}, children: /* @__PURE__ */ e(
"button",
{
type: "button",
className: "btn btn-secondary formio-button-remove-row",
disabled: m <= 1,
"aria-label": a.formatMessage({
id: "IOko1U",
defaultMessage: [{
type: 0,
value: "Remove"
}]
}),
onClick: () => r.remove(t),
children: /* @__PURE__ */ e("i", { className: "fa fa-times-circle-o" })
}
) })
] }),
b && /* @__PURE__ */ i("tr", { children: [
/* @__PURE__ */ e("th", { style: {
borderTop: "none"
} }),
/* @__PURE__ */ e("td", { colSpan: 2, children: M ? /* @__PURE__ */ i(d, { children: [
/* @__PURE__ */ e($, { label: /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(p, { id: "iOcL9h", defaultMessage: [{
type: 0,
value: "Description"
}] }) }), noColFormLabelClassname: !0, htmlId: `${o}.description`, tooltip: a.formatMessage({
id: "mWuCXv",
defaultMessage: [{
type: 0,
value: "Optionally provide additional information to explain the meaning of the option."
}]
}) }),
" ",
/* @__PURE__ */ e("a", { href: "#", onClick: (l) => {
l.preventDefault(), u(!1);
}, children: /* @__PURE__ */ e(p, { id: "YSuwK2", defaultMessage: [{
type: 0,
value: "(collapse)"
}] }) }),
/* @__PURE__ */ e(S, { name: `${o}.description` })
] }) : /* @__PURE__ */ e("a", { href: "#", onClick: (l) => {
l.preventDefault(), u(!0);
}, children: /* @__PURE__ */ e(p, { id: "zWxcfD", defaultMessage: [{
type: 5,
value: "hasDescription",
options: {
true: {
value: [{
type: 0,
value: "Edit description"
}]
},
other: {
value: [{
type: 0,
value: "Add description"
}]
}
}
}], values: {
hasDescription: !!C
} }) }) }),
/* @__PURE__ */ e("td", { style: {
borderTop: "none"
} })
] })
] });
};
export {
Y as default
};