@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
46 lines (45 loc) • 5.89 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const formik_1 = require("formik");
const lodash_1 = require("lodash");
const react_1 = require("react");
const react_intl_1 = require("react-intl");
const formio_1 = require("../../../components/formio");
const component_label_1 = __importDefault(require("../../../components/formio/component-label"));
const textarea_1 = require("../../../components/formio/textarea");
const OptionRow = ({ name, index, arrayHelpers, withOptionDescription = false, }) => {
var _a, _b;
const intl = (0, react_intl_1.useIntl)();
const fieldNamePrefix = `${name}[${index}]`;
const { getFieldProps, getFieldHelpers } = (0, formik_1.useFormikContext)();
const numOptions = ((_a = getFieldProps(name).value) === null || _a === void 0 ? void 0 : _a.length) || 0;
const [showDescription, setShowDescription] = (0, react_1.useState)(false);
const onLabelChange = (event) => {
const { value: option } = getFieldProps(fieldNamePrefix);
const oldDerivedValue = (0, lodash_1.camelCase)(option.label);
// do nothing if an option value is set and the value is different from the
// label-derived value.
if (option.value && option.value != oldDerivedValue)
return;
const derivedValue = (0, lodash_1.camelCase)(event.target.value);
const { setValue } = getFieldHelpers(`${fieldNamePrefix}.value`);
setValue(derivedValue);
};
const description = (_b = getFieldProps(fieldNamePrefix).value.description) !== null && _b !== void 0 ? _b : '';
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("tr", Object.assign({ className: "offb-option-row" }, { children: [(0, jsx_runtime_1.jsx)("td", Object.assign({ className: "offb-option-row__icons-cell" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "offb-option-row__sort-icons" }, { children: [(0, jsx_runtime_1.jsx)("button", Object.assign({ type: "button", "aria-label": intl.formatMessage({ id: "UlVtQd", defaultMessage: [{ type: 0, value: "Move up" }] }), onClick: () => arrayHelpers.move(index, index - 1), disabled: index === 0 }, { children: (0, jsx_runtime_1.jsx)("i", { className: "fa fa-chevron-up" }) })), (0, jsx_runtime_1.jsx)("button", Object.assign({ type: "button", "aria-label": intl.formatMessage({ id: "k1+ljn", defaultMessage: [{ type: 0, value: "Move down" }] }), onClick: () => arrayHelpers.move(index, index + 1), disabled: index === numOptions - 1 }, { children: (0, jsx_runtime_1.jsx)("i", { className: "fa fa-chevron-down" }) }))] })) })), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)(formio_1.TextField, { name: `${fieldNamePrefix}.label`, "aria-label": intl.formatMessage({ id: "5xNPpS", defaultMessage: [{ type: 0, value: "Option label" }] }), onChange: onLabelChange }) }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)(formio_1.TextField, { name: `${fieldNamePrefix}.value`, "aria-label": intl.formatMessage({ id: "Kj8P8I", defaultMessage: [{ type: 0, value: "Option value" }] }) }) }), (0, jsx_runtime_1.jsx)("td", Object.assign({ style: { borderBottom: 'none' } }, { 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: numOptions <= 1, "aria-label": intl.formatMessage({ id: "IOko1U", defaultMessage: [{ type: 0, value: "Remove" }] }), onClick: () => arrayHelpers.remove(index) }, { children: (0, jsx_runtime_1.jsx)("i", { className: "fa fa-times-circle-o" }) })) }))] })), withOptionDescription && ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { style: { borderTop: 'none' } }), (0, jsx_runtime_1.jsx)("td", Object.assign({ colSpan: 2 }, { children: showDescription ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(component_label_1.default, { label: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'iOcL9h', defaultMessage: [{ type: 0, value: "Description" }] }) }), noColFormLabelClassname: true, htmlId: `${fieldNamePrefix}.description`, tooltip: intl.formatMessage({ id: "mWuCXv", defaultMessage: [{ type: 0, value: "Optionally provide additional information to explain the meaning of the option." }] }) }), "\u00A0", (0, jsx_runtime_1.jsx)("a", Object.assign({ href: "#", onClick: e => {
e.preventDefault();
setShowDescription(false);
} }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'YSuwK2', defaultMessage: [{ type: 0, value: "(collapse)" }] }) })), (0, jsx_runtime_1.jsx)(textarea_1.TextArea, { name: `${fieldNamePrefix}.description` })] })) : ((0, jsx_runtime_1.jsx)("a", Object.assign({ href: "#", onClick: e => {
e.preventDefault();
setShowDescription(true);
} }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'zWxcfD', defaultMessage: [{ type: 5, value: "hasDescription", options: { true: { value: [{ type: 0, value: "Edit description" }] }, other: { value: [{ type: 0, value: "Add description" }] } } }], values: {
hasDescription: !!description,
} }) }))) })), (0, jsx_runtime_1.jsx)("td", { style: { borderTop: 'none' } })] }))] }));
};
exports.default = OptionRow;