Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(table): 优化列宽调整策略 #1483

Merged
merged 4 commits into from
Sep 14, 2022
Merged

fix(table): 优化列宽调整策略 #1483

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f651b76
fix(table): optimize column resize algorithm
ZTao-z Sep 12, 2022
c66ded9
fix(table): optimize columns change listener
ZTao-z Sep 13, 2022
e4260b9
Revert "fix(table): optimize columns change listener"
ZTao-z Sep 14, 2022
aad3f9f
fix(table): table width and thWidthList use ref instead of state
ZTao-z Sep 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 24 additions & 16 deletions src/table/BaseTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ const BaseTable = forwardRef((props: TBaseTableProps, ref) => {

// 列宽拖拽逻辑
const columnResizeParams = useColumnResize(tableContentRef, refreshTable, getThWidthList, updateThWidthList);
const { resizeLineRef, resizeLineStyle, recalculateColWidth } = columnResizeParams;
const { resizeLineRef, resizeLineStyle, recalculateColWidth, setEffectColMap } = columnResizeParams;
setRecalculateColWidthFuncRef(recalculateColWidth);

const dynamicBaseTableClasses = classNames(
Expand Down Expand Up @@ -135,6 +135,11 @@ const BaseTable = forwardRef((props: TBaseTableProps, ref) => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [spansAndLeafNodes.leafColumns]);

useEffect(() => {
setEffectColMap(thList[0], null);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [thList]);

useImperativeHandle(ref, () => ({
tableElement: tableRef.current,
tableHtmlElement: tableElmRef.current,
Expand Down Expand Up @@ -200,7 +205,7 @@ const BaseTable = forwardRef((props: TBaseTableProps, ref) => {
const colgroup = (
<colgroup>
{finalColumns.map((col) => {
const style: Styles = { width: formatCSSUnit(thWidthList[col.colKey] || col.width) || defaultColWidth };
const style: Styles = { width: formatCSSUnit(thWidthList.current[col.colKey] || col.width) || defaultColWidth };
if (col.minWidth) {
style.minWidth = formatCSSUnit(col.minWidth);
}
Expand All @@ -221,20 +226,23 @@ const BaseTable = forwardRef((props: TBaseTableProps, ref) => {
// 两类场景：1. 虚拟滚动，永久显示表头，直到表头消失在可视区域； 2. 表头吸顶，根据滚动情况判断是否显示吸顶表头
const headerOpacity = headerAffixedTop ? Number(showAffixHeader) : 1;
const affixHeaderWrapHeightStyle = {
width: `${tableWidth}px`,
width: `${tableWidth.current}px`,
height: `${affixHeaderWrapHeight}px`,
opacity: headerOpacity,
marginTop: onlyVirtualScrollBordered ? `${borderWidth}px` : 0,
};
// 多级表头左边线缺失
const affixedLeftBorder = props.bordered ? 1 : 0;
const affixedHeader = Boolean(props.headerAffixedTop && tableWidth) && (
const affixedHeader = Boolean(props.headerAffixedTop && tableWidth.current) && (
<div
ref={affixHeaderRef}
style={{ width: `${tableWidth - affixedLeftBorder}px`, opacity: headerOpacity }}
style={{ width: `${tableWidth.current - affixedLeftBorder}px`, opacity: headerOpacity }}
className={classNames(['scrollbar', { [tableBaseClass.affixedHeaderElm]: props.headerAffixedTop || isVirtual }])}
>
<table className={classNames(tableElmClasses)} style={{ ...tableElementStyles, width: `${tableElmWidth}px` }}>
<table
className={classNames(tableElmClasses)}
style={{ ...tableElementStyles, width: `${tableElmWidth.current}px` }}
>
{colgroup}
<THead
isFixedHeader={isFixedHeader}
Expand All @@ -243,7 +251,7 @@ const BaseTable = forwardRef((props: TBaseTableProps, ref) => {
bordered={props.bordered}
spansAndLeafNodes={spansAndLeafNodes}
thList={thList}
thWidthList={thWidthList}
thWidthList={thWidthList.current}
resizable={props.resizable}
columnResizeParams={columnResizeParams}
/>
Expand All @@ -267,7 +275,7 @@ const BaseTable = forwardRef((props: TBaseTableProps, ref) => {
marginScrollbarWidth += 1;
}
// Hack: Affix 组件，marginTop 临时使用 负 margin 定位位置
const affixedFooter = Boolean(props.footerAffixedBottom && props.footData?.length && tableWidth) && (
const affixedFooter = Boolean(props.footerAffixedBottom && props.footData?.length && tableWidth.current) && (
<Affix
className={tableBaseClass.affixedFooterWrap}
onFixedChange={onFixedChange}
Expand All @@ -277,13 +285,13 @@ const BaseTable = forwardRef((props: TBaseTableProps, ref) => {
>
<div
ref={affixFooterRef}
style={{ width: `${tableWidth - affixedLeftBorder}px`, opacity: Number(showAffixFooter) }}
style={{ width: `${tableWidth.current - affixedLeftBorder}px`, opacity: Number(showAffixFooter) }}
className={classNames([
'scrollbar',
{ [tableBaseClass.affixedFooterElm]: props.footerAffixedBottom || isVirtual },
])}
>
<table className={tableElmClasses} style={{ ...tableElementStyles, width: `${tableElmWidth}px` }}>
<table className={tableElmClasses} style={{ ...tableElementStyles, width: `${tableElmWidth.current}px` }}>
{colgroup}
<TFoot
rowKey={props.rowKey}
Expand All @@ -293,7 +301,7 @@ const BaseTable = forwardRef((props: TBaseTableProps, ref) => {
columns={spansAndLeafNodes?.leafColumns || columns}
rowAttributes={props.rowAttributes}
rowClassName={props.rowClassName}
thWidthList={thWidthList}
thWidthList={thWidthList.current}
footerSummary={props.footerSummary}
rowspanAndColspanInFooter={props.rowspanAndColspanInFooter}
></TFoot>
Expand All @@ -317,7 +325,7 @@ const BaseTable = forwardRef((props: TBaseTableProps, ref) => {
columns: spansAndLeafNodes?.leafColumns || columns,
tableElm: tableRef.current,
tableContentElm: tableContentRef.current,
tableWidth,
tableWidth: tableWidth.current,
isWidthOverflow,
rowKey: props.rowKey || 'id',
// 虚拟滚动相关属性
Expand Down Expand Up @@ -350,7 +358,7 @@ const BaseTable = forwardRef((props: TBaseTableProps, ref) => {
bordered={props.bordered}
spansAndLeafNodes={spansAndLeafNodes}
thList={thList}
thWidthList={thWidthList}
thWidthList={thWidthList.current}
resizable={props.resizable}
columnResizeParams={columnResizeParams}
/>
Expand All @@ -363,7 +371,7 @@ const BaseTable = forwardRef((props: TBaseTableProps, ref) => {
columns={spansAndLeafNodes?.leafColumns || columns}
rowAttributes={props.rowAttributes}
rowClassName={props.rowClassName}
thWidthList={thWidthList}
thWidthList={thWidthList.current}
footerSummary={props.footerSummary}
rowspanAndColspanInFooter={props.rowspanAndColspanInFooter}
></TFoot>
Expand Down Expand Up @@ -438,12 +446,12 @@ const BaseTable = forwardRef((props: TBaseTableProps, ref) => {
ref={horizontalScrollbarRef}
className={classNames(['scrollbar', tableBaseClass.obviousScrollbar])}
style={{
width: `${tableWidth}px`,
width: `${tableWidth.current}px`,
overflow: 'auto',
opacity: Number(showAffixFooter),
}}
>
<div style={{ width: `${tableElmWidth}px`, height: '5px' }}></div>
<div style={{ width: `${tableElmWidth.current}px`, height: '5px' }}></div>
</div>
</Affix>
)}
Expand Down
15 changes: 2 additions & 13 deletions src/table/THead.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,7 @@ export interface TheadProps {
resizeLineRef: MutableRefObject<HTMLDivElement>;
resizeLineStyle: CSSProperties;
onColumnMouseover: (e: MouseEvent) => void;
onColumnMousedown: (
e: MouseEvent,
col: BaseTableCol<TableRowData>,
effectNextCol: BaseTableCol<TableRowData>,
effectPrevCol: BaseTableCol<TableRowData>,
) => void;
onColumnMousedown: (e: MouseEvent, col: BaseTableCol<TableRowData>) => void;
};
}

Expand Down Expand Up @@ -90,13 +85,7 @@ export default function THead(props: TheadProps) {
if (!col.colKey) return null;
const resizeColumnListener = props.resizable
? {
onMouseDown: (e) =>
columnResizeParams?.onColumnMousedown?.(
e,
col,
index < row.length - 1 ? row[index + 1] : row[index - 1],
index > 0 ? row[index - 1] : row[index + 1],
),
onMouseDown: (e) => columnResizeParams?.onColumnMousedown?.(e, col),
onMouseMove: (e) => columnResizeParams?.onColumnMouseover?.(e),
}
: {};
Expand Down
Loading