Skip to content

Commit

Permalink
Revert "fix(table): 在 resizable 模式下,将拖拽线高度拉长至覆盖当前列所有单元格中 (#3049) (#3050…
Browse files Browse the repository at this point in the history 
…)"

This reverts commit f634a2c.
  • Loading branch information
@zyprepare
zyprepare authored Nov 19, 2024
1 parent 26a081f commit eff3340
Show file tree
Hide file tree
Showing 6 changed files with 116 additions and 49 deletions.
6 changes: 0 additions & 6 deletions .changeset/proud-beers-guess.md
View file

This file was deleted.

4 changes: 1 addition & 3 deletions packages/ui/table/src/TableCell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,6 @@ export const TableCell = forwardRef<HTMLTableCellElement | null, TableCellProps>
isHighlightedCol,
onLoadChildren,
isHoveredHighlightCol,
isHoveredResizableHandlerCol,
showColHighlight,
onHoveredColChange,
onTreeNodeSwitch,
Expand Down Expand Up @@ -101,8 +100,7 @@ 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`,
isHoveredResizableHandlerCol(dataKey) && `${prefixCls}__col--hovered-resizable-handler`
isHoveredHighlightCol(dataKey) && `${prefixCls}__col--hovered-highlight`
)

if (virtual) {
Expand Down
13 changes: 1 addition & 12 deletions packages/ui/table/src/TheadContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ export const TheadContent = forwardRef<HTMLDivElement | null, TheadContentProps>
colWidths,
isHoveredHighlightCol,
isHighlightedCol,
onHoveredResizableHandlerColChange,
onColumnResizable,
getStickyColProps,
showColMenu,
Expand Down Expand Up @@ -103,17 +102,7 @@ export const TheadContent = forwardRef<HTMLDivElement | null, TheadContentProps>
key={colIndex}
className={`${prefixCls}__resizable`}
draggableOpts={{ enableUserSelectHack: false }}
handle={
<span
className={`${prefixCls}__resizable-handle`}
onMouseEnter={() => {
onHoveredResizableHandlerColChange(col, true)
}}
onMouseLeave={() => {
onHoveredResizableHandlerColChange(col, false)
}}
/>
}
handle={<span className={`${prefixCls}__resizable-handle`} />}
height={0}
width={colWidths[index] as number}
onResize={(evt, options) => {
Expand Down
14 changes: 0 additions & 14 deletions packages/ui/table/src/styles/table.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
}
}
}

// 冻结列 阴影
Expand Down
14 changes: 0 additions & 14 deletions packages/ui/table/src/use-table.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -676,8 +664,6 @@ export const useTable = ({
showColHighlight,
isHoveredHighlightCol,
onHoveredColChange,
isHoveredResizableHandlerCol,
onHoveredResizableHandlerColChange,
// 行拖拽
draggable,
highlightColumns: [] as any,
Expand Down
114 changes: 114 additions & 0 deletions packages/ui/table/stories/resizable.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,120 @@ 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',
Expand Down

0 comments on commit eff3340

Please sign in to comment.