download one language of (language + view mode) and one of lowcoder-design language

client/packages/lowcoder-design/src/i18n/design/index.ts

@@ -1,4 +1,32 @@
-import { Translator } from "lowcoder-core";
+
+import {  Translator } from "lowcoder-core";
 import * as localeData from "./locales";
+import { ReactNode } from "react";
+import {getLanguage} from "lowcoder/src/util/editor";
+
+type transType = (key: any, variables?: any) => string;
+type transToNodeType = (key: any, variables?: any) => ReactNode;
+
+let trans: transType;
+let transToNode: transToNodeType;
+const availableLanguages = ['en', 'zh', 'de', 'pt'];
+let language: string = getLanguage() || 'en' ;
+
+export const initTranslator = async (lang?: string) => {
+    let langJson = await (localeData as any)[lang || availableLanguages.includes(language) ? language : 'en']();
+    langJson = {[lang || language]: langJson}
+    const translator =  new Translator<typeof langJson>(
+        langJson,
+        REACT_APP_LANGUAGES,
+        [lang || language]
+    );
+
+    language = translator.language;
+    transToNode = (key: any, variables?: any) => translator.transToNode?.(key, variables);
+    trans = (key: any, variables?: any) => translator.trans?.(key, variables);
+}
+
+
+await initTranslator();
 
-export const { trans } = new Translator<typeof localeData.en>(localeData, REACT_APP_LANGUAGES);
+export { language, trans, transToNode };

client/packages/lowcoder-design/src/i18n/design/locales/de.ts

@@ -1,3 +1,81 @@
-import { en } from "./en";
 
-export const de: typeof en = {...en};
+export const de = {
+    addItem: "Add",
+    duplicate: "Duplicate",
+    rename: "Rename",
+    delete: "Delete",
+    edit: "Edit",
+    ok: "OK",
+    cancel: "Cancel",
+    previousStep: "Previous",
+    nextStep: "Next",
+    finish: "Finish",
+    country: {
+        china: "China",
+    },
+    notification: {
+        copySuccess: "Copy success",
+        copyFail: "Copy failed",
+    },
+    prop: {
+        basic: "Basic",
+        resources: "Resources",
+        interaction: "Interaction",
+        advanced: "Advanced",
+        validation: "Validation",
+        layout: "Layout",
+        animationStyle:"Animation Style",
+        labelStyle: "Label Style",
+        style: "Style",
+        meetings: "Meeting Settings",
+        data: "Data",
+        field: 'Field',
+        inputFieldStyle: 'Input Field Style',
+        childrenInputFieldStyle: 'Children Input Field Style',
+        avatarStyle: 'Avatar Style',
+        captionStyle: 'Caption Style',
+        startButtonStyle: 'Start Button Style',
+        resetButtonStyle: 'Reset Button Style',
+        headerStyle: 'Header Style',
+        bodyStyle: 'Body Style',
+        badgeStyle: 'Badge Style',
+        columnStyle: 'Column Style',
+        modalStyle: 'Modal Style',
+    },
+    passwordInput: {
+        label: "Password:",
+        placeholder: "Please enter your password",
+        inconsistentPassword: "Two passwords are inconsistent",
+        confirmPasswordLabel: "Confirm password:",
+        confirmPasswordPlaceholder: "Please enter your password again",
+    },
+    verifyCodeInput: {
+        label: "Verification code:",
+        errorMsg: "Code should be {digitNum} digits",
+        placeholder: "Please enter {digitNum} digits code",
+        sendCode: "Send code",
+    },
+    iconSelect: {
+        title: "Select icon",
+        searchPlaceholder: "Search icon",
+    },
+    shapeSelect: {
+        title: "Select shape",
+        searchPlaceholder: "Search shape",
+    },
+    eventHandler: {
+        advanced: "Advanced",
+    },
+    comp: {
+        selectedCompsTitle: "{selectCompNum} components are selected",
+        selectedCompsDetail: "Click component to view its properties",
+        batchDelete: "Batch delete",
+    },
+    optionsControl: {
+        optionItemErrorMSg: `Found duplicate option value "{value}". Only the first item will be displayed. Please change to a unique value.`,
+        emptyList: "No options",
+    },
+    container: {
+        hintPlaceHolder: "Drag components from the right panel",
+    },
+};

client/packages/lowcoder-design/src/i18n/design/locales/index.ts

@@ -1,6 +1,5 @@
-// file examples: en, enGB, zh, zhHK
-// fallback example: current locale is zh-HK, fallback order is zhHK => zh => en
-export * from "./en";
-export * from "./zh";
-export * from "./de";
-export * from "./pt"
+
+export const en = async () : Promise<Object> => await import("./en").then(module => module.en);
+export const zh = async () : Promise<Object> => await import("./zh").then(module => module.zh);
+export const de = async () : Promise<Object> => await import("./de").then(module => module.de);
+export const pt = async () : Promise<Object> => await import("./pt").then(module => module.pt);

client/packages/lowcoder-design/src/i18n/design/locales/pt.ts

