chore: use React.useContext replace <Context.ConfigConsumer /> (#40091)

* chore: use React.useContext replace <Context.ConfigConsumer />

* add

components/cascader/index.tsx

@@ -14,7 +14,7 @@ import RcCascader from 'rc-cascader';
 import omit from 'rc-util/lib/omit';
 import * as React from 'react';
 import { ConfigContext } from '../config-provider';
-import defaultRenderEmpty from '../config-provider/defaultRenderEmpty';
+import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
 import DisabledContext from '../config-provider/DisabledContext';
 import type { SizeType } from '../config-provider/SizeContext';
 import SizeContext from '../config-provider/SizeContext';
@@ -187,7 +187,9 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
   }
 
   // =================== No Found ====================
-  const mergedNotFoundContent = notFoundContent || (renderEmpty || defaultRenderEmpty)('Cascader');
+  const mergedNotFoundContent = notFoundContent || renderEmpty?.('Cascader') || (
+    <DefaultRenderEmpty componentName="Cascader" />
+  );
 
   // ==================== Prefix =====================
   const rootPrefixCls = getPrefixCls();

components/config-provider/defaultRenderEmpty.tsx

@@ -1,34 +1,33 @@
-import * as React from 'react';
+import React, { useContext } from 'react';
+import { ConfigContext } from '.';
 import type { ConfigConsumerProps } from '.';
-import { ConfigConsumer } from '.';
 import Empty from '../empty';
 
-const defaultRenderEmpty = (componentName?: string): React.ReactNode => (
+interface EmptyProps {
-  <ConfigConsumer>
+  componentName?: string;
-    {({ getPrefixCls }: ConfigConsumerProps) => {
+}
-      const prefix = getPrefixCls('empty');
 
+const DefaultRenderEmpty: React.FC<EmptyProps> = (props) => {
+  const { componentName } = props;
+  const { getPrefixCls } = useContext<ConfigConsumerProps>(ConfigContext);
+  const prefix = getPrefixCls('empty');
   switch (componentName) {
     case 'Table':
     case 'List':
       return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
-
     case 'Select':
     case 'TreeSelect':
     case 'Cascader':
     case 'Transfer':
     case 'Mentions':
       return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} className={`${prefix}-small`} />;
-
     /* istanbul ignore next */
     default:
       // Should never hit if we take all the component into consider.
       return <Empty />;
   }
-    }}
+};
-  </ConfigConsumer>
-);
 
-export type RenderEmptyHandler = typeof defaultRenderEmpty;
+export type RenderEmptyHandler = (componentName?: string) => React.ReactNode;
 
-export default defaultRenderEmpty;
+export default DefaultRenderEmpty;

components/list/index.tsx

@@ -1,9 +1,8 @@
 import classNames from 'classnames';
 // eslint-disable-next-line import/no-named-as-default
 import * as React from 'react';
-import type { RenderEmptyHandler } from '../config-provider';
 import { ConfigContext } from '../config-provider';
-import defaultRenderEmpty from '../config-provider/defaultRenderEmpty';
+import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
 import { Row } from '../grid';
 import useBreakpoint from '../grid/hooks/useBreakpoint';
 import type { PaginationConfig } from '../pagination';
