fix(table): 在 resizable 模式下,将拖拽线高度拉长至覆盖当前列所有单元格中 (#3049) (#3050)

XiaoMi · Nov 19, 2024 · f634a2c · f634a2c
1 parent 6f27f69
commit f634a2c
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 116 deletions.
diff --git a/.changeset/proud-beers-guess.md b/.changeset/proud-beers-guess.md
@@ -0,0 +1,6 @@
+---
+"@hi-ui/table": patch
+"@hi-ui/hiui": patch
+---
+
+fix(table): 在 resizable 模式下,将拖拽线高度拉长至覆盖当前列所有单元格中 (#3049)
diff --git a/packages/ui/table/src/TableCell.tsx b/packages/ui/table/src/TableCell.tsx
@@ -42,6 +42,7 @@ export const TableCell = forwardRef<HTMLTableCellElement | null, TableCellProps>
       isHighlightedCol,
       onLoadChildren,
       isHoveredHighlightCol,
+      isHoveredResizableHandlerCol,
       showColHighlight,
       onHoveredColChange,
       onTreeNodeSwitch,
@@ -100,7 +101,8 @@ export const TableCell = forwardRef<HTMLTableCellElement | null, TableCellProps>
       raw.className,
       canScroll && sticky && `${prefixCls}__col--sticky`,
       isHighlightedCol(dataKey) && `${prefixCls}__col--highlight`,
-      isHoveredHighlightCol(dataKey) && `${prefixCls}__col--hovered-highlight`
+      isHoveredHighlightCol(dataKey) && `${prefixCls}__col--hovered-highlight`,
+      isHoveredResizableHandlerCol(dataKey) && `${prefixCls}__col--hovered-resizable-handler`
     )
 
     if (virtual) {

diff --git a/packages/ui/table/src/TheadContent.tsx b/packages/ui/table/src/TheadContent.tsx
@@ -19,6 +19,7 @@ export const TheadContent = forwardRef<HTMLDivElement | null, TheadContentProps>
       colWidths,
       isHoveredHighlightCol,
       isHighlightedCol,
+      onHoveredResizableHandlerColChange,
       onColumnResizable,
       getStickyColProps,
       showColMenu,
@@ -102,7 +103,17 @@ export const TheadContent = forwardRef<HTMLDivElement | null, TheadContentProps>
                     key={colIndex}
                     className={`${prefixCls}__resizable`}
                     draggableOpts={{ enableUserSelectHack: false }}
-                    handle={<span className={`${prefixCls}__resizable-handle`} />}
+                    handle={
+                      <span
+                        className={`${prefixCls}__resizable-handle`}
+                        onMouseEnter={() => {
+                          onHoveredResizableHandlerColChange(col, true)
+                        }}
+                        onMouseLeave={() => {
+                          onHoveredResizableHandlerColChange(col, false)
+                        }}
+                      />
+                    }
                     height={0}
                     width={colWidths[index] as number}
                     onResize={(evt, options) => {

diff --git a/packages/ui/table/src/styles/table.scss b/packages/ui/table/src/styles/table.scss
@@ -381,6 +381,20 @@ $emptyContent: '#{$component-prefix}-table-body-empty-content' !default;
   &.#{$prefix}-cell__col--hovered-highlight {
     background-color: use-color-mode('primary', 50);
   }
+
+  &.#{$prefix}-cell__col--hovered-resizable-handler {
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: -1px;
+      right: 0;
+      width: 2px;
+      height: calc(100% + 1px);
+      background-color: use-color-mode('primary');
+    }
+  }
 }
 
 // 冻结列 阴影

diff --git a/packages/ui/table/src/use-table.ts b/packages/ui/table/src/use-table.ts
@@ -183,6 +183,18 @@ export const useTable = ({
     onSelect: setHoveredColKey,
   })
 
