feat(components/select): 国际化

Author: mengxinssfd

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

@@ -1,8 +1,14 @@
-import type { PopConfirmLocale, CalendarLocale, EmptyLocale } from '../';
+import type {
+  PopConfirmLocale,
+  CalendarLocale,
+  SelectLocale,
+  EmptyLocale,
+} from '../';
 
 export interface Locale {
   popConfirm: Partial<PopConfirmLocale>;
   calendar: Partial<CalendarLocale>;
+  select: Partial<SelectLocale>;
   empty: Partial<EmptyLocale>;
 }
 

packages/components/src/select/Select.tsx

@@ -17,17 +17,18 @@ import {
   filterOptions,
 } from '~/select/utils';
 import { useStateWithTrailClear, useForwardRef, getClasses } from '@pkg/shared';
+import { useLocale } from '~/config-provider/useLocale';
 import { Selection, Menu } from '~/select/components';
 import type { RequiredPart } from '@tool-pack/types';
 import { transitionCBAdapter } from '~/transition';
 import { getClassNames } from '@tool-pack/basic';
 import { InputPopover } from '@pkg/components';
 import PropTypes from 'prop-types';
+import EnUS from './locale/en-US';
 
 const cls = getClasses('select', [], ['selected', 'clearable']);
 const defaultProps = {
   ignoreComposition: true,
-  placeholder: 'select',
   widthByTrigger: true,
   placement: 'bottom',
   showArrow: false,
@@ -41,13 +42,14 @@ const _Select: React.FC<SelectStaticProps> = React.forwardRef<
   HTMLLabelElement,
   SelectStaticProps
 >((props, ref) => {
+  const locale = useLocale('select', EnUS);
   const {
+    placeholder = locale.placeholder,
     ignoreComposition,
     onVisibleChange,
     controllerRef,
     popoverAttrs,
     maxTagCount,
-    placeholder,
     attrs = {},
     filterable,
     clearable,

packages/components/src/select/demo/multiple.tsx

@@ -18,7 +18,6 @@ const App: React.FC = () => {
           setValue(value);
           console.log(values, options);
         }}
-        placeholder="select"
         options={options}
         value={value}
         multiple
@@ -29,7 +28,6 @@ const App: React.FC = () => {
           setValue(value);
           console.log(values, options);
         }}
-        placeholder="select"
         options={options}
         value={value}
         disabled

packages/components/src/select/index.ts

@@ -4,6 +4,7 @@ export type {
   SelectOptionsItem,
   SelectDivider,
   SelectOption,
+  SelectLocale,
   SelectProps,
 } from './select.types';
 export * from './Select';

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

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

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

@@ -0,0 +1,7 @@
+import type { SelectLocale } from '../select.types';
+
+const locale: SelectLocale = {
+  placeholder: '请选择',
+};
+
+export default locale;

packages/components/src/select/select.types.ts

@@ -107,3 +107,7 @@ export type SelectFC = <
 >(
   props: SelectProps<Multiple, ValueType>,
 ) => React.ReactElement;
+
+export interface SelectLocale {
+  placeholder: string;
+}

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

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

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

@@ -2,9 +2,11 @@ import popConfirm from '@pkg/components/pop-confirm/locale/zh-CN';
 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';
 
 export default {
   popConfirm,
   calendar,
+  select,
   empty,
 } satisfies Locale;