@@ -1,90 +1,80 @@
-import {en} from "./en";
-
-export const pt: typeof en = {
-  ...en,
-  addItem: "Adicionar",
-  duplicate: "Duplicar",
-  rename: "Renomear",
-  delete: "Deletar",
-  edit: "Editar",
-  ok: "OK",
-  cancel: "Cancelar",
-  previousStep: "Anterior",
-  nextStep: "Próximo",
-  finish: "Finalizar",
-  country: {
-    ...en.country,
-    china: "China",
+export const pt = {
+  "addItem": "Adicionar",
+  "duplicate": "Duplicar",
+  "rename": "Renomear",
+  "delete": "Deletar",
+  "edit": "Editar",
+  "ok": "OK",
+  "cancel": "Cancelar",
+  "previousStep": "Anterior",
+  "nextStep": "Próximo",
+  "finish": "Finalizar",
+  "country": {
+    "china": "China"
   },
-  notification: {
-    ...en.notification,
-    copySuccess: "Sucesso ao Copiar",
-    copyFail: "Falha ao Copiar",
+  "notification": {
+    "copySuccess": "Sucesso ao Copiar",
+    "copyFail": "Falha ao Copiar"
   },
-  prop: {
-    ...en.prop,
-    basic: "Básico",
-    resources: "Recursos",
-    interaction: "Interação",
-    advanced: "Avançado",
-    validation: "Validação",
-    layout: "Layout",
-    labelStyle: "Estilo do Rótulo",
-    style: "Estilo",
-    meetings: "Configurações da Reunião",
-    data: "Dados",
-    field: 'Campo',
-    inputFieldStyle: 'Estilo do Campo de Entrada',
-    avatarStyle: 'Estilo do Avatar',
-    captionStyle: 'Estilo da Legenda',
-    startButtonStyle: 'Estilo do Botão de Começar',
-    resetButtonStyle: 'Estilo do Botão de Resetar',
-    headerStyle: 'Estilo do Cabeçalho',
-    bodyStyle: 'Estilo do Corpo',
-    badgeStyle: 'Estilo do Emblema',
+  "prop": {
+    "basic": "Básico",
+    "resources": "Recursos",
+    "interaction": "Interação",
+    "advanced": "Avançado",
+    "validation": "Validação",
+    "layout": "Layout",
+    "animationStyle": "Animation Style",
+    "labelStyle": "Estilo do Rótulo",
+    "style": "Estilo",
+    "meetings": "Configurações da Reunião",
+    "data": "Dados",
+    "field": "Campo",
+    "inputFieldStyle": "Estilo do Campo de Entrada",
+    "childrenInputFieldStyle": "Children Input Field Style",
+    "avatarStyle": "Estilo do Avatar",
+    "captionStyle": "Estilo da Legenda",
+    "startButtonStyle": "Estilo do Botão de Começar",
+    "resetButtonStyle": "Estilo do Botão de Resetar",
+    "headerStyle": "Estilo do Cabeçalho",
+    "bodyStyle": "Estilo do Corpo",
+    "badgeStyle": "Estilo do Emblema",
+    "columnStyle": "Column Style",
+    "modalStyle": "Modal Style"
   },
-  passwordInput: {
-    ...en.passwordInput,
-    label: "Senha:",
-    placeholder: "Insira sua senha",
-    inconsistentPassword: "As duas senhas não são iguais",
-    confirmPasswordLabel: "Confirme a senha:",
-    confirmPasswordPlaceholder: "Por favor insira a senha novamente",
+  "passwordInput": {
+    "label": "Senha:",
+    "placeholder": "Insira sua senha",
+    "inconsistentPassword": "As duas senhas não são iguais",
+    "confirmPasswordLabel": "Confirme a senha:",
+    "confirmPasswordPlaceholder": "Por favor insira a senha novamente"
   },
-  verifyCodeInput: {
-    ...en.verifyCodeInput,
-    label: "Código de verificação:",
-    errorMsg: "O código deve ter {digitNum} digitos",
-    placeholder: "Por favor insira {digitNum} digitos",
-    sendCode: "Enviar Código",
+  "verifyCodeInput": {
+    "label": "Código de verificação:",
+    "errorMsg": "O código deve ter {digitNum} digitos",
+    "placeholder": "Por favor insira {digitNum} digitos",
+    "sendCode": "Enviar Código"
   },
-  iconSelect: {
-    ...en.iconSelect,
-    title: "Selecionar Ícone",
-    searchPlaceholder: "Pesquisar Ícone",
+  "iconSelect": {
+    "title": "Selecionar Ícone",
+    "searchPlaceholder": "Pesquisar Ícone"
   },
-  shapeSelect: {
-    ...en.shapeSelect,
-    title: "Selecionar Forma",
-    searchPlaceholder: "Pesquisar Forma",
+  "shapeSelect": {
+    "title": "Selecionar Forma",
+    "searchPlaceholder": "Pesquisar Forma"
   },
-  eventHandler: {
-    ...en.eventHandler,
-    advanced: "Avançado",
+  "eventHandler": {
+    "advanced": "Avançado"
   },
-  comp: {
-    ...en.comp,
-    selectedCompsTitle: "{selectCompNum} componentes selecionados",
-    selectedCompsDetail: "Clique no componente para ver suas propriedades",
-    batchDelete: "Deletar em massa",
+  "comp": {
+    "selectedCompsTitle": "{selectCompNum} componentes selecionados",
+    "selectedCompsDetail": "Clique no componente para ver suas propriedades",
+    "batchDelete": "Deletar em massa"
   },
-  optionsControl: {
-    ...en.optionsControl,
-    optionItemErrorMSg: `Opção de valor encontrada duplicada "{value}". Somente o primeiro item será mostrado. Por favor, troque para um valor único.`,
-    emptyList: "Sem opções",
+  "optionsControl": {
+    "optionItemErrorMSg": "Opção de valor encontrada duplicada \"{value}\". Somente o primeiro item será mostrado. Por favor, troque para um valor único.",
+    "emptyList": "Sem opções"
   },
-  container: {
-    ...en.container,
-    hintPlaceHolder: "Arraste componentes do painel da direita",
-  },
-};
+  "container": {
+    "hintPlaceHolder": "Arraste componentes do painel da direita"
+  }
+}