@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
37 lines (36 loc) • 5.33 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ComponentTranslations = exports.ComponentTranslationsContext = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const clsx_1 = __importDefault(require("clsx"));
const formik_1 = require("formik");
const react_1 = __importDefault(require("react"));
const react_2 = require("react");
const react_intl_1 = require("react-intl");
const context_1 = require("../../context");
const formio_1 = require("../formio");
const component_label_1 = __importDefault(require("../formio/component-label"));
exports.ComponentTranslationsContext = react_1.default.createContext({
activeLanguage: 'nl',
});
exports.ComponentTranslationsContext.displayName = 'ComponentTranslationsContext';
function ComponentTranslations({ propertyLabels, children, }) {
const intl = (0, react_intl_1.useIntl)();
const { supportedLanguageCodes } = (0, react_2.useContext)(context_1.BuilderContext);
const { values } = (0, formik_1.useFormikContext)();
const [activeLanguage, setActiveLanguage] = (0, react_2.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 ((0, jsx_runtime_1.jsx)(formio_1.Component, Object.assign({ type: "datagrid" }, { children: (0, jsx_runtime_1.jsxs)("table", Object.assign({ className: "table table-bordered offb-table" }, { children: [(0, jsx_runtime_1.jsxs)("thead", { children: [(0, jsx_runtime_1.jsxs)("tr", Object.assign({ className: "offb-i18n-header" }, { children: [(0, jsx_runtime_1.jsx)("td", Object.assign({ colSpan: 2, className: "offb-i18n-header__label offb-table__col offb-table__col--width-50" }, { children: (0, jsx_runtime_1.jsx)(component_label_1.default, { label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'E5FZz/', defaultMessage: [{ type: 0, value: "Translations" }] }), tooltip: intl.formatMessage({ id: "RN628y", defaultMessage: [{ type: 0, value: "Translations for literals used in this component." }] }) }) })), (0, jsx_runtime_1.jsx)("td", Object.assign({ className: "offb-i18n-header__tab-container offb-table__col offb-table__col--width-50" }, { children: (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: `nav nav-tabs offb-i18n-header__tabs` }, { children: supportedLanguageCodes.map(code => ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: (0, clsx_1.default)('nav-item', { active: code === activeLanguage }) }, { children: (0, jsx_runtime_1.jsx)("a", Object.assign({ href: "#", className: (0, clsx_1.default)('nav-link', { active: code === activeLanguage }), onClick: e => {
e.preventDefault();
setActiveLanguage(code);
} }, { children: code.toUpperCase() }), code) }), code))) })) }))] })), (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", Object.assign({ className: "offb-table__col offb-table__col--width-25" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'B1ONuu', defaultMessage: [{ type: 0, value: "Location" }] }) })), (0, jsx_runtime_1.jsx)("th", Object.assign({ className: "offb-table__col offb-table__col--width-25" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'vRVMpe', defaultMessage: [{ type: 0, value: "Value" }] }) })), (0, jsx_runtime_1.jsx)("th", Object.assign({ className: "offb-table__col offb-table__col--width-50" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'yL9Ql7', defaultMessage: [{ type: 0, value: "Translations" }] }) }))] })] }), (0, jsx_runtime_1.jsx)("tbody", { children: properties.map(property => ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ id: `component-translation-property-${property}` }, { children: propertyLabels[property] || property })) }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.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]) || '-') })) }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)(formio_1.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 && ((0, jsx_runtime_1.jsx)(exports.ComponentTranslationsContext.Provider, Object.assign({ value: { activeLanguage } }, { children: children })))] })) })));
}
exports.ComponentTranslations = ComponentTranslations;