diff --git a/.changeset/proud-beers-guess.md b/.changeset/proud-beers-guess.md deleted file mode 100644 index ddc9cff74..000000000 --- a/.changeset/proud-beers-guess.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -"@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 fd4a297ee..e7a65ac11 100644 --- a/packages/ui/table/src/TableCell.tsx +++ b/packages/ui/table/src/TableCell.tsx @@ -42,7 +42,6 @@ export const TableCell = forwardRef isHighlightedCol, onLoadChildren, isHoveredHighlightCol, - isHoveredResizableHandlerCol, showColHighlight, onHoveredColChange, onTreeNodeSwitch, @@ -101,8 +100,7 @@ export const TableCell = forwardRef raw.className, canScroll && sticky && `${prefixCls}__col--sticky`, isHighlightedCol(dataKey) && `${prefixCls}__col--highlight`, - isHoveredHighlightCol(dataKey) && `${prefixCls}__col--hovered-highlight`, - isHoveredResizableHandlerCol(dataKey) && `${prefixCls}__col--hovered-resizable-handler` + isHoveredHighlightCol(dataKey) && `${prefixCls}__col--hovered-highlight` ) if (virtual) { diff --git a/packages/ui/table/src/TheadContent.tsx b/packages/ui/table/src/TheadContent.tsx index 7d37c777d..d33f99b1e 100644 --- a/packages/ui/table/src/TheadContent.tsx +++ b/packages/ui/table/src/TheadContent.tsx @@ -19,7 +19,6 @@ export const TheadContent = forwardRef colWidths, isHoveredHighlightCol, isHighlightedCol, - onHoveredResizableHandlerColChange, onColumnResizable, getStickyColProps, showColMenu, @@ -103,17 +102,7 @@ export const TheadContent = forwardRef key={colIndex} className={`${prefixCls}__resizable`} draggableOpts={{ enableUserSelectHack: false }} - handle={ - { - onHoveredResizableHandlerColChange(col, true) - }} - onMouseLeave={() => { - onHoveredResizableHandlerColChange(col, false) - }} - /> - } + handle={} 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 45a754a91..130eb92ad 100644 --- a/packages/ui/table/src/styles/table.scss +++ b/packages/ui/table/src/styles/table.scss @@ -381,20 +381,6 @@ $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 9ad42065d..94ab60914 100644 --- a/packages/ui/table/src/use-table.ts +++ b/packages/ui/table/src/use-table.ts @@ -185,18 +185,6 @@ 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 { @@ -676,8 +664,6 @@ 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 d321240fd..50dbf4f56 100644 --- a/packages/ui/table/stories/resizable.stories.tsx +++ b/packages/ui/table/stories/resizable.stories.tsx @@ -30,6 +30,120 @@ 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',