From 7e116d508c3852995f7bd8cb50b45f46b7a0f0f2 Mon Sep 17 00:00:00 2001 From: Haixing <65376724+HaixingOoO@users.noreply.github.com> Date: Wed, 22 Jan 2025 14:43:46 +0800 Subject: [PATCH] fix(Transfer): fix transfetItem not working (#3339) * fix(transfer): fix transfetItem not working * test(transfer): update test snap --- src/transfer/Transfer.tsx | 11 +- src/transfer/TransferList.tsx | 7 +- src/transfer/__tests__/transfer.test.tsx | 53 +++++- test/snap/__snapshots__/csr.test.jsx.snap | 202 +++------------------- test/snap/__snapshots__/ssr.test.jsx.snap | 2 +- 5 files changed, 83 insertions(+), 192 deletions(-) diff --git a/src/transfer/Transfer.tsx b/src/transfer/Transfer.tsx index edab3f18ae..4dbf8bd0c3 100644 --- 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 = (originalProps) => { () => , ]).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 = (originalProps) => { > = (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 = (originalProps) => { {OperationsCmp()} = (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 index 3807c59931..7f8bb5bbbc 100644 --- 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, @@ -26,6 +27,7 @@ interface TransferListProps onCheckbox?: (checked: Array) => void; onSearch?: (value: string) => void; showCheckAll?: boolean; + listType: TransferListType; } const TransferList: React.FunctionComponent = (props) => { @@ -46,6 +48,7 @@ const TransferList: React.FunctionComponent = (props) => { transferItem, tree: treeNode, showCheckAll, + listType, } = props; const notDisabledData = !treeNode ? data.filter((item) => !item.disabled) @@ -130,7 +133,7 @@ const TransferList: React.FunctionComponent = (props) => { {viewData.map((item, index) => ( - {typeof transferItem === 'function' ? transferItem({ data: item, index, type: 'source' }) : item.label} + {transferItem ? parseContentTNode(transferItem, { data: item, index, type: listType }) : item.label} ))} diff --git a/src/transfer/__tests__/transfer.test.tsx b/src/transfer/__tests__/transfer.test.tsx index 656af4e783..d878362b24 100644 --- 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(['2']); return ( { }); } function TestComponent() { - const [value, setValue] = useState(['2', '5']); + const [value, setValue] = useState(['2', '5']); return setValue(v)}>; } const { container, getByText } = render(); @@ -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 }) =>
{data.label}
; + + function TestComponent() { + const [value, setValue] = useState(['1']); + return setValue(v)} transferItem={} />; + } + const { getByText } = render(); + + 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 }) =>
{data.label}
; + + function TestComponent() { + const [value, setValue] = useState(['1']); + return setValue(v)} transferItem={TransferItem} />; + } + const { getByText } = render(); + + expect(getByText('点击test0')).toBeInTheDocument(); + expect(getByText('点击test1')).toBeInTheDocument(); + }); }); diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index 9fb7f36a1b..b2bfda5345 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -126574,15 +126574,7 @@ exports[`csr snapshot test > csr test src/transfer/_example/custom-render.tsx 1` - - - 内容1 - - - 第1段信息 - - + @@ -135427,7 +135267,7 @@ exports[`ssr snapshot test > ssr test src/transfer/_example/checked.tsx 1`] = `" exports[`ssr snapshot test > ssr test src/transfer/_example/custom.tsx 1`] = `"
0 / 20
来源
选中并加入
加入
移除
0 / 0
目标
Empty Data
选中并移除
"`; -exports[`ssr snapshot test > ssr test src/transfer/_example/custom-render.tsx 1`] = `"
0 / 20
0 / 0
Empty Data
"`; +exports[`ssr snapshot test > ssr test src/transfer/_example/custom-render.tsx 1`] = `"
0 / 20
0 / 0
Empty Data
"`; exports[`ssr snapshot test > ssr test src/transfer/_example/empty.tsx 1`] = `"

默认暂无数据

0 / 0
Empty Data
0 / 0
Empty Data

自定义暂无数据

0 / 0
No Source
0 / 0
No Target
"`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index 2a0afcba17..a4696e5329 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -1136,7 +1136,7 @@ exports[`ssr snapshot test > ssr test src/transfer/_example/checked.tsx 1`] = `" exports[`ssr snapshot test > ssr test src/transfer/_example/custom.tsx 1`] = `"
0 / 20
来源
选中并加入
加入
移除
0 / 0
目标
Empty Data
选中并移除
"`; -exports[`ssr snapshot test > ssr test src/transfer/_example/custom-render.tsx 1`] = `"
0 / 20
0 / 0
Empty Data
"`; +exports[`ssr snapshot test > ssr test src/transfer/_example/custom-render.tsx 1`] = `"
0 / 20
0 / 0
Empty Data
"`; exports[`ssr snapshot test > ssr test src/transfer/_example/empty.tsx 1`] = `"

默认暂无数据

0 / 0
Empty Data
0 / 0
Empty Data

自定义暂无数据

0 / 0
No Source
0 / 0
No Target
"`;