feat(dialog): support i18n #TINFR-973 (#3266)

atinc · Nov 21, 2024 · 194f20b · 194f20b
1 parent 7cf544c
commit 194f20b
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 21 deletions.
diff --git a/src/dialog/confirm.config.ts b/src/dialog/confirm.config.ts
@@ -1,5 +1,6 @@
 import { InjectionToken } from '@angular/core';
 import { ThyFormGroupFooterAlign } from 'ngx-tethys/form';
+import { injectLocale, ThyI18nService } from 'ngx-tethys/i18n';
 import { Observable } from 'rxjs';
 
 /**
@@ -56,6 +57,9 @@ export interface ThyConfirmConfig {
 
 export const THY_CONFIRM_DEFAULT_OPTIONS = new InjectionToken<ThyConfirmConfig>('thy-confirm-default-options');
 
+/**
+ * @deprecated
+ */
 export const THY_CONFIRM_DEFAULT_OPTIONS_VALUE = {
     title: '确认删除',
     okText: '确定',
@@ -64,7 +68,19 @@ export const THY_CONFIRM_DEFAULT_OPTIONS_VALUE = {
     footerAlign: 'left'
 };
 
+function useConfirmDefaultOptions() {
+    const locale = injectLocale('dialog');
+    return {
+        title: locale().title,
+        okText: locale().ok,
+        okType: 'danger',
+        cancelText: locale().cancel,
+        footerAlign: 'left'
+    };
+}
+
 export const THY_CONFIRM_DEFAULT_OPTIONS_PROVIDER = {
     provide: THY_CONFIRM_DEFAULT_OPTIONS,
-    useValue: THY_CONFIRM_DEFAULT_OPTIONS_VALUE
+    useFactory: useConfirmDefaultOptions,
+    deps: [ThyI18nService]
 };
diff --git a/src/dialog/confirm/confirm.component.ts b/src/dialog/confirm/confirm.component.ts
@@ -1,15 +1,16 @@
 import { ThyFormDirective, ThyFormGroupFooterAlign, ThyFormGroupFooter } from 'ngx-tethys/form';
 import { finalize } from 'rxjs/operators';
 
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit, Signal, inject } from '@angular/core';
 
 import { NgClass } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { ThyButton } from 'ngx-tethys/button';
 import { ThyDialogBody } from '../body/dialog-body.component';
-import { ThyConfirmConfig, THY_CONFIRM_DEFAULT_OPTIONS, THY_CONFIRM_DEFAULT_OPTIONS_VALUE } from '../confirm.config';
+import { ThyConfirmConfig, THY_CONFIRM_DEFAULT_OPTIONS } from '../confirm.config';
 import { ThyDialogRef } from '../dialog-ref';
 import { ThyDialogHeader } from '../header/dialog-header.component';
+import { injectLocale, ThyDialogLocale } from 'ngx-tethys/i18n';
 
 /**
  * @private
@@ -25,6 +26,7 @@ export class ThyConfirm implements OnInit, OnDestroy {
     private dialogRef = inject<ThyDialogRef<ThyConfirm>>(ThyDialogRef);
     private changeDetectorRef = inject(ChangeDetectorRef);
     private defaultConfig = inject(THY_CONFIRM_DEFAULT_OPTIONS);
+    private locale: Signal<ThyDialogLocale> = injectLocale('dialog');
 
     loading: boolean;
 
@@ -45,7 +47,16 @@ export class ThyConfirm implements OnInit, OnDestroy {
     public footerAlign: ThyFormGroupFooterAlign;
 
     constructor() {
-        this.defaultConfig = { ...(THY_CONFIRM_DEFAULT_OPTIONS_VALUE as ThyConfirmConfig), ...this.defaultConfig };
+        this.defaultConfig = {
+            ...{
+                title: this.locale().title,
+                okText: this.locale().ok,
+                okType: 'danger',
+                cancelText: this.locale().cancel,
+                footerAlign: 'left'
+            },
+            ...this.defaultConfig
+        };
     }
 
     ngOnInit() {

diff --git a/src/dialog/examples/confirm/confirm.component.ts b/src/dialog/examples/confirm/confirm.component.ts
@@ -38,23 +38,7 @@ export class ThyDialogConfirmExampleComponent {
 
     openDangerConfirm() {
         this.thyDialog.confirm({
-            title: '确认删除',
-            content: '确认要删除这条任务<code>21111</code>吗？</script>',
-            footerAlign: 'right',
-            okType: 'danger',
-            okText: '确认删除',
-            cancelText: '取消删除',
-            onCancel: () => {
-                console.log('取消删除');
-            },
-            onOk: () => {
-                return of([1]).pipe(
-                    delay(2000),
-                    map(() => {
-                        return false;
-                    })
-                );
-            }
+            content: '确认要删除这条任务<code>21111</code>吗？</script>'
         });
     }
 }
diff --git a/src/i18n/i18n.ts b/src/i18n/i18n.ts
@@ -9,6 +9,7 @@ export type ThyModuleType =
     | 'strength'
     | 'guider'
     | 'copy'
+    | 'dialog'
     | 'select'
     | 'treeSelect'
     | 'cascader'
@@ -30,6 +31,7 @@ export interface ThyI18nLocale {
     strength: ThyStrengthLocale;
     guider: ThyGuiderLocale;
     copy: ThyCopyLocale;
+    dialog: ThyDialogLocale;
     select: ThySelectLocale;
     treeSelect: ThyTreeSelectLocale;
     cascader: ThyCascaderLocale;
@@ -134,6 +136,12 @@ export interface ThyCopyLocale {
     error: string;
 }
 
+export interface ThyDialogLocale {
+    title: string;
+    ok: string;
+    cancel: string;
+}
+
 export interface ThySelectLocale {
     placeholder: string;
     empty: string;

diff --git a/src/i18n/locales/en-us.ts b/src/i18n/locales/en-us.ts
@@ -86,6 +86,11 @@ export default {
         success: 'Copied',
         error: 'Failed'
     },
+    dialog: {
+        title: 'Confirm',
+        ok: 'Ok',
+        cancel: 'Cancel'
+    },
     select: {
         placeholder: 'Please select',
         empty: 'No data available'

diff --git a/src/i18n/locales/zh-cn.ts b/src/i18n/locales/zh-cn.ts
@@ -87,6 +87,11 @@ export default {
         success: '复制成功',
         error: '复制失败'
     },
+    dialog: {
+        title: '确认删除',
+        ok: '确定',
+        cancel: '取消'
+    },
     select: {
         placeholder: '请选择节点',
         empty: '暂时没有数据可选'