Skip to content

Commit 76dad74

Browse files
zombieJzombieJ
committed
chore: tmp check for fixed
1 parent d218893 commit 76dad74

14 files changed

Lines changed: 194 additions & 276 deletions

File tree

‎assets/index.less‎

Lines changed: 88 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -56,96 +56,100 @@
5656
}
5757

5858
// ================== Cell ==================
59-
&-fixed-column-gapped {
60-
.@{tablePrefixCls}-cell-fix-left-last::after,
61-
.@{tablePrefixCls}-cell-fix-right-first::after {
62-
display: none !important;
63-
}
64-
}
59+
// &-fixed-column-gapped {
60+
// .@{tablePrefixCls}-cell-fix-left-last::after,
61+
// .@{tablePrefixCls}-cell-fix-right-first::after {
62+
// display: none !important;
63+
// }
64+
// }
6565

6666
&-cell {
6767
background: #f4f4f4;
6868

69-
&-fix-left,
70-
&-fix-right {
71-
z-index: 2;
72-
}
73-
74-
&-fix-right:last-child:not(&-fix-sticky) {
75-
border-right-color: transparent;
76-
}
77-
78-
.@{tablePrefixCls}-rtl & {
79-
&-fix-right:last-child {
80-
border-right-color: @border-color;
81-
}
82-
&-fix-left:last-child {
83-
border-left-color: transparent;
84-
}
85-
}
86-
87-
&-fix-left-first {
88-
.@{tablePrefixCls}-rtl & {
89-
box-shadow: 1px 0 0 @border-color;
90-
}
91-
}
92-
93-
&-fix-left-first::after,
94-
&-fix-left-last::after {
95-
position: absolute;
96-
top: 0;
97-
right: -1px;
98-
bottom: -1px;
99-
width: 20px;
100-
transform: translateX(100%);
101-
transition: box-shadow 0.3s;
102-
content: '';
103-
pointer-events: none;
104-
}
105-
106-
&-fix-left-all::after {
107-
display: none;
108-
}
109-
110-
&-fix-right-first,
111-
&-fix-right-last {
112-
box-shadow: -1px 0 0 @border-color;
113-
114-
.@{tablePrefixCls}-rtl & {
115-
box-shadow: none;
116-
}
117-
118-
&::after {
119-
position: absolute;
120-
top: 0;
121-
bottom: -1px;
122-
left: -1px;
123-
width: 20px;
124-
transform: translateX(-100%);
125-
transition: box-shadow 0.3s;
126-
content: '';
127-
pointer-events: none;
128-
}
69+
&-fix {
70+
position: sticky !important;
12971
}
13072

131-
&&-ellipsis {
132-
overflow: hidden;
133-
white-space: nowrap;
134-
text-overflow: ellipsis;
135-
136-
// Fixed first or last should special process
137-
&.@{tablePrefixCls}-cell-fix-left-first,
138-
&.@{tablePrefixCls}-cell-fix-left-last,
139-
&.@{tablePrefixCls}-cell-fix-right-first &.@{tablePrefixCls}-cell-fix-right-last {
140-
overflow: visible;
141-
142-
.@{tablePrefixCls}-cell-content {
143-
display: block;
144-
overflow: hidden;
145-
text-overflow: ellipsis;
146-
}
147-
}
148-
}
73+
// &-fix-left,
74+
// &-fix-right {
75+
// z-index: 2;
76+
// }
77+
78+
// &-fix-right:last-child:not(&-fix-sticky) {
79+
// border-right-color: transparent;
80+
// }
81+
82+
// .@{tablePrefixCls}-rtl & {
83+
// &-fix-right:last-child {
84+
// border-right-color: @border-color;
85+
// }
86+
// &-fix-left:last-child {
87+
// border-left-color: transparent;
88+
// }
89+
// }
90+
91+
// &-fix-left-first {
92+
// .@{tablePrefixCls}-rtl & {
93+
// box-shadow: 1px 0 0 @border-color;
94+
// }
95+
// }
96+
97+
// &-fix-left-first::after,
98+
// &-fix-left-last::after {
99+
// position: absolute;
100+
// top: 0;
101+
// right: -1px;
102+
// bottom: -1px;
103+
// width: 20px;
104+
// transform: translateX(100%);
105+
// transition: box-shadow 0.3s;
106+
// content: '';
107+
// pointer-events: none;
108+
// }
109+
110+
// &-fix-left-all::after {
111+
// display: none;
112+
// }
113+
114+
// &-fix-right-first,
115+
// &-fix-right-last {
116+
// box-shadow: -1px 0 0 @border-color;
117+
118+
// .@{tablePrefixCls}-rtl & {
119+
// box-shadow: none;
120+
// }
121+
122+
// &::after {
123+
// position: absolute;
124+
// top: 0;
125+
// bottom: -1px;
126+
// left: -1px;
127+
// width: 20px;
128+
// transform: translateX(-100%);
129+
// transition: box-shadow 0.3s;
130+
// content: '';
131+
// pointer-events: none;
132+
// }
133+
// }
134+
135+
// &&-ellipsis {
136+
// overflow: hidden;
137+
// white-space: nowrap;
138+
// text-overflow: ellipsis;
139+
140+
// // Fixed first or last should special process
141+
// &.@{tablePrefixCls}-cell-fix-left-first,
142+
// &.@{tablePrefixCls}-cell-fix-left-last,
143+
// &.@{tablePrefixCls}-cell-fix-right-first &.@{tablePrefixCls}-cell-fix-right-last {
144+
// overflow: visible;
145+
146+
// .@{tablePrefixCls}-cell-content {
147+
// display: block;
148+
// overflow: hidden;
149+
// text-overflow: ellipsis;
150+
// }
151+
// }
152+
// }
149153

150154
&&-row-hover {
151155
background: #fff4f4;

‎docs/examples/fixedColumns.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const columns: ColumnType<RecordType>[] = [
3434
{ title: 'title8', dataIndex: 'b', key: 'h' },
3535
{ title: 'title9', dataIndex: 'b', key: 'i' },
3636
{ title: 'title10', dataIndex: 'b', key: 'j' },
37-
{ title: 'title11', dataIndex: 'b', key: 'k', width: 50 },
37+
{ title: 'title11', dataIndex: 'b', key: 'k', width: 50, fixed: 'right' },
3838
{ title: 'title12', dataIndex: 'b', key: 'l', width: 100, fixed: 'right' },
3939
];
4040

‎src/Cell/index.tsx‎

Lines changed: 31 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,10 @@ export interface CellProps<RecordType extends DefaultRecordType> {
3737
shouldCellUpdate?: (record: RecordType, prevRecord: RecordType) => boolean;
3838

3939
// Fixed
40-
fixLeft?: number | false;
41-
fixRight?: number | false;
42-
firstFixLeft?: boolean;
43-
lastFixLeft?: boolean;
44-
firstFixRight?: boolean;
45-
lastFixRight?: boolean;
40+
fixStart?: number | false;
41+
fixEnd?: number | false;
42+
fixedStartShadow?: boolean;
43+
fixedEndShadow?: boolean;
4644
allColsFixedLeft?: boolean;
4745

4846
// ====================== Private Props ======================
@@ -104,12 +102,10 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
104102
rowSpan,
105103

106104
// Fixed
107-
fixLeft,
108-
fixRight,
109-
firstFixLeft,
110-
lastFixLeft,
111-
firstFixRight,
112-
lastFixRight,
105+
fixStart,
106+
fixEnd,
107+
fixedStartShadow,
108+
fixedEndShadow,
113109

114110
// Private
115111
appendNode,
@@ -118,8 +114,7 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
118114
} = props;
119115

120116
const cellPrefixCls = `${prefixCls}-cell`;
121-
const { supportSticky, allColumnsFixedLeft, rowHoverable } = useContext(TableContext, [
122-
'supportSticky',
117+
const { allColumnsFixedLeft, rowHoverable } = useContext(TableContext, [
123118
'allColumnsFixedLeft',
124119
'rowHoverable',
125120
]);
@@ -136,16 +131,14 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
136131

137132
// ====================== Fixed =======================
138133
const fixedStyle: React.CSSProperties = {};
139-
const isFixLeft = typeof fixLeft === 'number' && supportSticky;
140-
const isFixRight = typeof fixRight === 'number' && supportSticky;
134+
const isFixStart = typeof fixStart === 'number';
135+
const isFixEnd = typeof fixEnd === 'number';
141136

142-
if (isFixLeft) {
143-
fixedStyle.position = 'sticky';
144-
fixedStyle.left = fixLeft as number;
137+
if (isFixStart) {
138+
fixedStyle.insetInlineStart = fixStart as number;
145139
}
146-
if (isFixRight) {
147-
fixedStyle.position = 'sticky';
148-
fixedStyle.right = fixRight as number;
140+
if (isFixEnd) {
141+
fixedStyle.insetInlineEnd = fixEnd as number;
149142
}
150143

151144
// ================ RowSpan & ColSpan =================
@@ -190,16 +183,21 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
190183
cellPrefixCls,
191184
className,
192185
{
193-
[`${cellPrefixCls}-fix-left`]: isFixLeft && supportSticky,
194-
[`${cellPrefixCls}-fix-left-first`]: firstFixLeft && supportSticky,
195-
[`${cellPrefixCls}-fix-left-last`]: lastFixLeft && supportSticky,
196-
[`${cellPrefixCls}-fix-left-all`]: lastFixLeft && allColumnsFixedLeft && supportSticky,
197-
[`${cellPrefixCls}-fix-right`]: isFixRight && supportSticky,
198-
[`${cellPrefixCls}-fix-right-first`]: firstFixRight && supportSticky,
199-
[`${cellPrefixCls}-fix-right-last`]: lastFixRight && supportSticky,
186+
// Fixed
187+
[`${cellPrefixCls}-fix`]: isFixStart || isFixEnd,
188+
[`${cellPrefixCls}-fix-start`]: isFixStart,
189+
// [`${cellPrefixCls}-fix-left-first`]: firstFixLeft && supportSticky,
190+
// [`${cellPrefixCls}-fix-left-last`]: lastFixLeft && supportSticky,
191+
// [`${cellPrefixCls}-fix-left-all`]: lastFixLeft && allColumnsFixedLeft && supportSticky,
192+
[`${cellPrefixCls}-fix-end`]: isFixEnd,
193+
// [`${cellPrefixCls}-fix-right-first`]: firstFixRight && supportSticky,
194+
// [`${cellPrefixCls}-fix-right-last`]: lastFixRight && supportSticky,
195+
196+
// Fixed shadow
197+
200198
[`${cellPrefixCls}-ellipsis`]: ellipsis,
201199
[`${cellPrefixCls}-with-append`]: appendNode,
202-
[`${cellPrefixCls}-fix-sticky`]: (isFixLeft || isFixRight) && isSticky && supportSticky,
200+
[`${cellPrefixCls}-fix-sticky`]: (isFixStart || isFixEnd) && isSticky,
203201
[`${cellPrefixCls}-row-hover`]: !legacyCellProps && hovering,
204202
},
205203
additionalProps.className,
@@ -233,9 +231,9 @@ function Cell<RecordType>(props: CellProps<RecordType>) {
233231
mergedChildNode = null;
234232
}
235233

236-
if (ellipsis && (lastFixLeft || firstFixRight)) {
237-
mergedChildNode = <span className={`${cellPrefixCls}-content`}>{mergedChildNode}</span>;
238-
}
234+
// if (ellipsis && (lastFixLeft || firstFixRight)) {
235+
// mergedChildNode = <span className={`${cellPrefixCls}-content`}>{mergedChildNode}</span>;
236+
// }
239237

240238
return (
241239
<Component

‎src/FixedHolder/index.tsx‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,22 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((pro
8585
function onWheel(e: WheelEvent) {
8686
const { currentTarget, deltaX } = e as unknown as React.WheelEvent<HTMLDivElement>;
8787
if (deltaX) {
88-
onScroll({ currentTarget, scrollLeft: currentTarget.scrollLeft + deltaX });
88+
const { scrollLeft, scrollWidth, clientWidth } = currentTarget;
89+
const maxScrollWidth = scrollWidth - clientWidth;
90+
let nextScroll = scrollLeft + deltaX;
91+
92+
if (direction === 'rtl') {
93+
nextScroll = Math.max(-maxScrollWidth, nextScroll);
94+
nextScroll = Math.min(0, nextScroll);
95+
} else {
96+
nextScroll = Math.min(maxScrollWidth, nextScroll);
97+
nextScroll = Math.max(0, nextScroll);
98+
}
99+
100+
onScroll({
101+
currentTarget,
102+
scrollLeft: nextScroll,
103+
});
89104
e.preventDefault();
90105
}
91106
}
@@ -124,13 +139,15 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((pro
124139

125140
// Calculate the sticky offsets
126141
const headerStickyOffsets = useMemo(() => {
127-
const { right, left } = stickyOffsets;
142+
const { start, end } = stickyOffsets;
128143
return {
129144
...stickyOffsets,
130-
left:
131-
direction === 'rtl' ? [...left.map(width => width + combinationScrollBarSize), 0] : left,
132-
right:
133-
direction === 'rtl' ? right : [...right.map(width => width + combinationScrollBarSize), 0],
145+
// left:
146+
// direction === 'rtl' ? [...left.map(width => width + combinationScrollBarSize), 0] : left,
147+
// right:
148+
// direction === 'rtl' ? right : [...right.map(width => width + combinationScrollBarSize), 0],
149+
start: start,
150+
end: [...end.map(width => width + combinationScrollBarSize), 0],
134151
isSticky,
135152
};
136153
}, [combinationScrollBarSize, stickyOffsets, isSticky]);

‎src/Footer/Cell.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export default function SummaryCell({
2323
rowSpan,
2424
align,
2525
}: SummaryCellProps) {
26-
const { prefixCls, direction } = useContext(TableContext, ['prefixCls', 'direction']);
26+
const { prefixCls } = useContext(TableContext, ['prefixCls']);
2727
const { scrollColumnIndex, stickyOffsets, flattenColumns } = React.useContext(SummaryContext);
2828
const lastIndex = index + colSpan - 1;
2929
const mergedColSpan = lastIndex + 1 === scrollColumnIndex ? colSpan + 1 : colSpan;
@@ -33,7 +33,6 @@ export default function SummaryCell({
3333
index + mergedColSpan - 1,
3434
flattenColumns,
3535
stickyOffsets,
36-
direction,
3736
);
3837

3938
return (

‎src/Header/HeaderRow.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const HeaderRow = <RecordType extends any>(props: RowProps<RecordType>) => {
3232
onHeaderRow,
3333
index,
3434
} = props;
35-
const { prefixCls, direction } = useContext(TableContext, ['prefixCls', 'direction']);
35+
const { prefixCls } = useContext(TableContext, ['prefixCls']);
3636
let rowProps: React.HTMLAttributes<HTMLElement>;
3737
if (onHeaderRow) {
3838
rowProps = onHeaderRow(
@@ -52,7 +52,6 @@ const HeaderRow = <RecordType extends any>(props: RowProps<RecordType>) => {
5252
cell.colEnd,
5353
flattenColumns,
5454
stickyOffsets,
55-
direction,
5655
);
5756

5857
let additionalProps: React.HTMLAttributes<HTMLElement>;

0 commit comments

Comments
 (0)