typings update to catch up with current version of react-virtualized (#24900)

* typings update to catch up with current version of react-virtualized

* fixed lint errors

* fixed ts version

* fixed void return type of defaultProps functions

* changed interface to type for better consistency
This commit is contained in:
Kalle Ott
2018-04-11 21:07:45 +02:00
committed by Mohamed Hegazy
parent c95f6e951b
commit aca7b39f77
15 changed files with 841 additions and 808 deletions

View File

@@ -1,27 +1,28 @@
import { PureComponent, Validator, Requireable } from 'react'
import * as PropTypes from 'prop-types'
import { PureComponent, Validator, Requireable } from "react";
import * as PropTypes from "prop-types";
import { RenderedSection } from "./Grid";
export type OnSectionRenderedParams = {
columnStartIndex: number,
columnStopIndex: number,
rowStartIndex: number,
rowStopIndex: number
}
export type OnSectionRenderedParams = RenderedSection;
export type ChildProps = {
onSectionRendered: (params: OnSectionRenderedParams) => void,
scrollToColumn: number,
scrollToRow: number
onSectionRendered: (params: RenderedSection) => void;
scrollToColumn: number;
scrollToRow: number;
};
/**
* This HOC decorates a virtualized component and responds to arrow-key events by scrolling one row or column at a time.
*/
export type ArrowKeyStepperProps = {
children?: (props: ChildProps) => React.ReactNode;
children: (props: ChildProps) => React.ReactNode;
className?: string;
columnCount: number;
rowCount: number;
mode?: 'edges' | 'cells';
mode?: "edges" | "cells";
disabled?: boolean;
isControlled?: boolean;
onScrollToChange?: (params: ScrollIndices) => void;
scrollToColumn?: number;
scrollToRow?: number;
/**
* PLEASE NOTE
* The [key: string]: any; line is here on purpose
@@ -30,35 +31,23 @@ export type ArrowKeyStepperProps = {
* https://github.com/bvaughn/react-virtualized#pass-thru-props
*/
[key: string]: any;
}
export type ScrollIndexes = {
scrollToRow: number,
scrollToColumn: number
}
export class ArrowKeyStepper extends PureComponent<ArrowKeyStepperProps, ScrollIndexes> {
};
export type ScrollIndices = {
scrollToRow: number;
scrollToColumn: number;
};
export type ScrollIndexes = ScrollIndices;
export class ArrowKeyStepper extends PureComponent<
ArrowKeyStepperProps,
ScrollIndices
> {
static defaultProps: {
disabled: false,
mode: 'edges',
scrollToColumn: 0,
scrollToRow: 0
disabled: false;
isControlled: false;
mode: "edges";
scrollToColumn: 0;
scrollToRow: 0;
};
static propTypes: {
children: Validator<(props: ChildProps) => React.ReactNode>,
className: Requireable<string>,
columnCount: Validator<number>,
disabled: Validator<boolean>,
mode: Validator<'cells' | 'edges'>,
rowCount: Validator<number>,
scrollToColumn: Validator<number>,
scrollToRow: Validator<number>
};
constructor(props: ArrowKeyStepperProps, context: any);
componentWillReceiveProps(nextProps: ArrowKeyStepperProps): void;
setScrollIndexes(params: ScrollIndexes): void;
render(): JSX.Element;
}

View File

@@ -1,12 +1,34 @@
import { PureComponent, Validator, Requireable } from 'react'
import * as PropTypes from 'prop-types'
import { PureComponent, Validator, Requireable } from "react";
import * as PropTypes from "prop-types";
export type Dimensions = {
height: number,
width: number
}
export type Size = {
height: number;
width: number;
};
export type Dimensions = Size;
export type AutoSizerProps = {
/**
* Function responsible for rendering children.
* This function should implement the following signature:
* ({ height, width }) => PropTypes.element
*/
children: (props: Size) => React.ReactNode;
/**
* Optional custom CSS class name to attach to root AutoSizer element.
* This is an advanced property and is not typically necessary.
*/
className?: string;
/**
* Height passed to child for initial render; useful for server-side rendering.
* This value will be overridden with an accurate height after mounting.
*/
defaultHeight?: number;
/**
* Width passed to child for initial render; useful for server-side rendering.
* This value will be overridden with an accurate width after mounting.
*/
defaultWidth?: number;
/** Disable dynamic :height property */
disableHeight?: boolean;
/** Disable dynamic :width property */
@@ -14,13 +36,12 @@ export type AutoSizerProps = {
/** Nonce of the inlined stylesheet for Content Security Policy */
nonce?: string;
/** Callback to be invoked on-resize: ({ height, width }) */
onResize?: (info: { height: number, width: number }) => any;
onResize?: (info: Size) => any;
/**
* Function responsible for rendering children.
* This function should implement the following signature:
* ({ height, width }) => PropTypes.element
* Optional custom inline style to attach to root AutoSizer element.
* This is an advanced property and is not typically necessary.
*/
children?: (props: Dimensions) => React.ReactNode
style?: React.CSSProperties;
/**
* PLEASE NOTE
* The [key: string]: any; line is here on purpose
@@ -35,17 +56,12 @@ export type AutoSizerProps = {
* Child component should not be declared as a child but should rather be specified by a `ChildComponent` property.
* All other properties will be passed through to the child component.
*/
export class AutoSizer extends PureComponent<AutoSizerProps, Dimensions> {
static propTypes: {
children: Validator<(props: Dimensions) => React.ReactNode>,
disableHeight: Requireable<boolean>,
disableWidth: Requireable<boolean>,
nonce: Validator<string>,
onResize: Validator<(props: Dimensions) => any>
};
export class AutoSizer extends PureComponent<AutoSizerProps, Size> {
static defaultProps: {
onResize: () => {}
onResize: () => void;
disableHeight: false;
disableWidth: false;
style: {};
};
constructor(props: AutoSizerProps);

View File

@@ -1,41 +1,42 @@
import { PureComponent } from 'react'
import { PureComponent } from "react";
export type KeyMapper = (
rowIndex: number,
columnIndex: number
) => any;
export type CellMeasurerCacheInterface = {
hasFixedWidth(): boolean;
hasFixedHeight(): boolean;
has(rowIndex: number, columnIndex: number): boolean;
set(
rowIndex: number,
columnIndex: number,
width: number,
height: number
): void;
getHeight(rowIndex: number, columnIndex?: number): number;
getWidth(rowIndex: number, columnIndex?: number): number;
};
export type KeyMapper = (rowIndex: number, columnIndex: number) => any;
export type CellMeasurerCacheParams = {
defaultHeight?: number,
defaultWidth?: number,
fixedHeight?: boolean,
fixedWidth?: boolean,
minHeight?: number,
minWidth?: number,
keyMapper?: KeyMapper
}
export class CellMeasurerCache {
constructor(params: CellMeasurerCacheParams);
clear(
rowIndex: number,
columnIndex: number
): void;
defaultHeight?: number;
defaultWidth?: number;
fixedHeight?: boolean;
fixedWidth?: boolean;
minHeight?: number;
minWidth?: number;
keyMapper?: KeyMapper;
};
export class CellMeasurerCache implements CellMeasurerCacheInterface {
constructor(params?: CellMeasurerCacheParams);
clear(rowIndex: number, columnIndex: number): void;
clearAll(): void;
columnWidth: (params: { index: number }) => number | undefined;
readonly defaultHeight: number;
readonly defaultWidth: number;
hasFixedHeight(): boolean;
hasFixedWidth(): boolean;
getHeight(
rowIndex: number,
columnIndex: number
): number | undefined;
getWidth(
rowIndex: number,
columnIndex: number
): number | undefined;
has(
rowIndex: number,
columnIndex: number
): boolean;
getHeight(rowIndex: number, columnIndex: number): number | undefined;
getWidth(rowIndex: number, columnIndex: number): number | undefined;
has(rowIndex: number, columnIndex: number): boolean;
rowHeight: (params: { index: number }) => number | undefined;
set(
rowIndex: number,
@@ -45,12 +46,24 @@ export class CellMeasurerCache {
): void;
}
export type CellPosition = {
columnIndex: number;
rowIndex: number;
};
export type MeasuredCellParent = {
invalidateCellSizeAfterRender?: (cell: CellPosition) => void;
recomputeGridSize?: (cell: CellPosition) => void;
};
export type CellMeasurerProps = {
cache?: CellMeasurerCache;
children?: ((props: {measure: () => void}) => React.ReactNode) | JSX.Element;
cache: CellMeasurerCacheInterface;
children:
| ((props: { measure: () => void }) => React.ReactNode)
| React.ReactNode;
columnIndex?: number;
index?: number;
parent?: React.ReactType;
parent: MeasuredCellParent;
rowIndex?: number;
style?: React.CSSProperties;
/**
@@ -61,18 +74,10 @@ export type CellMeasurerProps = {
* https://github.com/bvaughn/react-virtualized#pass-thru-props
*/
[key: string]: any;
}
};
/**
* Wraps a cell and measures its rendered content.
* Measurements are stored in a per-cell cache.
* Cached-content is not be re-measured.
*/
export class CellMeasurer extends PureComponent<CellMeasurerProps> {
constructor(props: CellMeasurerProps, context: any);
componentDidMount(): void;
componentDidUpdate(prevProps: CellMeasurerProps, prevState: any): void;
render(): JSX.Element;
}
export class CellMeasurer extends PureComponent<CellMeasurerProps> {}

View File

@@ -1,4 +1,4 @@
import { PureComponent, Validator, Requireable } from 'react'
import { PureComponent, Validator, Requireable } from "react";
import {
Alignment,
Index,
@@ -7,25 +7,36 @@ import {
SectionRenderedParams,
SizeInfo,
SizeAndPositionInfo
} from '../../index';
} from "../../index";
export type CollectionCellSizeAndPosition = { height: number, width: number, x: number, y: number };
export type CollectionCellSizeAndPositionGetter = (params: Index) => CollectionCellSizeAndPosition;
export type CollectionCellSizeAndPosition = {
height: number;
width: number;
x: number;
y: number;
};
export type CollectionCellSizeAndPositionGetter = (
params: Index
) => CollectionCellSizeAndPosition;
export type CollectionCellGroupRendererParams = {
cellSizeAndPositionGetter: CollectionCellSizeAndPositionGetter,
indices: number[],
cellRenderer: CollectionCellRenderer
}
export type CollectionCellGroupRenderer = (params: CollectionCellGroupRendererParams) => React.ReactNode[];
cellSizeAndPositionGetter: CollectionCellSizeAndPositionGetter;
indices: number[];
cellRenderer: CollectionCellRenderer;
};
export type CollectionCellGroupRenderer = (
params: CollectionCellGroupRendererParams
) => React.ReactNode[];
export type CollectionCellRendererParams = {
index: number,
key: string,
style?: React.CSSProperties
}
export type CollectionCellRenderer = (params: CollectionCellRendererParams) => React.ReactNode;
index: number;
key: string;
style?: React.CSSProperties;
};
export type CollectionCellRenderer = (
params: CollectionCellRendererParams
) => React.ReactNode;
export type CollectionProps = {
'aria-label'?: string;
"aria-label"?: string;
/**
* Outer height of Collection is set to "auto". This property should only be
* used in conjunction with the WindowScroller HOC.
@@ -43,17 +54,17 @@ export type CollectionProps = {
* cellRenderer: Function
* }): Array<PropTypes.node>
*/
cellGroupRenderer?: CollectionCellGroupRenderer,
cellGroupRenderer?: CollectionCellGroupRenderer;
/**
* Responsible for rendering a cell given an row and column index.
* Should implement the following interface: ({ index: number, key: string, style: object }): PropTypes.element
*/
cellRenderer: CollectionCellRenderer,
cellRenderer: CollectionCellRenderer;
/**
* Callback responsible for returning size and offset/position information for a given cell (index).
* ({ index: number }): { height: number, width: number, x: number, y: number }
*/
cellSizeAndPositionGetter: CollectionCellSizeAndPositionGetter,
cellSizeAndPositionGetter: CollectionCellSizeAndPositionGetter;
/**
* Optional custom CSS class name to attach to root Collection element.
*/
@@ -122,30 +133,26 @@ export type CollectionProps = {
*/
export class Collection extends PureComponent<CollectionProps> {
static propTypes: {
'aria-label': Requireable<string>,
cellCount: Validator<number>,
cellGroupRenderer: Validator<CollectionCellGroupRenderer>,
cellRenderer: Validator<CollectionCellRenderer>,
cellSizeAndPositionGetter: Validator<CollectionCellSizeAndPositionGetter>,
sectionSize: Requireable<number>
"aria-label": Requireable<string>;
cellCount: Validator<number>;
cellGroupRenderer: Validator<CollectionCellGroupRenderer>;
cellRenderer: Validator<CollectionCellRenderer>;
cellSizeAndPositionGetter: Validator<
CollectionCellSizeAndPositionGetter
>;
sectionSize: Requireable<number>;
};
static defaultProps: {
'aria-label': 'grid',
cellGroupRenderer: CollectionCellGroupRenderer
"aria-label": "grid";
cellGroupRenderer: CollectionCellGroupRenderer;
};
constructor(props: CollectionProps, context: any);
forceUpdate(): void;
/** See Collection#recomputeCellSizesAndPositions */
recomputeCellSizesAndPositions(): void;
/** React lifecycle methods */
render(): JSX.Element;
/** CellLayoutManager interface */
calculateSizeAndPositionData(): void;
@@ -159,17 +166,19 @@ export class Collection extends PureComponent<CollectionProps> {
* Calculates the minimum amount of change from the current scroll position to ensure the specified cell is (fully) visible.
*/
getScrollPositionForCell(params: {
align: 'auto' | 'start' | 'end' | 'center',
cellIndex: number,
height: number,
scrollLeft: number,
scrollTop: number,
width: number
align: "auto" | "start" | "end" | "center";
cellIndex: number;
height: number;
scrollLeft: number;
scrollTop: number;
width: number;
}): ScrollPosition;
getTotalSize(): SizeInfo;
cellRenderers(params: {
isScrolling: boolean,
} & SizeInfo): React.ReactNode[];
cellRenderers(
params: {
isScrolling: boolean;
} & SizeInfo
): React.ReactNode[];
}

View File

@@ -1,11 +1,11 @@
import { PureComponent, Validator, Requireable } from 'react'
import { PureComponent, Validator, Requireable } from "react";
export type SizedColumnProps = {
adjustedWidth: number,
columnWidth: number,
getColumnWidth: () => number,
registerChild: any
}
adjustedWidth: number;
columnWidth: number;
getColumnWidth: () => number;
registerChild: any;
};
export type ColumnSizerProps = {
/**
@@ -17,7 +17,7 @@ export type ColumnSizerProps = {
* The :registerChild should be passed to the Grid's :ref property.
* The :adjustedWidth property is optional; it reflects the lesser of the overall width or the width of all columns.
*/
children?: (props: SizedColumnProps) => React.ReactNode;
children: (props: SizedColumnProps) => React.ReactNode;
/** Optional maximum allowed column width */
columnMaxWidth?: number;
/** Optional minimum allowed column width */
@@ -34,22 +34,16 @@ export type ColumnSizerProps = {
* https://github.com/bvaughn/react-virtualized#pass-thru-props
*/
[key: string]: any;
}
};
/**
* High-order component that auto-calculates column-widths for `Grid` cells.
*/
export class ColumnSizer extends PureComponent<ColumnSizerProps> {
static propTypes: {
children: Validator<(props: SizedColumnProps) => React.ReactNode>,
columnMaxWidth: Requireable<number>,
columnMinWidth: Requireable<number>,
columnCount: Validator<number>,
width: Validator<number>
children: Validator<(props: SizedColumnProps) => React.ReactNode>;
columnMaxWidth: Requireable<number>;
columnMinWidth: Requireable<number>;
columnCount: Validator<number>;
width: Validator<number>;
};
constructor(props: ColumnSizerProps, context: any);
componentDidUpdate(prevProps: ColumnSizerProps, prevState: any): void;
render(): JSX.Element;
}

View File

@@ -1,56 +1,67 @@
import { Validator, Requireable, PureComponent } from 'react'
import { List } from './List';
import { Table } from './Table';
import { CellMeasurerCache } from './CellMeasurer';
import { Index, Map, Alignment } from '../../index';
import { Validator, Requireable, PureComponent } from "react";
import { List } from "./List";
import { Table } from "./Table";
import { CellMeasurerCache, MeasuredCellParent } from "./CellMeasurer";
import { Index, Map, Alignment } from "../../index";
export type RenderedSection = {
columnOverscanStartIndex: number;
columnOverscanStopIndex: number;
columnStartIndex: number;
columnStopIndex: number;
rowOverscanStartIndex: number;
rowOverscanStopIndex: number;
rowStartIndex: number;
rowStopIndex: number;
};
export type GridCellProps = {
columnIndex: number;
isScrolling: boolean;
isVisible: boolean;
key: string;
parent: typeof Grid | typeof List | typeof Table;
parent: MeasuredCellParent;
rowIndex: number;
style: React.CSSProperties;
};
export type GridCellRenderer = (props: GridCellProps) => React.ReactNode;
export type ConfigureParams = {
cellCount: number,
estimatedCellSize: number
cellCount: number;
estimatedCellSize: number;
};
export type ContainerSizeAndOffset = {
containerSize: number,
offset: number
containerSize: number;
offset: number;
};
export type SizeAndPositionData = {
offset: number,
size: number
offset: number;
size: number;
};
export type GetVisibleCellRangeParams = {
containerSize: number,
offset: number
containerSize: number;
offset: number;
};
export type VisibleCellRange = {
start: number;
stop: number;
};
export type ScrollParams = {
clientHeight: number,
clientWidth: number,
scrollHeight: number,
scrollLeft: number,
scrollTop: number,
scrollWidth: number
clientHeight: number;
clientWidth: number;
scrollHeight: number;
scrollLeft: number;
scrollTop: number;
scrollWidth: number;
};
export type SectionRenderedParams = {
columnStartIndex: number,
columnStopIndex: number,
rowStartIndex: number,
rowStopIndex: number
columnStartIndex: number;
columnStopIndex: number;
rowStartIndex: number;
rowStopIndex: number;
};
export type SCROLL_DIRECTION_HORIZONTAL = 'horizontal';
export type SCROLL_DIRECTION_VERTICAL = 'vertical';
export type SCROLL_DIRECTION_HORIZONTAL = "horizontal";
export type SCROLL_DIRECTION_VERTICAL = "vertical";
export type OverscanIndicesGetterParams = {
direction?: SCROLL_DIRECTION_HORIZONTAL | SCROLL_DIRECTION_VERTICAL;
cellCount: number;
@@ -60,15 +71,17 @@ export type OverscanIndicesGetterParams = {
stopIndex: number;
};
export type OverscanIndices = {
overscanStartIndex: number,
overscanStopIndex: number
overscanStartIndex: number;
overscanStopIndex: number;
};
export type OverscanIndicesGetter = (params: OverscanIndicesGetterParams) => OverscanIndices;
export type OverscanIndicesGetter = (
params: OverscanIndicesGetterParams
) => OverscanIndices;
export type ScrollOffset = {
scrollLeft: number,
scrollTop: number
}
scrollLeft: number;
scrollTop: number;
};
export type CellSizeAndPositionManager = {
areOffsetsAdjusted(): boolean;
@@ -76,7 +89,10 @@ export type CellSizeAndPositionManager = {
getCellCount(): number;
getEstimatedCellSize(): number;
getLastMeasuredIndex(): number;
getOffsetAdjustment({ containerSize, offset/*safe*/ }: ContainerSizeAndOffset): number;
getOffsetAdjustment({
containerSize,
offset /*safe*/
}: ContainerSizeAndOffset): number;
/**
* This method returns the size and position for the cell at the specified index.
* It just-in-time calculates (or used cached values) for cells leading up to the index.
@@ -101,10 +117,10 @@ export type CellSizeAndPositionManager = {
* @return Offset to use to ensure the specified cell is visible
*/
getUpdatedOffsetForIndex(params: {
align: string,
containerSize: number,
currentOffset: number,
targetIndex: number
align: string;
containerSize: number;
currentOffset: number;
targetIndex: number;
}): number;
getVisibleCellRange(params: GetVisibleCellRangeParams): VisibleCellRange;
/**
@@ -112,33 +128,36 @@ export type CellSizeAndPositionManager = {
* This method should be called for any cell that has changed its size.
* It will not immediately perform any calculations; they'll be performed the next time getSizeAndPositionOfCell() is called.
*/
resetCell(index: number): void
}
resetCell(index: number): void;
};
export type GridCellRangeProps = {
cellCache: Map<any>,
cellRenderer: GridCellRenderer,
columnSizeAndPositionManager: CellSizeAndPositionManager,
columnStartIndex: number,
columnStopIndex: number,
isScrolling: boolean,
rowSizeAndPositionManager: CellSizeAndPositionManager,
rowStartIndex: number,
rowStopIndex: number,
scrollLeft: number,
scrollTop: number,
deferredMeasurementCache: CellMeasurerCache,
horizontalOffsetAdjustment: number,
parent: typeof Grid | typeof List | typeof Table,
styleCache: Map<React.CSSProperties>,
verticalOffsetAdjustment: number,
visibleColumnIndices: VisibleCellRange,
visibleRowIndices: VisibleCellRange
}
export type GridCellRangeRenderer = (params: GridCellRangeProps) => React.ReactNode[];
cellCache: Map<any>;
cellRenderer: GridCellRenderer;
columnSizeAndPositionManager: CellSizeAndPositionManager;
columnStartIndex: number;
columnStopIndex: number;
isScrolling: boolean;
rowSizeAndPositionManager: CellSizeAndPositionManager;
rowStartIndex: number;
rowStopIndex: number;
scrollLeft: number;
scrollTop: number;
deferredMeasurementCache: CellMeasurerCache;
horizontalOffsetAdjustment: number;
parent: MeasuredCellParent;
styleCache: Map<React.CSSProperties>;
verticalOffsetAdjustment: number;
visibleColumnIndices: VisibleCellRange;
visibleRowIndices: VisibleCellRange;
};
export type GridCellRangeRenderer = (
params: GridCellRangeProps
) => React.ReactNode[];
export type GridCoreProps = {
'aria-label'?: string;
"aria-label"?: string;
"aria-readonly"?: boolean;
/**
* Set the width of the inner scrollable container to 'auto'.
* This is useful for single-column Grids to ensure that the column doesn't extend below a vertical scrollbar.
@@ -175,6 +194,10 @@ export type GridCoreProps = {
* Optional custom CSS class name to attach to root Grid element.
*/
className?: string;
/** Unfiltered props for the Grid container. */
containerProps?: object;
/** ARIA role for the cell-container. */
containerRole?: string;
/** Optional inline style applied to inner cell-container */
containerStyle?: React.CSSProperties;
/**
@@ -208,7 +231,7 @@ export type GridCoreProps = {
* Override internal is-scrolling state tracking.
* This property is primarily intended for use with the WindowScroller component.
*/
isScrolling?: boolean,
isScrolling?: boolean;
/**
* Optional renderer to be used in place of rows when either :rowCount or :columnCount is 0.
*/
@@ -295,7 +318,7 @@ export type GridCoreProps = {
* https://github.com/bvaughn/react-virtualized#pass-thru-props
*/
[key: string]: any;
}
};
export type GridProps = GridCoreProps & {
/**
@@ -314,95 +337,69 @@ export type GridProps = GridCoreProps & {
columnWidth: number | ((params: Index) => number);
};
export type ScrollDirection = 'horizontal' | 'vertical';
export type ScrollDirection = "horizontal" | "vertical";
export type GridState = {
isScrolling: boolean,
scrollDirectionHorizontal: ScrollDirection,
scrollDirectionVertical: ScrollDirection,
scrollLeft: number,
scrollTop: number
isScrolling: boolean;
scrollDirectionHorizontal: ScrollDirection;
scrollDirectionVertical: ScrollDirection;
scrollLeft: number;
scrollTop: number;
};
/**
* Specifies the number of miliseconds during which to disable pointer events while a scroll is in progress.
* This improves performance and makes scrolling smoother.
*/
export const DEFAULT_SCROLLING_RESET_TIME_INTERVAL = 150
export const DEFAULT_SCROLLING_RESET_TIME_INTERVAL = 150;
/**
* Renders tabular data with virtualization along the vertical and horizontal axes.
* Row heights and column widths must be known ahead of time and specified as properties.
*/
export class Grid extends PureComponent<GridProps, GridState> {
static propTypes: {
'aria-label': Requireable<string>,
autoContainerWidth: Requireable<boolean>,
autoHeight: Requireable<boolean>,
cellRenderer: Validator<(props: GridCellProps) => React.ReactNode>,
cellRangeRenderer: Validator<(params: GridCellRangeProps) => React.ReactNode[]>,
className: Requireable<string>,
columnCount: Validator<number>,
columnWidth: Validator<number | ((index: number) => number)>,
containerStyle: Requireable<React.CSSProperties>,
deferredMeasurementCache: Requireable<CellMeasurerCache>,
estimatedColumnSize: Validator<number>,
estimatedRowSize: Validator<number>,
getScrollbarSize: Validator<() => number>,
height: Validator<number>,
id: Requireable<string>,
isScrolling: Requireable<boolean>,
noContentRenderer: Requireable<() => JSX.Element>,
onScroll: Validator<(params: ScrollParams) => void>,
onSectionRendered: Validator<(params: SectionRenderedParams) => void>,
overscanColumnCount: Validator<number>,
overscanIndicesGetter: Validator<OverscanIndicesGetter>,
overscanRowCount: Validator<number>,
role: Requireable<string>,
rowHeight: Validator<number | ((params: Index) => number)>,
rowCount: Validator<number>,
scrollingResetTimeInterval: Requireable<number>,
scrollLeft: Requireable<number>,
scrollToAlignment: Validator<Alignment>,
scrollToColumn: Validator<number>,
scrollTop: Requireable<number>,
scrollToRow: Validator<number>,
style: Requireable<React.CSSProperties>,
tabIndex: Requireable<number>,
width: Validator<number>
};
static defaultProps: {
'aria-label': 'grid',
cellRangeRenderer: GridCellRangeRenderer,
estimatedColumnSize: 100,
estimatedRowSize: 30,
getScrollbarSize: () => number,
noContentRenderer: () => null,
onScroll: () => null,
onSectionRendered: () => null,
overscanColumnCount: 0,
overscanIndicesGetter: OverscanIndicesGetter,
overscanRowCount: 10,
role: 'grid',
scrollingResetTimeInterval: typeof DEFAULT_SCROLLING_RESET_TIME_INTERVAL,
scrollToAlignment: 'auto',
scrollToColumn: -1,
scrollToRow: -1,
style: {},
tabIndex: 0
"aria-label": "grid";
"aria-readonly": true;
autoContainerWidth: false;
autoHeight: false;
autoWidth: false;
cellRangeRenderer: GridCellRangeRenderer;
containerRole: "rowgroup";
containerStyle: {};
estimatedColumnSize: 100;
estimatedRowSize: 30;
getScrollbarSize: () => number;
noContentRenderer: () => React.ReactNode;
onScroll: () => void;
onScrollbarPresenceChange: () => void;
onSectionRendered: () => void;
overscanColumnCount: 0;
overscanIndicesGetter: OverscanIndicesGetter;
overscanRowCount: 10;
role: "grid";
scrollingResetTimeInterval: typeof DEFAULT_SCROLLING_RESET_TIME_INTERVAL;
scrollToAlignment: "auto";
scrollToColumn: -1;
scrollToRow: -1;
style: {};
tabIndex: 0;
};
constructor(props: GridProps, context: any);
/**
* Gets offsets for a given cell and alignment.
*/
getOffsetForCell(params?: {
alignment?: Alignment,
columnIndex?: number,
rowIndex?: number
}): ScrollOffset
alignment?: Alignment;
columnIndex?: number;
rowIndex?: number;
}): ScrollOffset;
/**
* This method handles a scroll event originating from an external scroll control.
* It's an advanced method and should probably not be used unless you're implementing a custom scroll-bar solution.
*/
handleScrollEvent(params: Partial<ScrollOffset>): void;
/**
* Invalidate Grid size and recompute visible cells.
@@ -412,9 +409,9 @@ export class Grid extends PureComponent<GridProps, GridState> {
*/
// @TODO (bvaughn) Add automated test coverage for this.
invalidateCellSizeAfterRender(params: {
columnIndex: number,
rowIndex: number
}): void
columnIndex: number;
rowIndex: number;
}): void;
/**
* Pre-measure all columns and rows in a Grid.
@@ -429,56 +426,24 @@ export class Grid extends PureComponent<GridProps, GridState> {
* Since Grid only receives :columnCount and :rowCount it has no way of detecting when the underlying data changes.
*/
recomputeGridSize(params?: {
columnIndex?: number,
rowIndex?: number
columnIndex?: number;
rowIndex?: number;
}): void;
/**
* Ensure column and row are visible.
*/
scrollToCell(params: {
columnIndex: number,
rowIndex: number
}): void;
scrollToCell(params: { columnIndex: number; rowIndex: number }): void;
/**
* Scroll to the specified offset(s).
* Useful for animating position changes.
*/
scrollToPosition(params?: {
scrollLeft: number,
scrollTop: number
}): void;
componentDidMount(): void;
/**
* @private
* This method updates scrollLeft/scrollTop in state for the following conditions:
* 1) New scroll-to-cell props have been set
*/
componentDidUpdate(prevProps: GridProps, prevState: GridState): void;
componentWillMount(): void;
componentWillUnmount(): void;
/**
* @private
* This method updates scrollLeft/scrollTop in state for the following conditions:
* 1) Empty content (0 rows or columns)
* 2) New scroll props overriding the current state
* 3) Cells-count or cells-size has changed, making previous scroll offsets invalid
*/
componentWillReceiveProps(nextProps: GridProps): void;
componentWillUpdate(nextProps: GridProps, nextState: GridState): void;
render(): JSX.Element;
scrollToPosition(params?: { scrollLeft: number; scrollTop: number }): void;
}
export const defaultCellRangeRenderer: GridCellRangeRenderer;
export const accessibilityOverscanIndicesGetter: OverscanIndicesGetter
export const accessibilityOverscanIndicesGetter: OverscanIndicesGetter;
export const defaultOverscanIndicesGetter: OverscanIndicesGetter;

View File

@@ -1,10 +1,10 @@
import { PureComponent, Validator, Requireable } from 'react'
import { Index, IndexRange } from '../../index';
import { PureComponent, Validator, Requireable } from "react";
import { Index, IndexRange } from "../../index";
export type InfiniteLoaderChildProps = {
onRowsRendered: (params: { startIndex: number, stopIndex: number }) => void,
registerChild: (registeredChild: any) => void
}
onRowsRendered: (params: { startIndex: number; stopIndex: number }) => void;
registerChild: (registeredChild: any) => void;
};
export type InfiniteLoaderProps = {
/**
@@ -15,7 +15,7 @@ export type InfiniteLoaderProps = {
* The specified :onRowsRendered function should be passed through to the child's :onRowsRendered property.
* The :registerChild callback should be set as the virtualized component's :ref.
*/
children?: (props: InfiniteLoaderChildProps) => React.ReactNode;
children: (props: InfiniteLoaderChildProps) => React.ReactNode;
/**
* Function responsible for tracking the loaded state of each row.
* It should implement the following signature: ({ index: number }): boolean
@@ -61,23 +61,21 @@ export type InfiniteLoaderProps = {
*/
export class InfiniteLoader extends PureComponent<InfiniteLoaderProps> {
static propTypes: {
children: Validator<(props: InfiniteLoaderChildProps) => React.ReactNode>,
isRowLoaded: Validator<(params: Index) => boolean>,
loadMoreRows: Validator<(params: IndexRange) => Promise<any>>,
minimumBatchSize: Validator<number>,
rowCount: Validator<number>,
threshold: Validator<number>
children: Validator<
(props: InfiniteLoaderChildProps) => React.ReactNode
>;
isRowLoaded: Validator<(params: Index) => boolean>;
loadMoreRows: Validator<(params: IndexRange) => Promise<any>>;
minimumBatchSize: Validator<number>;
rowCount: Validator<number>;
threshold: Validator<number>;
};
static defaultProps: {
minimumBatchSize: 10,
rowCount: 0,
threshold: 15
minimumBatchSize: 10;
rowCount: 0;
threshold: 15;
};
constructor(props: InfiniteLoaderProps, context: any);
resetLoadMoreRowsCache(autoReload?: boolean): void;
render(): JSX.Element;
}

View File

@@ -1,9 +1,17 @@
import { PureComponent, Validator, Requireable } from 'react'
import { Grid, GridCoreProps, GridCellProps, OverscanIndicesGetter } from './Grid'
import { Index, IndexRange, Alignment } from '../../index'
import { CellMeasurerCache } from './CellMeasurer'
import { PureComponent, Validator, Requireable } from "react";
import {
Grid,
GridCoreProps,
GridCellProps,
OverscanIndicesGetter
} from "./Grid";
import { Index, IndexRange, Alignment } from "../../index";
import { CellMeasurerCache, CellPosition } from "./CellMeasurer";
export type ListRowProps = GridCellProps & { index: number, style: React.CSSProperties };
export type ListRowProps = GridCellProps & {
index: number;
style: React.CSSProperties;
};
export type ListRowRenderer = (props: ListRowProps) => React.ReactNode;
export type ListProps = GridCoreProps & {
@@ -28,7 +36,14 @@ export type ListProps = GridCoreProps & {
* Callback invoked with information about the slice of rows that were just rendered.
* ({ startIndex, stopIndex }): void
*/
onRowsRendered?: (info: { overscanStartIndex: number, overscanStopIndex: number, startIndex: number, stopIndex: number }) => void;
onRowsRendered?: (
info: {
overscanStartIndex: number;
overscanStopIndex: number;
startIndex: number;
stopIndex: number;
}
) => void;
/**
* Number of rows to render above/below the visible bounds of the list.
* These rows can help for smoother scrolling on touch devices.
@@ -39,9 +54,11 @@ export type ListProps = GridCoreProps & {
* This callback can be used to sync scrolling between lists, tables, or grids.
* ({ clientHeight, scrollHeight, scrollTop }): void
*/
onScroll?: (info: { clientHeight: number, scrollHeight: number, scrollTop: number }) => void;
onScroll?: (
info: { clientHeight: number; scrollHeight: number; scrollTop: number }
) => void;
/** See Grid#overscanIndicesGetter */
overscanIndicesGetter?: OverscanIndicesGetter,
overscanIndicesGetter?: OverscanIndicesGetter;
/**
* Either a fixed row height (number) or a function that returns the height of a row given its index.
* ({ index: number }): number
@@ -63,7 +80,7 @@ export type ListProps = GridCoreProps & {
tabIndex?: number | null;
/** Width of list */
width: number;
}
};
/**
* It is inefficient to create and manage a large list of DOM elements within a scrolling container
* if only a few of those elements are visible. The primary purpose of this component is to improve
@@ -73,60 +90,44 @@ export type ListProps = GridCoreProps & {
* This component renders a virtualized list of elements with either fixed or dynamic heights.
*/
export class List extends PureComponent<ListProps> {
static propTypes: {
'aria-label': Requireable<string>,
autoHeight: Requireable<boolean>,
className: Requireable<string>,
estimatedRowSize: Validator<number>,
height: Validator<number>,
noRowsRenderer: Validator<() => JSX.Element>,
onRowsRendered: Validator<(params: IndexRange) => void>,
overscanRowCount: Validator<number>,
onScroll: Validator<(params: { clientHeight: number, scrollHeight: number, scrollTop: number }) => void>,
overscanIndicesGetter: Validator<OverscanIndicesGetter>,
rowHeight: Validator<number | ((params: Index) => number)>,
rowRenderer: Validator<ListRowRenderer>,
rowCount: Validator<number>,
scrollToAlignment: Validator<Alignment>,
scrollToIndex: Validator<number>,
scrollTop: Requireable<number>,
style: Validator<React.CSSProperties>,
tabIndex: Requireable<number>,
width: Validator<number>
};
static defaultProps: {
estimatedRowSize: 30,
noRowsRenderer: () => null,
onRowsRendered: () => null,
onScroll: () => null,
overscanRowCount: 10,
scrollToAlignment: 'auto',
scrollToIndex: -1,
style: {}
autoHeight: false;
estimatedRowSize: 30;
onScroll: () => void;
noRowsRenderer: () => null;
onRowsRendered: () => void;
overscanIndicesGetter: OverscanIndicesGetter;
overscanRowCount: 10;
scrollToAlignment: "auto";
scrollToIndex: -1;
style: {};
};
constructor(props: ListProps, context: any);
Grid?: Grid;
forceUpdateGrid(): void;
/** See Grid#getOffsetForCell */
getOffsetForRow(params: { alignment?: Alignment; index?: number }): number;
/** CellMeasurer compatibility */
invalidateCellSizeAfterRender({
columnIndex,
rowIndex
}: CellPosition): void;
/** See Grid#measureAllCells */
measureAllRows(): void;
/** CellMeasurer compatibility */
recomputeGridSize(params?: Partial<CellPosition>): void;
/** See Grid#recomputeGridSize */
recomputeRowHeights(index?: number): void;
/** See Grid#getOffsetForCell */
getOffsetForRow(params: {
alignment?: Alignment,
index?: number
}): number;
/** See Grid#scrollToPosition */
scrollToPosition(scrollTop?: number): void;
/** See Grid#scrollToCell */
scrollToRow(index?: number): void;
render(): JSX.Element;
}

View File

@@ -1,52 +1,59 @@
import { PureComponent, Validator, Requireable } from 'react'
import { CellMeasurerCache, KeyMapper } from './CellMeasurer';
import { GridCellRenderer } from './Grid';
import { PureComponent, Validator, Requireable } from "react";
import {
CellMeasurerCacheInterface,
KeyMapper,
MeasuredCellParent
} from "./CellMeasurer";
import { GridCellRenderer } from "./Grid";
/**
* Specifies the number of miliseconds during which to disable pointer events while a scroll is in progress.
* This improves performance and makes scrolling smoother.
*/
export const DEFAULT_SCROLLING_RESET_TIME_INTERVAL = 150
export const DEFAULT_SCROLLING_RESET_TIME_INTERVAL = 150;
export type OnCellsRenderedCallback = (params: {
startIndex: number,
stopIndex: number
}) => void;
export type OnCellsRenderedCallback = (
params: {
startIndex: number;
stopIndex: number;
}
) => void;
export type OnScrollCallback = (params: {
clientHeight: number,
scrollHeight: number,
scrollTop: number
}) => void;
export type OnScrollCallback = (
params: {
clientHeight: number;
scrollHeight: number;
scrollTop: number;
}
) => void;
export type MasonryCellProps = {
index: number,
isScrolling: boolean,
key: React.Key,
parent: React.ReactType,
style?: React.CSSProperties
}
index: number;
isScrolling: boolean;
key: React.Key;
parent: MeasuredCellParent;
style?: React.CSSProperties;
};
export type CellRenderer = (props: MasonryCellProps) => React.ReactNode
export type CellRenderer = (props: MasonryCellProps) => React.ReactNode;
export type MasonryProps = {
autoHeight: boolean,
cellCount: number,
cellMeasurerCache: CellMeasurerCache,
cellPositioner: Positioner,
cellRenderer: CellRenderer,
className?: string,
height: number,
id?: string,
keyMapper?: KeyMapper,
onCellsRendered?: OnCellsRenderedCallback,
onScroll?: OnScrollCallback,
overscanByPixels?: number,
role?: string,
scrollingResetTimeInterval?: number,
scrollTop?: number,
style?: React.CSSProperties,
tabIndex?: number | null,
width: number,
autoHeight: boolean;
cellCount: number;
cellMeasurerCache: CellMeasurerCacheInterface;
cellPositioner: Positioner;
cellRenderer: CellRenderer;
className?: string;
height: number;
id?: string;
keyMapper?: KeyMapper;
onCellsRendered?: OnCellsRenderedCallback;
onScroll?: OnScrollCallback;
overscanByPixels?: number;
role?: string;
scrollingResetTimeInterval?: number;
style?: React.CSSProperties;
tabIndex?: number | null;
width: number;
/**
* PLEASE NOTE
* The [key: string]: any; line is here on purpose
@@ -55,12 +62,12 @@ export type MasonryProps = {
* https://github.com/bvaughn/react-virtualized#pass-thru-props
*/
[key: string]: any;
}
};
export type MasonryState = {
isScrolling: boolean,
scrollTop: number
}
isScrolling: boolean;
scrollTop: number;
};
/**
* This component efficiently displays arbitrarily positioned cells using windowing techniques.
@@ -92,61 +99,58 @@ export type MasonryState = {
*/
export class Masonry extends PureComponent<MasonryProps, MasonryState> {
static defaultProps: {
autoHeight: false,
keyMapper: identity,
onCellsRendered: noop,
onScroll: noop,
overscanByPixels: 20,
role: 'grid',
scrollingResetTimeInterval: typeof DEFAULT_SCROLLING_RESET_TIME_INTERVAL,
style: emptyObject,
tabIndex: 0
}
constructor(props: MasonryProps, context: any);
autoHeight: false;
keyMapper: identity;
onCellsRendered: noop;
onScroll: noop;
overscanByPixels: 20;
role: "grid";
scrollingResetTimeInterval: typeof DEFAULT_SCROLLING_RESET_TIME_INTERVAL;
style: emptyObject;
tabIndex: 0;
};
clearCellPositions(): void;
// HACK This method signature was intended for Grid
invalidateCellSizeAfterRender(params: { rowIndex: number }): void
invalidateCellSizeAfterRender(params: { rowIndex: number }): void;
recomputeCellPositions(): void;
componentDidMount(): void;
componentDidUpdate(prevProps: MasonryProps, prevState: MasonryState): void;
componentWillUnmount(): void;
componentWillReceiveProps(nextProps: MasonryProps): void;
render(): JSX.Element;
static getDerivedStateFromProps(
nextProps: MasonryProps,
prevState: MasonryState
): MasonryState | null;
}
export type emptyObject = {}
export type emptyObject = {};
export type identity = <T>(value: T) => T;
export type noop = () => void;
export type Position = {
left: number,
top: number
left: number;
top: number;
};
export type createCellPositionerParams = {
cellMeasurerCache: CellMeasurerCache,
columnCount: number,
columnWidth: number,
spacer?: number
cellMeasurerCache: CellMeasurerCacheInterface;
columnCount: number;
columnWidth: number;
spacer?: number;
};
export type resetParams = {
columnCount: number,
columnWidth: number,
spacer?: number
columnCount: number;
columnWidth: number;
spacer?: number;
};
export type Positioner = ((index: number) => Position) & { reset: (params: resetParams) => void };
export type Positioner = ((index: number) => Position) & {
reset: (params: resetParams) => void;
};
export const createCellPositioner: (params: createCellPositionerParams) => Positioner;
export const createCellPositioner: (
params: createCellPositionerParams
) => Positioner;

