From cec6b6105d1de6ee219720ad687736146eb2396d Mon Sep 17 00:00:00 2001
From: ZTao-z <1124693098@qq.com>
Date: Mon, 29 Aug 2022 14:16:27 +0800
Subject: [PATCH] fix(table): allow resizing column within distance range
 (#1378)

---
 src/table/THead.tsx                 |  8 +++++++-
 src/table/hooks/useColumnResize.tsx | 30 ++++++++++++++++++++++++++---
 2 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/table/THead.tsx b/src/table/THead.tsx
index 328581983..da36e5cba 100644
--- a/src/table/THead.tsx
+++ b/src/table/THead.tsx
@@ -29,7 +29,12 @@ export interface TheadProps {
     resizeLineRef: MutableRefObject<HTMLDivElement>;
     resizeLineStyle: CSSProperties;
     onColumnMouseover: (e: MouseEvent) => void;
-    onColumnMousedown: (e: MouseEvent, col: BaseTableCol<TableRowData>, nearCol: BaseTableCol<TableRowData>) => void;
+    onColumnMousedown: (
+      e: MouseEvent,
+      col: BaseTableCol<TableRowData>,
+      effectNextCol: BaseTableCol<TableRowData>,
+      effectPrevCol: BaseTableCol<TableRowData>,
+    ) => void;
   };
 }
 
@@ -90,6 +95,7 @@ export default function THead(props: TheadProps) {
                   e,
                   col,
                   index < row.length - 1 ? row[index + 1] : row[index - 1],
+                  index > 0 ? row[index - 1] : row[index + 1],
                 ),
               onMouseMove: (e) => columnResizeParams?.onColumnMouseover?.(e),
             }
diff --git a/src/table/hooks/useColumnResize.tsx b/src/table/hooks/useColumnResize.tsx
index 8528caa8a..7b0c0f93d 100644
--- a/src/table/hooks/useColumnResize.tsx
+++ b/src/table/hooks/useColumnResize.tsx
@@ -19,6 +19,7 @@ export default function useColumnResize(
     isDragging: false,
     draggingCol: null as HTMLElement,
     draggingStart: 0,
+    effectCol: null as 'next' | 'prev' | null,
   };
 
   const [resizeLineStyle, setResizeLineStyle] = useState<CSSProperties>({
@@ -47,19 +48,37 @@ export default function useColumnResize(
       if (targetBoundRect.right - e.pageX <= distance) {
         target.style.cursor = 'col-resize';
         resizeLineParams.draggingCol = target;
+        resizeLineParams.effectCol = 'next';
+      } else if (e.pageX - targetBoundRect.left <= distance) {
+        const prevEl = target.previousElementSibling;
+        if (prevEl) {
+          target.style.cursor = 'col-resize';
+          resizeLineParams.draggingCol = prevEl as HTMLElement;
+          resizeLineParams.effectCol = 'prev';
+        } else {
+          target.style.cursor = '';
+          resizeLineParams.draggingCol = null;
+          resizeLineParams.effectCol = null;
+        }
       } else {
         target.style.cursor = '';
         resizeLineParams.draggingCol = null;
+        resizeLineParams.effectCol = null;
       }
     }
   };
 
   // 调整表格列宽
-  const onColumnMousedown = (e: MouseEvent, col: BaseTableCol<TableRowData>, nearCol: BaseTableCol<TableRowData>) => {
+  const onColumnMousedown = (
+    e: MouseEvent,
+    col: BaseTableCol<TableRowData>,
+    effectNextCol: BaseTableCol<TableRowData>,
+    effectPrevCol: BaseTableCol<TableRowData>,
+  ) => {
     // 非 resize 的点击，不做处理
     if (!resizeLineParams.draggingCol) return;
 
-    const target = (e.target as HTMLElement).closest('th');
+    const target = resizeLineParams.draggingCol;
     const targetBoundRect = target.getBoundingClientRect();
     const tableBoundRect = tableContentRef.current?.getBoundingClientRect();
     const resizeLinePos = targetBoundRect.right - tableBoundRect.left;
@@ -133,11 +152,16 @@ export default function useColumnResize(
           width = maxColWidth;
         }
         // 更新列宽
-        setThWidthListByColumnDrag(col, width, nearCol);
+        if (resizeLineParams.effectCol === 'next') {
+          setThWidthListByColumnDrag(col, width, effectNextCol);
+        } else if (resizeLineParams.effectCol === 'prev') {
+          setThWidthListByColumnDrag(effectPrevCol, width, col);
+        }
 
         // 恢复设置
         resizeLineParams.isDragging = false;
         resizeLineParams.draggingCol = null;
+        resizeLineParams.effectCol = null;
         target.style.cursor = '';
         setResizeLineStyle({
           ...resizeLineStyle,