refactor: reduce empty cycling deps (#35570)

* chore: rm in root

* chore: fix ts

* test: Update snapshot

* chore: ignore part

components/cascader/index.tsx

@@ -16,6 +16,7 @@ import LeftOutlined from '@ant-design/icons/LeftOutlined';
 import { useContext } from 'react';
 import warning from '../_util/warning';
 import { ConfigContext } from '../config-provider';
+import defaultRenderEmpty from '../config-provider/defaultRenderEmpty';
 import type { SizeType } from '../config-provider/SizeContext';
 import SizeContext from '../config-provider/SizeContext';
 import DisabledContext from '../config-provider/DisabledContext';
@@ -175,7 +176,7 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
   );
 
   // =================== No Found ====================
-  const mergedNotFoundContent = notFoundContent || renderEmpty('Cascader');
+  const mergedNotFoundContent = notFoundContent || (renderEmpty || defaultRenderEmpty)('Cascader');
 
   // ==================== Prefix =====================
   const rootPrefixCls = getPrefixCls();

components/config-provider/__tests__/__snapshots__/index.test.js.snap

@@ -1,76 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ConfigProvider render empty 1`] = `
-<div
-  class="ant-empty"
->
-  <div
-    class="ant-empty-image"
-  >
-    <svg
-      class="ant-empty-img-default"
-      height="152"
-      viewBox="0 0 184 152"
-      width="184"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g
-        fill="none"
-        fill-rule="evenodd"
-      >
-        <g
-          transform="translate(24 31.67)"
-        >
-          <ellipse
-            class="ant-empty-img-default-ellipse"
-            cx="67.797"
-            cy="106.89"
-            rx="67.797"
-            ry="12.668"
-          />
-          <path
-            class="ant-empty-img-default-path-1"
-            d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z"
-          />
-          <path
-            class="ant-empty-img-default-path-2"
-            d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z"
-            transform="translate(13.56)"
-          />
-          <path
-            class="ant-empty-img-default-path-3"
-            d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z"
-          />
-          <path
-            class="ant-empty-img-default-path-4"
-            d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z"
-          />
-        </g>
-        <path
-          class="ant-empty-img-default-path-5"
-          d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z"
-        />
-        <g
-          class="ant-empty-img-default-g"
-          transform="translate(149.65 15.383)"
-        >
-          <ellipse
-            cx="20.654"
-            cy="3.167"
-            rx="2.849"
-            ry="2.815"
-          />
-          <path
-            d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z"
-          />
-        </g>
-      </g>
-    </svg>
-  </div>
-  <div
-    class="ant-empty-description"
-  >
-    No Data
-  </div>
-</div>
-`;

components/config-provider/__tests__/index.test.js

@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
 import { mount } from 'enzyme';
 import { SmileOutlined } from '@ant-design/icons';
-import { fireEvent, render } from '@testing-library/react';
 import ConfigProvider, { ConfigContext } from '..';
 import Button from '../../button';
 import Table from '../../table';
 import Input from '../../input';
 import mountTest from '../../../tests/shared/mountTest';
+import { render, fireEvent } from '../../../tests/utils';
 
 describe('ConfigProvider', () => {
   mountTest(() => (
@@ -104,16 +104,23 @@ describe('ConfigProvider', () => {
   });
 
   it('render empty', () => {
+    let rendered = false;
+    let cacheRenderEmpty;
+
     const App = () => {
       const { renderEmpty } = React.useContext(ConfigContext);
-      return renderEmpty();
+      rendered = true;
+      cacheRenderEmpty = renderEmpty;
+      return null;
     };
-    const wrapper = mount(
+
+    render(
       <ConfigProvider>
         <App />
       </ConfigProvider>,
     );
 
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(rendered).toBeTruthy();
+    expect(cacheRenderEmpty).toBeFalsy();
   });
 });

components/config-provider/context.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import type { RenderEmptyHandler } from './renderEmpty';
+import type { RenderEmptyHandler } from './defaultRenderEmpty';
-import defaultRenderEmpty from './renderEmpty';
 import type { Locale } from '../locale-provider';
 import type { SizeType } from './SizeContext';
 import type { RequiredMark } from '../form/Form';
@@ -26,7 +25,7 @@ export interface ConfigConsumerProps {
   rootPrefixCls?: string;
   iconPrefixCls?: string;
   getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => string;
-  renderEmpty: RenderEmptyHandler;
+  renderEmpty?: RenderEmptyHandler;
   csp?: CSPConfig;
   autoInsertSpaceInButton?: boolean;
   input?: {
@@ -54,11 +53,10 @@ const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) =>
   return suffixCls ? `ant-${suffixCls}` : 'ant';
 };
 
+// zombieJ: 🚨 Do not pass `defaultRenderEmpty` here since it will case circular dependency.
 export const ConfigContext = React.createContext<ConfigConsumerProps>({
   // We provide a default function for Context without provider
   getPrefixCls: defaultGetPrefixCls,
-
-  renderEmpty: defaultRenderEmpty,
 });
 
 export const ConfigConsumer = ConfigContext.Consumer;

components/config-provider/defaultRenderEmpty.tsx

@@ -3,7 +3,7 @@ import Empty from '../empty';
 import type { ConfigConsumerProps } from '.';
 import { ConfigConsumer } from '.';
 
-const renderEmpty = (componentName?: string): React.ReactNode => (
+const defaultRenderEmpty = (componentName?: string): React.ReactNode => (
   <ConfigConsumer>
     {({ getPrefixCls }: ConfigConsumerProps) => {
       const prefix = getPrefixCls('empty');
@@ -19,13 +19,16 @@ const renderEmpty = (componentName?: string): React.ReactNode => (
         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 renderEmpty;
+export type RenderEmptyHandler = typeof defaultRenderEmpty;
 
-export default renderEmpty;
+export default defaultRenderEmpty;

components/config-provider/index.tsx

@@ -3,7 +3,7 @@ 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 { RenderEmptyHandler } from './renderEmpty';
+import { RenderEmptyHandler } from './defaultRenderEmpty';
 import type { Locale } from '../locale-provider';
 import LocaleProvider, { ANT_MARK } from '../locale-provider';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';

components/list/index.tsx

@@ -11,6 +11,7 @@ import type { PaginationConfig } from '../pagination';
 import Pagination from '../pagination';
 import { Row } from '../grid';
 import Item from './Item';
+import defaultRenderEmpty from '../config-provider/defaultRenderEmpty';
 
 export { ListItemProps, ListItemMetaProps } from './Item';
 
@@ -259,7 +260,7 @@ function List<T>({
       <ul className={`${prefixCls}-items`}>{items}</ul>
     );
   } else if (!children && !isLoading) {
-    childrenContent = renderEmptyFunc(prefixCls, renderEmpty);
+    childrenContent = renderEmptyFunc(prefixCls, renderEmpty || defaultRenderEmpty);
   }
 
   const paginationPosition = paginationProps.position || 'bottom';

components/mentions/index.tsx

@@ -8,6 +8,7 @@ import { ConfigContext } from '../config-provider';
 import { FormItemInputContext } from '../form/context';
 import type { InputStatus } from '../_util/statusUtils';
 import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
+import defaultRenderEmpty from '../config-provider/defaultRenderEmpty';
 
 export const { Option } = RcMentions;
 
@@ -93,7 +94,7 @@ const InternalMentions: React.ForwardRefRenderFunction<unknown, MentionProps> =
       return notFoundContent;
     }
 
-    return renderEmpty('Select');
+    return (renderEmpty || defaultRenderEmpty)('Select');
   };
 
   const getOptions = () => {

components/select/index.tsx

@@ -18,6 +18,7 @@ import type { InputStatus } from '../_util/statusUtils';
 import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
 import type { SelectCommonPlacement } from '../_util/motion';
 import { getTransitionName, getTransitionDirection } from '../_util/motion';
+import defaultRenderEmpty from '../config-provider/defaultRenderEmpty';
 
 type RawValue = string | number;
 
@@ -122,7 +123,7 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
   } else if (mode === 'combobox') {
     mergedNotFound = null;
   } else {
-    mergedNotFound = renderEmpty('Select');
+    mergedNotFound = (renderEmpty || defaultRenderEmpty)('Select');
   }
 
   // ===================== Icons =====================

components/table/Table.tsx

@@ -48,6 +48,7 @@ import Column from './Column';
 import ColumnGroup from './ColumnGroup';
 import warning from '../_util/warning';
 import useBreakpoint from '../grid/hooks/useBreakpoint';
+import defaultRenderEmpty from '../config-provider/defaultRenderEmpty';
 
 export { ColumnsType, TablePaginationConfig };
 
@@ -517,7 +518,7 @@ function InternalTable<RecordType extends object = any>(
           data={pageData}
           rowKey={getRowKey}
           rowClassName={internalRowClassName}
-          emptyText={(locale && locale.emptyText) || renderEmpty('Table')}
+          emptyText={(locale && locale.emptyText) || (renderEmpty || defaultRenderEmpty)('Table')}
           // Internal
           internalHooks={INTERNAL_HOOKS}
           internalRefs={internalRefs as any}

components/transfer/index.tsx

@@ -14,6 +14,7 @@ import warning from '../_util/warning';
 import { FormItemInputContext } from '../form/context';
 import type { InputStatus } from '../_util/statusUtils';
 import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
+import defaultRenderEmpty from '../config-provider/defaultRenderEmpty';
 
 export { TransferListProps } from './list';
 export { TransferOperationProps } from './operation';
@@ -375,7 +376,7 @@ class Transfer<RecordType extends TransferItem = TransferItem> extends React.Com
               status: customStatus,
             } = this.props;
             const prefixCls = getPrefixCls('transfer', customizePrefixCls);
-            const locale = this.getLocale(transferLocale, renderEmpty);
+            const locale = this.getLocale(transferLocale, renderEmpty || defaultRenderEmpty);
             const { sourceSelectedKeys, targetSelectedKeys } = this.state;
             const mergedStatus = getMergedStatus(contextStatus, customStatus);
 

components/tree-select/index.tsx

@@ -20,6 +20,7 @@ import { getTransitionName, getTransitionDirection } from '../_util/motion';
 import { FormItemInputContext } from '../form/context';
 import type { InputStatus } from '../_util/statusUtils';
 import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
+import defaultRenderEmpty from '../config-provider/defaultRenderEmpty';
 
 type RawValue = string | number;
 
@@ -131,7 +132,7 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
   if (notFoundContent !== undefined) {
     mergedNotFound = notFoundContent;
   } else {
-    mergedNotFound = renderEmpty('Select');
+    mergedNotFound = (renderEmpty || defaultRenderEmpty)('Select');
   }
 
   // ==================== Render =====================