@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
34 lines (33 loc) • 3.14 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { FieldArray, useFormikContext } from 'formik';
import { FormattedMessage, useIntl } from 'react-intl';
import { Component } from '../../../components/formio';
import OptionRow from './option-row';
/**
* Manage a set of option values/labels for a component.
*
* Formio typically allows you to specify manual options/values for preset options,
* like the dropdown for a select, the values + labels for a radio choice or multiple
* checkboxes.
*
* This component is a generic component, you must use it by passing the relevant
* concrete schema for `name` prop autocomplete and type checking, e.g.:
*
*
* <ValuesTable<SelectComponentSchema> name="data.values" />
*
* Translations for every option label are (to be) managed in a dedicated translations
* component.
*/
function ValuesTable({ name, withOptionDescription }) {
const intl = useIntl();
const { getFieldProps } = useFormikContext();
const { value: options = [] } = getFieldProps(name);
const tooltip = intl.formatMessage({ id: "DJWATl", defaultMessage: [{ type: 0, value: "The values that can be picked for this field. Values are the text that is submitted with the form data. Labels are the text next to radio buttons, checkboxes and options in dropdowns." }] });
return (_jsx(Component, Object.assign({ type: "datagrid", label: _jsx(FormattedMessage, { id: 'j2vQH3', defaultMessage: [{ type: 0, value: "Values" }] }), tooltip: tooltip }, { children: _jsx(FieldArray, Object.assign({ name: name }, { children: arrayHelpers => (_jsxs("table", Object.assign({ className: "table table-bordered" }, { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", {}), _jsx("th", Object.assign({ className: "field-required" }, { children: _jsx(FormattedMessage, { id: 'FOlQaP', defaultMessage: [{ type: 0, value: "Label" }] }) })), _jsx("th", Object.assign({ className: "field-required" }, { children: _jsx(FormattedMessage, { id: 'wRNK2B', defaultMessage: [{ type: 0, value: "Value" }] }) })), _jsx("th", { children: _jsx("span", Object.assign({ className: "sr-only" }, { children: _jsx(FormattedMessage, { id: 'RuAQwk', defaultMessage: [{ type: 0, value: "Add/remove" }] }) })) })] }) }), _jsx("tbody", { children: options.map((_, index) => (_jsx(OptionRow, { name: name, index: index, arrayHelpers: arrayHelpers, withOptionDescription: withOptionDescription }, index))) }), _jsx("tfoot", { children: _jsx("tr", { children: _jsx("td", Object.assign({ colSpan: 4 }, { children: _jsxs("button", Object.assign({ type: "button", className: "btn btn-primary formio-button-add-row", onClick: () => arrayHelpers.push({
value: '',
label: '',
openForms: { translations: {} },
}) }, { children: [_jsx("i", { className: "fa fa-plus", "aria-hidden": "true" }), _jsx(FormattedMessage, { id: 'p7g2h+', defaultMessage: [{ type: 0, value: "Add another" }] })] })) })) }) })] }))) })) })));
}
export default ValuesTable;