diff --git a/src/renderer/src/components/DraggableList/__tests__/DraggableList.test.tsx b/src/renderer/src/components/DraggableList/__tests__/DraggableList.test.tsx index d6c1aa7b21..2d61583787 100644 --- a/src/renderer/src/components/DraggableList/__tests__/DraggableList.test.tsx +++ b/src/renderer/src/components/DraggableList/__tests__/DraggableList.test.tsx @@ -29,20 +29,6 @@ vi.mock('@hello-pangea/dnd', () => { } }) -// mock antd list 只做简单渲染 -vi.mock('antd', () => ({ - __esModule: true, - List: ({ dataSource, renderItem }: any) => ( -
- {dataSource.map((item: any, idx: number) => ( -
- {renderItem(item, idx)} -
- ))} -
- ) -})) - declare global { interface Window { triggerOnDragEnd: (result?: any, provided?: any) => void @@ -73,14 +59,15 @@ describe('DraggableList', () => { const list = [{ id: 'a', name: 'A' }] const style = { background: 'red' } const listStyle = { color: 'blue' } - render( + const { container } = render( {}}> {(item) =>
{item.name}
}
) // 检查 style 是否传递到外层容器 - const virtualList = screen.getByTestId('virtual-list') - expect(virtualList.parentElement).toHaveStyle({ background: 'red' }) + const listContainer = container.querySelector('.draggable-list-container') + expect(listContainer).not.toBeNull() + expect(listContainer?.parentElement).toHaveStyle({ background: 'red' }) }) it('should render nothing when list is empty', () => { diff --git a/src/renderer/src/components/DraggableList/__tests__/__snapshots__/DraggableList.test.tsx.snap b/src/renderer/src/components/DraggableList/__tests__/__snapshots__/DraggableList.test.tsx.snap index f85a3e07bd..75f9e74875 100644 --- a/src/renderer/src/components/DraggableList/__tests__/__snapshots__/DraggableList.test.tsx.snap +++ b/src/renderer/src/components/DraggableList/__tests__/__snapshots__/DraggableList.test.tsx.snap @@ -10,56 +10,44 @@ exports[`DraggableList > snapshot > should match snapshot 1`] = ` >
-
- A -
+ A
-
- B -
+ B
-
- C -
+ C
diff --git a/src/renderer/src/components/DraggableList/list.tsx b/src/renderer/src/components/DraggableList/list.tsx index 4452cee4c9..b0e87bd2d2 100644 --- a/src/renderer/src/components/DraggableList/list.tsx +++ b/src/renderer/src/components/DraggableList/list.tsx @@ -9,14 +9,13 @@ import { ResponderProvided } from '@hello-pangea/dnd' import { droppableReorder } from '@renderer/utils' -import { List, ListProps } from 'antd' -import { FC } from 'react' +import { FC, HTMLAttributes } from 'react' interface Props { list: T[] style?: React.CSSProperties listStyle?: React.CSSProperties - listProps?: ListProps + listProps?: HTMLAttributes children: (item: T, index: number) => React.ReactNode onUpdate: (list: T[]) => void onDragStart?: OnDragStartResponder @@ -52,10 +51,8 @@ const DraggableList: FC> = ({ {(provided) => (
- { +
+ {list.map((item, index) => { const id = item.id || item return ( @@ -74,8 +71,8 @@ const DraggableList: FC> = ({ )} ) - }} - /> + })} +
{provided.placeholder}
)}