feat: JsonViewer add i18n support (#2766)

packages/semi-ui/jsonViewer/index.tsx

@@ -22,6 +22,8 @@ import {
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import { createPortal } from 'react-dom';
 import { isEqual } from "lodash";
+import LocaleConsumer from '../locale/localeConsumer';
+import { Locale } from '../locale/interface';
 const prefixCls = cssClasses.PREFIX;
 
 export type { JsonViewerOptions };
@@ -197,89 +199,102 @@ class JsonViewerCom extends BaseComponent<JsonViewerProps, JsonViewerState> {
 
     renderSearchBar() {
         return (
-            <div className={`${prefixCls}-search-bar`}>
-                <Input
-                    placeholder="查找"
-                    className={`${prefixCls}-search-bar-input`}
-                    onChange={(_value, e) => {
-                        e.preventDefault();
-                        if (!this.isComposing) {
-                            this.searchHandler();
-                        }
-                        this.searchInputRef.current?.focus();
-                    }}
-                    onCompositionStart={() => {
-                        this.isComposing = true;
-                    }}
-                    onCompositionEnd={() => {
-                        this.isComposing = false;
-                        this.searchHandler();
-                        this.searchInputRef.current?.focus();
-                    }}
-                    ref={this.searchInputRef}
-                />
-                {this.renderSearchOptions()}
-                <ButtonGroup>
-                    <Button
-                        icon={<IconChevronLeft />}
-                        onClick={e => {
-                            e.preventDefault();
-                            this.foundation.prevSearch();
-                        }}
-                    />
-                    <Button
-                        icon={<IconChevronRight />}
-                        onClick={e => {
-                            e.preventDefault();
-                            this.foundation.nextSearch();
-                        }}
-                    />
-                </ButtonGroup>
-                <Button
-                    icon={<IconClose />}
-                    size="small"
-                    theme={'borderless'}
-                    type={'tertiary'}
-                    onClick={() => this.foundation.showSearchBar()}
-                />
-            </div>
+            <LocaleConsumer
+                componentName="JsonViewer"
+            >
+                {(locale: Locale['JsonViewer'], localeCode: Locale['code']) => (
+                    <div className={`${prefixCls}-search-bar`}>
+                        <Input
+                            placeholder={locale.search}
+                            className={`${prefixCls}-search-bar-input`}
+                            onChange={(_value, e) => {
+                                e.preventDefault();
+                                if (!this.isComposing) {
+                                    this.searchHandler();
+                                }
+                                this.searchInputRef.current?.focus();
+                            }}
+                            onCompositionStart={() => {
+                                this.isComposing = true;
+                            }}
+                            onCompositionEnd={() => {
+                                this.isComposing = false;
+                                this.searchHandler();
+                                this.searchInputRef.current?.focus();
+                            }}
+                            ref={this.searchInputRef}
+                        />
+                        {this.renderSearchOptions()}
+                        <ButtonGroup>
+                            <Button
+                                icon={<IconChevronLeft />}
+                                onClick={e => {
+                                    e.preventDefault();
+                                    this.foundation.prevSearch();
+                                }}
+                            />
+                            <Button
+                                icon={<IconChevronRight />}
+                                onClick={e => {
+                                    e.preventDefault();
+                                    this.foundation.nextSearch();
+                                }}
+                            />
+                        </ButtonGroup>
+                        <Button
+                            icon={<IconClose />}
+                            size="small"
+                            theme={'borderless'}
+                            type={'tertiary'}
+                            onClick={() => this.foundation.showSearchBar()}
+                        />
+                    </div>
+                )}
+            </LocaleConsumer>
         );
     }
 
     renderReplaceBar() {
         const { readOnly } = this.props.options;
         return (
-            <div className={`${prefixCls}-replace-bar`}>
-                <Input
-                    placeholder="替换"
-                    className={`${prefixCls}-replace-bar-input`}
-                    onChange={(value, e) => {
-                        e.preventDefault();
-                    }}
-                    ref={this.replaceInputRef}
-                />
-                <Button
-                    disabled={readOnly}
-                    onClick={() => {
-                        const value = this.replaceInputRef.current?.value;
-                        this.foundation.replace(value);
-                    }}
-                >
-                    替换
-                </Button>
-                <Button
-                    disabled={readOnly}
-                    onClick={() => {
-                        const value = this.replaceInputRef.current?.value;
-                        this.foundation.replaceAll(value);
-                    }}
-                >
-                    全部替换
-                </Button>
-            </div>
+            <LocaleConsumer
+                componentName="JsonViewer"
+            >
+                {(locale: Locale['JsonViewer'], localeCode: Locale['code']) => (
+                    <div className={`${prefixCls}-replace-bar`}>
+                        <Input
+                            placeholder={locale.replace}
+                            className={`${prefixCls}-replace-bar-input`}
+                            onChange={(value, e) => {
+                                e.preventDefault();
+                            }}
+                            ref={this.replaceInputRef}
+                        />
+                        <Button
+                            style={{ width: 'fit-content' }}
+                            disabled={readOnly}
+                            onClick={() => {
+                                const value = this.replaceInputRef.current?.value;
+                                this.foundation.replace(value);
+                            }}
+                        >
+                            {locale.replace}    
+                        </Button>
+                        <Button
+                            style={{ width: 'fit-content' }}
+                            disabled={readOnly}
+                            onClick={() => {
+                                const value = this.replaceInputRef.current?.value;
+                                this.foundation.replaceAll(value);
+                            }}
+                        >
+                            {locale.replaceAll}
+                        </Button>
+                    </div>
+                )}
+            </LocaleConsumer>
         );
     }
-
     render() {
         let isDragging = false;
         const { width, className, style, showSearch = true, ...rest } = this.props;

packages/semi-ui/locale/_story/locale.stories.jsx

@@ -21,7 +21,8 @@ import {
     Image,
     Form,
     Nav,
-    InputNumber
+    InputNumber,
+    JsonViewer
 } from '../../index';
 
 import zh_CN from '@douyinfe/semi-ui/locale/source/zh_CN';
@@ -485,6 +486,11 @@ const I18nComponent2 = (props) => {
                     collapseButton: true,
                 }}
             />
+            <h5>JsonViewer</h5>
+            <JsonViewer height={100} width={700} value={`{
+                "name": "Semi",
+                "version": "0.0.0"
+            }`} />
         </>
     );
 };

packages/semi-ui/locale/interface.ts

@@ -189,5 +189,10 @@ export interface Locale {
         finish: string
     };
     InputNumber: {
+    };
+    JsonViewer: {
+        search: string;
+        replace: string;
+        replaceAll: string
     }
 }

