diff --git a/.changeset/proud-beers-guess.md b/.changeset/proud-beers-guess.md new file mode 100644 index 000000000..ddc9cff74 --- /dev/null +++ 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 index e7a65ac11..fd4a297ee 100644 --- a/packages/ui/table/src/TableCell.tsx +++ b/packages/ui/table/src/TableCell.tsx @@ -42,6 +42,7 @@ export const TableCell = forwardRef isHighlightedCol, onLoadChildren, isHoveredHighlightCol, + isHoveredResizableHandlerCol, showColHighlight, onHoveredColChange, onTreeNodeSwitch, @@ -100,7 +101,8 @@ export const TableCell = forwardRef 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 index d33f99b1e..7d37c777d 100644 --- a/packages/ui/table/src/TheadContent.tsx +++ b/packages/ui/table/src/TheadContent.tsx @@ -19,6 +19,7 @@ export const TheadContent = forwardRef colWidths, isHoveredHighlightCol, isHighlightedCol, + onHoveredResizableHandlerColChange, onColumnResizable, getStickyColProps, showColMenu, @@ -102,7 +103,17 @@ export const TheadContent = forwardRef key={colIndex} className={`${prefixCls}__resizable`} draggableOpts={{ enableUserSelectHack: false }} - handle={} + handle={ + { + 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 index 130eb92ad..45a754a91 100644 --- 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 index 805e1dd07..504f6d86c 100644 --- 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 index 50dbf4f56..d321240fd 100644 --- 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 {text} - }, - }, - { - title: '单价', - dataKey: 'price', - width: 150, - render(text) { - return {text} - }, - }, - { - title: '规格', - dataKey: 'size', - width: 150, - render(text) { - return {text} - }, - }, - { - title: '单价', - dataKey: 'price', - width: 150, - render(text) { - return {text} - }, - }, - { - title: '规格', - dataKey: 'size', - width: 150, - render(text) { - return {text} - }, - }, - { - title: '单价', - dataKey: 'price', - width: 150, - render(text) { - return {text} - }, - }, - { - title: '规格', - dataKey: 'size', - width: 150, - render(text) { - return {text} - }, - }, - { - title: '单价', - dataKey: 'price', - width: 150, - render(text) { - return {text} - }, - }, - { - title: '规格', - dataKey: 'size', - width: 150, - render(text) { - return {text} - }, - }, - { - title: '单价', - dataKey: 'price', - width: 150, - render(text) { - return {text} - }, - }, - - { - title: '规格', - dataKey: 'size', - width: 150, - render(text) { - return {text} - }, - }, - { - title: '单价', - dataKey: 'price', - width: 150, - render(text) { - return {text} - }, - }, - { - title: '规格', - dataKey: 'size', - width: 150, - render(text) { - return {text} - }, - }, - { - title: '单价', - dataKey: 'price', - width: 150, - render(text) { - return {text} - }, - }, - { title: '规格', dataKey: 'size',