From 76b13921c9df39ef896e4112b10680cb78431c1c Mon Sep 17 00:00:00 2001 From: zhouyun1 Date: Tue, 19 Nov 2024 15:44:44 +0800 Subject: [PATCH] =?UTF-8?q?fix(table):=20=E5=9C=A8=20resizable=20=E6=A8=A1?= =?UTF-8?q?=E5=BC=8F=E4=B8=8B,=E5=B0=86=E6=8B=96=E6=8B=BD=E7=BA=BF?= =?UTF-8?q?=E9=AB=98=E5=BA=A6=E6=8B=89=E9=95=BF=E8=87=B3=E8=A6=86=E7=9B=96?= =?UTF-8?q?=E5=BD=93=E5=89=8D=E5=88=97=E6=89=80=E6=9C=89=E5=8D=95=E5=85=83?= =?UTF-8?q?=E6=A0=BC=E4=B8=AD=20(#3049)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/proud-beers-guess.md | 6 + packages/ui/table/src/TableCell.tsx | 4 +- packages/ui/table/src/TheadContent.tsx | 13 +- packages/ui/table/src/styles/table.scss | 14 +++ packages/ui/table/src/use-table.ts | 14 +++ .../ui/table/stories/resizable.stories.tsx | 114 ------------------ 6 files changed, 49 insertions(+), 116 deletions(-) create mode 100644 .changeset/proud-beers-guess.md 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',