feat(components/input): 国际化

Author: mengxinssfd

packages/components/src/config-provider/config-provider.types.ts

@@ -2,13 +2,15 @@ import type {
   PopConfirmLocale,
   CalendarLocale,
   SelectLocale,
+  InputLocale,
   EmptyLocale,
 } from '../';
 
 export interface Locale {
   popConfirm: Partial<PopConfirmLocale>;
   calendar: Partial<CalendarLocale>;
   select: Partial<SelectLocale>;
+  input: Partial<InputLocale>;
   empty: Partial<EmptyLocale>;
 }
 

packages/components/src/input/Input.tsx

@@ -5,10 +5,12 @@ import {
   useWatch,
 } from '@pkg/shared';
 import { InputSwitch, InputSuffix, InputSkin } from './components';
+import { useLocale } from '~/config-provider/useLocale';
 import type { RequiredPart } from '@tool-pack/types';
 import { getClassNames } from '@tool-pack/basic';
 import type { InputProps } from './input.types';
 import React, { useState, useRef } from 'react';
+import EnUS from '~/input/locale/en-US';
 
 const cls = getClasses(
   'input',
@@ -26,10 +28,11 @@ export const Input: React.FC<InputProps> = React.forwardRef<
   HTMLInputElement,
   InputProps
 >((props, ref) => {
+  const locale = useLocale('input', EnUS);
   const {
+    placeholder = locale.placeholder,
     showPasswordOn,
     rootAttrs = {},
-    placeholder,
     attrs = {},
     clearable,
     showCount,

packages/components/src/input/demo/basic.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 const App: React.FC = () => {
   return (
     <>
-      <Input placeholder="input" />
+      <Input />
       <br />
       <Input placeholder="disabled" disabled />
     </>

packages/components/src/input/index.ts

@@ -1,2 +1,2 @@
-export type { InputProps } from './input.types';
+export type { InputLocale, InputProps } from './input.types';
 export * from './Input';

packages/components/src/input/input.types.ts

@@ -35,3 +35,7 @@ export interface InputProps extends BaseInputProps, TextareaProps {
   value?: string;
   size?: Size;
 }
+
+export interface InputLocale {
+  placeholder: string;
+}

packages/components/src/input/locale/en-US.ts

@@ -0,0 +1,7 @@
+import type { InputLocale } from '../input.types';
+
+const locale: InputLocale = {
+  placeholder: 'Please input',
+};
+
+export default locale;

packages/components/src/input/locale/zh-CN.ts

@@ -0,0 +1,7 @@
+import type { InputLocale } from '../input.types';
+
+const locale: InputLocale = {
+  placeholder: '请输入',
+};
+
+export default locale;

packages/react-ui/src/locale/en-US.ts

@@ -1,6 +1,7 @@
 import popConfirm from '@pkg/components/pop-confirm/locale/en-US';
 import calendar from '@pkg/components/calendar/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';
 import type { Locale } from '@pkg/components';
 
@@ -9,4 +10,5 @@ export default {
   calendar,
   select,
   empty,
+  input,
 } satisfies Locale;

packages/react-ui/src/locale/zh-CN.ts

@@ -3,10 +3,12 @@ import calendar from '@pkg/components/calendar/locale/zh-CN';
 import empty from '@pkg/components/empty/locale/zh-CN';
 import type { Locale } from '@pkg/components';
 import select from '~/select/locale/zh-CN';
+import input from '~/input/locale/zh-CN';
 
 export default {
   popConfirm,
   calendar,
   select,
   empty,
+  input,
 } satisfies Locale;