fix(table): allow resizing column within distance range (#1378)

Tencent · Aug 29, 2022 · cec6b61 · cec6b61
1 parent 51ca075
commit cec6b61
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 4 deletions.
diff --git 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
@@ -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,