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

An opinionated Formio webform builder for Open Forms

import { jsx as e, jsxs as a } from "react/jsx-runtime";
import d from "clsx";
import { useFormikContext as _ } from "formik";
import v, { useContext as g, useState as C } from "react";
import { useIntl as N, FormattedMessage as o } 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 T from "../formio/component-label.js";
import "lodash";
/* empty css                   */
import "react-select";
import "dompurify";
import "../formio/datagrid.js";
/* empty css          */
/* empty css           */
const f = v.createContext({
  activeLanguage: "nl"
});
f.displayName = "ComponentTranslationsContext";
function U({
  propertyLabels: i,
  ignoreKeysForTranslations: m = [],
  children: s
}) {
  const r = N(), {
    supportedLanguageCodes: c
  } = g(x), {
    values: n
  } = _(), [l, b] = C(c[0]), p = Object.keys(i).filter((t) => !m.includes(t)), h = `openForms.translations.${l}`;
  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(o, { id: "E5FZz/", defaultMessage: [{
          type: 0,
          value: "Translations"
        }] }), tooltip: r.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 === l
        }), children: /* @__PURE__ */ e("a", { href: "#", className: d("nav-link", {
          active: t === l
        }), onClick: (u) => {
          u.preventDefault(), b(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(o, { id: "B1ONuu", defaultMessage: [{
          type: 0,
          value: "Location"
        }] }) }),
        /* @__PURE__ */ e("th", { className: "offb-table__col offb-table__col--width-25", children: /* @__PURE__ */ e(o, { id: "vRVMpe", defaultMessage: [{
          type: 0,
          value: "Value"
        }] }) }),
        /* @__PURE__ */ e("th", { className: "offb-table__col offb-table__col--width-50", children: /* @__PURE__ */ e(o, { id: "yL9Ql7", defaultMessage: [{
          type: 0,
          value: "Translations"
        }] }) })
      ] })
    ] }),
    /* @__PURE__ */ e("tbody", { children: p.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": r.formatMessage({
        id: "EgAnxH",
        defaultMessage: [{
          type: 0,
          value: 'Translation for "'
        }, {
          type: 1,
          value: "field"
        }, {
          type: 0,
          value: '"'
        }]
      }, {
        field: t
      }) }) })
    ] }, t)) }),
    s && /* @__PURE__ */ e(f.Provider, { value: {
      activeLanguage: l
    }, children: s })
  ] }) });
}
export {
  U as ComponentTranslations,
  f as ComponentTranslationsContext
};