View File

@@ -1,5 +1,6 @@
import { PureComponent, Validator, Requireable } from 'react'
import { GridProps } from './Grid'
import { PureComponent, Validator, Requireable } from "react";
import { GridProps } from "./Grid";
import { CellPosition } from "./CellMeasurer";
export type MultiGridProps = {
classNameBottomLeftGrid?: string;
@@ -18,9 +19,9 @@ export type MultiGridProps = {
} & GridProps;
export type MultiGridState = {
scrollLeft: number,
scrollTop: number
}
scrollLeft: number;
scrollTop: number;
};
/**
* Renders 1, 2, or 4 Grids depending on configuration.
@@ -31,63 +32,54 @@ export type MultiGridState = {
*/
export class MultiGrid extends PureComponent<MultiGridProps, MultiGridState> {
static propTypes: {
classNameBottomLeftGrid: Validator<string>,
classNameBottomRightGrid: Validator<string>,
classNameTopLeftGrid: Validator<string>,
classNameTopRightGrid: Validator<string>,
enableFixedColumnScroll: Validator<boolean>,
enableFixedRowScroll: Validator<boolean>,
fixedColumnCount: Validator<number>,
fixedRowCount: Validator<number>,
style: Validator<React.CSSProperties>,
styleBottomLeftGrid: Validator<React.CSSProperties>,
styleBottomRightGrid: Validator<React.CSSProperties>,
styleTopLeftGrid: Validator<React.CSSProperties>,
styleTopRightGrid: Validator<React.CSSProperties>
classNameBottomLeftGrid: Validator<string>;
classNameBottomRightGrid: Validator<string>;
classNameTopLeftGrid: Validator<string>;
classNameTopRightGrid: Validator<string>;
enableFixedColumnScroll: Validator<boolean>;
enableFixedRowScroll: Validator<boolean>;
fixedColumnCount: Validator<number>;
fixedRowCount: Validator<number>;
style: Validator<React.CSSProperties>;
styleBottomLeftGrid: Validator<React.CSSProperties>;
styleBottomRightGrid: Validator<React.CSSProperties>;
styleTopLeftGrid: Validator<React.CSSProperties>;
styleTopRightGrid: Validator<React.CSSProperties>;
};
static defaultProps: {
classNameBottomLeftGrid: '',
classNameBottomRightGrid: '',
classNameTopLeftGrid: '',
classNameTopRightGrid: '',
enableFixedColumnScroll: false,
enableFixedRowScroll: false,
fixedColumnCount: 0,
fixedRowCount: 0,
style: {},
styleBottomLeftGrid: {},
styleBottomRightGrid: {},
styleTopLeftGrid: {},
styleTopRightGrid: {}
classNameBottomLeftGrid: "";
classNameBottomRightGrid: "";
classNameTopLeftGrid: "";
classNameTopRightGrid: "";
enableFixedColumnScroll: false;
enableFixedRowScroll: false;
fixedColumnCount: 0;
fixedRowCount: 0;
scrollToColumn: -1;
scrollToRow: -1;
style: {};
styleBottomLeftGrid: {};
styleBottomRightGrid: {};
styleTopLeftGrid: {};
styleTopRightGrid: {};
};
constructor(props: MultiGridProps, context: any);
forceUpdateGrids(): void;
/** See Grid#invalidateCellSizeAfterRender */
invalidateCellSizeAfterRender(params?: {
columnIndex?: number,
rowIndex?: number
}): void;
invalidateCellSizeAfterRender(params?: Partial<CellPosition>): void;
/** See Grid#measureAllCells */
measureAllCells(): void;
/** See Grid#recomputeGridSize */
recomputeGridSize(params?: {
columnIndex?: number,
rowIndex?: number
columnIndex?: number;
rowIndex?: number;
}): void;
componentDidMount(): void;
componentDidUpdate(prevProps: MultiGridProps, prevState: MultiGridState): void;
componentWillMount(): void;
componentWillReceiveProps(nextProps: MultiGridProps, nextState: MultiGridState): void;
render(): JSX.Element;
static getDerivedStateFromProps(
nextProps: MultiGridProps,
prevState: MultiGridState
): MultiGridState | null;
}

