@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
101 lines (100 loc) • 4.36 kB
JavaScript
import { jsx as e, jsxs as a } from "react/jsx-runtime";
import { clsx as d } from "clsx";
import { useFormikContext as _ } from "formik";
import v, { useContext as g, useState as C } from "react";
import { useIntl as N, FormattedMessage as l } from "react-intl";
import { BuilderContext as x } from "../../context.js";
import "../formio/tabs.js";
import M from "../formio/component.js";
import "@floating-ui/react";
import { TextFieldMultiple as y } from "../formio/textfield.js";
import "../formio/datefield.js";
import "../formio/datetimefield.js";
import "../formio/timefield.js";
/* empty css */
import "react-select";
import "dompurify";
import "../formio/textarea.js";
import "../formio/datagrid.js";
/* empty css */
import T from "../formio/component-label.js";
/* empty css */
/* empty css */
const m = v.createContext({
activeLanguage: "nl"
});
m.displayName = "ComponentTranslationsContext";
function J({
propertyLabels: i,
ignoreKeysForTranslations: f = [],
children: r
}) {
const s = N(), {
supportedLanguageCodes: c
} = g(x), {
values: n
} = _(), [o, p] = C(c[0]), b = Object.keys(i).filter((t) => !f.includes(t)), h = `openForms.translations.${o}`;
return /* @__PURE__ */ e(M, { type: "datagrid", children: /* @__PURE__ */ a("table", { className: "table table-bordered offb-table", children: [
/* @__PURE__ */ a("thead", { children: [
/* @__PURE__ */ a("tr", { className: "offb-i18n-header", children: [
/* @__PURE__ */ e("td", { colSpan: 2, className: "offb-i18n-header__label offb-table__col offb-table__col--width-50", children: /* @__PURE__ */ e(T, { label: /* @__PURE__ */ e(l, { id: "E5FZz/", defaultMessage: [{
type: 0,
value: "Translations"
}] }), tooltip: s.formatMessage({
id: "RN628y",
defaultMessage: [{
type: 0,
value: "Translations for literals used in this component."
}]
}) }) }),
/* @__PURE__ */ e("td", { className: "offb-i18n-header__tab-container offb-table__col offb-table__col--width-50", children: /* @__PURE__ */ e("ul", { className: "nav nav-tabs offb-i18n-header__tabs", children: c.map((t) => /* @__PURE__ */ e("li", { className: d("nav-item", {
active: t === o
}), children: /* @__PURE__ */ e("a", { href: "#", className: d("nav-link", {
active: t === o
}), onClick: (u) => {
u.preventDefault(), p(t);
}, children: t.toUpperCase() }, t) }, t)) }) })
] }),
/* @__PURE__ */ a("tr", { children: [
/* @__PURE__ */ e("th", { className: "offb-table__col offb-table__col--width-25", children: /* @__PURE__ */ e(l, { id: "B1ONuu", defaultMessage: [{
type: 0,
value: "Location"
}] }) }),
/* @__PURE__ */ e("th", { className: "offb-table__col offb-table__col--width-25", children: /* @__PURE__ */ e(l, { id: "vRVMpe", defaultMessage: [{
type: 0,
value: "Value"
}] }) }),
/* @__PURE__ */ e("th", { className: "offb-table__col offb-table__col--width-50", children: /* @__PURE__ */ e(l, { id: "yL9Ql7", defaultMessage: [{
type: 0,
value: "Translations"
}] }) })
] })
] }),
/* @__PURE__ */ e("tbody", { children: b.map((t) => /* @__PURE__ */ a("tr", { children: [
/* @__PURE__ */ e("td", { children: /* @__PURE__ */ e("span", { id: `component-translation-property-${t}`, children: i[t] || t }) }),
/* @__PURE__ */ e("td", { children: /* @__PURE__ */ e("div", { "aria-describedby": `component-translation-property-${t}`, className: "offb-table__content offb-table__content--allow-break", children: (n == null ? void 0 : n[t]) || "-" }) }),
/* @__PURE__ */ e("td", { children: /* @__PURE__ */ e(y, { name: `${h}.${t}`, "aria-label": s.formatMessage({
id: "EgAnxH",
defaultMessage: [{
type: 0,
value: 'Translation for "'
}, {
type: 1,
value: "field"
}, {
type: 0,
value: '"'
}]
}, {
field: t
}) }) })
] }, t)) }),
r && /* @__PURE__ */ e(m.Provider, { value: {
activeLanguage: o
}, children: r })
] }) });
}
export {
J as ComponentTranslations,
m as ComponentTranslationsContext
};