packages/semi-ui/locale/source/ar.ts

@@ -189,7 +189,12 @@ const local: Locale = {
         prev: 'السابق',
         finish: 'إنهاء',
     },
-    InputNumber: {}
+    InputNumber: {},
+    JsonViewer: {
+        search: 'بحث',
+        replace: 'استبدل',
+        replaceAll: 'استبدل الكل',
+    },
 };
 
 // [i18n-Arabic]

packages/semi-ui/locale/source/de.ts

@@ -189,7 +189,12 @@ const local: Locale = {
         prev: 'Zurück',
         finish: 'Fertig',
     },
-    InputNumber: {}
+    InputNumber: {},
+    JsonViewer: {
+        search: 'Suchen',
+        replace: 'Ersetzen',
+        replaceAll: 'Alle ersetzen',
+    },
 };
 
 // [i18n-German]

packages/semi-ui/locale/source/en_GB.ts

@@ -189,7 +189,12 @@ const local: Locale = {
         prev: 'Prev',
         finish: 'Finish',
     },
-    InputNumber: {}
+    InputNumber: {},
+    JsonViewer: {
+        search: 'Search',
+        replace: 'Replace',
+        replaceAll: 'Replace All',
+    },
 };
 
 // [i18n-English(GB)]

packages/semi-ui/locale/source/en_US.ts

