diff --git a/types/react-virtualized/dist/es/CellMeasurer.d.ts b/types/react-virtualized/dist/es/CellMeasurer.d.ts index 5c56332964..51f0b4b07d 100644 --- a/types/react-virtualized/dist/es/CellMeasurer.d.ts +++ b/types/react-virtualized/dist/es/CellMeasurer.d.ts @@ -29,15 +29,15 @@ export class CellMeasurerCache implements CellMeasurerCacheInterface { constructor(params?: CellMeasurerCacheParams); clear(rowIndex: number, columnIndex: number): void; clearAll(): void; - columnWidth: (params: { index: number }) => number | undefined; + columnWidth: (params: { index: number }) => number; readonly defaultHeight: number; readonly defaultWidth: number; hasFixedHeight(): boolean; hasFixedWidth(): boolean; - getHeight(rowIndex: number, columnIndex: number): number | undefined; - getWidth(rowIndex: number, columnIndex: number): number | undefined; + getHeight(rowIndex: number, columnIndex: number): number; + getWidth(rowIndex: number, columnIndex: number): number; has(rowIndex: number, columnIndex: number): boolean; - rowHeight: (params: { index: number }) => number | undefined; + rowHeight: (params: { index: number }) => number; set( rowIndex: number, columnIndex: number, diff --git a/types/react-virtualized/dist/es/Collection.d.ts b/types/react-virtualized/dist/es/Collection.d.ts index d813e397f9..4f353d20fc 100644 --- a/types/react-virtualized/dist/es/Collection.d.ts +++ b/types/react-virtualized/dist/es/Collection.d.ts @@ -29,8 +29,9 @@ export type CollectionCellGroupRenderer = ( ) => React.ReactNode[]; export type CollectionCellRendererParams = { index: number; - key: string; - style?: React.CSSProperties; + isScrolling: boolean; + key: number; + style: React.CSSProperties; }; export type CollectionCellRenderer = ( params: CollectionCellRendererParams diff --git a/types/react-virtualized/dist/es/Grid.d.ts b/types/react-virtualized/dist/es/Grid.d.ts index a543521b7a..86055132aa 100644 --- a/types/react-virtualized/dist/es/Grid.d.ts +++ b/types/react-virtualized/dist/es/Grid.d.ts @@ -54,12 +54,7 @@ export type ScrollParams = { scrollTop: number; scrollWidth: number; }; -export type SectionRenderedParams = { - columnStartIndex: number; - columnStopIndex: number; - rowStartIndex: number; - rowStopIndex: number; -}; +export type SectionRenderedParams = RenderedSection; export type SCROLL_DIRECTION_HORIZONTAL = "horizontal"; export type SCROLL_DIRECTION_VERTICAL = "vertical"; export type OverscanIndicesGetterParams = { diff --git a/types/react-virtualized/dist/es/Table.d.ts b/types/react-virtualized/dist/es/Table.d.ts index 571f67a371..c3e5c1478d 100644 --- a/types/react-virtualized/dist/es/Table.d.ts +++ b/types/react-virtualized/dist/es/Table.d.ts @@ -208,9 +208,7 @@ export type TableProps = GridCoreProps & { */ autoHeight?: boolean; /** One or more Columns describing the data displayed in this row */ - children?: - | React.ReactElement[] - | React.ReactElement; + children?: React.ReactNode; /** Optional CSS class name */ className?: string; /** Disable rendering the header at all */ @@ -372,7 +370,7 @@ export const SortDirection: SortDirectionStatic; export type SortDirectionType = "ASC" | "DESC"; export const SortIndicator: React.StatelessComponent<{ - sortDirection: SortDirectionType; + sortDirection?: SortDirectionType; }>; /** diff --git a/types/react-virtualized/dist/es/WindowScroller.d.ts b/types/react-virtualized/dist/es/WindowScroller.d.ts index 723862485f..628d58744d 100644 --- a/types/react-virtualized/dist/es/WindowScroller.d.ts +++ b/types/react-virtualized/dist/es/WindowScroller.d.ts @@ -22,7 +22,7 @@ export type WindowScrollerProps = { */ children: ( params: { - onChildScroll: ({ scrollTop: number }) => void; + onChildScroll: (params: { scrollTop: number }) => void; registerChild: (params?: Element) => void; height: number; isScrolling: boolean; diff --git a/types/react-virtualized/index.d.ts b/types/react-virtualized/index.d.ts index 7c6b5d11fb..c5a1a60aaa 100644 --- a/types/react-virtualized/index.d.ts +++ b/types/react-virtualized/index.d.ts @@ -118,7 +118,8 @@ export { TableHeaderRowRenderer, TableProps, TableRowProps, - TableRowRenderer + TableRowRenderer, + SortParams } from "./dist/es/Table"; export { WindowScroller, diff --git a/types/react-virtualized/react-virtualized-tests.tsx b/types/react-virtualized/react-virtualized-tests.tsx index f11fa644f5..e4bfd5228a 100644 --- a/types/react-virtualized/react-virtualized-tests.tsx +++ b/types/react-virtualized/react-virtualized-tests.tsx @@ -1,38 +1,52 @@ -import * as React from 'react'; -import { PureComponent } from 'react' -import { ArrowKeyStepper, AutoSizer, Grid } from 'react-virtualized' +import * as React from "react"; +import { PureComponent } from "react"; +import { + ArrowKeyStepper, + AutoSizer, + Grid, + Index, + CollectionCellRendererParams, + IndexRange, + CellMeasurerProps, + Size, + TableHeaderProps +} from "react-virtualized"; export class ArrowKeyStepperExample extends PureComponent { - constructor(props) { - super(props) - - this._getColumnWidth = this._getColumnWidth.bind(this) - this._getRowHeight = this._getRowHeight.bind(this) - this._cellRenderer = this._cellRenderer.bind(this) - } - render() { - const { mode } = this.state + const { mode } = this.state; return ( - {({ onSectionRendered, scrollToColumn, scrollToRow }) => (
- {({ width }) => ( this._cellRenderer({ columnIndex, key, rowIndex, scrollToColumn, scrollToRow, style })} + cellRenderer={({ + columnIndex, + key, + rowIndex, + style + }) => + this._cellRenderer({ + columnIndex, + key, + rowIndex, + scrollToColumn, + scrollToRow, + style + }) + } rowHeight={this._getRowHeight} rowCount={100} scrollToColumn={scrollToColumn} @@ -44,49 +58,45 @@ export class ArrowKeyStepperExample extends PureComponent {
)} - ) + ); } - _getColumnWidth({ index }) { - return (1 + (index % 3)) * 60 + _getColumnWidth({ index }: Index) { + return (1 + index % 3) * 60; } - _getRowHeight({ index }) { - return (1 + (index % 3)) * 30 + _getRowHeight({ index }: Index) { + return (1 + index % 3) * 30; } - _cellRenderer({ columnIndex, key, rowIndex, scrollToColumn, scrollToRow, style }) { - + _cellRenderer({ + columnIndex, + key, + rowIndex, + scrollToColumn, + scrollToRow, + style + }: any) { return ( -
+
{`r:${rowIndex}, c:${columnIndex}`}
- ) + ); } } -import { List } from 'react-virtualized' +import { List } from "react-virtualized"; export class AutoSizerExample extends PureComponent { - constructor(props) { - super(props) - - this._rowRenderer = this._rowRenderer.bind(this) - } - render() { - const { list } = this.context - const { hideDescription } = this.state + const { list } = this.context; + const { hideDescription } = this.state; return ( {({ width, height }) => ( { /> )} - ) + ); } - _rowRenderer({ index, key, style }) { - const { list } = this.context - const row = list.get(index) + _rowRenderer({ index, key, style }: any) { + const { list } = this.context; + const row = list.get(index); return ( -
+
{row.name}
- ) + ); } } -import { } from 'react' -import { CellMeasurer, CellMeasurerCache, ListRowProps } from 'react-virtualized' +import {} from "react"; +import { + CellMeasurer, + CellMeasurerCache, + ListRowProps +} from "react-virtualized"; export class DynamicHeightList extends PureComponent { + _cache: CellMeasurerCache; - _cache: CellMeasurerCache - - constructor(props, context) { - super(props, context) + constructor(props: any, context: any) { + super(props, context); this._cache = new CellMeasurerCache({ fixedWidth: true, minHeight: 50 - }) - - this._rowRenderer = this._rowRenderer.bind(this) + }); } render() { - const { width } = this.props + const { width } = this.props; return ( { rowRenderer={this._rowRenderer} width={width} /> - ) + ); } _rowRenderer({ index, isScrolling, key, parent, style }: ListRowProps) { - const { getClassName, list } = this.props + const { getClassName, list } = this.props; - const datum = list.get(index % list.size) - const classNames = getClassName({ columnIndex: 0, rowIndex: index }) + const datum = list.get(index % list.size); + const classNames = getClassName({ columnIndex: 0, rowIndex: index }); - const imageWidth = 300 - const imageHeight = datum.size * 2 + const imageWidth = 300; + const imageHeight = datum.size * 2; - const source = `http://fillmurray.com/${imageWidth}/${imageHeight}` + const source = `http://fillmurray.com/${imageWidth}/${imageHeight}`; return ( { parent={parent} > {({ measure }) => ( -
+
{
)} - ) + ); } } -import { Collection } from 'react-virtualized' +import { Collection } from "react-virtualized"; // Defines a pattern of sizes and positions for a range of 10 rotating cells // These cells cover an area of 600 (wide) x 400 (tall) -const GUTTER_SIZE = 3 -const CELL_WIDTH = 75 +const GUTTER_SIZE = 3; +const CELL_WIDTH = 75; export class CollectionExample extends PureComponent { _columnYMap: any; - constructor(props, context) { - super(props, context) + constructor(props: any, context: any) { + super(props, context); this.context = context; @@ -209,22 +213,20 @@ export class CollectionExample extends PureComponent { scrollToCell: undefined, showScrollingPlaceholder: false, verticalOverscanSize: 0 - } + }; - this._columnYMap = [] - - this._cellRenderer = this._cellRenderer.bind(this) - this._cellSizeAndPositionGetter = this._cellSizeAndPositionGetter.bind(this) - this._noContentRenderer = this._noContentRenderer.bind(this) - this._onCellCountChange = this._onCellCountChange.bind(this) - this._onHeightChange = this._onHeightChange.bind(this) - this._onHorizontalOverscanSizeChange = this._onHorizontalOverscanSizeChange.bind(this) - this._onScrollToCellChange = this._onScrollToCellChange.bind(this) - this._onVerticalOverscanSizeChange = this._onVerticalOverscanSizeChange.bind(this) + this._columnYMap = []; } render() { - const { cellCount, height, horizontalOverscanSize, scrollToCell, showScrollingPlaceholder, verticalOverscanSize } = this.state + const { + cellCount, + height, + horizontalOverscanSize, + scrollToCell, + showScrollingPlaceholder, + verticalOverscanSize + } = this.state; return ( @@ -232,8 +234,10 @@ export class CollectionExample extends PureComponent { { /> )} - ) + ); } - _cellRenderer({ index, isScrolling, key, style }) { - const { list } = this.context - const { showScrollingPlaceholder } = this.state + _cellRenderer({ + index, + isScrolling, + key, + style + }: CollectionCellRendererParams) { + const { list } = this.context; + const { showScrollingPlaceholder } = this.state; - const datum = list.get(index % list.size) - - // Customize style - style.backgroundColor = datum.color + const datum = list.get(index % list.size); return ( -
- {showScrollingPlaceholder && isScrolling ? '...' : index} +
+ {showScrollingPlaceholder && isScrolling ? "..." : index}
- ) + ); } - _cellSizeAndPositionGetter({ index }) { - const { list } = this.context - const { columnCount } = this.state + _cellSizeAndPositionGetter({ index }: Index) { + const { list } = this.context; + const { columnCount } = this.state; - const columnPosition = index % (columnCount || 1) - const datum = list.get(index % list.size) + const columnPosition = index % (columnCount || 1); + const datum = list.get(index % list.size); // Poor man's Masonry layout; columns won't all line up equally with the bottom. - const height = datum.size - const width = CELL_WIDTH - const x = columnPosition * (GUTTER_SIZE + width) - const y = this._columnYMap[columnPosition] || 0 + const height = datum.size; + const width = CELL_WIDTH; + const x = columnPosition * (GUTTER_SIZE + width); + const y = this._columnYMap[columnPosition] || 0; - this._columnYMap[columnPosition] = y + height + GUTTER_SIZE + this._columnYMap[columnPosition] = y + height + GUTTER_SIZE; return { height, width, x, y - } + }; } - _getColumnCount(cellCount) { - return Math.round(Math.sqrt(cellCount)) - } - - _onHorizontalOverscanSizeChange(event) { - const horizontalOverscanSize = parseInt(event.target.value, 10) || 0 - - this.setState({ horizontalOverscanSize }) + _getColumnCount(cellCount: number) { + return Math.round(Math.sqrt(cellCount)); } _noContentRenderer() { - return ( -
- No cells -
- ) - } - - _onCellCountChange(event) { - const cellCount = parseInt(event.target.value, 10) || 0 - - this._columnYMap = [] - - this.setState({ - cellCount, - columnCount: this._getColumnCount(cellCount) - }) - } - - _onHeightChange(event) { - const height = parseInt(event.target.value, 10) || 0 - - this.setState({ height }) - } - - _onScrollToCellChange(event) { - const { cellCount } = this.state - - let scrollToCell = Math.min(cellCount - 1, parseInt(event.target.value, 10)) - - if (isNaN(scrollToCell)) { - scrollToCell = undefined - } - - this.setState({ scrollToCell }) - } - - _onVerticalOverscanSizeChange(event) { - const verticalOverscanSize = parseInt(event.target.value, 10) || 0 - - this.setState({ verticalOverscanSize }) + return
No cells
; } } -import { ColumnSizer } from 'react-virtualized' +import { ColumnSizer } from "react-virtualized"; export class ColumnSizerExample extends PureComponent { - constructor(props) { - super(props) - - this._noColumnMaxWidthChange = this._noColumnMaxWidthChange.bind(this) - this._noColumnMinWidthChange = this._noColumnMinWidthChange.bind(this) - this._onColumnCountChange = this._onColumnCountChange.bind(this) - this._noContentRenderer = this._noContentRenderer.bind(this) - this._cellRenderer = this._cellRenderer.bind(this) - } - render() { - const { - columnMaxWidth, - columnMinWidth, - columnCount - } = this.state + const { columnMaxWidth, columnMinWidth, columnCount } = this.state; return (
@@ -371,12 +314,16 @@ export class ColumnSizerExample extends PureComponent { columnMaxWidth={columnMaxWidth} columnMinWidth={columnMinWidth} columnCount={columnCount} - key='GridColumnSizer' + key="GridColumnSizer" width={width} > - {({ adjustedWidth, getColumnWidth, registerChild }) => ( + {({ + adjustedWidth, + getColumnWidth, + registerChild + }) => (
{ columnWidth={getColumnWidth} columnCount={columnCount} height={50} - noContentRenderer={this._noContentRenderer} + noContentRenderer={ + this._noContentRenderer + } cellRenderer={this._cellRenderer} rowHeight={50} rowCount={1} @@ -399,82 +348,37 @@ export class ColumnSizerExample extends PureComponent { )}
- ) - } - - _noColumnMaxWidthChange(event) { - let columnMaxWidth = parseInt(event.target.value, 10) - - columnMaxWidth = isNaN(columnMaxWidth) ? undefined : Math.min(1000, columnMaxWidth) - - this.setState({ columnMaxWidth }) - } - - _noColumnMinWidthChange(event) { - let columnMinWidth = parseInt(event.target.value, 10) - - columnMinWidth = isNaN(columnMinWidth) ? undefined : Math.max(1, columnMinWidth) - - this.setState({ columnMinWidth }) - } - - _onColumnCountChange(event) { - this.setState({ columnCount: parseInt(event.target.value, 10) || 0 }) + ); } _noContentRenderer() { - return ( -
- No cells -
- ) + return
No cells
; } - _cellRenderer({ columnIndex, key, rowIndex, style }) { - const className = columnIndex === 0 - ? 'styles.firstCell' - : 'styles.cell' + _cellRenderer({ columnIndex, key, rowIndex, style }: GridCellProps) { + const className = + columnIndex === 0 ? "styles.firstCell" : "styles.cell"; return ( -
+
{`R:${rowIndex}, C:${columnIndex}`}
- ) + ); } } export class GridExample extends PureComponent { - constructor(props, context) { - super(props, context) - - this.state = { - columnCount: 1000, - height: 300, - overscanColumnCount: 0, - overscanRowCount: 10, - rowHeight: 40, - rowCount: 1000, - scrollToColumn: undefined, - scrollToRow: undefined, - useDynamicRowHeight: false - } - - this._cellRenderer = this._cellRenderer.bind(this) - this._getColumnWidth = this._getColumnWidth.bind(this) - this._getRowClassName = this._getRowClassName.bind(this) - this._getRowHeight = this._getRowHeight.bind(this) - this._noContentRenderer = this._noContentRenderer.bind(this) - this._onColumnCountChange = this._onColumnCountChange.bind(this) - this._onRowCountChange = this._onRowCountChange.bind(this) - this._onScrollToColumnChange = this._onScrollToColumnChange.bind(this) - this._onScrollToRowChange = this._onScrollToRowChange.bind(this) - this._renderBodyCell = this._renderBodyCell.bind(this) - this._renderLeftSideCell = this._renderLeftSideCell.bind(this) - } + state = { + columnCount: 1000, + height: 300, + overscanColumnCount: 0, + overscanRowCount: 10, + rowHeight: 40, + rowCount: 1000, + scrollToColumn: undefined, + scrollToRow: undefined, + useDynamicRowHeight: false + }; render() { const { @@ -487,22 +391,23 @@ export class GridExample extends PureComponent { scrollToColumn, scrollToRow, useDynamicRowHeight - } = this.state + } = this.state; return ( - {({ width }) => ( { /> )} - ) + ); } - _cellRenderer({ columnIndex, key, rowIndex, style }) { - if (columnIndex === 0) { - return this._renderLeftSideCell({ key, rowIndex, style }) + _cellRenderer(params: GridCellProps) { + if (params.columnIndex === 0) { + return this._renderLeftSideCell(params); } else { - return this._renderBodyCell({ columnIndex, key, rowIndex, style }) + return this._renderBodyCell(params); } } - _getColumnWidth({ index }) { + _getColumnWidth({ index }: Index) { switch (index) { case 0: - return 50 + return 50; case 1: - return 100 + return 100; case 2: - return 300 + return 300; default: - return 80 + return 80; } } - _getDatum(index) { - const { list } = this.context + _getDatum(index: number) { + const { list } = this.context; - return list.get(index % list.size) + return list.get(index % list.size); } - _getRowClassName(row) { - return row % 2 === 0 ? 'styles.evenRow' : 'styles.oddRow' + _getRowClassName(row: number) { + return row % 2 === 0 ? "styles.evenRow" : "styles.oddRow"; } - _getRowHeight({ index }) { - return this._getDatum(index).size + _getRowHeight({ index }: Index) { + return this._getDatum(index).size; } _noContentRenderer() { - return ( -
- No cells -
- ) + return
No cells
; } - _renderBodyCell({ columnIndex, key, rowIndex, style }) { - const rowClass = this._getRowClassName(rowIndex) - const datum = this._getDatum(rowIndex) + _renderBodyCell({ columnIndex, key, rowIndex, style }: GridCellProps) { + const rowClass = this._getRowClassName(rowIndex); + const datum = this._getDatum(rowIndex); - let content + let content; switch (columnIndex) { case 1: - content = datum.name - break + content = datum.name; + break; case 2: - content = datum.random - break + content = datum.random; + break; default: - content = `r:${rowIndex}, c:${columnIndex}` - break + content = `r:${rowIndex}, c:${columnIndex}`; + break; } return ( -
+
{content}
- ) + ); } - _renderLeftSideCell({ key, rowIndex, style }) { - const datum = this._getDatum(rowIndex) + _renderLeftSideCell({ key, rowIndex, style }: GridCellProps) { + const datum = this._getDatum(rowIndex); // Don't modify styles. // These are frozen by React now (as of 16.0.0). @@ -594,84 +491,31 @@ export class GridExample extends PureComponent { style = { ...style, backgroundColor: datum.color - } + }; return ( -
+
{datum.name.charAt(0)}
- ) - } - - _updateUseDynamicRowHeights(value) { - this.setState({ - useDynamicRowHeight: value - }) - } - - _onColumnCountChange(event) { - const columnCount = parseInt(event.target.value, 10) || 0 - - this.setState({ columnCount }) - } - - _onRowCountChange(event) { - const rowCount = parseInt(event.target.value, 10) || 0 - - this.setState({ rowCount }) - } - - _onScrollToColumnChange(event) { - const { columnCount } = this.state - let scrollToColumn = Math.min(columnCount - 1, parseInt(event.target.value, 10)) - - if (isNaN(scrollToColumn)) { - scrollToColumn = undefined - } - - this.setState({ scrollToColumn }) - } - - _onScrollToRowChange(event) { - const { rowCount } = this.state - let scrollToRow = Math.min(rowCount - 1, parseInt(event.target.value, 10)) - - if (isNaN(scrollToRow)) { - scrollToRow = undefined - } - - this.setState({ scrollToRow }) + ); } } -import { InfiniteLoader } from 'react-virtualized' +import { InfiniteLoader } from "react-virtualized"; -const STATUS_LOADING = 1 -const STATUS_LOADED = 2 +const STATUS_LOADING = 1; +const STATUS_LOADED = 2; export class InfiniteLoaderExample extends PureComponent { _timeoutIds = new Set(); - constructor(props) { - super(props) - - this._clearData = this._clearData.bind(this) - this._isRowLoaded = this._isRowLoaded.bind(this) - this._loadMoreRows = this._loadMoreRows.bind(this) - this._rowRenderer = this._rowRenderer.bind(this) - } - componentWillUnmount() { this._timeoutIds.forEach(clearTimeout); } render() { - const { list } = this.context - const { loadedRowCount, loadingRowCount } = this.state + const { list } = this.context; + const { loadedRowCount, loadingRowCount } = this.state; return ( { {({ width }) => ( { )} - ) + ); } - _clearData() { - this.setState({ - loadedRowCount: 0, - loadedRowsMap: {}, - loadingRowCount: 0 - }) + _isRowLoaded({ index }: Index) { + const { loadedRowsMap } = this.state; + return !!loadedRowsMap[index]; // STATUS_LOADING or STATUS_LOADED } - _isRowLoaded({ index }) { - const { loadedRowsMap } = this.state - return !!loadedRowsMap[index] // STATUS_LOADING or STATUS_LOADED - } - - _loadMoreRows({ startIndex, stopIndex }) { - const { loadedRowsMap, loadingRowCount } = this.state - const increment = stopIndex - startIndex + 1 + _loadMoreRows({ startIndex, stopIndex }: IndexRange) { + const { loadedRowsMap, loadingRowCount } = this.state; + const increment = stopIndex - startIndex + 1; for (let i = startIndex; i <= stopIndex; i++) { - loadedRowsMap[i] = STATUS_LOADING + loadedRowsMap[i] = STATUS_LOADING; } this.setState({ loadingRowCount: loadingRowCount + increment - }) + }); const timeoutId = setTimeout(() => { - const { loadedRowCount, loadingRowCount } = this.state + const { loadedRowCount, loadingRowCount } = this.state; this._timeoutIds.delete(timeoutId); for (let i = startIndex; i <= stopIndex; i++) { - loadedRowsMap[i] = STATUS_LOADED + loadedRowsMap[i] = STATUS_LOADED; } this.setState({ loadingRowCount: loadingRowCount - increment, loadedRowCount: loadedRowCount + increment - }) + }); - promiseResolver() - }, 1000 + Math.round(Math.random() * 2000)) + promiseResolver(); + }, 1000 + Math.round(Math.random() * 2000)); this._timeoutIds.add(timeoutId); - let promiseResolver + let promiseResolver: () => void; return new Promise(resolve => { - promiseResolver = resolve - }) + promiseResolver = resolve; + }); } - _rowRenderer({ index, key, style }) { - const { list } = this.context - const { loadedRowsMap } = this.state + _rowRenderer({ index, key, style }: ListRowProps) { + const { list } = this.context; + const { loadedRowsMap } = this.state; - const row = list.get(index) - let content + const row = list.get(index); + let content; if (loadedRowsMap[index] === STATUS_LOADED) { - content = row.name + content = row.name; } else { content = (
- ) + ); } return ( -
+
{content}
- ) + ); } } export class ListExample extends PureComponent { - - constructor(props, context) { - super(props, context) + constructor(props: any, context: any) { + super(props, context); this.state = { listHeight: 300, @@ -793,13 +624,7 @@ export class ListExample extends PureComponent { scrollToIndex: undefined, showScrollingPlaceholder: false, useDynamicRowHeight: false - } - - this._getRowHeight = this._getRowHeight.bind(this) - this._noRowsRenderer = this._noRowsRenderer.bind(this) - this._onRowCountChange = this._onRowCountChange.bind(this) - this._onScrollToRowChange = this._onScrollToRowChange.bind(this) - this._rowRenderer = this._rowRenderer.bind(this) + }; } render() { @@ -811,107 +636,84 @@ export class ListExample extends PureComponent { scrollToIndex, showScrollingPlaceholder, useDynamicRowHeight - } = this.state + } = this.state; return ( {({ width }) => ( )} - ) + ); } - _getDatum(index) { - const { list } = this.context + _getDatum(index: number) { + const { list } = this.context; - return list.get(index % list.size) + return list.get(index % list.size); } - _getRowHeight({ index }) { - return this._getDatum(index).size + _getRowHeight({ index }: Index) { + return this._getDatum(index).size; } _noRowsRenderer() { - return ( -
- No rows -
- ) + return
No rows
; } - _onRowCountChange(event) { - const rowCount = parseInt(event.target.value, 10) || 0 + _rowRenderer({ index, isScrolling, key, style }: ListRowProps) { + const { showScrollingPlaceholder, useDynamicRowHeight } = this.state; - this.setState({ rowCount }) - } - - _onScrollToRowChange(event) { - const { rowCount } = this.state - let scrollToIndex = Math.min(rowCount - 1, parseInt(event.target.value, 10)) - - if (isNaN(scrollToIndex)) { - scrollToIndex = undefined - } - - this.setState({ scrollToIndex }) - } - - _rowRenderer({ index, isScrolling, key, style }) { - const { - showScrollingPlaceholder, - useDynamicRowHeight - } = this.state - - if ( - showScrollingPlaceholder && - isScrolling - ) { + if (showScrollingPlaceholder && isScrolling) { return (
Scrolling... -
- ) +
+ ); } - const datum = this._getDatum(index) + const datum = this._getDatum(index); - let additionalContent + let additionalContent; if (useDynamicRowHeight) { switch (datum.size) { case 75: - additionalContent =
It is medium-sized.
- break + additionalContent =
It is medium-sized.
; + break; case 100: - additionalContent =
It is large-sized.
It has a 3rd row.
- break + additionalContent = ( +
+ It is large-sized.
It has a 3rd row. +
+ ); + break; } } return ( -
+
{ {datum.name.charAt(0)}
-
- {datum.name} -
-
- This is row {index} -
+
{datum.name}
+
This is row {index}
{additionalContent}
- {useDynamicRowHeight && - - {datum.size}px - - } + {useDynamicRowHeight && ( + {datum.size}px + )}
- ) + ); } } @@ -943,43 +739,43 @@ import { Positioner, Masonry, MasonryCellProps -} from 'react-virtualized' +} from "react-virtualized"; export class GridExample2 extends PureComponent { _columnCount: number; _cache: CellMeasurerCache; _columnHeights: any; - _width: number; - _height: number; - _scrollTop: number; - _cellPositioner?: Positioner; + _width = 0; + _height = 0; + _scrollTop?: number; + _cellPositioner: Positioner; _masonry: Masonry; - constructor(props, context) { - super(props, context) + constructor(props: any, context: any) { + super(props, context); - this._columnCount = 0 + this._columnCount = 0; this._cache = new CellMeasurerCache({ defaultHeight: 250, defaultWidth: 200, fixedWidth: true - }) + }); - this._columnHeights = {} + this._columnHeights = {}; this.state = { columnWidth: 200, height: 300, gutterSize: 10, windowScrollerEnabled: false - } + }; - this._cellRenderer = this._cellRenderer.bind(this) - this._onResize = this._onResize.bind(this) - this._renderAutoSizer = this._renderAutoSizer.bind(this) - this._renderMasonry = this._renderMasonry.bind(this) - this._setMasonryRef = this._setMasonryRef.bind(this) + this._cellRenderer = this._cellRenderer.bind(this); + this._onResize = this._onResize.bind(this); + this._renderAutoSizer = this._renderAutoSizer.bind(this); + this._renderMasonry = this._renderMasonry.bind(this); + this._setMasonryRef = this._setMasonryRef.bind(this); } render() { @@ -988,41 +784,30 @@ export class GridExample2 extends PureComponent { height, gutterSize, windowScrollerEnabled - } = this.state + } = this.state; - let child + const child = windowScrollerEnabled ? ( + {this._renderAutoSizer} + ) : ( + this._renderAutoSizer({ height }) + ); - if (windowScrollerEnabled) { - child = ( - - {this._renderAutoSizer} - - ) - } else { - child = this._renderAutoSizer({ height }) - } - - return ( -
- {child} -
- ) + return
{child}
; } _calculateColumnCount() { - const { - columnWidth, - gutterSize - } = this.state + const { columnWidth, gutterSize } = this.state; - this._columnCount = Math.floor(this._width / (columnWidth + gutterSize)) + this._columnCount = Math.floor( + this._width / (columnWidth + gutterSize) + ); } _cellRenderer({ index, key, parent, style }: MasonryCellProps) { - const { list } = this.context - const { columnWidth } = this.state + const { list } = this.context; + const { columnWidth } = this.state; - const datum = list.get(index % list.size) + const datum = list.get(index % list.size); return ( { parent={parent} >
{
{datum.random}
- ) + ); } _initCellPositioner() { - if (typeof this._cellPositioner === 'undefined') { - const { - columnWidth, - gutterSize - } = this.state + if (typeof this._cellPositioner === "undefined") { + const { columnWidth, gutterSize } = this.state; this._cellPositioner = createCellPositioner({ cellMeasurerCache: this._cache, columnCount: this._columnCount, columnWidth, spacer: gutterSize - }) + }); } } - _onResize({ height, width }) { - this._width = width + _onResize({ height, width }: Size) { + this._width = width; - this._columnHeights = {} - this._calculateColumnCount() - this._resetCellPositioner() - this._masonry.recomputeCellPositions() + this._columnHeights = {}; + this._calculateColumnCount(); + this._resetCellPositioner(); + this._masonry.recomputeCellPositions(); } - _renderAutoSizer({ height, scrollTop }: { height: number, scrollTop?: number }) { - this._height = height - this._scrollTop = scrollTop + _renderAutoSizer({ + height, + scrollTop + }: { + height: number; + scrollTop?: number; + }) { + this._height = height; + this._scrollTop = scrollTop; return ( - + {this._renderMasonry} - ) + ); } - _renderMasonry({ width }) { - this._width = width + _renderMasonry({ width }: Size) { + this._width = width; - this._calculateColumnCount() - this._initCellPositioner() + this._calculateColumnCount(); + this._initCellPositioner(); - const { height, windowScrollerEnabled } = this.state + const { height, windowScrollerEnabled } = this.state; return ( { scrollTop={this._scrollTop} width={width} /> - ) + ); } _resetCellPositioner() { - const { - columnWidth, - gutterSize - } = this.state + const { columnWidth, gutterSize } = this.state; this._cellPositioner.reset({ columnCount: this._columnCount, columnWidth, spacer: gutterSize - }) + }); } - _setMasonryRef(ref) { - this._masonry = ref + _setMasonryRef(ref: any) { + this._masonry = ref; } } -import { MultiGrid } from 'react-virtualized' +import { MultiGrid } from "react-virtualized"; const STYLE: React.CSSProperties = { - border: '1px solid #ddd', - overflow: 'hidden' -} + border: "1px solid #ddd", + overflow: "hidden" +}; const STYLE_BOTTOM_LEFT_GRID: React.CSSProperties = { - borderRight: '2px solid #aaa', - backgroundColor: '#f7f7f7' -} + borderRight: "2px solid #aaa", + backgroundColor: "#f7f7f7" +}; const STYLE_TOP_LEFT_GRID: React.CSSProperties = { - borderBottom: '2px solid #aaa', - borderRight: '2px solid #aaa', - fontWeight: 'bold' -} + borderBottom: "2px solid #aaa", + borderRight: "2px solid #aaa", + fontWeight: "bold" +}; const STYLE_TOP_RIGHT_GRID: React.CSSProperties = { - borderBottom: '2px solid #aaa', - fontWeight: 'bold' -} + borderBottom: "2px solid #aaa", + fontWeight: "bold" +}; export class MultiGridExample extends PureComponent<{}, any> { - state - _onFixedColumnCountChange - _onFixedRowCountChange - _onScrollToColumnChange - _onScrollToRowChange - - constructor(props, context) { - super(props, context) - - this.state = { - fixedColumnCount: 2, - fixedRowCount: 1, - scrollToColumn: 0, - scrollToRow: 0 - } - - this._cellRenderer = this._cellRenderer.bind(this) - this._onFixedColumnCountChange = this._createEventHandler('fixedColumnCount') - this._onFixedRowCountChange = this._createEventHandler('fixedRowCount') - this._onScrollToColumnChange = this._createEventHandler('scrollToColumn') - this._onScrollToRowChange = this._createEventHandler('scrollToRow') - } + state = { + fixedColumnCount: 2, + fixedRowCount: 1, + scrollToColumn: 0, + scrollToRow: 0 + }; render() { return ( @@ -1197,72 +963,38 @@ export class MultiGridExample extends PureComponent<{}, any> { /> )} - ) + ); } - _cellRenderer({ columnIndex, key, rowIndex, style }) { + _cellRenderer({ columnIndex, key, rowIndex, style }: GridCellProps) { return ( -
+
{columnIndex}, {rowIndex}
- ) - } - - _createEventHandler(property) { - return (event) => { - const value = parseInt(event.target.value, 10) || 0 - - this.setState({ - [property]: value - }) - } - } - - _createLabeledInput(property, eventHandler) { - const value = this.state[property] - - return ( - `` - ) + ); } } -import { ScrollSync } from 'react-virtualized' +import { ScrollSync } from "react-virtualized"; -const LEFT_COLOR_FROM = hexToRgb('#471061') -const LEFT_COLOR_TO = hexToRgb('#BC3959') -const TOP_COLOR_FROM = hexToRgb('#000000') -const TOP_COLOR_TO = hexToRgb('#333333') +const LEFT_COLOR_FROM = hexToRgb("#471061"); +const LEFT_COLOR_TO = hexToRgb("#BC3959"); +const TOP_COLOR_FROM = hexToRgb("#000000"); +const TOP_COLOR_TO = hexToRgb("#333333"); -function scrollbarSize() { return 42; } +function scrollbarSize() { + return 42; +} export class GridExample3 extends PureComponent<{}, any> { - state - constructor(props, context) { - super(props, context) - - this.state = { - columnWidth: 75, - columnCount: 50, - height: 300, - overscanColumnCount: 0, - overscanRowCount: 5, - rowHeight: 40, - rowCount: 100 - } - - this._renderBodyCell = this._renderBodyCell.bind(this) - this._renderHeaderCell = this._renderHeaderCell.bind(this) - this._renderLeftSideCell = this._renderLeftSideCell.bind(this) - } + state = { + columnWidth: 75, + columnCount: 50, + height: 300, + overscanColumnCount: 0, + overscanRowCount: 5, + rowHeight: 40, + rowCount: 100 + }; render() { const { @@ -1273,37 +1005,60 @@ export class GridExample3 extends PureComponent<{}, any> { overscanRowCount, rowHeight, rowCount - } = this.state + } = this.state; return ( - - {({ clientHeight, clientWidth, onScroll, scrollHeight, scrollLeft, scrollTop, scrollWidth }) => { - const x = scrollLeft / (scrollWidth - clientWidth) - const y = scrollTop / (scrollHeight - clientHeight) + {({ + clientHeight, + clientWidth, + onScroll, + scrollHeight, + scrollLeft, + scrollTop, + scrollWidth + }) => { + const x = scrollLeft / (scrollWidth - clientWidth); + const y = scrollTop / (scrollHeight - clientHeight); - const leftBackgroundColor = mixColors(LEFT_COLOR_FROM, LEFT_COLOR_TO, y) - const leftColor = '#ffffff' - const topBackgroundColor = mixColors(TOP_COLOR_FROM, TOP_COLOR_TO, x) - const topColor = '#ffffff' - const middleBackgroundColor = mixColors(leftBackgroundColor, topBackgroundColor, 0.5) - const middleColor = '#ffffff' + const leftBackgroundColor = mixColors( + LEFT_COLOR_FROM, + LEFT_COLOR_TO, + y + ); + const leftColor = "#ffffff"; + const topBackgroundColor = mixColors( + TOP_COLOR_FROM, + TOP_COLOR_TO, + x + ); + const topColor = "#ffffff"; + const middleBackgroundColor = mixColors( + leftBackgroundColor, + topBackgroundColor, + 0.5 + ); + const middleColor = "#ffffff"; return ( -
+
{ />
{ cellRenderer={this._renderLeftSideCell} columnWidth={columnWidth} columnCount={1} - className={'styles.LeftSideGrid'} + className={"styles.LeftSideGrid"} height={height - scrollbarSize()} rowHeight={rowHeight} rowCount={rowCount} @@ -1336,46 +1095,75 @@ export class GridExample3 extends PureComponent<{}, any> { width={columnWidth} />
-
+
{({ width }) => (
-
+
{
- ) + ); }} - ) + ); } - _renderBodyCell({ columnIndex, key, rowIndex, style }) { - if (columnIndex < 1) { - return + _renderBodyCell(params: GridCellProps) { + if (params.columnIndex < 1) { + return; } - return this._renderLeftSideCell({ columnIndex, key, rowIndex, style }) + return this._renderLeftSideCell(params); } - _renderHeaderCell({ columnIndex, key, rowIndex, style }) { - if (columnIndex < 1) { - return + _renderHeaderCell(params: GridCellProps) { + if (params.columnIndex < 1) { + return; } - return this._renderLeftHeaderCell({ columnIndex, key, rowIndex, style }) + return this._renderLeftHeaderCell(params); } - _renderLeftHeaderCell({ columnIndex, key, rowIndex, style }) { + _renderLeftHeaderCell({ + columnIndex, + key, + rowIndex, + style + }: GridCellProps) { return ( -
+
{`C${columnIndex}`}
- ) + ); } - _renderLeftSideCell({ columnIndex, key, rowIndex, style }) { + _renderLeftSideCell({ columnIndex, key, rowIndex, style }: GridCellProps) { return ( -
+
{`R${rowIndex}, C${columnIndex}`}
- ) + ); } } -function hexToRgb(hex) { - const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex) - return result ? { - r: parseInt(result[1], 16), - g: parseInt(result[2], 16), - b: parseInt(result[3], 16) - } : null +function hexToRgb(hex: string) { + const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + return result + ? { + r: parseInt(result[1], 16), + g: parseInt(result[2], 16), + b: parseInt(result[3], 16) + } + : null; } /** * Ported from sass implementation in C * https://github.com/sass/libsass/blob/0e6b4a2850092356aa3ece07c6b249f0221caced/functions.cpp#L209 */ -function mixColors(color1, color2, amount) { - const weight1 = amount - const weight2 = 1 - amount +function mixColors(color1: any, color2: any, amount: any) { + const weight1 = amount; + const weight2 = 1 - amount; - const r = Math.round(weight1 * color1.r + weight2 * color2.r) - const g = Math.round(weight1 * color1.g + weight2 * color2.g) - const b = Math.round(weight1 * color1.b + weight2 * color2.b) + const r = Math.round(weight1 * color1.r + weight2 * color2.r); + const g = Math.round(weight1 * color1.g + weight2 * color2.g); + const b = Math.round(weight1 * color1.b + weight2 * color2.b); - return { r, g, b } + return { r, g, b }; } -import { Column, Table, SortDirection, SortIndicator } from 'react-virtualized' +import { Column, Table, SortDirection, SortIndicator } from "react-virtualized"; export class TableExample extends PureComponent<{}, any> { - state; - context; - constructor(props, context) { - super(props, context) - - this.state = { - disableHeader: false, - headerHeight: 30, - height: 270, - hideIndexRow: false, - overscanRowCount: 10, - rowHeight: 40, - rowCount: 1000, - scrollToIndex: undefined, - sortBy: 'index', - sortDirection: SortDirection.ASC, - useDynamicRowHeight: false - } - - this._getRowHeight = this._getRowHeight.bind(this) - this._headerRenderer = this._headerRenderer.bind(this) - this._noRowsRenderer = this._noRowsRenderer.bind(this) - this._onRowCountChange = this._onRowCountChange.bind(this) - this._onScrollToRowChange = this._onScrollToRowChange.bind(this) - this._rowClassName = this._rowClassName.bind(this) - this._sort = this._sort.bind(this) - } + state = { + disableHeader: false, + headerHeight: 30, + height: 270, + hideIndexRow: false, + overscanRowCount: 10, + rowHeight: 40, + rowCount: 1000, + scrollToIndex: undefined, + sortBy: "index", + sortDirection: SortDirection.ASC, + useDynamicRowHeight: false + }; render() { const { @@ -1501,35 +1274,32 @@ export class TableExample extends PureComponent<{}, any> { sortBy, sortDirection, useDynamicRowHeight - } = this.state + } = this.state; - const { list } = this.context - const sortedList = this._isSortEnabled() - ? list - .sortBy(item => item[sortBy]) - .update(list => - sortDirection === SortDirection.DESC - ? list.reverse() - : list - ) - : list + const { list } = this.context; + const sortedList = list; - const rowGetter = ({ index }) => this._getDatum(sortedList, index) + const rowGetter = ({ index }: Index) => + this._getDatum(sortedList, index); return (
{({ width }) => ( { sortDirection={sortDirection} width={width} > - {!hideIndexRow && + {!hideIndexRow && ( rowData.index - } - dataKey='index' + label="Index" + cellDataGetter={({ + columnData, + dataKey, + rowData + }) => rowData.index} + dataKey="index" disableSort={!this._isSortEnabled()} defaultSortDirection={SortDirection.DESC} width={60} /> - } + )} { cellData - } + label="The description label is really long so that it will be truncated" + dataKey="random" + className={"styles.exampleColumn"} + cellRenderer={({ + cellData, + columnData, + dataKey, + rowData, + rowIndex + }) => cellData} flexGrow={1} />
)}
- ) + ); } - _getDatum(list, index) { - return list.get(index % list.size) + _getDatum(list: any, index: number) { + return list.get(index % list.size); } - _getRowHeight({ index }) { - const { list } = this.context + _getRowHeight({ index }: Index) { + const { list } = this.context; - return this._getDatum(list, index).size + return this._getDatum(list, index).size; } _headerRenderer({ @@ -1592,94 +1368,57 @@ export class TableExample extends PureComponent<{}, any> { label, sortBy, sortDirection - }) { + }: TableHeaderProps) { return (
Full Name - {sortBy === dataKey && + {sortBy === dataKey && ( - } + )}
- ) + ); } _isSortEnabled() { - const { list } = this.context - const { rowCount } = this.state + const { list } = this.context; + const { rowCount } = this.state; - return rowCount <= list.size + return rowCount <= list.size; } _noRowsRenderer() { - return ( -
- No rows -
- ) + return
No rows
; } - _onRowCountChange(event) { - const rowCount = parseInt(event.target.value, 10) || 0 - - this.setState({ rowCount }) - } - - _onScrollToRowChange(event) { - const { rowCount } = this.state - let scrollToIndex = Math.min(rowCount - 1, parseInt(event.target.value, 10)) - - if (isNaN(scrollToIndex)) { - scrollToIndex = undefined - } - - this.setState({ scrollToIndex }) - } - - _rowClassName({ index }) { + _rowClassName({ index }: Index) { if (index < 0) { - return 'styles.headerRow' + return "styles.headerRow"; } else { - return index % 2 === 0 ? 'styles.evenRow' : 'styles.oddRow' + return index % 2 === 0 ? "styles.evenRow" : "styles.oddRow"; } } - _sort({ sortBy, sortDirection }) { - this.setState({ sortBy, sortDirection }) - } - - _updateUseDynamicRowHeight(value) { - this.setState({ - useDynamicRowHeight: value - }) + _sort({ + sortBy, + sortDirection + }: { + sortBy: string; + sortDirection: SortDirectionType; + }) { + this.setState({ sortBy, sortDirection }); } } -import { TableCellProps } from "react-virtualized" +import { TableCellProps } from "react-virtualized"; export class DynamicHeightTableColumnExample extends PureComponent { - state; - context; - _cache: CellMeasurerCache; - constructor(props, context) { - super(props, context) - - this._cache = new CellMeasurerCache({ - fixedWidth: true, - minHeight: 25 - }) - - this._columnCellRenderer = this._columnCellRenderer.bind(this) - this._rowGetter = this._rowGetter.bind(this) - } - - componentWillReceiveProps(nextProps) { - if (nextProps.width !== this.props.width) { - this._cache.clearAll() - } - } + _cache = new CellMeasurerCache({ + fixedWidth: true, + minHeight: 25 + }); render() { - const { width } = this.props + const { width } = this.props; return ( { headerHeight={20} height={400} overscanRowCount={2} - rowClassName={'styles.tableRow'} + rowClassName={"styles.tableRow"} rowHeight={this._cache.rowHeight} rowGetter={this._rowGetter} rowCount={1000} width={width} >
- ) + ); } _columnCellRenderer(args: TableCellProps) { - const { list } = this.props + const { list } = this.props; - const datum = list.get(args.rowIndex % list.size) - const content = args.rowIndex % 5 === 0 - ? '' - : datum.randomLong + const datum = list.get(args.rowIndex % list.size); + const content = args.rowIndex % 5 === 0 ? "" : datum.randomLong; return ( { rowIndex={args.rowIndex} >
{content}
- ) + ); } - _rowGetter({ index }) { - const { list } = this.props + _rowGetter({ index }: Index) { + const { list } = this.props; - return list.get(index % list.size) + return list.get(index % list.size); } } export class WindowScrollerExample extends PureComponent<{}, any> { - state; - context; _windowScroller: WindowScroller; - - constructor(props) { - super(props) - - this.state = { - showHeaderText: true - } - - this._hideHeader = this._hideHeader.bind(this) - this._rowRenderer = this._rowRenderer.bind(this) - this._onCheckboxChange = this._onCheckboxChange.bind(this) - this._setRef = this._setRef.bind(this) - } + state = { + showHeaderText: true + }; render() { - const { list, isScrollingCustomElement, customElement } = this.context - const { showHeaderText } = this.state + const { list, isScrollingCustomElement, customElement } = this.context; + const { showHeaderText } = this.state; return ( - -
+
- {({ height, isScrolling, scrollTop }) => ( + {({ height, isScrolling, scrollTop, onChildScroll }) => ( {({ width }) => ( this._rowRenderer({ index, isScrolling, isVisible, key, style })} + rowRenderer={params => + this._rowRenderer({ + ...params, + isScrolling + }) + } scrollTop={scrollTop} width={width} /> @@ -1799,60 +1531,40 @@ export class WindowScrollerExample extends PureComponent<{}, any> { )}
- ) + ); } - _hideHeader() { - const { showHeaderText } = this.state - - this.setState({ - showHeaderText: !showHeaderText - }, () => { - this._windowScroller.updatePosition() - }) - } - - _rowRenderer({ index, isScrolling, isVisible, key, style }) { - const { list } = this.context - const row = list.get(index) + _rowRenderer({ index, isScrolling, isVisible, key, style }: ListRowProps) { + const { list } = this.context; + const row = list.get(index); return ( -
+
{row.name}
- ) + ); } - _setRef(windowScroller) { - this._windowScroller = windowScroller - } - - _onCheckboxChange(event) { - this.context.setScrollingCustomElement(event.target.checked) + _setRef(windowScroller: any) { + this._windowScroller = windowScroller; } } -import { GridCellProps, GridCellRangeProps } from 'react-virtualized' +import { + GridCellProps, + GridCellRangeProps, + SortParams, + SortDirectionType +} from "react-virtualized"; export class GridCellRangeRendererExample extends PureComponent<{}, any> { - - constructor(props) { - super(props) - - this.state = { - columnWidth: 75, - columnCount: 50, - height: 300, - rowHeight: 40, - rowCount: 100 - } - - this._cellRangeRenderer = this._cellRangeRenderer.bind(this) - } + state = { + columnWidth: 75, + columnCount: 50, + height: 300, + rowHeight: 40, + rowCount: 100 + }; render() { const { @@ -1861,7 +1573,7 @@ export class GridCellRangeRendererExample extends PureComponent<{}, any> { height, rowHeight, rowCount - } = this.state + } = this.state; return ( { rowHeight={rowHeight} width={columnWidth} /> - ) + ); } _cellRangeRenderer({ - cellCache, // Temporary cell cache used while scrolling - cellRenderer, // Cell renderer prop supplied to Grid + cellCache, // Temporary cell cache used while scrolling + cellRenderer, // Cell renderer prop supplied to Grid columnSizeAndPositionManager, // @see CellSizeAndPositionManager, - columnStartIndex, // Index of first column (inclusive) to render - columnStopIndex, // Index of last column (inclusive) to render - horizontalOffsetAdjustment, // Horizontal pixel offset (required for scaling) - isScrolling, // The Grid is currently being scrolled - rowSizeAndPositionManager, // @see CellSizeAndPositionManager, - rowStartIndex, // Index of first column (inclusive) to render - rowStopIndex, // Index of last column (inclusive) to render - scrollLeft, // Current horizontal scroll offset of Grid - scrollTop, // Current vertical scroll offset of Grid - styleCache, // Temporary style (size & position) cache used while scrolling - verticalOffsetAdjustment, // Vertical pixel offset (required for scaling) + columnStartIndex, // Index of first column (inclusive) to render + columnStopIndex, // Index of last column (inclusive) to render + horizontalOffsetAdjustment, // Horizontal pixel offset (required for scaling) + isScrolling, // The Grid is currently being scrolled + rowSizeAndPositionManager, // @see CellSizeAndPositionManager, + rowStartIndex, // Index of first column (inclusive) to render + rowStopIndex, // Index of last column (inclusive) to render + scrollLeft, // Current horizontal scroll offset of Grid + scrollTop, // Current vertical scroll offset of Grid + styleCache, // Temporary style (size & position) cache used while scrolling + verticalOffsetAdjustment, // Vertical pixel offset (required for scaling) parent, visibleColumnIndices, - visibleRowIndices, - }: GridCellRangeProps): React.ReactNode[] { - const renderedCells: React.ReactNode[] = [] - const style: React.CSSProperties = {} + visibleRowIndices + }: GridCellRangeProps): React.ReactNode[] { + const renderedCells: React.ReactNode[] = []; + const style: React.CSSProperties = {}; - for (let rowIndex = rowStartIndex; rowIndex <= rowStopIndex; rowIndex++) { + for ( + let rowIndex = rowStartIndex; + rowIndex <= rowStopIndex; + rowIndex++ + ) { // This contains :offset (top) and :size (height) information for the cell - const rowDatum = rowSizeAndPositionManager.getSizeAndPositionOfCell(rowIndex) + const rowDatum = rowSizeAndPositionManager.getSizeAndPositionOfCell( + rowIndex + ); - for (let columnIndex = columnStartIndex; columnIndex <= columnStopIndex; columnIndex++) { + for ( + let columnIndex = columnStartIndex; + columnIndex <= columnStopIndex; + columnIndex++ + ) { // This contains :offset (left) and :size (width) information for the cell - const columnDatum = columnSizeAndPositionManager.getSizeAndPositionOfCell(columnIndex) + const columnDatum = columnSizeAndPositionManager.getSizeAndPositionOfCell( + columnIndex + ); // Be sure to adjust cell position in case the total set of cells is too large to be supported by the browser natively. // In this case, Grid will shift cells as a user scrolls to increase cell density. - const left = columnDatum.offset + horizontalOffsetAdjustment - const top = rowDatum.offset + verticalOffsetAdjustment + const left = columnDatum.offset + horizontalOffsetAdjustment; + const top = rowDatum.offset + verticalOffsetAdjustment; // The rest of the information you need to render the cell are contained in the data. // Be sure to provide unique :key attributes. - const key = `${rowIndex}-${columnIndex}` - const height = rowDatum.size - const width = columnDatum.size + const key = `${rowIndex}-${columnIndex}`; + const height = rowDatum.size; + const width = columnDatum.size; const isVisible = columnIndex >= visibleColumnIndices.start && columnIndex <= visibleColumnIndices.stop && rowIndex >= visibleRowIndices.start && - rowIndex <= visibleRowIndices.stop + rowIndex <= visibleRowIndices.stop; // Now render your cell and additional UI as you see fit. // Add all rendered children to the :renderedCells Array. @@ -1936,13 +1660,13 @@ export class GridCellRangeRendererExample extends PureComponent<{}, any> { key, parent, rowIndex, - style, - } + style + }; - renderedCells.push(cellRenderer(gridCellProps)) + renderedCells.push(cellRenderer(gridCellProps)); } } - return renderedCells - } + return renderedCells; + } } diff --git a/types/react-virtualized/tsconfig.json b/types/react-virtualized/tsconfig.json index 9a6a1ce9de..b3f5a6510f 100644 --- a/types/react-virtualized/tsconfig.json +++ b/types/react-virtualized/tsconfig.json @@ -2,13 +2,13 @@ "compilerOptions": { "module": "commonjs", "lib": ["es6", "dom"], - "noImplicitAny": false, - "noImplicitThis": true, - "strictNullChecks": false, - "strictFunctionTypes": false, "jsx": "react", "baseUrl": "../", "typeRoots": ["../"], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "strictFunctionTypes": true, "types": [], "noEmit": true, "forceConsistentCasingInFileNames": true,