🦄️ refactor: renderSwitcherIcon => React.FC (#41556)

components/tree-select/index.tsx

@@ -24,7 +24,7 @@ import getIcons from '../select/utils/iconUtil';
 import { useCompactItemContext } from '../space/Compact';
 import type { AntTreeNodeProps, TreeProps } from '../tree';
 import type { SwitcherIcon } from '../tree/Tree';
-import renderSwitcherIcon from '../tree/utils/iconUtil';
+import SwitcherIconCom from '../tree/utils/iconUtil';
 import useStyle from './style';
 
 type RawValue = string | number;
@@ -208,6 +208,15 @@ const InternalTreeSelect = <
     hashId,
   );
 
+  const renderSwitcherIcon = (nodeProps: AntTreeNodeProps) => (
+    <SwitcherIconCom
+      prefixCls={treePrefixCls}
+      switcherIcon={switcherIcon}
+      treeNodeProps={nodeProps}
+      showLine={treeLine}
+    />
+  );
+
   const returnNode = (
     <RcTreeSelect
       virtual={virtual}
@@ -228,9 +237,7 @@ const InternalTreeSelect = <
       placement={memoizedPlacement}
       removeIcon={removeIcon}
       clearIcon={clearIcon}
-      switcherIcon={(nodeProps: AntTreeNodeProps) =>
-        renderSwitcherIcon(treePrefixCls, switcherIcon, nodeProps, treeLine)
-      }
+      switcherIcon={renderSwitcherIcon}
       showTreeIcon={treeIcon as any}
       notFoundContent={mergedNotFound}
       getPopupContainer={getPopupContainer || getContextPopupContainer}

components/tree/Tree.tsx

@@ -5,12 +5,11 @@ import RcTree from 'rc-tree';
 import type { DataNode, Key } from 'rc-tree/lib/interface';
 import type { Component } from 'react';
 import React from 'react';
-import { ConfigContext } from '../config-provider';
 import initCollapseMotion from '../_util/motion';
-import dropIndicatorRender from './utils/dropIndicator';
-import renderSwitcherIcon from './utils/iconUtil';
-
+import { ConfigContext } from '../config-provider';
 import useStyle from './style';
+import dropIndicatorRender from './utils/dropIndicator';
+import SwitcherIconCom from './utils/iconUtil';
 
 export type SwitcherIcon = React.ReactNode | ((props: AntTreeNodeProps) => React.ReactNode);
 export type TreeLeafIcon = React.ReactNode | ((props: AntTreeNodeProps) => React.ReactNode);
@@ -218,6 +217,15 @@ const Tree = React.forwardRef<RcTree, TreeProps>((props, ref) => {
     return mergedDraggable;
   }, [draggable]);
 
+  const renderSwitcherIcon = (nodeProps: AntTreeNodeProps) => (
+    <SwitcherIconCom
+      prefixCls={prefixCls}
+      switcherIcon={switcherIcon}
+      treeNodeProps={nodeProps}
+      showLine={showLine}
+    />
+  );
+
   return wrapSSR(
     <RcTree
       itemHeight={20}
@@ -238,9 +246,7 @@ const Tree = React.forwardRef<RcTree, TreeProps>((props, ref) => {
       direction={direction}
       checkable={checkable ? <span className={`${prefixCls}-checkbox-inner`} /> : checkable}
       selectable={selectable}
-      switcherIcon={(nodeProps: AntTreeNodeProps) =>
-        renderSwitcherIcon(prefixCls, switcherIcon, nodeProps, showLine)
-      }
+      switcherIcon={renderSwitcherIcon}
       draggable={draggableConfig}
     >
       {children}

components/tree/__tests__/util.test.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
+import React from 'react';
 import { calcRangeKeys } from '../utils/dictUtil';
-import renderSwitcherIcon from '../utils/iconUtil';
+import SwitcherIconCom from '../utils/iconUtil';
 
 describe('Tree util', () => {
   describe('calcRangeKeys', () => {
@@ -38,20 +38,16 @@ describe('Tree util', () => {
     });
 
     it('return empty array without startKey and endKey', () => {
-      const keys = calcRangeKeys({
-        treeData,
-        expandedKeys: ['0-0', '0-2', '0-2-0'],
-      });
+      const keys = calcRangeKeys({ treeData, expandedKeys: ['0-0', '0-2', '0-2-0'] });
       expect(keys).toEqual([]);
     });
   });
 
-  describe('renderSwitcherIcon', () => {
+  describe('SwitcherIconCom', () => {
     const prefixCls = 'tree';
-
     it('returns a loading icon when loading', () => {
       const { container } = render(
-        <>{renderSwitcherIcon(prefixCls, undefined, { loading: true }, true)}</>,
+        <SwitcherIconCom prefixCls={prefixCls} treeNodeProps={{ loading: true }} showLine />,
       );
       expect(container.getElementsByClassName(`${prefixCls}-switcher-loading-icon`)).toHaveLength(
         1,
@@ -60,7 +56,11 @@ describe('Tree util', () => {
 
     it('returns nothing when node is a leaf without showLine', () => {
       const { container } = render(
-        <>{renderSwitcherIcon(prefixCls, undefined, { loading: false, isLeaf: true }, false)}</>,
+        <SwitcherIconCom
+          prefixCls={prefixCls}
+          treeNodeProps={{ loading: false, isLeaf: true }}
+          showLine={false}
+        />,
       );
       expect(container).toBeEmptyDOMElement();
     });
@@ -69,16 +69,12 @@ describe('Tree util', () => {
       const testId = 'custom-icon';
       const customLeafIcon = <div data-testid={testId} />;
       const { container } = render(
-        <>
-          {renderSwitcherIcon(
-            prefixCls,
-            undefined,
-            { loading: false, isLeaf: true },
-            { showLeafIcon: customLeafIcon },
-          )}
-        </>,
+        <SwitcherIconCom
+          prefixCls={prefixCls}
+          treeNodeProps={{ loading: false, isLeaf: true }}
+          showLine={{ showLeafIcon: customLeafIcon }}
+        />,
       );
-
       expect(screen.getByTestId(testId)).toBeVisible();
       expect(
         container.getElementsByClassName(`${prefixCls}-switcher-line-custom-icon`),
@@ -90,16 +86,12 @@ describe('Tree util', () => {
       [`${prefixCls}-switcher-leaf-line`, false],
     ])('returns %p element when showLeafIcon is %p', (expectedClassName, showLeafIcon) => {
       const { container } = render(
-        <>
-          {renderSwitcherIcon(
-            prefixCls,
-            undefined,
-            { loading: false, isLeaf: true },
-            { showLeafIcon },
-          )}
-        </>,
+        <SwitcherIconCom
+          prefixCls={prefixCls}
+          treeNodeProps={{ loading: false, isLeaf: true }}
+          showLine={{ showLeafIcon }}
+        />,
       );
-
       expect(container.getElementsByClassName(expectedClassName)).toHaveLength(1);
     });
   });

components/tree/utils/iconUtil.tsx

@@ -6,14 +6,18 @@ import PlusSquareOutlined from '@ant-design/icons/PlusSquareOutlined';
 import classNames from 'classnames';
 import * as React from 'react';
 import { cloneElement, isValidElement } from '../../_util/reactNode';
-import type { AntTreeNodeProps, TreeLeafIcon, SwitcherIcon } from '../Tree';
+import type { AntTreeNodeProps, SwitcherIcon, TreeLeafIcon } from '../Tree';
+
+interface SwitcherIconProps {
+  prefixCls: string;
+  treeNodeProps: AntTreeNodeProps;
+  switcherIcon?: SwitcherIcon;
+  showLine?: boolean | { showLeafIcon: boolean | TreeLeafIcon };
+}
+
+const SwitcherIconCom: React.FC<SwitcherIconProps> = (props) => {
+  const { prefixCls, switcherIcon, treeNodeProps, showLine } = props;
 
-export default function renderSwitcherIcon(
-  prefixCls: string,
-  switcherIcon: SwitcherIcon,
-  treeNodeProps: AntTreeNodeProps,
-  showLine?: boolean | { showLeafIcon: boolean | TreeLeafIcon },
-): React.ReactNode {
   const { isLeaf, expanded, loading } = treeNodeProps;
 
   if (loading) {
@@ -40,7 +44,7 @@ export default function renderSwitcherIcon(
         });
       }
 
-      return leafIcon;
+      return leafIcon as unknown as React.ReactElement;
     }
 
     return showLeafIcon ? (
@@ -61,7 +65,7 @@ export default function renderSwitcherIcon(
   }
 
   if (switcher) {
-    return switcher;
+    return switcher as unknown as React.ReactElement;
   }
 
   if (showLine) {
@@ -72,4 +76,6 @@ export default function renderSwitcherIcon(
     );
   }
   return <CaretDownFilled className={switcherCls} />;
-}
+};
+
+export default SwitcherIconCom;