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

An opinionated Formio webform builder for Open Forms

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import clsx from 'clsx';
import { useFormikContext } from 'formik';
import React from 'react';
import { useContext, useState } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import { BuilderContext } from '../../context';
import { Component, TextField } from '../formio';
import ComponentLabel from '../formio/component-label';
export const ComponentTranslationsContext = React.createContext({
    activeLanguage: 'nl',
});
ComponentTranslationsContext.displayName = 'ComponentTranslationsContext';
export function ComponentTranslations({ propertyLabels, children, }) {
    const intl = useIntl();
    const { supportedLanguageCodes } = useContext(BuilderContext);
    const { values } = useFormikContext();
    const [activeLanguage, setActiveLanguage] = useState(supportedLanguageCodes[0]);
    // Object.keys has string[] type, by design. See https://stackoverflow.com/a/52856805
    // We can narrow this down - because of the propertyLabels type, we know that each key
    // is a translatable property, and each key must also be a property of the particular
    // component schema.
    const properties = Object.keys(propertyLabels);
    const nameBase = `openForms.translations.${activeLanguage}`;
    return (_jsx(Component, Object.assign({ type: "datagrid" }, { children: _jsxs("table", Object.assign({ className: "table table-bordered offb-table" }, { children: [_jsxs("thead", { children: [_jsxs("tr", Object.assign({ className: "offb-i18n-header" }, { children: [_jsx("td", Object.assign({ colSpan: 2, className: "offb-i18n-header__label offb-table__col offb-table__col--width-50" }, { children: _jsx(ComponentLabel, { label: _jsx(FormattedMessage, { id: 'E5FZz/', defaultMessage: [{ type: 0, value: "Translations" }] }), tooltip: intl.formatMessage({ id: "RN628y", defaultMessage: [{ type: 0, value: "Translations for literals used in this component." }] }) }) })), _jsx("td", Object.assign({ className: "offb-i18n-header__tab-container offb-table__col offb-table__col--width-50" }, { children: _jsx("ul", Object.assign({ className: `nav nav-tabs offb-i18n-header__tabs` }, { children: supportedLanguageCodes.map(code => (_jsx("li", Object.assign({ className: clsx('nav-item', { active: code === activeLanguage }) }, { children: _jsx("a", Object.assign({ href: "#", className: clsx('nav-link', { active: code === activeLanguage }), onClick: e => {
                                                    e.preventDefault();
                                                    setActiveLanguage(code);
                                                } }, { children: code.toUpperCase() }), code) }), code))) })) }))] })), _jsxs("tr", { children: [_jsx("th", Object.assign({ className: "offb-table__col offb-table__col--width-25" }, { children: _jsx(FormattedMessage, { id: 'B1ONuu', defaultMessage: [{ type: 0, value: "Location" }] }) })), _jsx("th", Object.assign({ className: "offb-table__col offb-table__col--width-25" }, { children: _jsx(FormattedMessage, { id: 'vRVMpe', defaultMessage: [{ type: 0, value: "Value" }] }) })), _jsx("th", Object.assign({ className: "offb-table__col offb-table__col--width-50" }, { children: _jsx(FormattedMessage, { id: 'yL9Ql7', defaultMessage: [{ type: 0, value: "Translations" }] }) }))] })] }), _jsx("tbody", { children: properties.map(property => (_jsxs("tr", { children: [_jsx("td", { children: _jsx("span", Object.assign({ id: `component-translation-property-${property}` }, { children: propertyLabels[property] || property })) }), _jsx("td", { children: _jsx("div", Object.assign({ "aria-describedby": `component-translation-property-${property}`, className: "offb-table__content offb-table__content--allow-break" }, { children: ((values === null || values === void 0 ? void 0 : values[property]) || '-') })) }), _jsx("td", { children: _jsx(TextField, { name: `${nameBase}.${property}`, "aria-label": intl.formatMessage({ id: "EgAnxH", defaultMessage: [{ type: 0, value: "Translation for \"" }, { type: 1, value: "field" }, { type: 0, value: "\"" }] }, { field: property }) }) })] }, property))) }), children && (_jsx(ComponentTranslationsContext.Provider, Object.assign({ value: { activeLanguage } }, { children: children })))] })) })));
}