@@ -189,7 +189,12 @@ const local: Locale = {
         prev: 'Prev',
         finish: 'Finish',
     },
-    InputNumber: {}
+    InputNumber: {},
+    JsonViewer: {
+        search: 'Search',
+        replace: 'Replace',
+        replaceAll: 'Replace All',
+    },
 };
 
 // [i18n-English(US)]

packages/semi-ui/locale/source/es.ts

@@ -194,7 +194,12 @@ const locale: Locale = {
         prev: 'Anterior',
         finish: 'Finalizar',
     },
-    InputNumber: {}
+    InputNumber: {},
+    JsonViewer: {
+        search: 'Buscar',
+        replace: 'Reemplazar',
+        replaceAll: 'Reemplazar todo',
+    },
 };
 
 export default locale;

packages/semi-ui/locale/source/fr.ts

@@ -189,7 +189,12 @@ const local: Locale = {
         prev: 'Précédent',
         finish: 'Terminer',
     },
-    InputNumber: {}
+    InputNumber: {},
+    JsonViewer: {
+        search: 'Rechercher',
+        replace: 'Remplacer',
+        replaceAll: 'Remplacer tout',
+    },
 };
 
 // [i18n-French]

packages/semi-ui/locale/source/id_ID.ts

@@ -189,7 +189,12 @@ const local: Locale = {
         prev: 'Sebelumnya',
         finish: 'Selesai',
     },
-    InputNumber: {}
+    InputNumber: {},
+    JsonViewer: {
+        search: 'Cari',
+        replace: 'Ganti',
+        replaceAll: 'Ganti Semua',
+    },
 };
 
 // [i18n-Indonesia(ID)]

packages/semi-ui/locale/source/it.ts

@@ -189,7 +189,12 @@ const local: Locale = {
         prev: 'Indietro',
         finish: 'Fine',
     },
-    InputNumber: {}
+    InputNumber: {},
+    JsonViewer: {
+        search: 'Cerca',
+        replace: 'Sostituisci',
+        replaceAll: 'Sostituisci tutto',
+    },
 };
 
 // [i18n-Italian]

packages/semi-ui/locale/source/ja_JP.ts

@@ -190,7 +190,12 @@ const local: Locale = {
         prev: '前へ',
         finish: '完了',
     },
-    InputNumber: {}
+    InputNumber: {},
+    JsonViewer: {
+        search: '検索',
+        replace: '置換',
+        replaceAll: 'すべて置換',
+    },
 };
 
 // [i18n-Japan]

packages/semi-ui/locale/source/ko_KR.ts

@@ -190,7 +190,12 @@ const local: Locale = {
         prev: '이전',
         finish: '완료',
     },
-    InputNumber: {}
+    InputNumber: {},
+    JsonViewer: {
+        search: '검색',
+        replace: '교체',
+        replaceAll: '모두 교체',
+    },
 };
 
 // [i18n-Korea]

packages/semi-ui/locale/source/ms_MY.ts

@@ -189,7 +189,12 @@ const local: Locale = {
         prev: 'Sebelumnya',
         finish: 'Selesai',
     },
-    InputNumber: {}
+    InputNumber: {},
+    JsonViewer: {
+        search: 'Cari',
+        replace: 'Ganti',
+        replaceAll: 'Ganti Semua',
+    },
 };
 
 // [i18n-Malaysia(MY)]

packages/semi-ui/locale/source/nl_NL.ts

@@ -196,7 +196,12 @@ const local: Locale = {
         prev: 'Vorige',
         finish: 'Voltooien',
     },  
-    InputNumber: {}
+    InputNumber: {},
+    JsonViewer: {
+        search: 'Zoeken',
+        replace: 'Vervangen',
+        replaceAll: 'Alle vervangen',
+    },
 };
 
 export default local;

packages/semi-ui/locale/source/pl_PL.ts

@@ -197,7 +197,12 @@ const local: Locale = {
         prev: 'Poprzedni',
         finish: 'Zakończ',
     },
