Skip to content

Commit

Permalink
chore: use line align
Browse files Browse the repository at this point in the history
  • Loading branch information
@zombieJ
zombieJ committed Aug 18, 2023
1 parent 382386d commit 7f36f9a
Show file tree
Hide file tree
Showing 5 changed files with 97 additions and 152 deletions.
22 changes: 15 additions & 7 deletions assets/virtual.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,12 @@
border-left: @border;
}

.@{tablePrefixCls}-row-extra {
.@{tablePrefixCls}-cell {
background: rgba(200, 200, 255) !important;
}
}

.@{tablePrefixCls}-cell {
flex: 0 0 var(--virtual-width);
width: var(--virtual-width);
Expand All @@ -25,12 +31,14 @@
left: calc(var(--sticky-left) + 1px) !important;
}

&-virtual-fixed {
position: absolute;
z-index: 1;
border-bottom: @border;
left: calc(var(--sticky-left) + 1px) !important;
background: rgba(200, 200, 255) !important;
}


// &-virtual-fixed {
// position: absolute;
// z-index: 1;
// border-bottom: @border;
// left: calc(var(--sticky-left) + 1px) !important;
// background: rgba(200, 200, 255) !important;
// }
}
}
132 changes: 66 additions & 66 deletions docs/examples/virtual.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,24 +18,24 @@ const columns: ColumnsType = [
title: 'title3',
dataIndex: 'c',
key: 'c',
// onCell: (_, index) => {
// if (index % 4 === 0) {
// return {
// rowSpan: 3,
// };
// }
onCell: (_, index) => {
if (index % 4 === 0) {
return {
rowSpan: 3,
};
}

// if (index % 4 === 3) {
// return {
// rowSpan: 1,
// colSpan: 3,
// };
// }
if (index % 4 === 3) {
return {
rowSpan: 1,
colSpan: 3,
};
}

// return {
// rowSpan: 0,
// };
// },
return {
rowSpan: 0,
};
},
},
{
title: 'title4',
Expand All @@ -45,55 +45,55 @@ const columns: ColumnsType = [
{
title: 'title4-1',
dataIndex: 'b',
// onCell: (_, index) => {
// if (index % 4 === 0) {
// return {
// colSpan: 3,
// };
// }
onCell: (_, index) => {
if (index % 4 === 0) {
return {
colSpan: 3,
};
}

// if (index % 4 === 3) {
// return {
// colSpan: 0,
// };
// }
// },
if (index % 4 === 3) {
return {
colSpan: 0,
};
}
},
},
{
title: 'title4-2',
dataIndex: 'b',
// onCell: (_, index) => {
// if (index % 4 === 0 || index % 4 === 3) {
// return {
// colSpan: 0,
// };
// }
// },
onCell: (_, index) => {
if (index % 4 === 0 || index % 4 === 3) {
return {
colSpan: 0,
};
}
},
},
],
},
{
title: 'title6',
dataIndex: 'b',
key: 'f',
// onCell: (_, index) => {
// if (index % 4 === 0) {
// return {
// rowSpan: 0,
// colSpan: 0,
// };
// }
onCell: (_, index) => {
if (index % 4 === 0) {
return {
rowSpan: 0,
colSpan: 0,
};
}

// if (index % 4 === 1) {
// return {
// rowSpan: 3,
// };
// }
if (index % 4 === 1) {
return {
rowSpan: 3,
};
}

// return {
// rowSpan: 0,
// };
// },
return {
rowSpan: 0,
};
},
},
{
title: (
Expand All @@ -111,26 +111,26 @@ const columns: ColumnsType = [
{
title: 'title8',
dataIndex: 'b',
// onCell: (_, index) => {
// if (index % 2 === 0) {
// return {
// rowSpan: 2,
// colSpan: 2,
// };
// }
onCell: (_, index) => {
if (index % 2 === 0) {
return {
rowSpan: 2,
colSpan: 2,
};
}

// return {
// rowSpan: 0,
// };
// },
return {
rowSpan: 0,
};
},
},
{
title: 'title9 i',
dataIndex: 'b',
key: 'i',
// onCell: () => ({
// colSpan: 0,
// }),
onCell: () => ({
colSpan: 0,
}),
},
{ title: 'title10', dataIndex: 'b', key: 'j' },
{
Expand Down Expand Up @@ -165,7 +165,7 @@ const data: RecordType[] = new Array(4 * 10000).fill(null).map((_, index) => ({
b: `b${index}`,
c: `c${index}`,
d: index,
bk: <h4>Hello</h4>,
bk: <strong>Hello</strong>,
indexKey: `${index}`,
// children: [
// {
Expand Down
44 changes: 4 additions & 40 deletions src/StaticTable/BodyGrid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import useFlattenRecords, { type FlattenData } from '../hooks/useFlattenRecords'
import type { ColumnType, OnCustomizeScroll } from '../interface';
import BodyLine from './BodyLine';
import { GridContext, StaticContext } from './context';
import { RowSpanVirtualCell } from './VirtualCell';

export interface GridProps<RecordType = any> {
data: RecordType[];
Expand Down Expand Up @@ -134,43 +133,8 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
if (flattenColumns.some(column => getRowSpan(column, i) > 1)) {
spanLines.push(i);
}

// const rowKey = getRowKey(item.record, i);

// flattenColumns.forEach((column, colIndex) => {
// const rowSpan = getRowSpan(column, i);

// if (rowSpan > 1) {
// const endItemIndex = i + rowSpan - 1;
// const endItem = flattenData[endItemIndex];
// const endKey = getRowKey(endItem.record, endItemIndex);

// const sizeInfo = getSize(rowKey, endKey);
// const left = columnsOffset[colIndex - 1] || 0;

// nodes.push(
// <RowSpanVirtualCell
// top={-offsetY + sizeInfo.top}
// height={sizeInfo.bottom - sizeInfo.top}
// left={left}
// key={`${i}_${colIndex}`}
// record={item.record}
// rowKey={rowKey}
// column={column}
// colIndex={colIndex}
// index={i}
// indent={0}
// style={{
// ['--sticky-left' as any]: `${left}px`,
// }}
// />,
// );
// }
// });
}

console.log('>>>', spanLines);

// Patch extra line on the page
const nodes: React.ReactElement[] = spanLines.map(index => {
const item = flattenData[index];
Expand All @@ -185,18 +149,18 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
return sizeInfo.bottom - sizeInfo.top;
};

const sizeInfo = getSize(rowKey);

return (
<BodyLine
key={index}
data={item}
rowKey={rowKey}
index={index}
style={{
position: 'absolute',
top: 0,
pointerEvents: 'none',
top: -offsetY + sizeInfo.top,
}}
inverse
extra
getHeight={getHeight}
/>
);
Expand Down
15 changes: 11 additions & 4 deletions src/StaticTable/BodyLine.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@ export interface BodyLineProps<RecordType = any> {
rowKey: React.Key;

/** Render cell only when it has `rowSpan > 1` */
inverse?: boolean;
extra?: boolean;
getHeight?: (rowSpan: number) => number;
}

const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) => {
const { data, index, className, rowKey, style, inverse, getHeight, ...restProps } = props;
const { data, index, className, rowKey, style, extra, getHeight, ...restProps } = props;
const { record, indent } = data;

const { flattenColumns, prefixCls } = useContext(TableContext);
Expand All @@ -35,11 +35,18 @@ const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) =>
width: scrollX,
};

if (extra) {
rowStyle.position = 'absolute';
rowStyle.pointerEvents = 'none';
}

return (
<div
{...restProps}
ref={ref}
className={classNames(className, `${prefixCls}-row`)}
className={classNames(className, `${prefixCls}-row`, {
[`${prefixCls}-row-extra`]: extra,
})}
style={rowStyle}
>
{flattenColumns.map((column, colIndex) => {
Expand All @@ -52,7 +59,7 @@ const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) =>
indent={indent}
index={index}
record={record}
inverse={inverse}
inverse={extra}
getHeight={getHeight}
/>
);
Expand Down
36 changes: 1 addition & 35 deletions src/StaticTable/VirtualCell.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { getCellProps, useRowInfo } from '../Body/BodyRow';
import { getCellProps, type useRowInfo } from '../Body/BodyRow';
import Cell from '../Cell';
import type { ColumnType } from '../interface';
import classNames from 'classnames';
Expand Down Expand Up @@ -116,38 +116,4 @@ function VirtualCell<RecordType extends { index: number } = any>(
);
}

// ================= Virtual Row Span Cell =================
export interface RowSpanVirtualCellProps<RecordType extends { index: number }>
extends Omit<VirtualCellProps<RecordType>, 'rowInfo'> {
record: RecordType;
rowKey: React.Key;
top: number;
height: number;
left: number;
}

export function RowSpanVirtualCell<RecordType extends { index: number } = any>(
props: RowSpanVirtualCellProps<RecordType>,
) {
const { record, rowKey, top, height, left, style } = props;

const rowInfo = useRowInfo<RecordType>(record, rowKey);
const { prefixCls } = rowInfo;

return (
<VirtualCell
rowInfo={rowInfo}
{...props}
style={{
...style,
top,
height,
left,
position: 'absolute',
}}
className={`${prefixCls}-cell-virtual-fixed`}
/>
);
}

export default VirtualCell;

0 comments on commit 7f36f9a

Please sign in to comment.