diff --git a/types/react-virtualized/dist/es/ArrowKeyStepper.d.ts b/types/react-virtualized/dist/es/ArrowKeyStepper.d.ts index 17844914af..2c4f36d7d2 100644 --- a/types/react-virtualized/dist/es/ArrowKeyStepper.d.ts +++ b/types/react-virtualized/dist/es/ArrowKeyStepper.d.ts @@ -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 { +}; +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, - columnCount: Validator, - disabled: Validator, - mode: Validator<'cells' | 'edges'>, - rowCount: Validator, - scrollToColumn: Validator, - scrollToRow: Validator - }; - - constructor(props: ArrowKeyStepperProps, context: any); - - componentWillReceiveProps(nextProps: ArrowKeyStepperProps): void; - - setScrollIndexes(params: ScrollIndexes): void; - - render(): JSX.Element; } diff --git a/types/react-virtualized/dist/es/AutoSizer.d.ts b/types/react-virtualized/dist/es/AutoSizer.d.ts index b54fce89e1..d3981f3a16 100644 --- a/types/react-virtualized/dist/es/AutoSizer.d.ts +++ b/types/react-virtualized/dist/es/AutoSizer.d.ts @@ -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 { - static propTypes: { - children: Validator<(props: Dimensions) => React.ReactNode>, - disableHeight: Requireable, - disableWidth: Requireable, - nonce: Validator, - onResize: Validator<(props: Dimensions) => any> - }; - +export class AutoSizer extends PureComponent { static defaultProps: { - onResize: () => {} + onResize: () => void; + disableHeight: false; + disableWidth: false; + style: {}; }; constructor(props: AutoSizerProps); diff --git a/types/react-virtualized/dist/es/CellMeasurer.d.ts b/types/react-virtualized/dist/es/CellMeasurer.d.ts index 46c033ba49..5c56332964 100644 --- a/types/react-virtualized/dist/es/CellMeasurer.d.ts +++ b/types/react-virtualized/dist/es/CellMeasurer.d.ts @@ -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 { - constructor(props: CellMeasurerProps, context: any); - - componentDidMount(): void; - - componentDidUpdate(prevProps: CellMeasurerProps, prevState: any): void; - - render(): JSX.Element; -} +export class CellMeasurer extends PureComponent {} diff --git a/types/react-virtualized/dist/es/Collection.d.ts b/types/react-virtualized/dist/es/Collection.d.ts index e3b378eacb..d813e397f9 100644 --- a/types/react-virtualized/dist/es/Collection.d.ts +++ b/types/react-virtualized/dist/es/Collection.d.ts @@ -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 */ - 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 { static propTypes: { - 'aria-label': Requireable, - cellCount: Validator, - cellGroupRenderer: Validator, - cellRenderer: Validator, - cellSizeAndPositionGetter: Validator, - sectionSize: Requireable + "aria-label": Requireable; + cellCount: Validator; + cellGroupRenderer: Validator; + cellRenderer: Validator; + cellSizeAndPositionGetter: Validator< + CollectionCellSizeAndPositionGetter + >; + sectionSize: Requireable; }; 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 { * 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[]; } diff --git a/types/react-virtualized/dist/es/ColumnSizer.d.ts b/types/react-virtualized/dist/es/ColumnSizer.d.ts index c3779c493c..fd42ad5cf5 100644 --- a/types/react-virtualized/dist/es/ColumnSizer.d.ts +++ b/types/react-virtualized/dist/es/ColumnSizer.d.ts @@ -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 { static propTypes: { - children: Validator<(props: SizedColumnProps) => React.ReactNode>, - columnMaxWidth: Requireable, - columnMinWidth: Requireable, - columnCount: Validator, - width: Validator + children: Validator<(props: SizedColumnProps) => React.ReactNode>; + columnMaxWidth: Requireable; + columnMinWidth: Requireable; + columnCount: Validator; + width: Validator; }; - - constructor(props: ColumnSizerProps, context: any); - - componentDidUpdate(prevProps: ColumnSizerProps, prevState: any): void; - - render(): JSX.Element; } diff --git a/types/react-virtualized/dist/es/Grid.d.ts b/types/react-virtualized/dist/es/Grid.d.ts index 83230ca794..a543521b7a 100644 --- a/types/react-virtualized/dist/es/Grid.d.ts +++ b/types/react-virtualized/dist/es/Grid.d.ts @@ -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, - 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, - verticalOffsetAdjustment: number, - visibleColumnIndices: VisibleCellRange, - visibleRowIndices: VisibleCellRange -} -export type GridCellRangeRenderer = (params: GridCellRangeProps) => React.ReactNode[]; + cellCache: Map; + 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; + 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 { - static propTypes: { - 'aria-label': Requireable, - autoContainerWidth: Requireable, - autoHeight: Requireable, - cellRenderer: Validator<(props: GridCellProps) => React.ReactNode>, - cellRangeRenderer: Validator<(params: GridCellRangeProps) => React.ReactNode[]>, - className: Requireable, - columnCount: Validator, - columnWidth: Validator number)>, - containerStyle: Requireable, - deferredMeasurementCache: Requireable, - estimatedColumnSize: Validator, - estimatedRowSize: Validator, - getScrollbarSize: Validator<() => number>, - height: Validator, - id: Requireable, - isScrolling: Requireable, - noContentRenderer: Requireable<() => JSX.Element>, - onScroll: Validator<(params: ScrollParams) => void>, - onSectionRendered: Validator<(params: SectionRenderedParams) => void>, - overscanColumnCount: Validator, - overscanIndicesGetter: Validator, - overscanRowCount: Validator, - role: Requireable, - rowHeight: Validator number)>, - rowCount: Validator, - scrollingResetTimeInterval: Requireable, - scrollLeft: Requireable, - scrollToAlignment: Validator, - scrollToColumn: Validator, - scrollTop: Requireable, - scrollToRow: Validator, - style: Requireable, - tabIndex: Requireable, - width: Validator - }; - 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): void; /** * Invalidate Grid size and recompute visible cells. @@ -412,9 +409,9 @@ export class Grid extends PureComponent { */ // @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 { * 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; diff --git a/types/react-virtualized/dist/es/InfiniteLoader.d.ts b/types/react-virtualized/dist/es/InfiniteLoader.d.ts index c247ad3c0e..78b3d0a39b 100644 --- a/types/react-virtualized/dist/es/InfiniteLoader.d.ts +++ b/types/react-virtualized/dist/es/InfiniteLoader.d.ts @@ -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 { static propTypes: { - children: Validator<(props: InfiniteLoaderChildProps) => React.ReactNode>, - isRowLoaded: Validator<(params: Index) => boolean>, - loadMoreRows: Validator<(params: IndexRange) => Promise>, - minimumBatchSize: Validator, - rowCount: Validator, - threshold: Validator + children: Validator< + (props: InfiniteLoaderChildProps) => React.ReactNode + >; + isRowLoaded: Validator<(params: Index) => boolean>; + loadMoreRows: Validator<(params: IndexRange) => Promise>; + minimumBatchSize: Validator; + rowCount: Validator; + threshold: Validator; }; 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; } diff --git a/types/react-virtualized/dist/es/List.d.ts b/types/react-virtualized/dist/es/List.d.ts index 7f550d2dcb..23d76e19ab 100644 --- a/types/react-virtualized/dist/es/List.d.ts +++ b/types/react-virtualized/dist/es/List.d.ts @@ -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 { - static propTypes: { - 'aria-label': Requireable, - autoHeight: Requireable, - className: Requireable, - estimatedRowSize: Validator, - height: Validator, - noRowsRenderer: Validator<() => JSX.Element>, - onRowsRendered: Validator<(params: IndexRange) => void>, - overscanRowCount: Validator, - onScroll: Validator<(params: { clientHeight: number, scrollHeight: number, scrollTop: number }) => void>, - overscanIndicesGetter: Validator, - rowHeight: Validator number)>, - rowRenderer: Validator, - rowCount: Validator, - scrollToAlignment: Validator, - scrollToIndex: Validator, - scrollTop: Requireable, - style: Validator, - tabIndex: Requireable, - width: Validator - }; - 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): 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; } diff --git a/types/react-virtualized/dist/es/Masonry.d.ts b/types/react-virtualized/dist/es/Masonry.d.ts index 59394bc170..f29cf86749 100644 --- a/types/react-virtualized/dist/es/Masonry.d.ts +++ b/types/react-virtualized/dist/es/Masonry.d.ts @@ -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 { 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 = (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; diff --git a/types/react-virtualized/dist/es/MultiGrid.d.ts b/types/react-virtualized/dist/es/MultiGrid.d.ts index 96c33e3bed..7796b1c281 100644 --- a/types/react-virtualized/dist/es/MultiGrid.d.ts +++ b/types/react-virtualized/dist/es/MultiGrid.d.ts @@ -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 { static propTypes: { - classNameBottomLeftGrid: Validator, - classNameBottomRightGrid: Validator, - classNameTopLeftGrid: Validator, - classNameTopRightGrid: Validator, - enableFixedColumnScroll: Validator, - enableFixedRowScroll: Validator, - fixedColumnCount: Validator, - fixedRowCount: Validator, - style: Validator, - styleBottomLeftGrid: Validator, - styleBottomRightGrid: Validator, - styleTopLeftGrid: Validator, - styleTopRightGrid: Validator + classNameBottomLeftGrid: Validator; + classNameBottomRightGrid: Validator; + classNameTopLeftGrid: Validator; + classNameTopRightGrid: Validator; + enableFixedColumnScroll: Validator; + enableFixedRowScroll: Validator; + fixedColumnCount: Validator; + fixedRowCount: Validator; + style: Validator; + styleBottomLeftGrid: Validator; + styleBottomRightGrid: Validator; + styleTopLeftGrid: Validator; + styleTopRightGrid: Validator; }; 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): 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; } diff --git a/types/react-virtualized/dist/es/ScrollSync.d.ts b/types/react-virtualized/dist/es/ScrollSync.d.ts index 00137bf635..3a6cad6a6d 100644 --- a/types/react-virtualized/dist/es/ScrollSync.d.ts +++ b/types/react-virtualized/dist/es/ScrollSync.d.ts @@ -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 { +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; } diff --git a/types/react-virtualized/dist/es/Table.d.ts b/types/react-virtualized/dist/es/Table.d.ts index f74c816463..571f67a371 100644 --- a/types/react-virtualized/dist/es/Table.d.ts +++ b/types/react-virtualized/dist/es/Table.d.ts @@ -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 { static propTypes: { - 'aria-label': Requireable, - cellDataGetter: Requireable, - cellRenderer: Requireable, - className: Requireable, - columnData: Requireable, - dataKey: Validator, - disableSort: Requireable, - flexGrow: Requireable, - flexShrink: Requireable, - headerClassName: Requireable, - headerRenderer: Validator, - label: Requireable, - maxWidth: Requireable, - minWidth: Requireable, - style: Requireable, - width: Validator, - id: Requireable + "aria-label": Requireable; + cellDataGetter: Requireable; + cellRenderer: Requireable; + className: Requireable; + columnData: Requireable; + dataKey: Validator; + disableSort: Requireable; + flexGrow: Requireable; + flexShrink: Requireable; + headerClassName: Requireable; + headerRenderer: Validator; + label: Requireable; + maxWidth: Requireable; + minWidth: Requireable; + style: Requireable; + width: Validator; + id: Requireable; }; 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> -} + columnData: object; + id: string; + index: number; + }; + index: number; + event: React.SyntheticEvent>; +}; export type HeaderMouseEventHandlerParams = { - dataKey: string, - columnData: any, - event: React.SyntheticEvent> -} + dataKey: string; + columnData: any; + event: React.SyntheticEvent>; +}; // 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[] | React.ReactElement; + children?: + | React.ReactElement[] + | React.ReactElement; /** 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[]; +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 { static propTypes: { - 'aria-label': Requireable, - autoHeight: Requireable, - children: Validator, - className: Requireable, - disableHeader: Requireable, - estimatedRowSize: Validator, - gridClassName: Requireable, - gridStyle: Requireable, - headerClassName: Requireable, - headerHeight: Validator, - headerRowRenderer: Requireable, - headerStyle: Requireable, - height: Validator, - id: Requireable, - 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, - rowClassName: Requireable string)>, - rowGetter: Validator<(params: Index) => any>, - rowHeight: Validator number)>, - rowCount: Validator, - rowRenderer: Requireable<(props: TableRowProps) => React.ReactNode>, - rowStyle: Validator React.CSSProperties)>, - scrollToAlignment: Validator, - scrollToIndex: Validator, - scrollTop: Requireable, - sort: Requireable<(params: { sortBy: string, sortDirection: SortDirectionType }) => void>, - sortBy: Requireable, - sortDirection: Validator, - style: Requireable, - tabIndex: Requireable, - width: Validator + "aria-label": Requireable; + autoHeight: Requireable; + children: Validator; + className: Requireable; + disableHeader: Requireable; + estimatedRowSize: Validator; + gridClassName: Requireable; + gridStyle: Requireable; + headerClassName: Requireable; + headerHeight: Validator; + headerRowRenderer: Requireable; + headerStyle: Requireable; + height: Validator; + id: Requireable; + 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; + rowClassName: Requireable string)>; + rowGetter: Validator<(params: Index) => any>; + rowHeight: Validator number)>; + rowCount: Validator; + rowRenderer: Requireable<(props: TableRowProps) => React.ReactNode>; + rowStyle: Validator< + React.CSSProperties | ((params: Index) => React.CSSProperties) + >; + scrollToAlignment: Validator; + scrollToIndex: Validator; + scrollTop: Requireable; + sort: Requireable< + ( + params: { sortBy: string; sortDirection: SortDirectionType } + ) => void + >; + sortBy: Requireable; + sortDirection: Validator; + style: Requireable; + tabIndex: Requireable; + width: Validator; }; 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 { recomputeRowHeights(index?: number): void; /** See Grid#scrollToCell */ - scrollToRow(index?: number): void - - componentDidMount(): void; - - componentDidUpdate(): void; - - render(): JSX.Element; + scrollToRow(index?: number): void; } diff --git a/types/react-virtualized/dist/es/WindowScroller.d.ts b/types/react-virtualized/dist/es/WindowScroller.d.ts index d19e83c06d..723862485f 100644 --- a/types/react-virtualized/dist/es/WindowScroller.d.ts +++ b/types/react-virtualized/dist/es/WindowScroller.d.ts @@ -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 { - static propTypes: { - children: Requireable<(props: WindowScrollerChildProps) => React.ReactNode>, - onResize: Validator<(params: { height: number, width: number }) => void>, - onScroll: Validator<(params: { scrollTop: number }) => void>, - scrollElement: Validator, - scrollingResetTimeInterval: Validator - }; + 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); - - // Can’t 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; } diff --git a/types/react-virtualized/index.d.ts b/types/react-virtualized/index.d.ts index 18710b4983..7c6b5d11fb 100644 --- a/types/react-virtualized/index.d.ts +++ b/types/react-virtualized/index.d.ts @@ -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 // John Gunther @@ -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 = { [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; +}; diff --git a/types/react-virtualized/tsconfig.json b/types/react-virtualized/tsconfig.json index 4457f73e3d..9a6a1ce9de 100644 --- a/types/react-virtualized/tsconfig.json +++ b/types/react-virtualized/tsconfig.json @@ -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" ] -} \ No newline at end of file +}