refactoring: use hook replace LocaleReceiver (ant-design#40870)

* chore: rename useLocaleReceiver => useLocale * refactoring: use hook replace LocaleReceiver * fix * update snap * fix * update snap * fix * rename
RedJue · Apr 25, 2023 · e6e2f7a · e6e2f7a
1 parent 62a127e
commit e6e2f7a
Show file tree

Hide file tree

Showing 21 changed files with 611 additions and 693 deletions.
diff --git a/components/calendar/generateCalendar.tsx b/components/calendar/generateCalendar.tsx
@@ -10,7 +10,7 @@ import type {
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import * as React from 'react';
 import { ConfigContext } from '../config-provider';
-import LocaleReceiver from '../locale/LocaleReceiver';
+import useLocale from '../locale/useLocale';
 import CalendarHeader from './Header';
 import enUS from './locale/en_US';
 
@@ -236,60 +236,57 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
       [monthFullCellRender, monthCellRender],
     );
 
+    const contextLocale = useLocale('Calendar', getDefaultLocale);
+
     return wrapSSR(
-      <LocaleReceiver componentName="Calendar" defaultLocale={getDefaultLocale}>
-        {(contextLocale) => (
-          <div
-            className={classNames(
-              calendarPrefixCls,
-              {
-                [`${calendarPrefixCls}-full`]: fullscreen,
-                [`${calendarPrefixCls}-mini`]: !fullscreen,
-                [`${calendarPrefixCls}-rtl`]: direction === 'rtl',
-              },
-              className,
-              rootClassName,
-              hashId,
-            )}
-            style={style}
-          >
-            {headerRender ? (
-              headerRender({
-                value: mergedValue,
-                type: mergedMode,
-                onChange: onInternalSelect,
-                onTypeChange: triggerModeChange,
-              })
-            ) : (
-              <CalendarHeader
-                prefixCls={calendarPrefixCls}
-                value={mergedValue}
-                generateConfig={generateConfig}
-                mode={mergedMode}
-                fullscreen={fullscreen}
-                locale={contextLocale.lang}
-                validRange={validRange}
-                onChange={onInternalSelect}
-                onModeChange={triggerModeChange}
-              />
-            )}
-
-            <RCPickerPanel
-              value={mergedValue}
-              prefixCls={prefixCls}
-              locale={contextLocale.lang}
-              generateConfig={generateConfig}
-              dateRender={dateRender}
-              monthCellRender={(date) => monthRender(date, contextLocale.lang)}
-              onSelect={onInternalSelect}
-              mode={panelMode}
-              picker={panelMode}
-              disabledDate={mergedDisabledDate}
-              hideHeader
-            />
-          </div>
+      <div
+        className={classNames(
+          calendarPrefixCls,
+          {
+            [`${calendarPrefixCls}-full`]: fullscreen,
+            [`${calendarPrefixCls}-mini`]: !fullscreen,
+            [`${calendarPrefixCls}-rtl`]: direction === 'rtl',
+          },
+          className,
+          rootClassName,
+          hashId,
+        )}
+        style={style}
+      >
+        {headerRender ? (
+          headerRender({
+            value: mergedValue,
+            type: mergedMode,
+            onChange: onInternalSelect,
+            onTypeChange: triggerModeChange,
+          })
+        ) : (
+          <CalendarHeader
+            prefixCls={calendarPrefixCls}
+            value={mergedValue}
+            generateConfig={generateConfig}
+            mode={mergedMode}
+            fullscreen={fullscreen}
+            locale={contextLocale?.lang}
+            validRange={validRange}
+            onChange={onInternalSelect}
+            onModeChange={triggerModeChange}
+          />
         )}
-      </LocaleReceiver>,
+        <RCPickerPanel
+          value={mergedValue}
+          prefixCls={prefixCls}
+          locale={contextLocale?.lang}
+          generateConfig={generateConfig}
+          dateRender={dateRender}
+          monthCellRender={(date) => monthRender(date, contextLocale?.lang)}
+          onSelect={onInternalSelect}
+          mode={panelMode}
+          picker={panelMode}
+          disabledDate={mergedDisabledDate}
+          hideHeader
+        />
+      </div>,
     );
   };
 

diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx
@@ -3,13 +3,15 @@ import IconContext from '@ant-design/icons/lib/components/Context';
 import { FormProvider as RcFormProvider } from 'rc-field-form';
 import type { ValidateMessages } from 'rc-field-form/lib/interface';
 import useMemo from 'rc-util/lib/hooks/useMemo';
-import * as React from 'react';
 import type { ReactElement } from 'react';
+import * as React from 'react';
 import type { Options } from 'scroll-into-view-if-needed';
+import warning from '../_util/warning';
 import type { RequiredMark } from '../form/Form';
 import type { Locale } from '../locale';
 import LocaleProvider, { ANT_MARK } from '../locale';
-import LocaleReceiver from '../locale/LocaleReceiver';
+import type { LocaleContextProps } from '../locale/context';
+import LocaleContext from '../locale/context';
 import defaultLocale from '../locale/en_US';
 import { DesignTokenContext } from '../theme/internal';
 import defaultSeedToken from '../theme/themes/seed';
@@ -18,12 +20,11 @@ import { ConfigConsumer, ConfigContext, defaultIconPrefixCls } from './context';
 import { registerTheme } from './cssVariables';
 import type { RenderEmptyHandler } from './defaultRenderEmpty';
 import { DisabledContextProvider } from './DisabledContext';
+import useConfig from './hooks/useConfig';
 import useTheme from './hooks/useTheme';
 import type { SizeType } from './SizeContext';
 import SizeContext, { SizeContextProvider } from './SizeContext';
 import useStyle from './style';
-import useConfig from './hooks/useConfig';
-import warning from '../_util/warning';
 
 export {
   type RenderEmptyHandler,
@@ -316,18 +317,11 @@ const ConfigProvider: React.FC<ConfigProviderProps> & {
   /** @deprecated Please use `ConfigProvider.useConfig().componentSize` instead */
   SizeContext: typeof SizeContext;
   config: typeof setGlobalConfig;
-  useConfig: typeof useConfig;
-} = (props) => (
-  <LocaleReceiver>
-    {(_, __, legacyLocale) => (
-      <ConfigConsumer>
-        {(context) => (
-          <ProviderChildren parentContext={context} legacyLocale={legacyLocale} {...props} />
-        )}
-      </ConfigConsumer>
-    )}
-  </LocaleReceiver>
-);
+} = (props) => {
+  const context = React.useContext<ConfigConsumerProps>(ConfigContext);
+  const antLocale = React.useContext<LocaleContextProps | undefined>(LocaleContext);
+  return <ProviderChildren parentContext={context} legacyLocale={antLocale!} {...props} />;
+};
 
 ConfigProvider.ConfigContext = ConfigContext;
 ConfigProvider.SizeContext = SizeContext;

diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx
@@ -13,13 +13,13 @@ import { ConfigContext } from '../../config-provider';
 import DisabledContext from '../../config-provider/DisabledContext';
 import SizeContext from '../../config-provider/SizeContext';
 import { FormItemInputContext } from '../../form/context';
+import useLocale from '../../locale/useLocale';
 import { useCompactItemContext } from '../../space/Compact';
-import LocaleReceiver from '../../locale/LocaleReceiver';
 import { getMergedStatus, getStatusClassNames } from '../../_util/statusUtils';
+import warning from '../../_util/warning';
 import enUS from '../locale/en_US';
 import { getRangePlaceholder, transPlacement2DropdownAlign } from '../util';
 import type { CommonPickerMethods, PickerComponentClass } from './interface';
-import warning from '../../_util/warning';
 
 import useStyle from '../style';
 
@@ -102,57 +102,53 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
       blur: () => innerRef.current?.blur(),
     }));
 
