@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
30 lines (29 loc) • 3.95 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ValuesTranslations = void 0;
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 formio_1 = require("../../../components/formio");
const i18n_1 = require("../i18n");
/**
* Manage the values/options translations for a component.
*
* This component is intended to be passed as a child component to
* `ComponentTranslations` so that all translations are managed in a single
* tab.
*/
function ValuesTranslations({ name, withOptionDescription }) {
const intl = (0, react_intl_1.useIntl)();
const { activeLanguage } = (0, react_1.useContext)(i18n_1.ComponentTranslationsContext);
const { getFieldProps } = (0, formik_1.useFormikContext)();
const { value: options = [] } = getFieldProps(name);
return (
// Same markup as ComponentTranslations<S> body
(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("tbody", { children: [(0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("th", Object.assign({ colSpan: 3, style: { textAlign: 'end' } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'kg/eh1', defaultMessage: [{ type: 0, value: "Choice/option translations" }] }) })) }), options.map(({ value, label }, index) => ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ id: `option-${index}-label`, className: "offb-table__content offb-table__content--allow-break" }, { children: label })) }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ "aria-describedby": `option-${index}-label`, className: "offb-table__content offb-table__content--allow-break" }, { children: value || '-' })) }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)(formio_1.TextField, { name: `${name}[${index}]openForms.translations.${activeLanguage}.label`, "aria-label": intl.formatMessage({ id: "wOq8Pb", defaultMessage: [{ type: 0, value: "Translation for option with value \"" }, { type: 1, value: "value" }, { type: 0, value: "\"" }] }, { value: value }) }) })] }, `option-${index}`)))] }), withOptionDescription && ((0, jsx_runtime_1.jsxs)("tbody", { children: [(0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("th", Object.assign({ colSpan: 3, style: { textAlign: 'end' } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'aqYeqv', defaultMessage: [{ type: 0, value: "Description translations" }] }) })) }), options.map(({ description, value }, index) => ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ id: `option-${index}-label` }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'NdaqDN', defaultMessage: [{ type: 0, value: "Option description (" }, { type: 8, value: "option", children: [] }, { type: 0, value: ")" }], values: {
option: () => ((0, jsx_runtime_1.jsx)("code", Object.assign({ className: "offb-table__content offb-table__content--allow-break" }, { children: value || '-' }))),
} }) })) }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ "aria-describedby": `option-${index}-label`, className: "offb-table__content offb-table__content--allow-break" }, { children: description || '-' })) }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)(formio_1.TextArea, { name: `${name}[${index}]openForms.translations.${activeLanguage}.description`, "aria-labelledby": `option-${index}-label` }) })] }, `option-description-${index}`)))] }))] }));
}
exports.ValuesTranslations = ValuesTranslations;
exports.default = ValuesTranslations;