feat(i18n): localize support to provide dynamic replace text (#186)

* feat(i18n): localize support to provide dynamic replace text * fix(scrollable): remove warning about scrollable div key
DTStack · Jun 21, 2021 · ad1bbc1 · ad1bbc1
1 parent c2fb3d5
commit ad1bbc1
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 5 deletions.
diff --git a/src/components/scrollable/index.tsx b/src/components/scrollable/index.tsx
@@ -63,10 +63,10 @@ export function Scrollable(props: IScrollbarProps) {
             ref={scroller}
             {...(custom as any)}
             wrapperProps={{
-                renderer: ({ elementRef, style, ...restProps }) => {
+                renderer: ({ elementRef, style, key, ...restProps }) => {
                     const currentTop = scroller.current?.scrollTop || 0;
                     return (
-                        <>
+                        <React.Fragment key={key}>
                             <div
                                 {...restProps}
                                 ref={elementRef}
@@ -79,7 +79,7 @@ export function Scrollable(props: IScrollbarProps) {
                                     isShowShadow && currentTop > 0 && 'active'
                                 )}
                             />
-                        </>
+                        </React.Fragment>
                     );
                 },
             }}

diff --git a/src/i18n/localize.tsx b/src/i18n/localize.tsx
@@ -9,10 +9,37 @@ export interface ILocalizeProps {
     defaultValue?: string;
 }
 
-export function localize(sourceKey: string, defaultValue: string): any {
-    const localizedValue = container
+const LOCALIZE_REPLACED_WORD = '${i}';
+
+/**
+ * Returns the international text located by source key，or the default value if it is not find
+ * For examples:
+ * ```ts
+ * localize('id','default value'); // hello ${i}, ${i}
+ * localize('id','default value', 'world'); // hello world, ${i}
+ * localize('id','default value', 'world', 'molecule'); // hello world, molecule
+ * ```
+ * @param sourceKey The key value located in the source internaional text
+ * @param defaultValue The default value to be used when not find the international text
+ * @param args If provided, it will used as the values to be replaced in the international text
+ * @returns
+ */
+export function localize(
+    sourceKey: string,
+    defaultValue: string,
+    ...args: string[]
+): any {
+    let localizedValue = container
         .resolve(LocaleService)
         .localize(sourceKey, defaultValue);
+    if (args.length) {
+        args.forEach((replacedVal) => {
+            localizedValue = localizedValue.replace(
+                LOCALIZE_REPLACED_WORD,
+                replacedVal
+            );
+        });
+    }
     return localizedValue;
 }