+    const contextLocale = useLocale('Calendar', enUS);
+
+    const locale = { ...contextLocale, ...props.locale! };
+
     return wrapSSR(
-      <LocaleReceiver componentName="DatePicker" defaultLocale={enUS}>
-        {(contextLocale) => {
-          const locale = { ...contextLocale, ...props.locale };
-
-          return (
-            <RCRangePicker<DateType>
-              separator={
-                <span aria-label="to" className={`${prefixCls}-separator`}>
-                  <SwapRightOutlined />
-                </span>
-              }
-              disabled={mergedDisabled}
-              ref={innerRef}
-              dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
-              placeholder={getRangePlaceholder(locale, picker, placeholder)}
-              suffixIcon={suffixNode}
-              clearIcon={<CloseCircleFilled />}
-              prevIcon={<span className={`${prefixCls}-prev-icon`} />}
-              nextIcon={<span className={`${prefixCls}-next-icon`} />}
-              superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
-              superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
-              allowClear
-              transitionName={`${rootPrefixCls}-slide-up`}
-              {...restProps}
-              {...additionalOverrideProps}
-              className={classNames(
-                {
-                  [`${prefixCls}-${mergedSize}`]: mergedSize,
-                  [`${prefixCls}-borderless`]: !bordered,
-                },
-                getStatusClassNames(
-                  prefixCls as string,
-                  getMergedStatus(contextStatus, customStatus),
-                  hasFeedback,
-                ),
-                hashId,
-                compactItemClassnames,
-                className,
-              )}
-              locale={locale.lang}
-              prefixCls={prefixCls}
-              getPopupContainer={customGetPopupContainer || getPopupContainer}
-              generateConfig={generateConfig}
-              components={Components}
-              direction={direction}
-              dropdownClassName={classNames(hashId, popupClassName || dropdownClassName)}
-            />
-          );
-        }}
-      </LocaleReceiver>,
+      <RCRangePicker<DateType>
+        separator={
+          <span aria-label="to" className={`${prefixCls}-separator`}>
+            <SwapRightOutlined />
+          </span>
+        }
+        disabled={mergedDisabled}
+        ref={innerRef}
+        dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
+        placeholder={getRangePlaceholder(locale, picker, placeholder)}
+        suffixIcon={suffixNode}
+        clearIcon={<CloseCircleFilled />}
+        prevIcon={<span className={`${prefixCls}-prev-icon`} />}
+        nextIcon={<span className={`${prefixCls}-next-icon`} />}
+        superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
+        superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
+        allowClear
+        transitionName={`${rootPrefixCls}-slide-up`}
+        {...restProps}
+        {...additionalOverrideProps}
+        className={classNames(
+          {
+            [`${prefixCls}-${mergedSize}`]: mergedSize,
+            [`${prefixCls}-borderless`]: !bordered,
+          },
+          getStatusClassNames(
+            prefixCls as string,
+            getMergedStatus(contextStatus, customStatus),
+            hasFeedback,
+          ),
+          hashId,
+          compactItemClassnames,
+          className,
+        )}
+        locale={locale.lang}
+        prefixCls={prefixCls}
+        getPopupContainer={customGetPopupContainer || getPopupContainer}
+        generateConfig={generateConfig}
+        components={Components}
+        direction={direction}
+        dropdownClassName={classNames(hashId, popupClassName || dropdownClassName)}
+      />,
     );
   });