+  /**
+   * 在 resizable 模式下，当鼠标 hover 到 resizable handler 上，记录当前的 colKey
+   */
+  const [hoveredResizableHandlerColKey, setHoveredResizableHandlerColKey] = useState<
+    React.ReactText
+  >('')
+  const [onHoveredResizableHandlerColChange, isHoveredResizableHandlerCol] = useSelect({
+    disabled: !resizable,
+    selectedId: hoveredResizableHandlerColKey,
+    onSelect: setHoveredResizableHandlerColKey,
+  })
+
   // ************************ 列宽 resizable ************************ //
 
   const {
@@ -662,6 +674,8 @@ export const useTable = ({
     showColHighlight,
     isHoveredHighlightCol,
     onHoveredColChange,
+    isHoveredResizableHandlerCol,
+    onHoveredResizableHandlerColChange,
     // 行拖拽
     draggable,
     highlightColumns: [] as any,

diff --git a/packages/ui/table/stories/resizable.stories.tsx b/packages/ui/table/stories/resizable.stories.tsx
@@ -30,120 +30,6 @@ export const Resizable = () => {
               dataKey: 'type',
               width: 80,
             },
-            {
-              title: '规格',
-              dataKey: 'size',
-              width: 150,
-              render(text) {
-                return <EllipsisTooltip>{text}</EllipsisTooltip>
-              },
-            },
-            {
-              title: '单价',
-              dataKey: 'price',
-              width: 150,
-              render(text) {
-                return <EllipsisTooltip>{text}</EllipsisTooltip>
-              },
-            },
-            {
-              title: '规格',
-              dataKey: 'size',
-              width: 150,
-              render(text) {
-                return <EllipsisTooltip>{text}</EllipsisTooltip>
-              },
-            },
-            {
-              title: '单价',
-              dataKey: 'price',
-              width: 150,
-              render(text) {
-                return <EllipsisTooltip>{text}</EllipsisTooltip>
-              },
-            },
-            {
-              title: '规格',
-              dataKey: 'size',
-              width: 150,
-              render(text) {
-                return <EllipsisTooltip>{text}</EllipsisTooltip>
-              },
-            },
-            {
-              title: '单价',
-              dataKey: 'price',
-              width: 150,
-              render(text) {
-                return <EllipsisTooltip>{text}</EllipsisTooltip>
-              },
-            },
-            {
-              title: '规格',
-              dataKey: 'size',
-              width: 150,
-              render(text) {
-                return <EllipsisTooltip>{text}</EllipsisTooltip>
-              },
-            },
-            {
-              title: '单价',
-              dataKey: 'price',
-              width: 150,
-              render(text) {
-                return <EllipsisTooltip>{text}</EllipsisTooltip>
-              },
-            },
-            {
-              title: '规格',
-              dataKey: 'size',
-              width: 150,
-              render(text) {
-                return <EllipsisTooltip>{text}</EllipsisTooltip>
-              },
-            },
-            {
-              title: '单价',
-              dataKey: 'price',
-              width: 150,
-              render(text) {
-                return <EllipsisTooltip>{text}</EllipsisTooltip>
-              },
-            },
-
-            {
-              title: '规格',
-              dataKey: 'size',
-              width: 150,
-              render(text) {
-                return <EllipsisTooltip>{text}</EllipsisTooltip>
-              },
-            },
-            {
-              title: '单价',
-              dataKey: 'price',
-              width: 150,
-              render(text) {
-                return <EllipsisTooltip>{text}</EllipsisTooltip>
-              },
-            },
-            {
-              title: '规格',
-              dataKey: 'size',
-              width: 150,
-              render(text) {
-                return <EllipsisTooltip>{text}</EllipsisTooltip>
-              },
-            },
-            {
-              title: '单价',
-              dataKey: 'price',
-              width: 150,
-              render(text) {
-                return <EllipsisTooltip>{text}</EllipsisTooltip>
-              },
-            },
-
             {
               title: '规格',
               dataKey: 'size',