From 4d34e0dd96ace3525f555f75854b4b07265d96ed Mon Sep 17 00:00:00 2001
From: whyour <imwhyour@gmail.com>
Date: Tue, 31 Jan 2023 23:46:42 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=8E=AF=E5=A2=83=E5=8F=98?=
 =?UTF-8?q?=E9=87=8F=E6=BB=9A=E5=8A=A8=E5=8D=A1=E9=A1=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/env/index.tsx | 120 +++++++++++++++++++---------------------
 1 file changed, 57 insertions(+), 63 deletions(-)

diff --git a/src/pages/env/index.tsx b/src/pages/env/index.tsx
index e187755c..16cc2e5d 100644
--- a/src/pages/env/index.tsx
+++ b/src/pages/env/index.tsx
@@ -66,50 +66,6 @@ enum OperationPath {
 
 const type = 'DragableBodyRow';
 
-const DragableBodyRow = ({
-  index,
-  moveRow,
-  className,
-  style,
-  ...restProps
-}: any) => {
-  const ref = useRef();
-  const [{ isOver, dropClassName }, drop] = useDrop({
-    accept: type,
-    collect: (monitor) => {
-      const { index: dragIndex } = (monitor.getItem() as any) || {};
-      if (dragIndex === index) {
-        return {};
-      }
-      return {
-        isOver: monitor.isOver(),
-        dropClassName:
-          dragIndex < index ? ' drop-over-downward' : ' drop-over-upward',
-      };
-    },
-    drop: (item: any) => {
-      moveRow(item.index, index);
-    },
-  });
-  const [, drag] = useDrag({
-    type,
-    item: { index },
-    collect: (monitor) => ({
-      isDragging: monitor.isDragging(),
-    }),
-  });
-  drop(drag(ref));
-
-  return (
-    <tr
-      ref={ref}
-      className={`${className}${isOver ? dropClassName : ''}`}
-      style={{ cursor: 'move', ...style }}
-      {...restProps}
-    />
-  );
-};
-
 const Env = () => {
   const { headerStyle, isPhone, theme } = useOutletContext<SharedContext>();
   const columns: any = [
@@ -392,30 +348,68 @@ const Env = () => {
   const vComponents = useMemo(() => {
     return VList({
       height: tableScrollHeight!,
+      resetTopWhenDataChange: false,
     });
   }, [tableScrollHeight]);
-  // const components = useMemo(() => {
-  //   return {
-  //     ...vlistComponent,
-  //     body: {
-  //       ...vlistComponent.body,
-  //       row: DragableBodyRow
-  //     },
-  //     header: {
-  //       cell: ResizableTitle
-  //     }
-  //   };
-  // }, []);
-  const components = {
-    ...vComponents,
-    body: {
-      ...vComponents.body,
-      row: DragableBodyRow,
-    },
+
+  const DragableBodyRow = (props: any) => {
+    const { index, moveRow, className, style, ...restProps } = props;
+    const ref = useRef();
+    const [{ isOver, dropClassName }, drop] = useDrop({
+      accept: type,
+      collect: (monitor) => {
+        const { index: dragIndex } = (monitor.getItem() as any) || {};
+        if (dragIndex === index) {
+          return {};
+        }
+        return {
+          isOver: monitor.isOver(),
+          dropClassName:
+            dragIndex < index ? ' drop-over-downward' : ' drop-over-upward',
+        };
+      },
+      drop: (item: any) => {
+        moveRow(item.index, index);
+      },
+    });
+    const [, drag] = useDrag({
+      type,
+      item: { index },
+      collect: (monitor) => ({
+        isDragging: monitor.isDragging(),
+      }),
+    });
+
+    useEffect(() => {
+      drop(drag(ref));
+    }, [drag, drop]);
+
+    const components = useMemo(() => vComponents.body.row, []);
+
+    const tempProps = useMemo(() => {
+      return {
+        ref: ref,
+        className: `${className}${isOver ? dropClassName : ''}`,
+        style: { cursor: 'move', ...style },
+        ...restProps,
+      };
+    }, [className, dropClassName, restProps, style, isOver]);
+
+    return <> {components(tempProps, ref)} </>;
   };
 
+  const components = useMemo(() => {
+    return {
+      ...vComponents,
+      body: {
+        ...vComponents.body,
+        row: DragableBodyRow,
+      },
+    };
+  }, [vComponents]);
+
   const moveRow = useCallback(
-    (dragIndex, hoverIndex) => {
+    (dragIndex: number, hoverIndex: number) => {
       if (dragIndex === hoverIndex) {
         return;
       }