@@ -143,13 +142,8 @@ function List<T>({
 
   const isSomethingAfterLastItem = () => !!(loadMore || pagination || footer);
 
-  const renderEmptyFunc = (prefixCls: string, renderEmptyHandler: RenderEmptyHandler) => (
-    <div className={`${prefixCls}-empty-text`}>
-      {(locale && locale.emptyText) || renderEmptyHandler('List')}
-    </div>
-  );
-
   const prefixCls = getPrefixCls('list', customizePrefixCls);
+
   // Style
   const [wrapSSR, hashId] = useStyle(prefixCls);
 
@@ -253,7 +247,7 @@ function List<T>({
     }
   }, [grid?.column, currentBreakpoint]);
 
-  let childrenContent = isLoading && <div style={{ minHeight: 53 }} />;
+  let childrenContent: React.ReactNode = isLoading && <div style={{ minHeight: 53 }} />;
   if (splitDataSource.length > 0) {
     const items = splitDataSource.map((item: T, index: number) => renderInnerItem(item, index));
     childrenContent = grid ? (
@@ -268,7 +262,13 @@ function List<T>({
       <ul className={`${prefixCls}-items`}>{items}</ul>
     );
   } else if (!children && !isLoading) {
-    childrenContent = renderEmptyFunc(prefixCls, renderEmpty || defaultRenderEmpty);
+    childrenContent = (
+      <div className={`${prefixCls}-empty-text`}>
+        {(locale && locale.emptyText) || renderEmpty?.('List') || (
+          <DefaultRenderEmpty componentName="List" />
+        )}
+      </div>
+    );
   }
 
   const paginationPosition = paginationProps.position || 'bottom';

components/mentions/index.tsx

@@ -9,7 +9,7 @@ import { composeRef } from 'rc-util/lib/ref';
 // eslint-disable-next-line import/no-named-as-default
 import * as React from 'react';
 import { ConfigContext } from '../config-provider';
-import defaultRenderEmpty from '../config-provider/defaultRenderEmpty';
+import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
 import { FormItemInputContext } from '../form/context';
 import genPurePanel from '../_util/PurePanel';
 import Spin from '../spin';
@@ -118,13 +118,12 @@ const InternalMentions: React.ForwardRefRenderFunction<MentionsRef, MentionProps
     setFocused(false);
   };
 
-  const getNotFoundContent = () => {
+  const notFoundContentEle = React.useMemo<React.ReactNode>(() => {
     if (notFoundContent !== undefined) {
       return notFoundContent;
     }
-
+    return renderEmpty?.('Select') || <DefaultRenderEmpty componentName="Select" />;
-    return (renderEmpty || defaultRenderEmpty)('Select');
+  }, [notFoundContent, renderEmpty]);
-  };
 
   const getOptions = () => {
     if (loading) {
@@ -148,12 +147,7 @@ const InternalMentions: React.ForwardRefRenderFunction<MentionsRef, MentionProps
       ]
     : options;
 
-  const getFilterOption = (): any => {
+  const mentionsfilterOption = loading ? loadingFilterOption : filterOption;
-    if (loading) {
-      return loadingFilterOption;
-    }
-    return filterOption;
-  };
 
   const prefixCls = getPrefixCls('mentions', customizePrefixCls);
 
@@ -174,12 +168,12 @@ const InternalMentions: React.ForwardRefRenderFunction<MentionsRef, MentionProps
   const mentions = (
     <RcMentions
       prefixCls={prefixCls}
-      notFoundContent={getNotFoundContent()}
+      notFoundContent={notFoundContentEle}
       className={mergedClassName}
       disabled={disabled}
       direction={direction}
       {...restProps}
-      filterOption={getFilterOption()}
+      filterOption={mentionsfilterOption}
       onFocus={onFocus}
       onBlur={onBlur}
       dropdownClassName={classNames(popupClassName, hashId)}

components/select/index.tsx

@@ -8,7 +8,7 @@ import type { BaseOptionType, DefaultOptionType } from 'rc-select/lib/Select';
 import omit from 'rc-util/lib/omit';
 import * as React from 'react';
 import { ConfigContext } from '../config-provider';
-import defaultRenderEmpty from '../config-provider/defaultRenderEmpty';
+import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
 import DisabledContext from '../config-provider/DisabledContext';
 import type { SizeType } from '../config-provider/SizeContext';
 import SizeContext from '../config-provider/SizeContext';
@@ -135,7 +135,7 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
   } else if (mode === 'combobox') {
     mergedNotFound = null;
   } else {
-    mergedNotFound = (renderEmpty || defaultRenderEmpty)('Select');
+    mergedNotFound = renderEmpty?.('Select') || <DefaultRenderEmpty componentName="Select" />;
   }
 
   // ===================== Icons =====================

components/table/InternalTable.tsx

@@ -6,7 +6,7 @@ import omit from 'rc-util/lib/omit';
 import * as React from 'react';
 import type { ConfigConsumerProps } from '../config-provider/context';
 import { ConfigContext } from '../config-provider/context';
-import defaultRenderEmpty from '../config-provider/defaultRenderEmpty';
+import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
 import type { SizeType } from '../config-provider/SizeContext';
 import SizeContext from '../config-provider/SizeContext';
 import useBreakpoint from '../grid/hooks/useBreakpoint';
@@ -519,6 +519,11 @@ function InternalTable<RecordType extends object = any>(
     className,
     hashId,
   );
+
+  const emptyText = (locale && locale.emptyText) || renderEmpty?.('Table') || (
+    <DefaultRenderEmpty componentName="Table" />
+  );
+
   return wrapSSR(
     <div ref={ref} className={wrapperClassNames} style={style}>
       <Spin spinning={false} {...spinProps}>
@@ -538,7 +543,7 @@ function InternalTable<RecordType extends object = any>(
           data={pageData}
           rowKey={getRowKey}
           rowClassName={internalRowClassName}
-          emptyText={(locale && locale.emptyText) || (renderEmpty || defaultRenderEmpty)('Table')}
+          emptyText={emptyText}
           // Internal
           internalHooks={INTERNAL_HOOKS}
           internalRefs={internalRefs as any}

components/transfer/index.tsx

@@ -1,9 +1,9 @@
 import classNames from 'classnames';
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import type { ChangeEvent, CSSProperties } from 'react';
-import type { ConfigConsumerProps, RenderEmptyHandler } from '../config-provider';
+import type { ConfigConsumerProps } from '../config-provider';
 import { ConfigContext } from '../config-provider';
-import defaultRenderEmpty from '../config-provider/defaultRenderEmpty';
+import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
 import type { FormItemStatusContextProps } from '../form/context';
 import { FormItemInputContext } from '../form/context';
 import LocaleReceiver from '../locale/LocaleReceiver';
@@ -201,12 +201,6 @@ const Transfer = <RecordType extends TransferItem = TransferItem>(
   const getTitles = (transferLocale: TransferLocale): React.ReactNode[] =>
     titles ?? transferLocale.titles ?? [];
 
-  const getLocale = (transferLocale: TransferLocale, renderEmpty: RenderEmptyHandler) => ({
-    ...transferLocale,
-    notFoundContent: renderEmpty('Transfer'),
-    ...locale,
-  });
-
   const handleLeftScroll = (e: React.SyntheticEvent<HTMLUListElement>) => {
     onScroll?.('left', e);
   };
@@ -338,6 +332,12 @@ const Transfer = <RecordType extends TransferItem = TransferItem>(
   const { getPrefixCls, renderEmpty, direction } = configContext;
   const { hasFeedback, status } = formItemContext;
 
+  const getLocale = (transferLocale: TransferLocale) => ({
+    ...transferLocale,
+    notFoundContent: renderEmpty?.('Transfer') || <DefaultRenderEmpty componentName="Transfer" />,
+    ...locale,
+  });
+
   const prefixCls = getPrefixCls('transfer', customizePrefixCls);
   const mergedStatus = getMergedStatus(status, customStatus);
   const mergedPagination = !children && pagination;
@@ -359,7 +359,7 @@ const Transfer = <RecordType extends TransferItem = TransferItem>(
   return (
     <LocaleReceiver componentName="Transfer" defaultLocale={defaultLocale.Transfer}>
       {(contextLocale) => {
-        const listLocale = getLocale(contextLocale, renderEmpty || defaultRenderEmpty);
+        const listLocale = getLocale(contextLocale);
         const [leftTitle, rightTitle] = getTitles(listLocale);
         return (
           <TransferFC prefixCls={prefixCls} className={cls} style={style}>

components/transfer/list.tsx

@@ -238,7 +238,7 @@ const TransferList = <RecordType extends KeyWiseTransferItem>(
 
   const checkBox = (
     <Checkbox
-      disabled={dataSource.length === 0 || props.disabled}
+      disabled={dataSource.length === 0 || disabled}
       checked={checkStatus === 'all'}
       indeterminate={checkStatus === 'part'}
       className={`${prefixCls}-checkbox`}

components/tree-select/index.tsx

@@ -5,8 +5,9 @@ import RcTreeSelect, { SHOW_ALL, SHOW_CHILD, SHOW_PARENT, TreeNode } from 'rc-tr
 import type { BaseOptionType, DefaultOptionType } from 'rc-tree-select/lib/TreeSelect';
 import omit from 'rc-util/lib/omit';
 import * as React from 'react';
+import type { Placement } from 'rc-select/lib/BaseSelect';
 import { ConfigContext } from '../config-provider';
-import defaultRenderEmpty from '../config-provider/defaultRenderEmpty';
+import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
 import DisabledContext from '../config-provider/DisabledContext';
 import type { SizeType } from '../config-provider/SizeContext';
 import SizeContext from '../config-provider/SizeContext';
@@ -160,7 +161,7 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
   if (notFoundContent !== undefined) {
     mergedNotFound = notFoundContent;
   } else {
-    mergedNotFound = (renderEmpty || defaultRenderEmpty)('Select');
+    mergedNotFound = renderEmpty?.('Select') || <DefaultRenderEmpty componentName="Select" />;
   }
 
   // ==================== Render =====================
@@ -173,13 +174,11 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
   ]);
 
   // ===================== Placement =====================
-  const getPlacement = () => {
+  const getPlacement = (): Placement => {
     if (placement !== undefined) {
       return placement;
     }
-    return direction === 'rtl'
+    return direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
-      ? ('bottomRight' as SelectCommonPlacement)
-      : ('bottomLeft' as SelectCommonPlacement);
   };
 
   const mergedSize = compactSize || customizeSize || size;