mirror of
https://github.com/labring/FastGPT.git
synced 2025-07-23 05:12:39 +00:00

* feat: add third party account config (#3443) * temp * editor workflow variable style * add team to dispatch * i18n * delete console * change openai account position * fix * fix * fix * fix * fix * 4.8.17 test (#3461) * perf: external provider config * perf: ui * feat: add template config (#3434) * change template position * template config * delete console * delete * fix * fix * perf: Mongo visutal field (#3464) * remve invalid code * perf: team member visutal code * perf: virtual search; perf: search test data * fix: ts * fix: image response headers * perf: template code * perf: auth layout;perf: auto save (#3472) * perf: auth layout * perf: auto save * perf: auto save * fix: template guide display & http input support external variables (#3475) * fix: template guide display * http editor support external workflow variables * perf: auto save;fix: ifelse checker line break; (#3478) * perf: auto save * perf: auto save * fix: ifelse checker line break * perf: doc * perf: doc * fix: update var type error * 4.8.17 test (#3479) * perf: auto save * perf: auto save * perf: template code * 4.8.17 test (#3480) * perf: auto save * perf: auto save * perf: model price model * feat: add react memo * perf: model provider filter * fix: ts (#3481) * perf: auto save * perf: auto save * fix: ts * simple app tool select (#3473) * workflow plugin userguide & simple tool ui * simple tool filter * reuse component * change component to hook * fix * perf: too selector modal (#3484) * perf: auto save * perf: auto save * perf: markdown render * perf: too selector * fix: app version require tmbId * perf: templates refresh * perf: templates refresh * hide auto save error tip * perf: toolkit guide --------- Co-authored-by: heheer <heheer@sealos.io>
61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
import { Box } from '@chakra-ui/react';
|
|
import React, { useState } from 'react';
|
|
import {
|
|
DragDropContext,
|
|
DroppableProps,
|
|
Droppable,
|
|
DraggableChildrenFn,
|
|
DragStart,
|
|
DropResult
|
|
} from 'react-beautiful-dnd';
|
|
export * from 'react-beautiful-dnd';
|
|
|
|
type Props<T = any> = {
|
|
onDragEndCb: (result: T[]) => void;
|
|
renderClone?: DraggableChildrenFn;
|
|
children: DroppableProps['children'];
|
|
dataList: T[];
|
|
};
|
|
|
|
function DndDrag<T>({ children, renderClone, onDragEndCb, dataList }: Props<T>) {
|
|
const [draggingItemHeight, setDraggingItemHeight] = useState(0);
|
|
|
|
const onDragStart = (start: DragStart) => {
|
|
const draggingNode = document.querySelector(`[data-rbd-draggable-id="${start.draggableId}"]`);
|
|
setDraggingItemHeight(draggingNode?.getBoundingClientRect().height || 0);
|
|
};
|
|
|
|
const onDragEnd = (result: DropResult) => {
|
|
if (!result.destination) {
|
|
return;
|
|
}
|
|
setDraggingItemHeight(0);
|
|
|
|
const startIndex = result.source.index;
|
|
const endIndex = result.destination.index;
|
|
|
|
const list = Array.from(dataList);
|
|
const [removed] = list.splice(startIndex, 1);
|
|
list.splice(endIndex, 0, removed);
|
|
|
|
onDragEndCb(list);
|
|
};
|
|
|
|
return (
|
|
<DragDropContext onDragStart={onDragStart} onDragEnd={onDragEnd}>
|
|
<Droppable droppableId="droppable" renderClone={renderClone}>
|
|
{(provided, snapshot) => {
|
|
return (
|
|
<Box {...provided.droppableProps} ref={provided.innerRef}>
|
|
{children(provided, snapshot)}
|
|
{snapshot.isDraggingOver && <Box height={`${draggingItemHeight}px`} />}
|
|
</Box>
|
|
);
|
|
}}
|
|
</Droppable>
|
|
</DragDropContext>
|
|
);
|
|
}
|
|
|
|
export default React.memo(DndDrag) as <T>(props: Props<T>) => React.ReactElement;
|