refactoring: rewrite useLocale return value (#40884)

* refactoring: rewrite useLocale return

* rename

* revert name

components/calendar/generateCalendar.tsx

@@ -236,7 +236,7 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
       [monthFullCellRender, monthCellRender],
     );
 
-    const contextLocale = useLocale('Calendar', getDefaultLocale);
+    const [contextLocale] = useLocale('Calendar', getDefaultLocale);
 
     return wrapSSR(
       <div

components/date-picker/generatePicker/generateRangePicker.tsx

@@ -102,7 +102,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
       blur: () => innerRef.current?.blur(),
     }));
 
-    const contextLocale = useLocale('Calendar', enUS);
+    const [contextLocale] = useLocale('Calendar', enUS);
 
     const locale = { ...contextLocale, ...props.locale! };
 

components/date-picker/generatePicker/generateSinglePicker.tsx

@@ -122,7 +122,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
           </>
         );
 
-        const contextLocale = useLocale('DatePicker', enUS);
+        const [contextLocale] = useLocale('DatePicker', enUS);
 
         const locale = { ...contextLocale, ...props.locale! };
 

components/empty/index.tsx

@@ -46,7 +46,7 @@ const Empty: CompoundedComponent = ({
   const prefixCls = getPrefixCls('empty', customizePrefixCls);
   const [wrapSSR, hashId] = useStyle(prefixCls);
 
-  const locale = useLocale('Empty');
+  const [locale] = useLocale('Empty');
 
   const des = typeof description !== 'undefined' ? description : locale?.description;
   const alt = typeof des === 'string' ? des : 'empty';

components/form/FormItemLabel.tsx

@@ -53,7 +53,7 @@ const FormItemLabel: React.FC<FormItemLabelProps & { required?: boolean; prefixC
   requiredMark,
   tooltip,
 }) => {
-  const formLocale = useLocale('Form');
+  const [formLocale] = useLocale('Form');
 
   const {
     vertical,

components/locale/useLocale.ts

@@ -9,16 +9,28 @@ export type LocaleComponentName = Exclude<keyof Locale, 'locale'>;
 const useLocale = <C extends LocaleComponentName = LocaleComponentName>(
   componentName: C,
   defaultLocale?: Locale[C] | (() => Locale[C]),
-): Locale[C] => {
+): readonly [NonNullable<Locale[C]>, string] => {
-  const antLocale = React.useContext<LocaleContextProps | undefined>(LocaleContext);
+  const fullLocale = React.useContext<LocaleContextProps | undefined>(LocaleContext);
-  return React.useMemo<NonNullable<Locale[C]>>(() => {
+
+  const getLocale = React.useMemo<NonNullable<Locale[C]>>(() => {
     const locale = defaultLocale || defaultLocaleData[componentName];
-    const localeFromContext = antLocale?.[componentName] ?? {};
+    const localeFromContext = fullLocale?.[componentName] ?? {};
     return {
       ...(typeof locale === 'function' ? locale() : locale),
       ...(localeFromContext || {}),
     };
-  }, [componentName, defaultLocale, antLocale]);
+  }, [componentName, defaultLocale, fullLocale]);
+
+  const getLocaleCode = React.useMemo<string>(() => {
+    const localeCode = fullLocale?.locale;
+    // Had use LocaleProvide but didn't set locale
+    if (fullLocale?.exist && !localeCode) {
+      return defaultLocaleData.locale;
+    }
+    return localeCode!;
+  }, [fullLocale]);
+
+  return [getLocale, getLocaleCode] as const;
 };
 
 export default useLocale;

components/modal/ConfirmDialog.tsx

@@ -81,7 +81,7 @@ export function ConfirmContent(
 
   const autoFocusButton = props.autoFocusButton === null ? false : props.autoFocusButton || 'ok';
 
-  const locale = useLocale('Modal');
+  const [locale] = useLocale('Modal');
 
   const mergedLocale = staticLocale || locale;
 

components/modal/PurePanel.tsx

@@ -58,7 +58,7 @@ export const Footer: React.FC<
     footer,
   } = props;
 
-  const locale = useLocale('Modal', getConfirmLocale());
+  const [locale] = useLocale('Modal', getConfirmLocale());
 
   return footer === undefined ? (
     <>

components/modal/useModal/HookModal.tsx

@@ -46,7 +46,7 @@ const HookModal: React.ForwardRefRenderFunction<HookModalRef, HookModalProps> =
 
   const mergedOkCancel = innerConfig.okCancel ?? innerConfig.type === 'confirm';
 
-  const contextLocale = useLocale('Modal', defaultLocale.Modal);
+  const [contextLocale] = useLocale('Modal', defaultLocale.Modal);
 
   return (
     <ConfirmDialog

components/pagination/Pagination.tsx

@@ -93,7 +93,7 @@ const Pagination: React.FC<PaginationProps> = ({
     return { prevIcon, nextIcon, jumpPrevIcon, jumpNextIcon };
   };
 
-  const contextLocale = useLocale('Pagination', enUS);
+  const [contextLocale] = useLocale('Pagination', enUS);
 
   const locale = { ...contextLocale, ...customLocale };
 

components/popconfirm/PurePanel.tsx

@@ -56,7 +56,7 @@ export const Overlay: React.FC<OverlayProps> = (props) => {
 
   const { getPrefixCls } = React.useContext(ConfigContext);
 
-  const contextLocale = useLocale('Popconfirm', defaultLocale.Popconfirm);
+  const [contextLocale] = useLocale('Popconfirm', defaultLocale.Popconfirm);
 
   return (
     <div className={`${prefixCls}-inner-content`}>

components/qrcode/index.tsx

@@ -53,7 +53,7 @@ const QRCode: React.FC<QRCodeProps> = (props) => {
     };
   }, [errorLevel, color, icon, iconSize, size, value]);
 
-  const locale = useLocale('QRCode');
+  const [locale] = useLocale('QRCode');
 
   if (!value) {
     if (process.env.NODE_ENV !== 'production') {

components/tour/panelRender.tsx

@@ -92,7 +92,7 @@ const TourPanel: React.FC<TourPanelProps> = ({ stepProps, current, type, indicat
     ghost: mergedType === 'primary',
   };
 
-  const contextLocale = useLocale('Tour', defaultLocale.Tour);
+  const [contextLocale] = useLocale('Tour', defaultLocale.Tour);
 
   return (
     <div

components/transfer/ListItem.tsx

@@ -43,7 +43,7 @@ const ListItem = <RecordType extends KeyWiseTransferItem>(props: ListItemProps<R
     title = String(renderedText);
   }
 
-  const contextLocale = useLocale('Transfer', defaultLocale.Transfer);
+  const [contextLocale] = useLocale('Transfer', defaultLocale.Transfer);
 
   const liProps: React.HTMLAttributes<HTMLLIElement> = { className, title };
 

components/transfer/index.tsx

@@ -367,7 +367,7 @@ const Transfer = <RecordType extends TransferItem = TransferItem>(
     hashId,
   );
 
-  const contextLocale = useLocale('Transfer', defaultLocale.Transfer);
+  const [contextLocale] = useLocale('Transfer', defaultLocale.Transfer);
 
   const listLocale = getLocale(contextLocale!);
 

components/typography/Base/index.tsx

@@ -135,7 +135,7 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
     ...restProps
   } = props;
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
-  const textLocale = useLocale('Text');
+  const [textLocale] = useLocale('Text');
 
   const typographyRef = React.useRef<HTMLElement>(null);
   const editIconRef = React.useRef<HTMLDivElement>(null);

components/upload/Upload.tsx

@@ -339,7 +339,7 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
 
   const [wrapSSR, hashId] = useStyle(prefixCls);
 
-  const contextLocale = useLocale('Upload', defaultLocale.Upload);
+  const [contextLocale] = useLocale('Upload', defaultLocale.Upload);
 
   const {
     showRemoveIcon,