feat(components/loading): 国际化

js-tool-pack · Feb 22, 2024 · b94a830 · b94a830
1 parent 2f4a926
commit b94a830
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 2 deletions.
diff --git a/packages/components/src/config-provider/config-provider.types.ts b/packages/components/src/config-provider/config-provider.types.ts
@@ -2,6 +2,7 @@ import type {
   PopConfirmLocale,
   DatePickerLocale,
   CalendarLocale,
+  LoadingLocale,
   SelectLocale,
   InputLocale,
   EmptyLocale,
@@ -12,6 +13,7 @@ export interface Locale {
   datePicker: Partial<DatePickerLocale>;
   popConfirm: Partial<PopConfirmLocale>;
   calendar: Partial<CalendarLocale>;
+  loading: Partial<LoadingLocale>;
   select: Partial<SelectLocale>;
   input: Partial<InputLocale>;
   empty: Partial<EmptyLocale>;

diff --git a/packages/components/src/loading/Loading.tsx b/packages/components/src/loading/Loading.tsx
@@ -5,10 +5,12 @@ import {
 } from '~/transition';
 import { useScrollLock, getClasses, useVisible, Z_INDEX } from '@pkg/shared';
 import React, { useCallback, useMemo, useRef } from 'react';
+import { useLocale } from '~/config-provider/useLocale';
 import { Loading as LoadingIcon } from '@pkg/icons';
 import { getClassNames } from '@tool-pack/basic';
 import { RequiredPart } from '@tool-pack/types';
 import { LoadingProps } from './loading.types';
+import EnUS from '~/loading/locale/en-US';
 import { createPortal } from 'react-dom';
 import { Icon } from '~/icon';
 
@@ -20,7 +22,6 @@ const cls = getClasses(
 
 const defaultProps = {
   background: 'var(--t-mask-bg-color)',
-  text: 'loading...',
   zIndex: Z_INDEX,
   // color: 'var(--t-text-color)',
   mode: 'insert',
@@ -30,8 +31,10 @@ const defaultProps = {
  * loading组件
  */
 export const Loading: React.FC<LoadingProps> = (props) => {
+  const locale = useLocale('loading', EnUS);
   const {
     visible: outerVisible,
+    text = locale.text,
     wrapperAttrs = {},
     closeOnClick,
     attrs = {},
@@ -43,7 +46,6 @@ export const Loading: React.FC<LoadingProps> = (props) => {
     color,
     mode,
     icon,
-    text,
   } = props as RequiredPart<LoadingProps, keyof typeof defaultProps>;
 
   const wrapperRef = useRef<HTMLDivElement>(null);

diff --git a/packages/components/src/loading/loading.types.ts b/packages/components/src/loading/loading.types.ts
@@ -14,3 +14,7 @@ export interface LoadingProps extends Omit<PropsBase, 'ref'> {
   zIndex?: number;
   color?: string;
 }
+
+export interface LoadingLocale {
+  text: string;
+}
diff --git a/packages/components/src/loading/locale/en-US.ts b/packages/components/src/loading/locale/en-US.ts
@@ -0,0 +1,7 @@
+import type { LoadingLocale } from '../loading.types';
+
+const locale: LoadingLocale = {
+  text: 'loading...',
+};
+
+export default locale;
diff --git a/packages/components/src/loading/locale/zh-CN.ts b/packages/components/src/loading/locale/zh-CN.ts
@@ -0,0 +1,7 @@
+import type { LoadingLocale } from '../loading.types';
+
+const locale: LoadingLocale = {
+  text: '加载中...',
+};
+
+export default locale;
diff --git a/packages/react-ui/src/locale/en-US.ts b/packages/react-ui/src/locale/en-US.ts
@@ -1,6 +1,7 @@
 import datePicker from '@pkg/components/date-picker/locale/en-US';
 import popConfirm from '@pkg/components/pop-confirm/locale/en-US';
 import calendar from '@pkg/components/calendar/locale/en-US';
+import loading from '@pkg/components/loading/locale/en-US';
 import select from '@pkg/components/select/locale/en-US';
 import input from '@pkg/components/input/locale/en-US';
 import empty from '@pkg/components/empty/locale/en-US';
@@ -11,6 +12,7 @@ export default {
   popConfirm,
   datePicker,
   calendar,
+  loading,
   select,
   empty,
   input,

diff --git a/packages/react-ui/src/locale/zh-CN.ts b/packages/react-ui/src/locale/zh-CN.ts
@@ -1,6 +1,7 @@
 import popConfirm from '@pkg/components/pop-confirm/locale/zh-CN';
 import datePicker from '@pkg/components/date-picker/locale/zh-CN';
 import calendar from '@pkg/components/calendar/locale/zh-CN';
+import loading from '@pkg/components/loading/locale/zh-CN';
 import select from '@pkg/components/select/locale/zh-CN';
 import input from '@pkg/components/input/locale/zh-CN';
 import empty from '@pkg/components/empty/locale/zh-CN';
@@ -11,6 +12,7 @@ export default {
   popConfirm,
   datePicker,
   calendar,
+  loading,
   select,
   empty,
   input,