Skip to content

Commit

Permalink
add flag to track when row/col headers mounted
Browse files Browse the repository at this point in the history
  • Loading branch information
@adidahiya
adidahiya committed Feb 25, 2022
1 parent ab2de4a commit ef92e1b
Show file tree
Hide file tree
Showing 6 changed files with 75 additions and 25 deletions.
13 changes: 11 additions & 2 deletions packages/table/src/headers/columnHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,11 @@ export interface IColumnHeaderProps extends IHeaderProps, IColumnWidths, ColumnI
* A callback invoked when user is done resizing the column
*/
onColumnWidthChanged: IIndexedResizeCallback;

/**
* Called on component mount.
*/
onMount?: (whichHeader: "column" | "row") => void;
}

export class ColumnHeader extends React.Component<IColumnHeaderProps> {
Expand All @@ -68,6 +73,10 @@ export class ColumnHeader extends React.Component<IColumnHeaderProps> {
loading: false,
};

public componentDidMount() {
this.props.onMount?.("column");
}

public render() {
const {
// from IColumnHeaderProps
Expand Down Expand Up @@ -101,8 +110,8 @@ export class ColumnHeader extends React.Component<IColumnHeaderProps> {
handleResizeDoubleClick={this.handleResizeDoubleClick}
handleResizeEnd={this.handleResizeEnd}
handleSizeChanged={this.handleSizeChanged}
headerCellIsReorderablePropName={"enableColumnReordering"}
headerCellIsSelectedPropName={"isColumnSelected"}
headerCellIsReorderablePropName="enableColumnReordering"
headerCellIsSelectedPropName="isColumnSelected"
headerCellRenderer={renderHeaderCell}
indexEnd={indexEnd}
indexStart={indexStart}
Expand Down
9 changes: 9 additions & 0 deletions packages/table/src/headers/rowHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,13 +47,22 @@ export interface IRowHeaderProps extends IHeaderProps, IRowHeights, RowIndices {
* Renders the cell for each row header
*/
rowHeaderCellRenderer?: RowHeaderRenderer;

/**
* Called on component mount.
*/
onMount?: (whichHeader: "column" | "row") => void;
}

export class RowHeader extends React.Component<IRowHeaderProps> {
public static defaultProps = {
rowHeaderCellRenderer: renderDefaultRowHeader,
};

public componentDidMount() {
this.props.onMount?.("row");
}

public render() {
const {
// from IRowHeaderProps
Expand Down
28 changes: 18 additions & 10 deletions packages/table/src/quadrants/tableQuadrantStack.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@ export interface ITableQuadrantStackProps extends Props {
* A callback that renders either all of or just the frozen section of the column header.
* May return undefined if the table is not attached to the DOM yet.
*/
columnHeaderCellRenderer?: (
columnHeaderRenderer?: (
refHandler: IRef<HTMLDivElement>,
resizeHandler: (verticalGuides: number[] | null) => void,
reorderingHandler: (oldIndex: number, newIndex: number, length: number) => void,
Expand All @@ -183,7 +183,7 @@ export interface ITableQuadrantStackProps extends Props {
* A callback that renders either all of or just the frozen section of the row header.
* May return undefined if the table is not attached to the DOM yet.
*/
rowHeaderCellRenderer?: (
rowHeaderRenderer?: (
refHandler: IRef<HTMLDivElement>,
resizeHandler: (verticalGuides: number[] | null) => void,
reorderingHandler: (oldIndex: number, newIndex: number, length: number) => void,
Expand Down Expand Up @@ -234,6 +234,13 @@ export interface ITableQuadrantStackProps extends Props {
* @default undefined
*/
enableColumnInteractionBar?: boolean;

/**
* Flag indicating that both the column headers (if present)
* and row headers (if present) have been rendered and mounted, including any
* custom renderers which may affect quadrant layout measurements.
*/
didHeadersMount: boolean;
}

// Used on first render of the top-left and top quadrants to avoid collapsing
Expand Down Expand Up @@ -263,6 +270,7 @@ const SYNC_TRIGGER_PROP_KEYS: Array<keyof ITableQuadrantStackProps> = [
"numColumns",
"numRows",
"enableColumnInteractionBar",
"didHeadersMount",
];

export class TableQuadrantStack extends AbstractComponent2<ITableQuadrantStackProps> {
Expand Down Expand Up @@ -497,7 +505,7 @@ export class TableQuadrantStack extends AbstractComponent2<ITableQuadrantStackPr
return undefined;
}

return this.props.columnHeaderCellRenderer?.(
return this.props.columnHeaderRenderer?.(
refHandler,
resizeHandler,
reorderingHandler,
Expand All @@ -514,7 +522,7 @@ export class TableQuadrantStack extends AbstractComponent2<ITableQuadrantStackPr
return undefined;
}

return this.props.columnHeaderCellRenderer?.(
return this.props.columnHeaderRenderer?.(
refHandler,
resizeHandler,
reorderingHandler,
Expand All @@ -531,7 +539,7 @@ export class TableQuadrantStack extends AbstractComponent2<ITableQuadrantStackPr
return undefined;
}

return this.props.columnHeaderCellRenderer?.(
return this.props.columnHeaderRenderer?.(
refHandler,
resizeHandler,
reorderingHandler,
Expand All @@ -548,7 +556,7 @@ export class TableQuadrantStack extends AbstractComponent2<ITableQuadrantStackPr
return undefined;
}

return this.props.columnHeaderCellRenderer?.(
return this.props.columnHeaderRenderer?.(
refHandler,
resizeHandler,
reorderingHandler,
Expand All @@ -564,7 +572,7 @@ export class TableQuadrantStack extends AbstractComponent2<ITableQuadrantStackPr
return undefined;
}

return this.props.rowHeaderCellRenderer?.(
return this.props.rowHeaderRenderer?.(
refHandler,
this.handleRowResizeGuideMain,
this.handleRowsReordering,
Expand All @@ -578,7 +586,7 @@ export class TableQuadrantStack extends AbstractComponent2<ITableQuadrantStackPr
return undefined;
}

return this.props.rowHeaderCellRenderer?.(
return this.props.rowHeaderRenderer?.(
refHandler,
this.handleRowResizeGuideTop,
this.handleRowsReordering,
Expand All @@ -592,7 +600,7 @@ export class TableQuadrantStack extends AbstractComponent2<ITableQuadrantStackPr
return undefined;
}

return this.props.rowHeaderCellRenderer?.(
return this.props.rowHeaderRenderer?.(
refHandler,
this.handleRowResizeGuideLeft,
this.handleRowsReordering,
Expand All @@ -606,7 +614,7 @@ export class TableQuadrantStack extends AbstractComponent2<ITableQuadrantStackPr
return undefined;
}

return this.props.rowHeaderCellRenderer?.(
return this.props.rowHeaderRenderer?.(
refHandler,
this.handleRowResizeGuideTopLeft,
this.handleRowsReordering,
Expand Down
5 changes: 3 additions & 2 deletions packages/table/src/table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -276,6 +276,7 @@ export class Table extends AbstractComponent2<TableProps, TableState, TableSnaps
childrenArray,
columnIdToIndex,
columnWidths: newColumnWidths,
didHeadersMount: false,
focusedCell,
horizontalGuides: [],
isLayoutLocked: false,
Expand Down Expand Up @@ -449,7 +450,7 @@ export class Table extends AbstractComponent2<TableProps, TableState, TableSnaps
<TableQuadrantStack
bodyRef={this.refHandlers.cellContainer}
bodyRenderer={this.renderBody}
columnHeaderCellRenderer={this.renderColumnHeader}
columnHeaderRenderer={this.renderColumnHeader}
columnHeaderRef={this.refHandlers.columnHeader}
enableColumnInteractionBar={enableColumnInteractionBar}
enableRowHeader={enableRowHeader}
Expand All @@ -468,7 +469,7 @@ export class Table extends AbstractComponent2<TableProps, TableState, TableSnaps
onScroll={this.handleBodyScroll}
ref={this.refHandlers.quadrantStack}
menuRenderer={this.renderMenu}
rowHeaderCellRenderer={this.renderRowHeader}
rowHeaderRenderer={this.renderRowHeader}
rowHeaderRef={this.refHandlers.rowHeader}
scrollContainerRef={this.refHandlers.scrollContainer}
/>
Expand Down
38 changes: 27 additions & 11 deletions packages/table/src/table2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -240,6 +240,10 @@ export class Table2 extends AbstractComponent2<TableProps, TableState, TableSnap

private scrollContainerElement?: HTMLElement | null;

private didColumnHeaderMount = false;

private didRowHeaderMount = false;

/*
* This value is set to `true` when all cells finish mounting for the first
* time. It serves as a signal that we can switch to batch rendering.
Expand Down Expand Up @@ -285,6 +289,7 @@ export class Table2 extends AbstractComponent2<TableProps, TableState, TableSnap
childrenArray,
columnIdToIndex,
columnWidths: newColumnWidths,
didHeadersMount: false,
focusedCell,
horizontalGuides: [],
isLayoutLocked: false,
Expand Down Expand Up @@ -457,15 +462,6 @@ export class Table2 extends AbstractComponent2<TableProps, TableState, TableSnap
className,
);

// if (this.grid == null) {
// return (
// <div
// className={classes}
// ref={this.refHandlers.rootTable}
// />
// );
// }

return (
<div
className={classes}
Expand All @@ -478,8 +474,9 @@ export class Table2 extends AbstractComponent2<TableProps, TableState, TableSnap
<TableQuadrantStack
bodyRef={this.refHandlers.cellContainer}
bodyRenderer={this.renderBody}
columnHeaderCellRenderer={this.renderColumnHeader}
columnHeaderRenderer={this.renderColumnHeader}
columnHeaderRef={this.refHandlers.columnHeader}
didHeadersMount={this.state.didHeadersMount}
enableColumnInteractionBar={enableColumnInteractionBar}
enableRowHeader={enableRowHeader}
grid={grid}
Expand All @@ -497,7 +494,7 @@ export class Table2 extends AbstractComponent2<TableProps, TableState, TableSnap
onScroll={this.handleBodyScroll}
ref={this.refHandlers.quadrantStack}
menuRenderer={this.renderMenu}
rowHeaderCellRenderer={this.renderRowHeader}
rowHeaderRenderer={this.renderRowHeader}
rowHeaderRef={this.refHandlers.rowHeader}
scrollContainerRef={this.refHandlers.scrollContainer}
/>
Expand Down Expand Up @@ -825,6 +822,7 @@ export class Table2 extends AbstractComponent2<TableProps, TableState, TableSnap
minColumnWidth={minColumnWidth!}
onColumnWidthChanged={this.handleColumnWidthChanged}
onFocusedCell={this.handleFocus}
onMount={this.handleHeaderMounted}
onLayoutLock={this.handleLayoutLock}
onReordered={this.handleColumnsReordered}
onReordering={reorderingHandler}
Expand Down Expand Up @@ -899,6 +897,7 @@ export class Table2 extends AbstractComponent2<TableProps, TableState, TableSnap
minRowHeight={minRowHeight!}
onFocusedCell={this.handleFocus}
onLayoutLock={this.handleLayoutLock}
onMount={this.handleHeaderMounted}
onResizeGuide={resizeHandler}
onReordered={this.handleRowsReordered}
onReordering={reorderingHandler}
Expand Down Expand Up @@ -1083,6 +1082,23 @@ export class Table2 extends AbstractComponent2<TableProps, TableState, TableSnap
});
}

private handleHeaderMounted = (whichHeader: "column" | "row") => {
const { didHeadersMount } = this.state;
if (didHeadersMount) {
return;
}

if (whichHeader === "column") {
this.didColumnHeaderMount = true;
} else {
this.didRowHeaderMount = true;
}

if (this.didColumnHeaderMount && this.didRowHeaderMount) {
this.setState({ didHeadersMount: true });
}
}

private handleCompleteRender = () => {
// the first onCompleteRender is triggered before the viewportRect is
// defined and the second after the viewportRect has been set. the cells
Expand Down
7 changes: 7 additions & 0 deletions packages/table/src/tableState.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,13 @@ export interface TableState {
*/
horizontalGuides: number[];

/**
* Flag indicating that both the column headers (if present)
* and row headers (if present) have been rendered and mounted, including any
* custom renderers which may affect quadrant layout measurements.
*/
didHeadersMount: boolean;

/**
* If `true`, will disable updates that will cause re-renders of children
* components. This is used, for example, to disable layout updates while
Expand Down

1 comment on commit ef92e1b

@blueprint-bot
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

add flag to track when row/col headers mounted

Previews: documentation | landing | table | modern colors demo

Please sign in to comment.