-    InputNumber: {}
+    InputNumber: {},
+    JsonViewer: {
+        search: 'Szukaj',
+        replace: 'Zastąp',
+        replaceAll: 'Zastąp wszystko',
+    },
 };
 
 export default local;

packages/semi-ui/locale/source/pt_BR.ts

@@ -197,7 +197,12 @@ const local: Locale = {
         prev: 'Anterior',
         finish: 'Finalizar',
     },
-    InputNumber: {}
+    InputNumber: {},
+    JsonViewer: {
+        search: 'Pesquisar',
+        replace: 'Substituir',
+        replaceAll: 'Substituir tudo',
+    },
 };
 
 // 葡萄牙语

packages/semi-ui/locale/source/ro.ts

@@ -189,7 +189,12 @@ const local: Locale = {
         prev: 'Anterior',
         finish: 'Finalizare',
     },
-    InputNumber: {}
+    InputNumber: {},
+    JsonViewer: {
+        search: 'Căutare',
+        replace: 'Înlocuiește',
+        replaceAll: 'Înlocuiește toate',
+    },
 };
 
 // [i18n-Romanian] 罗马尼亚语

packages/semi-ui/locale/source/ru_RU.ts

@@ -192,7 +192,12 @@ const local: Locale = {
         prev: 'Предыдущий',
         finish: 'Завершить',
     },
-    InputNumber: {}
+    InputNumber: {},
+    JsonViewer: {
+        search: 'Поиск',
+        replace: 'Заменить',
+        replaceAll: 'Заменить все',
+    },
 };
 
 // [i18n-Russia] 俄罗斯语

packages/semi-ui/locale/source/sv_SE.ts

@@ -194,7 +194,12 @@ const local: Locale = {
         prev: 'Föregående',
         finish: 'Slutför',
     },
-    InputNumber: {}
+    InputNumber: {},
+    JsonViewer: {
+        search: 'Sök',
+        replace: 'Ersätt',
+        replaceAll: 'Ersätt alla',
+    },
 };
 
 export default local;

packages/semi-ui/locale/source/th_TH.ts

@@ -193,7 +193,12 @@ const local: Locale = {
         prev: 'ก่อนหน้า',
         finish: 'สำเร็จ',
     },
-    InputNumber: {}
+    InputNumber: {},
+    JsonViewer: {
+        search: 'ค้นหา',
+        replace: 'แทนที่',
+        replaceAll: 'แทนที่ทั้งหมด',
+    },
 };
 
 // [i18n-Thai]

packages/semi-ui/locale/source/tr_TR.ts

@@ -191,6 +191,11 @@ const local: Locale = {
         finish: 'Tamamla',
     },
     InputNumber: {},
+    JsonViewer: {
+        search: 'Ara',
+        replace: 'Değiştir',
+        replaceAll: 'Tümünü değiştir',
+    },
 };
 
 // [i18n-Turkish] 

packages/semi-ui/locale/source/vi_VN.ts

@@ -192,7 +192,12 @@ const local: Locale = {
         prev: 'Trước đó',
         finish: 'Hoàn tất',
     },
-    InputNumber: {}
+    InputNumber: {},
+    JsonViewer: {
+        search: 'Tìm kiếm',
+        replace: 'Thay thế',
+        replaceAll: 'Thay thế tất cả',
+    },
 };
 
 // [i18n-Vietnam] 越南语

packages/semi-ui/locale/source/zh_CN.ts

@@ -190,7 +190,12 @@ const local: Locale = {
         prev: '上一步',
         finish: '完成',
     },
-    InputNumber: {}
+    InputNumber: {},
+    JsonViewer: {
+        search: '查找',
+        replace: '替换',
+        replaceAll: '全部替换',
+    },
 };
 
 // 中文

packages/semi-ui/locale/source/zh_TW.ts

@@ -190,7 +190,12 @@ const local: Locale = {
         prev: '上一步',
         finish: '完成',
     },
-    InputNumber: {}
+    InputNumber: {},
+    JsonViewer: {
+        search: '查找',
+        replace: '替換',
+        replaceAll: '全部替換',
+    },
 };
 
 // 中文