fix(Transfer): fix transfetItem not working (#3339)

* fix(transfer): fix transfetItem not working * test(transfer): update test snap
Tencent · Jan 22, 2025 · 7e116d5 · 7e116d5
1 parent c61eeae
commit 7e116d5
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 192 deletions.
diff --git a/src/transfer/Transfer.tsx b/src/transfer/Transfer.tsx
@@ -1,7 +1,6 @@
 import React, { useState, useMemo, useEffect } from 'react';
 import difference from 'lodash/difference';
 import classnames from 'classnames';
-import isFunction from 'lodash/isFunction';
 import isArray from 'lodash/isArray';
 import { ChevronRightIcon as TdChevronRightIcon, ChevronLeftIcon as TdChevronLeftIcon } from 'tdesign-icons-react';
 import { TdTransferProps, DataOption, TransferValue, TransferListType } from './type';
@@ -98,9 +97,7 @@ const Transfer: React.FunctionComponent<TransferProps> = (originalProps) => {
     () => <ChevronLeftIcon />,
   ]).map((item) => getJSX(item));
   const [sourceFooter, targetFooter] = getDefaultValue(footer as any).map((item) => getJSX(item));
-  const [sourceTransferItem, targetTransferItem] = getDefaultValue(
-    isFunction(transferItem) ? transferItem({ data, index: undefined, type: undefined }) : transferItem,
-  );
+
   const [sourceContent, targetContent] = getDefaultValue(content);
 
   const [showCheckAllSource, showCheckAllTarget] = useMemo(
@@ -243,6 +240,7 @@ const Transfer: React.FunctionComponent<TransferProps> = (originalProps) => {
     >
       <TransferList
         className={`${transferClassName}__list-source`}
+        listType="source"
         data={sourceData}
         search={search}
         checked={checkeds.source}
@@ -251,7 +249,7 @@ const Transfer: React.FunctionComponent<TransferProps> = (originalProps) => {
         pagination={sourcePagination}
         title={sourceTitle}
         footer={sourceFooter}
-        transferItem={sourceTransferItem}
+        transferItem={transferItem}
         content={sourceContent}
         onCheckbox={(value) => handleCheckChange(value, 'source')}
         onSearch={(val: string) => setSearchState({ ...searchState, source: val })}
@@ -261,6 +259,7 @@ const Transfer: React.FunctionComponent<TransferProps> = (originalProps) => {
       {OperationsCmp()}
       <TransferList
         className={`${transferClassName}__list-target`}
+        listType="target"
         data={targetData}
         search={search}
         checked={checkeds.target}
@@ -269,7 +268,7 @@ const Transfer: React.FunctionComponent<TransferProps> = (originalProps) => {
         pagination={targetPagination}
         title={targetTitle}
         footer={targetFooter}
-        transferItem={targetTransferItem}
+        transferItem={transferItem}
         content={targetContent}
         onCheckbox={(value) => handleCheckChange(value, 'target')}
         onSearch={(val: string) => setSearchState({ ...searchState, target: val })}

diff --git a/src/transfer/TransferList.tsx b/src/transfer/TransferList.tsx
@@ -7,12 +7,13 @@ import { SearchIcon as TdSearchIcon } from 'tdesign-icons-react';
 import { getLeafNodes } from './utils';
 import useConfig from '../hooks/useConfig';
 import useGlobalIcon from '../hooks/useGlobalIcon';
-import { TdTransferProps, TransferValue } from './type';
+import { TdTransferProps, TransferListType, TransferValue } from './type';
 import { TNode, StyledProps } from '../common';
 import Checkbox from '../checkbox';
 import Input from '../input';
 import Pagination, { PaginationProps } from '../pagination';
 import { useLocaleReceiver } from '../locale/LocalReceiver';
+import { parseContentTNode } from '../_util/parseTNode';
 
 interface TransferListProps
   extends Pick<TdTransferProps, 'data' | 'search' | 'checked' | 'transferItem' | 'tree'>,
@@ -26,6 +27,7 @@ interface TransferListProps
   onCheckbox?: (checked: Array<TransferValue>) => void;
   onSearch?: (value: string) => void;
   showCheckAll?: boolean;
+  listType: TransferListType;
 }
 
 const TransferList: React.FunctionComponent<TransferListProps> = (props) => {
@@ -46,6 +48,7 @@ const TransferList: React.FunctionComponent<TransferListProps> = (props) => {
     transferItem,
     tree: treeNode,
     showCheckAll,
+    listType,
   } = props;
   const notDisabledData = !treeNode
     ? data.filter((item) => !item.disabled)
@@ -130,7 +133,7 @@ const TransferList: React.FunctionComponent<TransferListProps> = (props) => {
         {viewData.map((item, index) => (
           <Checkbox key={item.value} value={item.value} disabled={item.disabled} className={`${CLASSPREFIX}-item`}>
             <span>
-              {typeof transferItem === 'function' ? transferItem({ data: item, index, type: 'source' }) : item.label}
+              {transferItem ? parseContentTNode(transferItem, { data: item, index, type: listType }) : item.label}
             </span>
           </Checkbox>
         ))}

diff --git a/src/transfer/__tests__/transfer.test.tsx b/src/transfer/__tests__/transfer.test.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { render, fireEvent, waitFor } from '@test/utils';
 import Transfer from '../index';
+import type { TransferValue, DataOption } from '../index';
 import Tree from '../../tree';
 
 describe('Transfer 测试', () => {
@@ -16,7 +17,7 @@ describe('Transfer 测试', () => {
       });
     }
     function TestComponent() {
-      const [value, setValue] = useState(['2']);
+      const [value, setValue] = useState<TransferValue[]>(['2']);
       return (
         <Transfer
           data={list}
@@ -59,7 +60,7 @@ describe('Transfer 测试', () => {
       });
     }
     function TestComponent() {
-      const [value, setValue] = useState(['2', '5']);
+      const [value, setValue] = useState<TransferValue[]>(['2', '5']);
       return <Transfer data={list} value={value} operation={['加入', '移除']} onChange={(v) => setValue(v)}></Transfer>;
     }
     const { container, getByText } = render(<TestComponent />);
@@ -118,4 +119,52 @@ describe('Transfer 测试', () => {
   //   fireEvent.click(getByText('加入'));
   //   fireEvent.click(getByText('移除'));
   // });
+
+  test('Transfer transferItem ReactElement', async () => {
+    const list = [
+      {
+        value: '0',
+        label: `点击test0`,
+      },
+      {
+        value: '1',
+        label: `点击test1`,
+      },
+    ];
+
+    const TransferItem = ({ data }: { data?: DataOption }) => <div>{data.label}</div>;
+
+    function TestComponent() {
+      const [value, setValue] = useState<TransferValue[]>(['1']);
+      return <Transfer data={list} value={value} onChange={(v) => setValue(v)} transferItem={<TransferItem />} />;
+    }
+    const { getByText } = render(<TestComponent />);
+
+    expect(getByText('点击test0')).toBeInTheDocument();
+    expect(getByText('点击test1')).toBeInTheDocument();
+  });
+
+  test('Transfer transferItem Function', async () => {
+    const list = [
+      {
+        value: '0',
+        label: `点击test0`,
+      },
+      {
+        value: '1',
+        label: `点击test1`,
+      },
+    ];
+
+    const TransferItem = ({ data }: { data?: DataOption }) => <div>{data.label}</div>;
+
+    function TestComponent() {
+      const [value, setValue] = useState<TransferValue[]>(['1']);
+      return <Transfer data={list} value={value} onChange={(v) => setValue(v)} transferItem={TransferItem} />;
+    }
+    const { getByText } = render(<TestComponent />);
+
+    expect(getByText('点击test0')).toBeInTheDocument();
+    expect(getByText('点击test1')).toBeInTheDocument();
+  });
 });