ChatGPT/FastGPT
1
0
Fork 0
mirror of https://github.com/labring/FastGPT.git synced 2025-07-24 22:03:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

optimize dnd drag code (#3768)

Browse Source
This commit is contained in:
heheer
2025-02-12 15:25:31 +08:00
committed by GitHub
parent 06a8a5e23d
commit 132cf69372
6 changed files with 17 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/web/components/common/DndDrag/index.tsx
View File

@@ -16,17 +16,16 @@ type Props<T = any> = {
renderClone?: DraggableChildrenFn;
children: ({
provided,
snapshot,
draggingItemHeight
snapshot
}: {
provided: DroppableProvided;
snapshot: DroppableStateSnapshot;
draggingItemHeight: number;
}) => ReactElement<HTMLElement, string>;
dataList: T[];
zoom?: number;
};
function DndDrag<T>({ children, renderClone, onDragEndCb, dataList }: Props<T>) {
function DndDrag<T>({ children, renderClone, onDragEndCb, dataList, zoom = 1 }: Props<T>) {
const [draggingItemHeight, setDraggingItemHeight] = useState(0);
const onDragStart = (start: DragStart) => {
@@ -53,7 +52,12 @@ function DndDrag<T>({ children, renderClone, onDragEndCb, dataList }: Props<T>)
return (
<DragDropContext onDragStart={onDragStart} onDragEnd={onDragEnd}>
<Droppable droppableId="droppable" renderClone={renderClone}>
{(provided, snapshot) => children({ provided, snapshot, draggingItemHeight })}
{(provided, snapshot) => (
<>
{children({ provided, snapshot })}
{snapshot.isDraggingOver && <Box height={`${draggingItemHeight / zoom}px`} />}
</>
)}
</Droppable>
</DragDropContext>
);