optimize dnd drag code (#3768)

packages/web/components/common/DndDrag/index.tsx

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

projects/app/src/components/core/app/VariableEdit.tsx

@@ -223,8 +223,9 @@ const VariableEdit = ({
                   variables={variables}
                   variables={variables}
                 />
                 />
               )}
               )}
+              zoom={zoom}
             >
             >
-              {({ provided, snapshot, draggingItemHeight }) => (
+              {({ provided }) => (
                 <Tbody {...provided.droppableProps} ref={provided.innerRef}>
                 <Tbody {...provided.droppableProps} ref={provided.innerRef}>
                   {formatVariables.map((item, index) => (
                   {formatVariables.map((item, index) => (
                     <Draggable key={item.id} draggableId={item.id} index={index}>
                     <Draggable key={item.id} draggableId={item.id} index={index}>
@@ -241,7 +242,6 @@ const VariableEdit = ({
                       )}
                       )}
                     </Draggable>
                     </Draggable>
                   ))}
                   ))}
-                  {snapshot.isDraggingOver && <Box height={`${draggingItemHeight / zoom}px`} />}
                 </Tbody>
                 </Tbody>
               )}
               )}
             </DndDrag>
             </DndDrag>

projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/NodeFormInput/index.tsx

@@ -209,8 +209,9 @@ const NodeFormInput = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
                       />
                       />
                     );
                     );
                   }}
                   }}
+                  zoom={zoom}
                 >
                 >
-                  {({ provided, snapshot, draggingItemHeight }) => (
+                  {({ provided }) => (
                     <Tbody {...provided.droppableProps} ref={provided.innerRef}>
                     <Tbody {...provided.droppableProps} ref={provided.innerRef}>
                       {inputs.map((item, index) => {
                       {inputs.map((item, index) => {
                         const icon = FlowNodeInputMap[item.type as FlowNodeInputTypeEnum]?.icon;
                         const icon = FlowNodeInputMap[item.type as FlowNodeInputTypeEnum]?.icon;
@@ -230,7 +231,6 @@ const NodeFormInput = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
                           </Draggable>
                           </Draggable>
                         );
                         );
                       })}
                       })}
-                      {snapshot.isDraggingOver && <Box height={`${draggingItemHeight / zoom}px`} />}
                     </Tbody>
                     </Tbody>
                   )}
                   )}
                 </DndDrag>
                 </DndDrag>

projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/NodeIfElse/index.tsx

@@ -65,7 +65,7 @@ const NodeIfElse = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
             />
             />
           )}
           )}
         >
         >
-          {({ provided, snapshot, draggingItemHeight }) => (
+          {({ provided }) => (
             <Box {...provided.droppableProps} ref={provided.innerRef}>
             <Box {...provided.droppableProps} ref={provided.innerRef}>
               {ifElseList.map((conditionItem, conditionIndex) => (
               {ifElseList.map((conditionItem, conditionIndex) => (
                 <Draggable
                 <Draggable
@@ -86,7 +86,6 @@ const NodeIfElse = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
                   )}
                   )}
                 </Draggable>
                 </Draggable>
               ))}
               ))}
-              {snapshot.isDraggingOver && <Box height={`${draggingItemHeight / zoom}px`} />}
             </Box>
             </Box>
           )}
           )}
         </DndDrag>
         </DndDrag>

projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/NodePluginIO/InputTypeConfig.tsx

@@ -417,7 +417,7 @@ const InputTypeConfig = ({
                 );
                 );
               }}
               }}
             >
             >
-              {({ provided, snapshot, draggingItemHeight }) => (
+              {({ provided }) => (
                 <Box
                 <Box
                   {...provided.droppableProps}
                   {...provided.droppableProps}
                   ref={provided.innerRef}
                   ref={provided.innerRef}
@@ -487,7 +487,6 @@ const InputTypeConfig = ({
                       )}
                       )}
                     </Draggable>
                     </Draggable>
                   ))}
                   ))}
-                  {snapshot.isDraggingOver && <Box height={`${draggingItemHeight}px`} />}
                 </Box>
                 </Box>
               )}
               )}
             </DndDrag>
             </DndDrag>

projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/nodes/NodeUserSelect.tsx

@@ -62,8 +62,9 @@ const NodeUserSelect = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
                   index={rubric.source.index}
                   index={rubric.source.index}
                 />
                 />
               )}
               )}
+              zoom={zoom}
             >
             >
-              {({ provided, snapshot, draggingItemHeight }) => (
+              {({ provided }) => (
                 <Box ref={provided.innerRef} {...provided.droppableProps}>
                 <Box ref={provided.innerRef} {...provided.droppableProps}>
                   {options.map((item, i) => (
                   {options.map((item, i) => (
                     <Draggable key={item.key} index={i} draggableId={item.key}>
                     <Draggable key={item.key} index={i} draggableId={item.key}>
@@ -80,7 +81,6 @@ const NodeUserSelect = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
                       )}
                       )}
                     </Draggable>
                     </Draggable>
                   ))}
                   ))}
-                  {snapshot.isDraggingOver && <Box height={`${draggingItemHeight}px`} />}
                 </Box>
                 </Box>
               )}
               )}
             </DndDrag>
             </DndDrag>