hightable
Version:
A dynamic windowed scrolling table component for react
79 lines (78 loc) • 2.38 kB
TypeScript
interface ScaleParameters {
clientHeight: number;
headerHeight: number;
maxElementHeight: number;
numRows: number;
rowHeight: number;
}
export interface Scale {
toVirtual: (scrollTop: number) => number;
fromVirtual: (virtualScrollTop: number) => number;
factor: number;
canvasHeight: number;
virtualCanvasHeight: number;
parameters: ScaleParameters;
}
/**
* The state to handle virtual scrolling
*
* - scrollTop: the current scrollTop of HTML <div> container
* - scrollTopAnchor: the scrollTop position that anchors the virtual scroll calculations. It differs from scrollTop when local scrolling is applied.
* - localOffset: the local offset added to the virtual scrollTop to scroll locally (for small scroll deltas)
* - scale: the scale mapping scrollTop to virtual scrollTop
*/
export interface ScrollState {
scale: Scale | undefined;
scrollTop: number | undefined;
scrollTopAnchor: number | undefined;
localOffset: number;
}
type ScrollAction = {
type: 'SET_SCALE';
scale: Scale;
} | {
type: 'ON_SCROLL';
scrollTop: number;
} | {
type: 'SCROLL_TO';
scrollTop: number;
} | {
type: 'LOCAL_SCROLL';
delta: number;
} | {
type: 'GLOBAL_SCROLL';
scrollTop: number;
};
export declare function initializeScrollState(): ScrollState;
export declare function scrollReducer(state: ScrollState, action: ScrollAction): ScrollState;
export declare function computeDerivedValues({ scale, scrollTop, scrollTopAnchor, localOffset, padding }: ScrollState & {
padding: number;
}): {
sliceTop?: number | undefined;
visibleRowsStart?: number | undefined;
visibleRowsEnd?: number | undefined;
renderedRowsStart?: number | undefined;
renderedRowsEnd?: number | undefined;
};
export declare function createScale(parameters: {
clientHeight: number;
headerHeight: number;
maxElementHeight: number;
numRows: number;
rowHeight: number;
}): Scale;
interface LocalScrollAction {
type: 'LOCAL_SCROLL';
delta: number;
}
interface ScrollToAction {
type: 'SCROLL_TO';
scrollTop: number;
}
export declare function getScrollActionForRow({ rowIndex, scale, scrollTopAnchor, localOffset, }: {
rowIndex: number;
scale: Scale;
scrollTopAnchor: number;
localOffset: number;
}): ScrollToAction | LocalScrollAction | undefined;
export {};