fix: change i18n interpolation format separator from , to |

Author: MartinCupela

docusaurus/docs/React/guides/date-time-formatting.mdx

@@ -132,15 +132,15 @@ import {
 } from 'stream-chat-react';
 
 const CustomDateSeparator = (props: DateSeparatorProps) => (
-  <DateSeparator {...props} calendar={null} calendarFormats={null} format={null} />
+  <DateSeparator {...props} calendar={null} /> // calendarFormats, neither format have default value
 );
 
 const SystemMessage = (props: EventComponentProps) => (
-  <EventComponent {...props} calendar={null} calendarFormats={null} format={null} />
+  <EventComponent {...props} format={null} /> // calendar  neither calendarFormats have default value
 );
 
 const CustomMessageTimestamp = (props: MessageTimestampProps) => (
-  <MessageTimestamp {...props} calendar={null} calendarFormats={null} format={null} />
+  <MessageTimestamp {...props} calendar={null} format={null} /> // calendarFormats do not have default value
 );
 ```
 
@@ -165,13 +165,14 @@ const CustomMessageTimestamp = (props: MessageTimestampProps) => (
 Once the default prop values are nullified, we override the default formatting rules in the JSON translation value. We can take a look at an example of German translation for SystemMessage:
 
 ```
-"timestamp/SystemMessage": "{{ timestamp, timestampFormatter(calendar: true; calendarFormats: {\"lastDay\": \"[gestern um] LT\", \"lastWeek\": \"[letzten] dddd [um] LT\", \"nextDay\": \"[morgen um] LT\", \"nextWeek\": \"dddd [um] LT\", \"sameDay\": \"[heute um] LT\", \"sameElse\": \"L\"}) }}",
+"timestamp/SystemMessage": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\": \"[gestern um] LT\", \"lastWeek\": \"[letzten] dddd [um] LT\", \"nextDay\": \"[morgen um] LT\", \"nextWeek\": \"dddd [um] LT\", \"sameDay\": \"[heute um] LT\", \"sameElse\": \"L\"}) }}",
 ```
 
 Let's dissect the example:
 
 - The curly brackets (`{{`, `}}`) indicate the place where a value will be interpolated (inserted) into the string.
 - variable `timestamp` is the name of variable which value will be inserted into the string
+- value separator `|` signals the separation between the interpolated value and the formatting function name
 - `timestampFormatter` is the name of the formatting function that is used to convert the `timestamp` value into desired format
 - the `timestampFormatter` is can be passed the same parameters as the React components (`calendar`, `calendarFormats`, `format`) as if the function was called with these values. The values can be simple scalar values as well as objects (note `calendarFormats` should be an object)
 

src/i18n/Streami18n.ts

@@ -467,7 +467,7 @@ export class Streami18n {
   i18nextConfig: {
     debug: boolean;
     fallbackLng: false;
-    interpolation: { escapeValue: boolean };
+    interpolation: { escapeValue: boolean; formatSeparator: string };
     keySeparator: false;
     lng: string;
     nsSeparator: false;
@@ -554,7 +554,7 @@ export class Streami18n {
     this.i18nextConfig = {
       debug: finalOptions.debug,
       fallbackLng: false,
-      interpolation: { escapeValue: false },
+      interpolation: { escapeValue: false, formatSeparator: '|' },
       keySeparator: false,
       lng: this.currentLanguage,
       nsSeparator: false,

src/i18n/de.json

@@ -122,9 +122,9 @@
   "searchResultsCount_one": "1 Ergebnis",
   "searchResultsCount_other": "{{ count }} Ergebnisse",
   "this content could not be displayed": "Dieser Inhalt konnte nicht angezeigt werden",
-  "timestamp/DateSeparator": "{{ timestamp, timestampFormatter(calendar: true) }}",
-  "timestamp/SystemMessage": "{{ timestamp, timestampFormatter(format: dddd L) }}",
-  "timestamp/MessageTimestamp": "{{ timestamp, timestampFormatter(calendar: true; format: h:mmA) }}",
+  "timestamp/DateSeparator": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/SystemMessage": "{{ timestamp | timestampFormatter(format: dddd L) }}",
+  "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(calendar: true; format: h:mmA) }}",
   "unban-command-args": "[@Benutzername]",
   "unban-command-description": "Einen Benutzer entbannen",
   "unmute-command-args": "[@Benutzername]",

src/i18n/en.json

@@ -116,9 +116,9 @@
   "searchResultsCount_one": "1 result",
   "searchResultsCount_other": "{{ count }} results",
   "this content could not be displayed": "this content could not be displayed",
-  "timestamp/DateSeparator": "{{ timestamp, timestampFormatter(calendar: true) }}",
-  "timestamp/SystemMessage": "{{ timestamp, timestampFormatter(format: dddd L) }}",
-  "timestamp/MessageTimestamp": "{{ timestamp, timestampFormatter(calendar: true; format: h:mmA) }}",
+  "timestamp/DateSeparator": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/SystemMessage": "{{ timestamp | timestampFormatter(format: dddd L) }}",
+  "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(calendar: true; format: h:mmA) }}",
   "unreadMessagesSeparatorText_one": "1 unread message",
   "unreadMessagesSeparatorText_other": "{{count}} unread messages",
   "{{ commaSeparatedUsers }} and {{ moreCount }} more": "{{ commaSeparatedUsers }} and {{ moreCount }} more",

src/i18n/es.json

@@ -124,9 +124,9 @@
   "searchResultsCount_one": "1 resultado",
   "searchResultsCount_other": "{{ count }} resultados",
   "this content could not be displayed": "este contenido no se pudo mostrar",
-  "timestamp/DateSeparator": "{{ timestamp, timestampFormatter(calendar: true) }}",
-  "timestamp/SystemMessage": "{{ timestamp, timestampFormatter(format: dddd L) }}",
-  "timestamp/MessageTimestamp": "{{ timestamp, timestampFormatter(calendar: true; format: h:mmA) }}",
+  "timestamp/DateSeparator": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/SystemMessage": "{{ timestamp | timestampFormatter(format: dddd L) }}",
+  "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(calendar: true; format: h:mmA) }}",
   "unban-command-args": "[@usuario]",
   "unban-command-description": "Quitar la prohibición a un usuario",
   "unmute-command-args": "[@usuario]",

src/i18n/fr.json

@@ -124,9 +124,9 @@
   "searchResultsCount_one": "1 résultat",
   "searchResultsCount_other": "{{ count }} résultats",
   "this content could not be displayed": "ce contenu n'a pu être affiché",
-  "timestamp/DateSeparator": "{{ timestamp, timestampFormatter(calendar: true) }}",
-  "timestamp/SystemMessage": "{{ timestamp, timestampFormatter(format: dddd L) }}",
-  "timestamp/MessageTimestamp": "{{ timestamp, timestampFormatter(calendar: true; format: h:mmA) }}",
+  "timestamp/DateSeparator": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/SystemMessage": "{{ timestamp | timestampFormatter(format: dddd L) }}",
+  "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(calendar: true; format: h:mmA) }}",
   "unban-command-args": "[@nomdutilisateur]",
   "unban-command-description": "Débannir un utilisateur",
   "unmute-command-args": "[@nomdutilisateur]",

src/i18n/hi.json

@@ -123,9 +123,9 @@
   "searchResultsCount_one": "1 परिणाम",
   "searchResultsCount_other": "{{ count }} परिणाम",
   "this content could not be displayed": "यह कॉन्टेंट लोड नहीं हो पाया",
-  "timestamp/DateSeparator": "{{ timestamp, timestampFormatter(calendar: true) }}",
-  "timestamp/SystemMessage": "{{ timestamp, timestampFormatter(format: dddd L) }}",
-  "timestamp/MessageTimestamp": "{{ timestamp, timestampFormatter(calendar: true; format: h:mmA) }}",
+  "timestamp/DateSeparator": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/SystemMessage": "{{ timestamp | timestampFormatter(format: dddd L) }}",
+  "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(calendar: true; format: h:mmA) }}",
   "unban-command-args": "[@उपयोगकर्तनाम]",
   "unban-command-description": "एक उपयोगकर्ता को प्रतिषेध से मुक्त करें",
   "unmute-command-args": "[@उपयोगकर्तनाम]",

src/i18n/it.json

@@ -124,9 +124,9 @@
   "searchResultsCount_one": "1 risultato",
   "searchResultsCount_other": "{{ count }} risultati",
   "this content could not be displayed": "questo contenuto non puó essere mostrato",
-  "timestamp/DateSeparator": "{{ timestamp, timestampFormatter(calendar: true) }}",
-  "timestamp/SystemMessage": "{{ timestamp, timestampFormatter(format: dddd L) }}",
-  "timestamp/MessageTimestamp": "{{ timestamp, timestampFormatter(calendar: true; format: h:mmA) }}",
+  "timestamp/DateSeparator": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/SystemMessage": "{{ timestamp | timestampFormatter(format: dddd L) }}",
+  "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(calendar: true; format: h:mmA) }}",
   "unban-command-args": "[@nomeutente]",
   "unban-command-description": "Togliere il divieto a un utente",
   "unmute-command-args": "[@nomeutente]",

src/i18n/ja.json

@@ -122,9 +122,9 @@
   "searchResultsCount_one": "1件の結果",
   "searchResultsCount_other": "{{ count }}件の結果",
   "this content could not be displayed": "このコンテンツは表示できませんでした",
-  "timestamp/DateSeparator": "{{ timestamp, timestampFormatter(calendar: true) }}",
-  "timestamp/SystemMessage": "{{ timestamp, timestampFormatter(format: dddd L) }}",
-  "timestamp/MessageTimestamp": "{{ timestamp, timestampFormatter(calendar: true; format: h:mmA) }}",
+  "timestamp/DateSeparator": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/SystemMessage": "{{ timestamp | timestampFormatter(format: dddd L) }}",
+  "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(calendar: true; format: h:mmA) }}",
   "unban-command-args": "[@ユーザ名]",
   "unban-command-description": "ユーザーの禁止を解除する",
   "unmute-command-args": "[@ユーザ名]",

src/i18n/ko.json

@@ -122,9 +122,9 @@
   "searchResultsCount_one": "1개의 결과",
   "searchResultsCount_other": "{{ count }}개 결과",
   "this content could not be displayed": "이 콘텐츠를 표시할 수 없습니다",
-  "timestamp/DateSeparator": "{{ timestamp, timestampFormatter(calendar: true) }}",
-  "timestamp/SystemMessage": "{{ timestamp, timestampFormatter(format: dddd L) }}",
-  "timestamp/MessageTimestamp": "{{ timestamp, timestampFormatter(calendar: true; format: h:mmA) }}",
+  "timestamp/DateSeparator": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/SystemMessage": "{{ timestamp | timestampFormatter(format: dddd L) }}",
+  "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(calendar: true; format: h:mmA) }}",
   "unban-command-args": "[@사용자이름]",
   "unban-command-description": "사용자 차단 해제",
   "unmute-command-args": "[@사용자이름]",

src/i18n/nl.json

@@ -122,9 +122,9 @@
   "searchResultsCount_one": "1 resultaat",
   "searchResultsCount_other": "{{ count }} resultaten",
   "this content could not be displayed": "Deze inhoud kan niet weergegeven worden",
-  "timestamp/DateSeparator": "{{ timestamp, timestampFormatter(calendar: true) }}",
-  "timestamp/SystemMessage": "{{ timestamp, timestampFormatter(format: dddd L) }}",
-  "timestamp/MessageTimestamp": "{{ timestamp, timestampFormatter(calendar: true; format: h:mmA) }}",
+  "timestamp/DateSeparator": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/SystemMessage": "{{ timestamp | timestampFormatter(format: dddd L) }}",
+  "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(calendar: true; format: h:mmA) }}",
   "unban-command-args": "[@gebruikersnaam]",
   "unban-command-description": "Een gebruiker debannen",
   "unmute-command-args": "[@gebruikersnaam]",

src/i18n/pt.json

@@ -124,9 +124,9 @@
   "searchResultsCount_one": "1 resultado",
   "searchResultsCount_other": "{{ count }} resultados",
   "this content could not be displayed": "este conteúdo não pôde ser exibido",
-  "timestamp/DateSeparator": "{{ timestamp, timestampFormatter(calendar: true) }}",
-  "timestamp/SystemMessage": "{{ timestamp, timestampFormatter(format: dddd L) }}",
-  "timestamp/MessageTimestamp": "{{ timestamp, timestampFormatter(calendar: true; format: h:mmA) }}",
+  "timestamp/DateSeparator": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/SystemMessage": "{{ timestamp | timestampFormatter(format: dddd L) }}",
+  "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(calendar: true; format: h:mmA) }}",
   "unban-command-args": "[@nomedeusuário]",
   "unban-command-description": "Desbanir um usuário",
   "unmute-command-args": "[@nomedeusuário]",

src/i18n/ru.json

@@ -126,9 +126,9 @@
   "searchResultsCount_one": "1 результат",
   "searchResultsCount_other": "{{ count }} результатов",
   "this content could not be displayed": "Этот контент не может быть отображен в данный момент",
-  "timestamp/DateSeparator": "{{ timestamp, timestampFormatter(calendar: true) }}",
-  "timestamp/SystemMessage": "{{ timestamp, timestampFormatter(format: dddd L) }}",
-  "timestamp/MessageTimestamp": "{{ timestamp, timestampFormatter(calendar: true; format: h:mmA) }}",
+  "timestamp/DateSeparator": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/SystemMessage": "{{ timestamp | timestampFormatter(format: dddd L) }}",
+  "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(calendar: true; format: h:mmA) }}",
   "unban-command-args": "[@имяпользователя]",
   "unban-command-description": "Разблокировать пользователя",
   "unmute-command-args": "[@имяпользователя]",

src/i18n/tr.json

@@ -122,9 +122,9 @@
   "searchResultsCount_one": "1 sonuç",
   "searchResultsCount_other": "{{ count }} sonuç",
   "this content could not be displayed": "bu içerik gösterilemiyor",
-  "timestamp/DateSeparator": "{{ timestamp, timestampFormatter(calendar: true) }}",
-  "timestamp/SystemMessage": "{{ timestamp, timestampFormatter(format: dddd L) }}",
-  "timestamp/MessageTimestamp": "{{ timestamp, timestampFormatter(calendar: true; format: h:mmA) }}",
+  "timestamp/DateSeparator": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/SystemMessage": "{{ timestamp | timestampFormatter(format: dddd L) }}",
+  "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(calendar: true; format: h:mmA) }}",
   "unban-command-args": "[@kullanıcıadı]",
   "unban-command-description": "Bir kullanıcının yasağını kaldır",
   "unmute-command-args": "[@kullanıcıadı]",