View File

@@ -1,23 +1,23 @@
import { PureComponent, Validator, Requireable } from 'react'
import { PureComponent, Validator, Requireable } from "react";
export type OnScrollParams = {
clientHeight: number,
clientWidth: number,
scrollHeight: number,
scrollLeft: number,
scrollTop: number,
scrollWidth: number
}
clientHeight: number;
clientWidth: number;
scrollHeight: number;
scrollLeft: number;
scrollTop: number;
scrollWidth: number;
};
export type ScrollSyncChildProps = {
clientHeight: number,
clientWidth: number,
onScroll: (params: OnScrollParams) => void,
scrollHeight: number,
scrollLeft: number,
scrollTop: number,
scrollWidth: number
}
clientHeight: number;
clientWidth: number;
onScroll: (params: OnScrollParams) => void;
scrollHeight: number;
scrollLeft: number;
scrollTop: number;
scrollWidth: number;
};
export type ScrollSyncProps = {
/**
@@ -25,7 +25,7 @@ export type ScrollSyncProps = {
* This function should implement the following signature:
* ({ onScroll, scrollLeft, scrollTop }) => PropTypes.element
*/
children?: (props: ScrollSyncChildProps) => React.ReactNode
children: (props: ScrollSyncChildProps) => React.ReactNode;
/**
* PLEASE NOTE
* The [key: string]: any; line is here on purpose
@@ -37,23 +37,22 @@ export type ScrollSyncProps = {
};
export type ScrollSyncState = {
clientHeight: number,
clientWidth: number,
scrollHeight: number,
scrollLeft: number,
scrollTop: number,
scrollWidth: number
clientHeight: number;
clientWidth: number;
scrollHeight: number;
scrollLeft: number;
scrollTop: number;
scrollWidth: number;
};
/**
* HOC that simplifies the process of synchronizing scrolling between two or more virtualized components.
*/
export class ScrollSync extends PureComponent<ScrollSyncProps, ScrollSyncState> {
export class ScrollSync extends PureComponent<
ScrollSyncProps,
ScrollSyncState
> {
static propTypes: {
children: Validator<(props: ScrollSyncChildProps) => React.ReactNode>
children: Validator<(props: ScrollSyncChildProps) => React.ReactNode>;
};
constructor(props: ScrollSyncProps, context: any);
render(): JSX.Element;
}

View File

@@ -1,63 +1,110 @@
import { Validator, Requireable, PureComponent, Component } from 'react';
import { CellMeasurerCache } from './CellMeasurer';
import { Index, Alignment, ScrollEventData, IndexRange, OverscanIndexRange } from '../../index';
import { Grid, GridCoreProps } from './Grid';
import { Validator, Requireable, PureComponent, Component } from "react";
import { CellMeasurerCache } from "./CellMeasurer";
import {
Index,
Alignment,
ScrollEventData,
IndexRange,
OverscanIndexRange
} from "../../index";
import { Grid, GridCoreProps } from "./Grid";
export type SortParams = {
defaultSortDirection: SortDirectionType;
event: MouseEvent;
sortBy: string;
};
export type SortDirectionMap = { [key: string]: SortDirectionType };
export type MultiSortOptions = {
defaultSortBy?: string[];
defaultSortDirection?: SortDirectionMap;
};
export type MultiSortReturn = {
/**
* Sort property to be passed to the `Table` component.
* This function updates `sortBy` and `sortDirection` values.
*/
sort: (params: SortParams) => void;
/**
* Specifies the fields currently responsible for sorting data,
* In order of importance.
*/
sortBy: string[];
/**
* Specifies the direction a specific field is being sorted in.
*/
sortDirection: SortDirectionMap;
};
export function createMultiSort(
sortCallback: (
params: { sortBy: string; sortDirection: SortDirectionType }
) => void,
options?: MultiSortOptions
): MultiSortReturn;
export type TableCellDataGetterParams = {
columnData?: any,
dataKey: string,
rowData: any
columnData?: any;
dataKey: string;
rowData: any;
};
export type TableCellProps = {
cellData?: any,
columnData?: any,
columnIndex: number,
dataKey: string,
isScrolling: boolean,
parent?: any,
rowData: any,
rowIndex: number
cellData?: any;
columnData?: any;
columnIndex: number;
dataKey: string;
isScrolling: boolean;
parent?: any;
rowData: any;
rowIndex: number;
};
export type TableHeaderProps = {
columnData?: any,
dataKey: string,
disableSort?: boolean,
label?: string,
sortBy?: string,
sortDirection?: SortDirectionType
columnData?: any;
dataKey: string;
disableSort?: boolean;
label?: string;
sortBy?: string;
sortDirection?: SortDirectionType;
};
export type TableHeaderRowProps = {
className: string,
columns: React.ReactNode[],
style: React.CSSProperties,
scrollbarWidth: number,
height: number,
width: number
className: string;
columns: React.ReactNode[];
style: React.CSSProperties;
scrollbarWidth: number;
height: number;
width: number;
};
export type TableRowProps = {
className: string,
columns: any[],
index: number,
isScrolling: boolean,
onRowClick?: (params: RowMouseEventHandlerParams) => void,
onRowDoubleClick?: (params: RowMouseEventHandlerParams) => void,
onRowMouseOver?: (params: RowMouseEventHandlerParams) => void,
onRowMouseOut?: (params: RowMouseEventHandlerParams) => void,
onRowRightClick?: (params: RowMouseEventHandlerParams) => void,
rowData: any,
style: any
className: string;
columns: any[];
index: number;
isScrolling: boolean;
onRowClick?: (params: RowMouseEventHandlerParams) => void;
onRowDoubleClick?: (params: RowMouseEventHandlerParams) => void;
onRowMouseOver?: (params: RowMouseEventHandlerParams) => void;
onRowMouseOut?: (params: RowMouseEventHandlerParams) => void;
onRowRightClick?: (params: RowMouseEventHandlerParams) => void;
rowData: any;
style: any;
};
export type TableCellDataGetter = (params: TableCellDataGetterParams) => any;
export type TableCellRenderer = (props: TableCellProps) => React.ReactNode;
export type TableHeaderRenderer = (props: TableHeaderProps) => React.ReactNode;
export type TableHeaderRowRenderer = (props: TableHeaderRowProps) => React.ReactNode;
export type TableHeaderRowRenderer = (
props: TableHeaderRowProps
) => React.ReactNode;
export type TableRowRenderer = (props: TableRowProps) => React.ReactNode;
// https://github.com/bvaughn/react-virtualized/blob/master/docs/Column.md
export type ColumnProps = {
/** Optional aria-label value to set on the column header */
'aria-label'?: string,
"aria-label"?: string;
/**
* Callback responsible for returning a cell's data, given its :dataKey
* ({ columnData: any, dataKey: string, rowData: any }): any
@@ -103,57 +150,57 @@ export type ColumnProps = {
style?: React.CSSProperties;
/** Flex basis (width) for this column; This value can grow or shrink based on :flexGrow and :flexShrink properties. */
width: number;
}
};
export class Column extends Component<ColumnProps> {
static propTypes: {
'aria-label': Requireable<string>,
cellDataGetter: Requireable<TableCellDataGetter>,
cellRenderer: Requireable<TableCellRenderer>,
className: Requireable<string>,
columnData: Requireable<object>,
dataKey: Validator<string>,
disableSort: Requireable<boolean>,
flexGrow: Requireable<number>,
flexShrink: Requireable<number>,
headerClassName: Requireable<string>,
headerRenderer: Validator<TableHeaderRowRenderer>,
label: Requireable<string>,
maxWidth: Requireable<number>,
minWidth: Requireable<number>,
style: Requireable<React.CSSProperties>,
width: Validator<number>,
id: Requireable<string>
"aria-label": Requireable<string>;
cellDataGetter: Requireable<TableCellDataGetter>;
cellRenderer: Requireable<TableCellRenderer>;
className: Requireable<string>;
columnData: Requireable<object>;
dataKey: Validator<string>;
disableSort: Requireable<boolean>;
flexGrow: Requireable<number>;
flexShrink: Requireable<number>;
headerClassName: Requireable<string>;
headerRenderer: Validator<TableHeaderRowRenderer>;
label: Requireable<string>;
maxWidth: Requireable<number>;
minWidth: Requireable<number>;
style: Requireable<React.CSSProperties>;
width: Validator<number>;
id: Requireable<string>;
};
static defaultProps: {
cellDataGetter: TableCellDataGetter,
cellRenderer: TableCellRenderer,
flexGrow: 0,
flexShrink: 1,
headerRenderer: TableHeaderRenderer,
style: {}
cellDataGetter: TableCellDataGetter;
cellRenderer: TableCellRenderer;
flexGrow: 0;
flexShrink: 1;
headerRenderer: TableHeaderRenderer;
style: {};
};
}
export type RowMouseEventHandlerParams = {
rowData: {
columnData: object,
id: string,
index: number
},
index: number,
event: React.SyntheticEvent<React.MouseEvent<any>>
}
columnData: object;
id: string;
index: number;
};
index: number;
event: React.SyntheticEvent<React.MouseEvent<any>>;
};
export type HeaderMouseEventHandlerParams = {
dataKey: string,
columnData: any,
event: React.SyntheticEvent<React.MouseEvent<any>>
}
dataKey: string;
columnData: any;
event: React.SyntheticEvent<React.MouseEvent<any>>;
};
// ref: https://github.com/bvaughn/react-virtualized/blob/master/docs/Table.md
export type TableProps = GridCoreProps & {
'aria-label'?: string,
"aria-label"?: string;
deferredMeasurementCache?: CellMeasurerCache;
/**
* Removes fixed height from the scrollingContainer so that the total height
@@ -161,7 +208,9 @@ export type TableProps = GridCoreProps & {
*/
autoHeight?: boolean;
/** One or more Columns describing the data displayed in this row */
children?: React.ReactElement<ColumnProps>[] | React.ReactElement<ColumnProps>;
children?:
| React.ReactElement<ColumnProps>[]
| React.ReactElement<ColumnProps>;
/** Optional CSS class name */
className?: string;
/** Disable rendering the header at all */
@@ -283,7 +332,7 @@ export type TableProps = GridCoreProps & {
* Sort function to be called if a sortable header is clicked.
* ({ sortBy: string, sortDirection: SortDirection }): void
*/
sort?: (info: { sortBy: string, sortDirection: SortDirectionType }) => void;
sort?: (info: { sortBy: string; sortDirection: SortDirectionType }) => void;
/** Table data is currently sorted by this :dataKey (if it is sorted at all) */
sortBy?: string;
/** Table data is currently sorted in this direction (if it is sorted at all) */
@@ -294,11 +343,13 @@ export type TableProps = GridCoreProps & {
tabIndex?: number | null;
/** Width of list */
width?: number;
}
};
export const defaultCellDataGetter: TableCellDataGetter;
export const defaultCellRenderer: TableCellRenderer;
export const defaultHeaderRenderer: () => React.ReactElement<TableHeaderProps>[];
export const defaultHeaderRenderer: () => React.ReactElement<
TableHeaderProps
>[];
export const defaultHeaderRowRenderer: TableHeaderRowRenderer;
export const defaultRowRenderer: TableRowRenderer;
@@ -307,20 +358,22 @@ export type SortDirectionStatic = {
* Sort items in ascending order.
* This means arranging from the lowest value to the highest (e.g. a-z, 0-9).
*/
ASC: 'ASC',
ASC: "ASC";
/**
* Sort items in descending order.
* This means arranging from the highest value to the lowest (e.g. z-a, 9-0).
*/
DESC: 'DESC'
}
DESC: "DESC";
};
export const SortDirection: SortDirectionStatic
export const SortDirection: SortDirectionStatic;
export type SortDirectionType = 'ASC' | 'DESC'
export type SortDirectionType = "ASC" | "DESC";
export const SortIndicator: React.StatelessComponent<{ sortDirection: SortDirectionType }>
export const SortIndicator: React.StatelessComponent<{
sortDirection: SortDirectionType;
}>;
/**
* Table component with fixed headers and virtualized rows for improved performance with large data sets.
@@ -328,74 +381,85 @@ export const SortIndicator: React.StatelessComponent<{ sortDirection: SortDirect
*/
export class Table extends PureComponent<TableProps> {
static propTypes: {
'aria-label': Requireable<string>,
autoHeight: Requireable<boolean>,
children: Validator<Column>,
className: Requireable<string>,
disableHeader: Requireable<boolean>,
estimatedRowSize: Validator<number>,
gridClassName: Requireable<string>,
gridStyle: Requireable<React.CSSProperties>,
headerClassName: Requireable<string>,
headerHeight: Validator<number>,
headerRowRenderer: Requireable<TableHeaderRowRenderer>,
headerStyle: Requireable<React.CSSProperties>,
height: Validator<number>,
id: Requireable<string>,
noRowsRenderer: Requireable<() => JSX.Element>,
onHeaderClick: Requireable<(params: HeaderMouseEventHandlerParams) => void>,
onRowClick: Requireable<(params: RowMouseEventHandlerParams) => void>,
onRowDoubleClick: Requireable<(params: RowMouseEventHandlerParams) => void>,
onRowMouseOut: Requireable<(params: RowMouseEventHandlerParams) => void>,
onRowMouseOver: Requireable<(params: RowMouseEventHandlerParams) => void>,
onRowsRendered: Requireable<(params: RowMouseEventHandlerParams) => void>,
onScroll: Requireable<(params: ScrollEventData) => void>,
overscanRowCount: Validator<number>,
rowClassName: Requireable<string | ((params: Index) => string)>,
rowGetter: Validator<(params: Index) => any>,
rowHeight: Validator<number | ((params: Index) => number)>,
rowCount: Validator<number>,
rowRenderer: Requireable<(props: TableRowProps) => React.ReactNode>,
rowStyle: Validator<React.CSSProperties | ((params: Index) => React.CSSProperties)>,
scrollToAlignment: Validator<Alignment>,
scrollToIndex: Validator<number>,
scrollTop: Requireable<number>,
sort: Requireable<(params: { sortBy: string, sortDirection: SortDirectionType }) => void>,
sortBy: Requireable<string>,
sortDirection: Validator<SortDirectionType>,
style: Requireable<React.CSSProperties>,
tabIndex: Requireable<number>,
width: Validator<number>
"aria-label": Requireable<string>;
autoHeight: Requireable<boolean>;
children: Validator<Column>;
className: Requireable<string>;
disableHeader: Requireable<boolean>;
estimatedRowSize: Validator<number>;
gridClassName: Requireable<string>;
gridStyle: Requireable<React.CSSProperties>;
headerClassName: Requireable<string>;
headerHeight: Validator<number>;
headerRowRenderer: Requireable<TableHeaderRowRenderer>;
headerStyle: Requireable<React.CSSProperties>;
height: Validator<number>;
id: Requireable<string>;
noRowsRenderer: Requireable<() => JSX.Element>;
onHeaderClick: Requireable<
(params: HeaderMouseEventHandlerParams) => void
>;
onRowClick: Requireable<(params: RowMouseEventHandlerParams) => void>;
onRowDoubleClick: Requireable<
(params: RowMouseEventHandlerParams) => void
>;
onRowMouseOut: Requireable<
(params: RowMouseEventHandlerParams) => void
>;
onRowMouseOver: Requireable<
(params: RowMouseEventHandlerParams) => void
>;
onRowsRendered: Requireable<
(params: RowMouseEventHandlerParams) => void
>;
onScroll: Requireable<(params: ScrollEventData) => void>;
overscanRowCount: Validator<number>;
rowClassName: Requireable<string | ((params: Index) => string)>;
rowGetter: Validator<(params: Index) => any>;
rowHeight: Validator<number | ((params: Index) => number)>;
rowCount: Validator<number>;
rowRenderer: Requireable<(props: TableRowProps) => React.ReactNode>;
rowStyle: Validator<
React.CSSProperties | ((params: Index) => React.CSSProperties)
>;
scrollToAlignment: Validator<Alignment>;
scrollToIndex: Validator<number>;
scrollTop: Requireable<number>;
sort: Requireable<
(
params: { sortBy: string; sortDirection: SortDirectionType }
) => void
>;
sortBy: Requireable<string>;
sortDirection: Validator<SortDirectionType>;
style: Requireable<React.CSSProperties>;
tabIndex: Requireable<number>;
width: Validator<number>;
};
static defaultProps: {
disableHeader: false,
estimatedRowSize: 30,
headerHeight: 0,
headerStyle: {},
noRowsRenderer: () => null,
onRowsRendered: () => null,
onScroll: () => null,
overscanRowCount: 10,
rowRenderer: TableRowRenderer,
headerRowRenderer: TableHeaderRenderer,
rowStyle: {},
scrollToAlignment: 'auto',
scrollToIndex: -1,
style: {}
disableHeader: false;
estimatedRowSize: 30;
headerHeight: 0;
headerStyle: {};
noRowsRenderer: () => null;
onRowsRendered: () => null;
onScroll: () => null;
overscanRowCount: 10;
rowRenderer: TableRowRenderer;
headerRowRenderer: TableHeaderRenderer;
rowStyle: {};
scrollToAlignment: "auto";
scrollToIndex: -1;
style: {};
};
Grid: Grid;
constructor(props: TableProps);
forceUpdateGrid(): void;
/** See Grid#getOffsetForCell */
getOffsetForRow(params: {
alignment?: Alignment,
index?: number
}): number;
getOffsetForRow(params: { alignment?: Alignment; index?: number }): number;
/** See Grid#scrollToPosition */
scrollToPosition(scrollTop?: number): void;
@@ -407,11 +471,5 @@ export class Table extends PureComponent<TableProps> {
recomputeRowHeights(index?: number): void;
/** See Grid#scrollToCell */
scrollToRow(index?: number): void
componentDidMount(): void;
componentDidUpdate(): void;
render(): JSX.Element;
scrollToRow(index?: number): void;
}

View File

@@ -1,28 +1,55 @@
import { Validator, Requireable, PureComponent } from 'react'
import { Validator, Requireable, PureComponent } from "react";
/**
* Specifies the number of miliseconds during which to disable pointer events while a scroll is in progress.
* This improves performance and makes scrolling smoother.
*/
export const IS_SCROLLING_TIMEOUT = 150;
export type WindowScrollerChildProps = {
height: number,
width: number,
isScrolling: boolean,
scrollTop: number,
onChildScroll: () => void
height: number;
width: number;
isScrolling: boolean;
scrollTop: number;
onChildScroll: () => void;
};
export type WindowScrollerProps = {
/**
* Function responsible for rendering children.
* This function should implement the following signature:
* ({ height: number, width: number, isScrolling: boolean, scrollTop: number, onChildScroll: function }) => PropTypes.element
* ({ height, isScrolling, scrollLeft, scrollTop, width }) => PropTypes.element
*/
children?: (props: WindowScrollerChildProps) => React.ReactNode;
/** Callback to be invoked on-resize: ({ height }) */
onResize?: (params: { height: number, width: number }) => void;
/** Callback to be invoked on-scroll: ({ scrollTop }) */
onScroll?: (params: { scrollTop: number }) => void;
children: (
params: {
onChildScroll: ({ scrollTop: number }) => void;
registerChild: (params?: Element) => void;
height: number;
isScrolling: boolean;
scrollLeft: number;
scrollTop: number;
width: number;
}
) => React.ReactNode;
/** Callback to be invoked on-resize: ({ height, width }) */
onResize?: (params: { height: number; width: number }) => void;
/** Callback to be invoked on-scroll: ({ scrollLeft, scrollTop }) */
onScroll?: (params: { scrollLeft: number; scrollTop: number }) => void;
/** Element to attach scroll event listeners. Defaults to window. */
scrollElement?: HTMLElement;
/** Wait this amount of time after the last scroll event before resetting WindowScroller pointer-events; defaults to 150ms */
scrollElement?: typeof window | Element;
/**
* Wait this amount of time after the last scroll event before resetting child `pointer-events`.
*/
scrollingResetTimeInterval?: number;
/** Height used for server-side rendering */
serverHeight?: number;
/** Width used for server-side rendering */
serverWidth?: number;
/**
* PLEASE NOTE
* The [key: string]: any; line is here on purpose
@@ -31,43 +58,28 @@ export type WindowScrollerProps = {
* https://github.com/bvaughn/react-virtualized#pass-thru-props
*/
[key: string]: any;
}
};
export type WindowScrollerState = {
height: number,
width: number,
isScrolling: boolean,
scrollLeft: number
scrollTop: number
}
export class WindowScroller extends PureComponent<WindowScrollerProps, WindowScrollerState> {
static propTypes: {
children: Requireable<(props: WindowScrollerChildProps) => React.ReactNode>,
onResize: Validator<(params: { height: number, width: number }) => void>,
onScroll: Validator<(params: { scrollTop: number }) => void>,
scrollElement: Validator<HTMLElement>,
scrollingResetTimeInterval: Validator<number>
};
height: number;
width: number;
isScrolling: boolean;
scrollLeft: number;
scrollTop: number;
};
export class WindowScroller extends PureComponent<
WindowScrollerProps,
WindowScrollerState
> {
static defaultProps: {
onResize: () => {},
onScroll: () => {},
scrollingResetTimeInterval: 150
onResize: () => void;
onScroll: () => void;
scrollingResetTimeInterval: typeof IS_SCROLLING_TIMEOUT;
scrollElement: Window | undefined;
serverHeight: 0;
serverWidth: 0;
};
constructor(props: WindowScrollerProps);
// Cant use defaultProps for scrollElement without breaking server-side rendering
readonly scrollElement: HTMLElement | Window;
updatePosition(scrollElement?: HTMLElement): void;
componentDidMount(): void;
componentWillReceiveProps(nextProps: WindowScrollerProps): void;
componentWillUnmount(): void;
render(): JSX.Element;
}

