@open-formulieren/formio-builder/lib/esm/components/builder/values/i18n.js

An opinionated Formio webform builder for Open Forms

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useFormikContext } from 'formik';
import { useContext } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import { TextArea, TextField } from '../../../components/formio';
import { ComponentTranslationsContext } from '../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.
 */
export function ValuesTranslations({ name, withOptionDescription }) {
    const intl = useIntl();
    const { activeLanguage } = useContext(ComponentTranslationsContext);
    const { getFieldProps } = useFormikContext();
    const { value: options = [] } = getFieldProps(name);
    return (
    // Same markup as ComponentTranslations<S> body
    _jsxs(_Fragment, { children: [_jsxs("tbody", { children: [_jsx("tr", { children: _jsx("th", Object.assign({ colSpan: 3, style: { textAlign: 'end' } }, { children: _jsx(FormattedMessage, { id: 'kg/eh1', defaultMessage: [{ type: 0, value: "Choice/option translations" }] }) })) }), options.map(({ value, label }, index) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx("span", Object.assign({ id: `option-${index}-label`, className: "offb-table__content offb-table__content--allow-break" }, { children: label })) }), _jsx("td", { children: _jsx("div", Object.assign({ "aria-describedby": `option-${index}-label`, className: "offb-table__content offb-table__content--allow-break" }, { children: value || '-' })) }), _jsx("td", { children: _jsx(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 && (_jsxs("tbody", { children: [_jsx("tr", { children: _jsx("th", Object.assign({ colSpan: 3, style: { textAlign: 'end' } }, { children: _jsx(FormattedMessage, { id: 'aqYeqv', defaultMessage: [{ type: 0, value: "Description translations" }] }) })) }), options.map(({ description, value }, index) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx("span", Object.assign({ id: `option-${index}-label` }, { children: _jsx(FormattedMessage, { id: 'NdaqDN', defaultMessage: [{ type: 0, value: "Option description (" }, { type: 8, value: "option", children: [] }, { type: 0, value: ")" }], values: {
                                            option: () => (_jsx("code", Object.assign({ className: "offb-table__content offb-table__content--allow-break" }, { children: value || '-' }))),
                                        } }) })) }), _jsx("td", { children: _jsx("div", Object.assign({ "aria-describedby": `option-${index}-label`, className: "offb-table__content offb-table__content--allow-break" }, { children: description || '-' })) }), _jsx("td", { children: _jsx(TextArea, { name: `${name}[${index}]openForms.translations.${activeLanguage}.description`, "aria-labelledby": `option-${index}-label` }) })] }, `option-description-${index}`)))] }))] }));
}
export default ValuesTranslations;