@jasperoosthoek/react-toolbox 0.8.1 → 0.9.1

package/src/localization/LocalizationContext.tsx

@@ -1,131 +1,156 @@
-import React, { useState, useContext } from 'react';
-import LocalizedStrings from 'react-localization';
-import {
-  defaultLocalization,
-  AdditionalLocalization,
-  LocalizationElement,
-  LocalizationFunction,
-  defaultLanguages,
-} from './localization';
-
-const out_of_context_error = 'This function should only be used in a child of LocalizationProvider.';
-
-export const combineLocalization = (...locals: AdditionalLocalization[]) => {
-  // Extract all unique language keys
-  const languages = [...new Set(locals.flatMap(Object.keys))];
-
-  return languages.reduce(
-    (o, lang) => ({
-      ...o,
-      [lang]: locals.reduce<LocalizationElement>(
-        (acc, l) => ({ ...acc, ...(l[lang] || {}) }),
-        {} as LocalizationElement
-      ),
-    }),
-    {} as AdditionalLocalization
-  );
-};
-
-export const LocalizationContext = React.createContext({
-  lang: 'en',
-  languages: Object.keys(defaultLanguages),
-  setLanguage: (lang: string) => console.error(out_of_context_error),
-  text: (str: TemplateStringsArray, ...values: (string | number)[]) => {
-    console.error(out_of_context_error);
-    return str[0];
-  },
-  textByLang: (lang: string) => (str: TemplateStringsArray, ...values: (string | number)[]) => {
-    console.error(out_of_context_error);
-    return str[0];
-  },
-  strings: new LocalizedStrings({ en: {} }),
-  localizationStrings: {} as AdditionalLocalization,
-  setLocalization: (localization: AdditionalLocalization) => console.error(out_of_context_error),
-});
-
-export type RestProps = {
-  [prop: string]: any;
-}
-export interface LocalizationProviderProps extends RestProps {
-  lang?: string;
-  localization?: AdditionalLocalization;
-  languages?: string[];
-  children?: any;
-  [prop: string]: any;
-}
-
-export const LocalizationProvider = ({
-  lang: initialLanguage = 'en',
-  localization: additionalLocalizationInitial = {},
-  languages: languagesOverride,
-  children,
-  ...restProps
- }: LocalizationProviderProps) => {
-  const [additionalLocalization, setLocalization] = useState(additionalLocalizationInitial);
-  const [lang, setLanguage] = useState(initialLanguage);
-  const languages = Array.from(new Set([
-    ...languagesOverride || Object.keys(defaultLocalization),
-    ...Object.keys(additionalLocalization),
-  ]));
-  const localizationStrings = languages.reduce(
-    (o, lang) => ({
-      ...o,
-      [lang]: {
-        ...defaultLocalization[lang] || {},
-        ...additionalLocalization[lang] || {},
-      },
-    }),
-    {}
-  );
-    
-  const strings = new LocalizedStrings(localizationStrings);
-  strings.setLanguage(lang);
-
-  const textByLang = (lang: string) => (str: TemplateStringsArray, ...values: (string | number)[]) => {
-    const text_or_func = strings.getString(str[0], lang) as string | LocalizationFunction;
-    if (!text_or_func) {
-      console.error(`Language string not found: "${str[0]}"`);
-      return str[0];
-    } else if (typeof text_or_func === 'function') {
-      if (text_or_func.length !== values.length) {
-        console.error(
-          `Language function "${str[0]}" expects exactly ${text_or_func.length} argument${text_or_func.length === 1 ? '' : 's'}. `
-          + (
-            text_or_func.length > 0
-            ? ` Use text${'`'}${str[0]}${'${arg1}${arg2}`'}`
-            : ` Use text${'`'}${str[0]}${'`'}`
-          )
-        );
-        return text_or_func.length > 0 ? `${str[0]}${'${arg1}${arg2}'}` : str[0];
-      }
-      return text_or_func(...values);
-    }
-
-    return text_or_func;
-  }
-  return (
-    <LocalizationContext.Provider
-      value={{
-        lang,
-        languages,
-        setLanguage: (lang: string) => {
-          if (!languages.includes(lang)) {
-            console.error(`Language ${lang} not available`);
-            return;
-          }
-          setLanguage(lang);
-        },
-        strings,
-        text: textByLang(lang),
-        textByLang,
-        localizationStrings,
-        setLocalization,
-        ...restProps,
-      }}
-    >
-      {children}
-    </LocalizationContext.Provider>
-  );
-};
-
-export const useLocalization = () => useContext(LocalizationContext);
+import React, { useState, useContext, useEffect, useMemo } from 'react';
+import LocalizedStrings from 'react-localization';
+import {
+  defaultLocalization,
+  AdditionalLocalization,
+  LocalizationElement,
+  LocalizationFunction,
+  defaultLanguages,
+} from './localization';
+
+const out_of_context_error = 'This function should only be used in a child of LocalizationProvider.';
+
+export const combineLocalization = (...locals: AdditionalLocalization[]) => {
+  if (locals.length === 0) {
+    return {} as AdditionalLocalization;
+  }
+  
+  // Filter out empty objects
+  const validLocals = locals.filter(local => local && Object.keys(local).length > 0);
+  
+  if (validLocals.length === 0) {
+    return {} as AdditionalLocalization;
+  }
+  
+  // Extract all unique language keys
+  const languages = [...new Set(validLocals.flatMap(Object.keys))];
+
+  return languages.reduce(
+    (o, lang) => ({
+      ...o,
+      [lang]: validLocals.reduce<LocalizationElement>(
+        (acc, l) => ({ ...acc, ...(l[lang] || {}) }),
+        {} as LocalizationElement
+      ),
+    }),
+    {} as AdditionalLocalization
+  );
+};
+
+export const LocalizationContext = React.createContext({
+  lang: 'en',
+  languages: Object.keys(defaultLanguages),
+  setLanguage: (lang: string) => console.error(out_of_context_error),
+  text: (str: TemplateStringsArray, ...values: (string | number)[]) => {
+    console.error(out_of_context_error);
+    return str[0];
+  },
+  textByLang: (lang: string) => (str: TemplateStringsArray, ...values: (string | number)[]) => {
+    console.error(out_of_context_error);
+    return str[0];
+  },
+  strings: new LocalizedStrings({ en: {} }),
+  localizationStrings: {} as AdditionalLocalization,
+  setLocalization: (localization: AdditionalLocalization) => console.error(out_of_context_error),
+});
+
+export type RestProps = {
+  [prop: string]: any;
+}
+export interface LocalizationProviderProps extends RestProps {
+  lang?: string;
+  localization?: AdditionalLocalization;
+  languages?: string[];
+  children?: any;
+  [prop: string]: any;
+}
+
+export const LocalizationProvider = ({
+  lang: initialLanguage = 'en',
+  localization: additionalLocalizationInitial = {},
+  languages: languagesOverride,
+  children,
+  ...restProps
+ }: LocalizationProviderProps) => {
+  const [additionalLocalization, setAdditionalLocalization] = useState(additionalLocalizationInitial);
+  const [lang, setLanguage] = useState(initialLanguage);
+  
+  const languages = Array.from(new Set([
+    ...languagesOverride || Object.keys(defaultLocalization),
+    ...Object.keys(additionalLocalization),
+  ]));
+  
+  const localizationStrings = useMemo(() => {
+    return languages.reduce(
+      (o, lang) => ({
+        ...o,
+        [lang]: {
+          ...defaultLocalization[lang] || {},
+          ...additionalLocalization[lang] || {},
+        },
+      }),
+      {}
+    );
+  }, [languages, additionalLocalization]);
+    
+  const strings = useMemo(() => {
+    const localizedStrings = new LocalizedStrings(localizationStrings);
+    localizedStrings.setLanguage(lang);
+    return localizedStrings;
+  }, [localizationStrings, lang]);
+
+  const setLocalization = (newLocalization: AdditionalLocalization) => {
+    setAdditionalLocalization(prev => {
+      const merged = combineLocalization(prev, newLocalization);
+      return merged;
+    });
+  };
+
+  const textByLang = (lang: string) => (str: TemplateStringsArray, ...values: (string | number)[]) => {
+    const text_or_func = strings.getString(str[0], lang) as string | LocalizationFunction;
+    if (!text_or_func) {
+      console.error(`Language string not found: "${str[0]}"`);
+      return str[0];
+    } else if (typeof text_or_func === 'function') {
+      if (text_or_func.length !== values.length) {
+        console.error(
+          `Language function "${str[0]}" expects exactly ${text_or_func.length} argument${text_or_func.length === 1 ? '' : 's'}. `
+          + (
+            text_or_func.length > 0
+            ? ` Use text${'`'}${str[0]}${'${arg1}${arg2}`'}`
+            : ` Use text${'`'}${str[0]}${'`'}`
+          )
+        );
+        return text_or_func.length > 0 ? `${str[0]}${'${arg1}${arg2}'}` : str[0];
+      }
+      return text_or_func(...values);
+    }
+
+    return text_or_func;
+  }
+  return (
+    <LocalizationContext.Provider
+      value={{
+        lang,
+        languages,
+        setLanguage: (newLang: string) => {
+          if (!languages.includes(newLang)) {
+            console.error(`Language ${newLang} not available`);
+            return;
+          }
+          setLanguage(newLang);
+        },
+        strings,
+        text: textByLang(lang),
+        textByLang,
+        localizationStrings,
+        setLocalization,
+        ...restProps,
+      }}
+    >
+      {children}
+    </LocalizationContext.Provider>
+  );
+};
+
+export const useLocalization = () => useContext(LocalizationContext);

