fix: add support for arguments in translations

Author: RichardLindhout

src/Date/inputUtils.ts

@@ -55,22 +55,26 @@ export default function useDateInput({
       let errors =
         validStart && validEnd
           ? [
-              `${getTranslation(locale, 'mustBeBetween')} ${formatter.format(
-                validStart
-              )} - ${formatter.format(validEnd)}`,
+              `${getTranslation(
+                locale,
+                'mustBeBetween',
+                () => 'mustBeBetween'
+              )(formatter.format(validStart), formatter.format(validEnd))}`,
             ]
           : [
               validStart
-                ? `${getTranslation(
+                ? getTranslation(
                     locale,
-                    'mustBeHigherThan'
-                  )} ${formatter.format(validStart)}`
+                    'mustBeHigherThan',
+                    () => 'mustBeHigherThan'
+                  )(formatter.format(validStart))
                 : '',
               validEnd
-                ? `${getTranslation(
+                ? getTranslation(
                     locale,
-                    'mustBeLowerThan'
-                  )} ${formatter.format(validEnd)}`
+                    'mustBeLowerThan',
+                    () => 'mustBeLowerThan'
+                  )(formatter.format(validEnd))
                 : '',
             ]
       setError(errors.filter((n) => n).join(' '))

src/translations/en.ts

@@ -5,11 +5,12 @@ const en: TranslationsType = {
   selectSingle: 'Select date',
   selectMultiple: 'Select dates',
   selectRange: 'Select period',
-  notAccordingToDateFormat: (inputFormat: string) =>
+  notAccordingToDateFormat: (inputFormat) =>
     `Date format must be ${inputFormat}`,
-  mustBeHigherThan: 'Must be later then',
-  mustBeLowerThan: 'Must be earlier then',
-  mustBeBetween: 'Must be between',
+  mustBeHigherThan: (date) => `Must be later then ${date}`,
+  mustBeLowerThan: (date) => `Must be earlier then ${date}`,
+  mustBeBetween: (startDate, endDate) =>
+    `Must be between ${startDate} - ${endDate}`,
   dateIsDisabled: 'Day is not allowed',
   previous: 'Previous',
   next: 'Next',

src/translations/enGB.ts

@@ -5,11 +5,12 @@ const enGB: TranslationsType = {
   selectSingle: 'Select date',
   selectMultiple: 'Select dates',
   selectRange: 'Select period',
-  notAccordingToDateFormat: (inputFormat: string) =>
+  notAccordingToDateFormat: (inputFormat) =>
     `Date format must be ${inputFormat}`,
-  mustBeHigherThan: 'Must be later then',
-  mustBeLowerThan: 'Must be earlier then',
-  mustBeBetween: 'Must be between',
+  mustBeHigherThan: (date) => `Must be later then ${date}`,
+  mustBeLowerThan: (date) => `Must be earlier then ${date}`,
+  mustBeBetween: (startDate, endDate) =>
+    `Must be between ${startDate} - ${endDate}`,
   dateIsDisabled: 'Day is not allowed',
   previous: 'Previous',
   next: 'Next',

src/translations/nl.ts

@@ -5,11 +5,12 @@ const nl: TranslationsType = {
   selectSingle: 'Selecteer datum',
   selectMultiple: 'Selecteer datums',
   selectRange: 'Selecteer periode',
-  notAccordingToDateFormat: (inputFormat: string) =>
+  notAccordingToDateFormat: (inputFormat) =>
     `Datumformaat moet ${inputFormat} zijn`,
-  mustBeHigherThan: 'Moet later dan',
-  mustBeLowerThan: 'Moet eerder dan',
-  mustBeBetween: 'Moet tussen',
+  mustBeHigherThan: (date) => `Moet later dan ${date}`,
+  mustBeLowerThan: (date) => `Moet eerder dan ${date}`,
+  mustBeBetween: (startDate, endDate) =>
+    `Moet tussen ${startDate} - ${endDate}`,
   dateIsDisabled: 'Deze dag mag niet',
   previous: 'Vorige',
   next: 'Volgende',

src/translations/pl.ts

@@ -5,11 +5,11 @@ const pl: TranslationsType = {
   selectSingle: 'Wybierz datę',
   selectMultiple: 'Wybierz daty',
   selectRange: 'Wybierz zakres',
-  notAccordingToDateFormat: (inputFormat: string) =>
+  notAccordingToDateFormat: (inputFormat) =>
     `Data musi mieć format ${inputFormat}`,
-  mustBeHigherThan: 'Nie wcześniej niż',
-  mustBeLowerThan: 'Nie później niż',
-  mustBeBetween: 'Pomiędzy',
+  mustBeHigherThan: (date) => `Nie wcześniej niżn ${date}`,
+  mustBeLowerThan: (date) => `Nie później niż ${date}`,
+  mustBeBetween: (startDate, endDate) => `Pomiędzy ${startDate} - ${endDate}`,
   dateIsDisabled: 'Niedozwolona data',
 
   previous: 'Poprzedni',

src/translations/pt.ts

@@ -7,9 +7,10 @@ const pt: TranslationsType = {
   selectRange: 'Selecione o período',
   notAccordingToDateFormat: (inputFormat: string) =>
     `O formato da data deve ser ${inputFormat}`,
-  mustBeHigherThan: 'Deve ser depois de',
-  mustBeLowerThan: 'Deve ser antes de',
-  mustBeBetween: 'Deve estar entre',
+  mustBeHigherThan: (date) => `Deve ser depois de ${date}`,
+  mustBeLowerThan: (date) => `Deve ser antes de ${date}`,
+  mustBeBetween: (startDate, endDate) =>
+    `Deve estar entre ${startDate} - ${endDate}`,
   dateIsDisabled: 'Data não é permitida',
   previous: 'Anterior',
   next: 'Próximo',

src/translations/utils.ts

@@ -4,9 +4,9 @@ export type TranslationsType = {
   selectRange: string
   save: string
   notAccordingToDateFormat: (inputFormat: string) => string
-  mustBeHigherThan: string
-  mustBeLowerThan: string
-  mustBeBetween: string
+  mustBeHigherThan: (date: string) => string
+  mustBeLowerThan: (date: string) => string
+  mustBeBetween: (startDate: string, endDate: string) => string
   dateIsDisabled: string
   previous: string
   next: string
@@ -17,9 +17,9 @@ export type TranslationsType = {
 
 let translationsPerLocale: Record<string, TranslationsType> = {}
 
-export function getTranslation(
+export function getTranslation<K extends keyof TranslationsType>(
   locale: string | undefined,
-  key: keyof TranslationsType,
+  key: K,
   fallback?: any
 ) {
   const l = locale || 'en'