From eff3340752234e0550fc13d6df230be6fd08a3b3 Mon Sep 17 00:00:00 2001 From: zhouyun Date: Tue, 19 Nov 2024 21:12:50 +0800 Subject: [PATCH] =?UTF-8?q?Revert=20"fix(table):=20=E5=9C=A8=20resizable?= =?UTF-8?q?=20=E6=A8=A1=E5=BC=8F=E4=B8=8B,=E5=B0=86=E6=8B=96=E6=8B=BD?= =?UTF-8?q?=E7=BA=BF=E9=AB=98=E5=BA=A6=E6=8B=89=E9=95=BF=E8=87=B3=E8=A6=86?= =?UTF-8?q?=E7=9B=96=E5=BD=93=E5=89=8D=E5=88=97=E6=89=80=E6=9C=89=E5=8D=95?= =?UTF-8?q?=E5=85=83=E6=A0=BC=E4=B8=AD=20(#3049)=20(#3050)"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit f634a2cea9df346d793896d02ca4b11e0e0fc048. --- .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, 116 insertions(+), 49 deletions(-) delete mode 100644 .changeset/proud-beers-guess.md 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',