View File

@@ -1,4 +1,4 @@
// Type definitions for react-virtualized 9.7
// Type definitions for react-virtualized 9.18
// Project: https://github.com/bvaughn/react-virtualized
// Definitions by: Kalle Ott <https://github.com/kaoDev>
// John Gunther <https://github.com/guntherjh>
@@ -13,20 +13,22 @@
export {
ArrowKeyStepper,
ArrowKeyStepperProps,
ChildProps as ArrowKeyStepperChildProps
} from './dist/es/ArrowKeyStepper'
ChildProps as ArrowKeyStepperChildProps,
ScrollIndices
} from "./dist/es/ArrowKeyStepper";
export {
AutoSizer,
AutoSizerProps,
Dimensions
} from './dist/es/AutoSizer'
Dimensions,
Size
} from "./dist/es/AutoSizer";
export {
CellMeasurer,
CellMeasurerCache,
CellMeasurerCacheParams,
CellMeasurerProps,
KeyMapper
} from './dist/es/CellMeasurer'
} from "./dist/es/CellMeasurer";
export {
Collection,
CollectionCellGroupRenderer,
@@ -36,12 +38,12 @@ export {
CollectionCellSizeAndPosition,
CollectionCellSizeAndPositionGetter,
CollectionProps
} from './dist/es/Collection'
} from "./dist/es/Collection";
export {
ColumnSizer,
ColumnSizerProps,
SizedColumnProps
} from './dist/es/ColumnSizer'
} from "./dist/es/ColumnSizer";
export {
accessibilityOverscanIndicesGetter,
defaultOverscanIndicesGetter,
@@ -64,18 +66,13 @@ export {
SectionRenderedParams,
SizeAndPositionData,
VisibleCellRange
} from './dist/es/Grid'
} from "./dist/es/Grid";
export {
InfiniteLoader,
InfiniteLoaderChildProps,
InfiniteLoaderProps
} from './dist/es/InfiniteLoader'
export {
List,
ListProps,
ListRowProps,
ListRowRenderer
} from './dist/es/List'
} from "./dist/es/InfiniteLoader";
export { List, ListProps, ListRowProps, ListRowRenderer } from "./dist/es/List";
export {
createCellPositioner as createMasonryCellPositioner,
Masonry,
@@ -87,20 +84,17 @@ export {
OnScrollCallback,
Position,
Positioner
} from './dist/es/Masonry'
export {
MultiGrid,
MultiGridProps,
MultiGridState
} from './dist/es/MultiGrid'
} from "./dist/es/Masonry";
export { MultiGrid, MultiGridProps, MultiGridState } from "./dist/es/MultiGrid";
export {
ScrollSync,
OnScrollParams,
ScrollSyncChildProps,
ScrollSyncProps,
ScrollSyncState
} from './dist/es/ScrollSync'
} from "./dist/es/ScrollSync";
export {
createMultiSort as createTableMultiSort,
defaultCellDataGetter as defaultTableCellDataGetter,
defaultCellRenderer as defaultTableCellRenderer,
defaultHeaderRenderer as defaultTableHeaderRenderer,
@@ -125,51 +119,52 @@ export {
TableProps,
TableRowProps,
TableRowRenderer
} from './dist/es/Table'
} from "./dist/es/Table";
export {
WindowScroller,
WindowScrollerChildProps,
WindowScrollerProps,
WindowScrollerState
} from './dist/es/WindowScroller'
WindowScrollerState,
IS_SCROLLING_TIMEOUT
} from "./dist/es/WindowScroller";
export type Index = {
index: number
index: number;
};
export type PositionInfo = {
x: number,
y: number
x: number;
y: number;
};
export type ScrollPosition = {
scrollLeft: number,
scrollTop: number
scrollLeft: number;
scrollTop: number;
};
export type SizeInfo = {
height: number,
width: number
height: number;
width: number;
};
export type SizeAndPositionInfo = SizeInfo & PositionInfo;
export type Map<T> = { [key: string]: T };
export type Alignment = 'auto' | 'end' | 'start' | 'center';
export type Alignment = "auto" | "end" | "start" | "center";
export type IndexRange = {
startIndex: number,
stopIndex: number
}
startIndex: number;
stopIndex: number;
};
export type OverscanIndexRange = {
overscanStartIndex: number,
overscanStopIndex: number,
}
overscanStartIndex: number;
overscanStopIndex: number;
};
export type ScrollEventData = {
clientHeight: number,
scrollHeight: number,
scrollTop: number
}
clientHeight: number;
scrollHeight: number;
scrollTop: number;
};

View File

@@ -1,22 +1,18 @@
{
"compilerOptions": {
"module": "commonjs",
"lib": [
"es6",
"dom"
],
"lib": ["es6", "dom"],
"noImplicitAny": false,
"noImplicitThis": true,
"strictNullChecks": false,
"strictFunctionTypes": false,
"jsx": "react",
"baseUrl": "../",
"typeRoots": [
"../"
],
"typeRoots": ["../"],
"types": [],
"noEmit": true,
"forceConsistentCasingInFileNames": true
"forceConsistentCasingInFileNames": true,
"target": "es5"
},
"files": [
"index.d.ts",
@@ -48,4 +44,4 @@
"dist/commonjs/WindowScroller.d.ts",
"react-virtualized-tests.tsx"
]
}
}