@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
41 lines (40 loc) • 5.01 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useFormikContext } from 'formik';
import { camelCase } from 'lodash';
import { useState } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import { TextField } from '../../../components/formio';
import ComponentLabel from '../../../components/formio/component-label';
import { TextArea } from '../../../components/formio/textarea';
const OptionRow = ({ name, index, arrayHelpers, withOptionDescription = false, }) => {
var _a, _b;
const intl = useIntl();
const fieldNamePrefix = `${name}[${index}]`;
const { getFieldProps, getFieldHelpers } = useFormikContext();
const numOptions = ((_a = getFieldProps(name).value) === null || _a === void 0 ? void 0 : _a.length) || 0;
const [showDescription, setShowDescription] = useState(false);
const onLabelChange = (event) => {
const { value: option } = getFieldProps(fieldNamePrefix);
const oldDerivedValue = 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 = camelCase(event.target.value);
const { setValue } = getFieldHelpers(`${fieldNamePrefix}.value`);
setValue(derivedValue);
};
const description = (_b = getFieldProps(fieldNamePrefix).value.description) !== null && _b !== void 0 ? _b : '';
return (_jsxs(_Fragment, { children: [_jsxs("tr", Object.assign({ className: "offb-option-row" }, { children: [_jsx("td", Object.assign({ className: "offb-option-row__icons-cell" }, { children: _jsxs("div", Object.assign({ className: "offb-option-row__sort-icons" }, { children: [_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: _jsx("i", { className: "fa fa-chevron-up" }) })), _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: _jsx("i", { className: "fa fa-chevron-down" }) }))] })) })), _jsx("td", { children: _jsx(TextField, { name: `${fieldNamePrefix}.label`, "aria-label": intl.formatMessage({ id: "5xNPpS", defaultMessage: [{ type: 0, value: "Option label" }] }), onChange: onLabelChange }) }), _jsx("td", { children: _jsx(TextField, { name: `${fieldNamePrefix}.value`, "aria-label": intl.formatMessage({ id: "Kj8P8I", defaultMessage: [{ type: 0, value: "Option value" }] }) }) }), _jsx("td", Object.assign({ style: { borderBottom: 'none' } }, { children: _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: _jsx("i", { className: "fa fa-times-circle-o" }) })) }))] })), withOptionDescription && (_jsxs("tr", { children: [_jsx("th", { style: { borderTop: 'none' } }), _jsx("td", Object.assign({ colSpan: 2 }, { children: showDescription ? (_jsxs(_Fragment, { children: [_jsx(ComponentLabel, { label: _jsx(_Fragment, { children: _jsx(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", _jsx("a", Object.assign({ href: "#", onClick: e => {
e.preventDefault();
setShowDescription(false);
} }, { children: _jsx(FormattedMessage, { id: 'YSuwK2', defaultMessage: [{ type: 0, value: "(collapse)" }] }) })), _jsx(TextArea, { name: `${fieldNamePrefix}.description` })] })) : (_jsx("a", Object.assign({ href: "#", onClick: e => {
e.preventDefault();
setShowDescription(true);
} }, { children: _jsx(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,
} }) }))) })), _jsx("td", { style: { borderTop: 'none' } })] }))] }));
};
export default OptionRow;