package/src/localization/localization.ts

@@ -1,131 +1,131 @@
-export type LocalizationFunction = (...args: (string | number)[]) => string;
-
-export type LocalizationElement = {
-  [languageString: string]: (string | LocalizationFunction)
-}
-
-export type AdditionalLocalization = {
-  [lang: string]: LocalizationElement;
-}
-
-export interface LocalizationStrings {
-  select: string;
-  search: string;
-  no_information_to_display: string;
-  information_is_being_loaded: string;
-  delete: string;
-  are_you_sure: string;
-  close: string;
-  save: string;
-  cancel: string;
-  ok: string;
-  your_email: string;
-  enter_email: string;
-  your_password: string;
-  enter_password: string;
-  login: string;
-  logout: string;
-  forgot_password: string;
-  reset_password: string;
-  required_field: string;
-  choose_one: string;
-  everything: string;
-  number_of_rows: string;
-  modal_create: string;
-  modal_edit: string;
-}
-
-export type Localization = {
-  [lang: string]: LocalizationStrings;
-}
-
-export type Languages = {
-  [languageIso: string]: string;
-}
-export const defaultLanguages: Languages = {
-  en: "English",
-  fr: "Français",
-  nl: "Nederlands",
-} as const;
-
-export const defaultLocalization: Localization = {
-  en: {
-    select: "Select",
-    search: "Search",
-    no_information_to_display: "No information to display",
-    information_is_being_loaded: "The information is being loaded...",
-    delete: "Delete",
-    are_you_sure: "Are you sure?",
-    close: "Close",
-    save: "Save",
-    cancel: "Cancel",
-    ok: "OK",
-    your_email: "Your email",
-    enter_email: "Enter email address",
-    your_password: "Your password",
-    enter_password: "Enter password",
-    login: "Login",
-    logout: "Logout",
-    forgot_password: "Forgot password?",
-    reset_password: "Reset password",
-    required_field: "required",
-    choose_one: "Choose one",
-    everything: "Everything",
-    number_of_rows: "Number of rows",
-    modal_create: 'New',
-    modal_edit: 'Edit',
-  },
-  fr: {
-    no_information_to_display: "Sélectionner",
-    select: "Recherche",
-    search: "Aucune information à afficher",
-    information_is_being_loaded: "L'information est en cours de téléchargement...",
-    delete: "Supprimer",
-    are_you_sure: "Es-tu sûr?",
-    close: "Fermer",
-    save: "Sauvegarder",
-    cancel: "Annuler",
-    ok: "D'accord'",
-    your_email: "Votre adresse e-mail",
-    enter_email: "Entrez l'adresse e-mail",
-    your_password: "Votre mot de passe",
-    enter_password: "Entrez votre mot de passe",
-    login: "Connexion",
-    logout: "Se déconnecter",
-    forgot_password: "Mot de passe oublié?",
-    reset_password: "Réinitialiser le mot de passe",
-    required_field: "requis",
-    choose_one: "Choisissez-en un",
-    number_of_rows: "Tout",
-    everything: "Nombre de rangées",
-    modal_create: 'Nouveau',
-    modal_edit: 'Éditer',
-  },
-  nl: {
-    no_information_to_display: "Geen informatie om weer te geven.",
-    select: "Selecteer",
-    search: "Zoeken",
-    information_is_being_loaded: "De gegevens worden geladen...",
-    delete: "Verwijderen",
-    are_you_sure: "Weet u het zeker?",
-    close: "Sluiten",
-    save: "Opslaan",
-    cancel: "Annuleren",
-    ok: "OK",
-    your_email: "Uw e-mail",
-    enter_email: "Voer e-mailadres in",
-    your_password: "Uw wachtwoord",
-    enter_password: "Voer wachtwoord in",
-    login: "Inloggen",
-    logout: "Uitloggen",
-    forgot_password: "Wachtwoord vergeten?",
-    reset_password: "Wachtwoord resetten",
-    required_field: "verplicht",
-    choose_one: "Maak een keuze",
-    number_of_rows: "Aantal rijen",
-    everything: "Alles",
-    modal_create: 'Nieuw',
-    modal_edit: 'Bewerken',
-  },
-} as const;
-
+export type LocalizationFunction = (...args: (string | number)[]) => string;
+
+export type LocalizationElement = {
+  [languageString: string]: (string | LocalizationFunction)
+}
+
+export type AdditionalLocalization = {
+  [lang: string]: LocalizationElement;
+}
+
+export interface LocalizationStrings {
+  select: string;
+  search: string;
+  no_information_to_display: string;
+  information_is_being_loaded: string;
+  delete: string;
+  are_you_sure: string;
+  close: string;
+  save: string;
+  cancel: string;
+  ok: string;
+  your_email: string;
+  enter_email: string;
+  your_password: string;
+  enter_password: string;
+  login: string;
+  logout: string;
+  forgot_password: string;
+  reset_password: string;
+  required_field: string;
+  choose_one: string;
+  everything: string;
+  number_of_rows: string;
+  modal_create: string;
+  modal_edit: string;
+}
+
+export type Localization = {
+  [lang: string]: LocalizationStrings;
+}
+
+export type Languages = {
+  [languageIso: string]: string;
+}
+export const defaultLanguages: Languages = {
+  en: "English",
+  fr: "Français",
+  nl: "Nederlands",
+} as const;
+
+export const defaultLocalization: Localization = {
+  en: {
+    select: "Select",
+    search: "Search",
+    no_information_to_display: "No information to display",
+    information_is_being_loaded: "The information is being loaded...",
+    delete: "Delete",
+    are_you_sure: "Are you sure?",
+    close: "Close",
+    save: "Save",
+    cancel: "Cancel",
+    ok: "OK",
+    your_email: "Your email",
+    enter_email: "Enter email address",
+    your_password: "Your password",
+    enter_password: "Enter password",
+    login: "Login",
+    logout: "Logout",
+    forgot_password: "Forgot password?",
+    reset_password: "Reset password",
+    required_field: "required",
+    choose_one: "Choose one",
+    everything: "Everything",
+    number_of_rows: "Number of rows",
+    modal_create: 'New',
+    modal_edit: 'Edit',
+  },
+  fr: {
+    select: "Sélectionner",
+    search: "Recherche",
+    no_information_to_display: "Aucune information à afficher",
+    information_is_being_loaded: "L'information est en cours de téléchargement...",
+    delete: "Supprimer",
+    are_you_sure: "Êtes-vous sûr?",
+    close: "Fermer",
+    save: "Sauvegarder",
+    cancel: "Annuler",
+    ok: "D'accord'",
+    your_email: "Votre adresse e-mail",
+    enter_email: "Entrez l'adresse e-mail",
+    your_password: "Votre mot de passe",
+    enter_password: "Entrez votre mot de passe",
+    login: "Connexion",
+    logout: "Se déconnecter",
+    forgot_password: "Mot de passe oublié?",
+    reset_password: "Réinitialiser le mot de passe",
+    required_field: "requis",
+    choose_one: "Choisissez-en un",
+    everything: "Tout",
+    number_of_rows: "Nombre de rangées",
+    modal_create: 'Nouveau',
+    modal_edit: 'Éditer',
+  },
+  nl: {
+    select: "Selecteer",
+    search: "Zoeken",
+    no_information_to_display: "Geen informatie om weer te geven.",
+    information_is_being_loaded: "De gegevens worden geladen...",
+    delete: "Verwijderen",
+    are_you_sure: "Weet u het zeker?",
+    close: "Sluiten",
+    save: "Opslaan",
+    cancel: "Annuleren",
+    ok: "OK",
+    your_email: "Uw e-mail",
+    enter_email: "Voer e-mailadres in",
+    your_password: "Uw wachtwoord",
+    enter_password: "Voer wachtwoord in",
+    login: "Inloggen",
+    logout: "Uitloggen",
+    forgot_password: "Wachtwoord vergeten?",
+    reset_password: "Wachtwoord resetten",
+    required_field: "verplicht",
+    choose_one: "Maak een keuze",
+    everything: "Alles",
+    number_of_rows: "Aantal rijen",
+    modal_create: 'Nieuw',
+    modal_edit: 'Bewerken',
+  },
+} as const;
+