diff --git a/types/react-virtualized/dist/es/ArrowKeyStepper.d.ts b/types/react-virtualized/dist/es/ArrowKeyStepper.d.ts index 2c4f36d7d2..dc41eb256c 100644 --- a/types/react-virtualized/dist/es/ArrowKeyStepper.d.ts +++ b/types/react-virtualized/dist/es/ArrowKeyStepper.d.ts @@ -1,6 +1,6 @@ -import { PureComponent, Validator, Requireable } from "react"; -import * as PropTypes from "prop-types"; -import { RenderedSection } from "./Grid"; +import { PureComponent, Validator, Requireable } from 'react'; +import * as PropTypes from 'prop-types'; +import { RenderedSection } from './Grid'; export type OnSectionRenderedParams = RenderedSection; @@ -17,7 +17,7 @@ export type ArrowKeyStepperProps = { className?: string; columnCount: number; rowCount: number; - mode?: "edges" | "cells"; + mode?: 'edges' | 'cells'; disabled?: boolean; isControlled?: boolean; onScrollToChange?: (params: ScrollIndices) => void; @@ -39,14 +39,11 @@ export type ScrollIndices = { export type ScrollIndexes = ScrollIndices; -export class ArrowKeyStepper extends PureComponent< - ArrowKeyStepperProps, - ScrollIndices -> { +export class ArrowKeyStepper extends PureComponent { static defaultProps: { disabled: false; isControlled: false; - mode: "edges"; + mode: 'edges'; scrollToColumn: 0; scrollToRow: 0; }; diff --git a/types/react-virtualized/dist/es/AutoSizer.d.ts b/types/react-virtualized/dist/es/AutoSizer.d.ts index d3981f3a16..8fc2dcedbf 100644 --- a/types/react-virtualized/dist/es/AutoSizer.d.ts +++ b/types/react-virtualized/dist/es/AutoSizer.d.ts @@ -1,5 +1,5 @@ -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 Size = { height: number; diff --git a/types/react-virtualized/dist/es/CellMeasurer.d.ts b/types/react-virtualized/dist/es/CellMeasurer.d.ts index 51f0b4b07d..e556a5e222 100644 --- a/types/react-virtualized/dist/es/CellMeasurer.d.ts +++ b/types/react-virtualized/dist/es/CellMeasurer.d.ts @@ -1,15 +1,10 @@ -import { PureComponent } from "react"; +import { PureComponent } from 'react'; export type CellMeasurerCacheInterface = { hasFixedWidth(): boolean; hasFixedHeight(): boolean; has(rowIndex: number, columnIndex: number): boolean; - set( - rowIndex: number, - columnIndex: number, - width: number, - height: number - ): void; + set(rowIndex: number, columnIndex: number, width: number, height: number): void; getHeight(rowIndex: number, columnIndex?: number): number; getWidth(rowIndex: number, columnIndex?: number): number; }; @@ -38,12 +33,7 @@ export class CellMeasurerCache implements CellMeasurerCacheInterface { getWidth(rowIndex: number, columnIndex: number): number; has(rowIndex: number, columnIndex: number): boolean; rowHeight: (params: { index: number }) => number; - set( - rowIndex: number, - columnIndex: number, - width: number, - height: number - ): void; + set(rowIndex: number, columnIndex: number, width: number, height: number): void; } export type CellPosition = { @@ -58,9 +48,7 @@ export type MeasuredCellParent = { export type CellMeasurerProps = { cache: CellMeasurerCacheInterface; - children: - | ((props: { measure: () => void }) => React.ReactNode) - | React.ReactNode; + children: ((props: { measure: () => void }) => React.ReactNode) | React.ReactNode; columnIndex?: number; index?: number; parent: MeasuredCellParent; diff --git a/types/react-virtualized/dist/es/Collection.d.ts b/types/react-virtualized/dist/es/Collection.d.ts index 4f353d20fc..04c5661b09 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, @@ -6,8 +6,8 @@ import { ScrollPosition, SectionRenderedParams, SizeInfo, - SizeAndPositionInfo -} from "../../index"; + SizeAndPositionInfo, +} from '../../index'; export type CollectionCellSizeAndPosition = { height: number; @@ -15,29 +15,23 @@ export type CollectionCellSizeAndPosition = { x: number; y: number; }; -export type CollectionCellSizeAndPositionGetter = ( - params: Index -) => CollectionCellSizeAndPosition; +export type CollectionCellSizeAndPositionGetter = (params: Index) => CollectionCellSizeAndPosition; export type CollectionCellGroupRendererParams = { cellSizeAndPositionGetter: CollectionCellSizeAndPositionGetter; indices: number[]; cellRenderer: CollectionCellRenderer; }; -export type CollectionCellGroupRenderer = ( - params: CollectionCellGroupRendererParams -) => React.ReactNode[]; +export type CollectionCellGroupRenderer = (params: CollectionCellGroupRendererParams) => React.ReactNode[]; export type CollectionCellRendererParams = { index: number; isScrolling: boolean; key: number; style: React.CSSProperties; }; -export type CollectionCellRenderer = ( - params: CollectionCellRendererParams -) => React.ReactNode; +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. @@ -134,18 +128,16 @@ export type CollectionProps = { */ export class Collection extends PureComponent { static propTypes: { - "aria-label": Requireable; + 'aria-label': Requireable; cellCount: Validator; cellGroupRenderer: Validator; cellRenderer: Validator; - cellSizeAndPositionGetter: Validator< - CollectionCellSizeAndPositionGetter - >; + cellSizeAndPositionGetter: Validator; sectionSize: Requireable; }; static defaultProps: { - "aria-label": "grid"; + 'aria-label': 'grid'; cellGroupRenderer: CollectionCellGroupRenderer; }; @@ -167,7 +159,7 @@ 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"; + align: 'auto' | 'start' | 'end' | 'center'; cellIndex: number; height: number; scrollLeft: number; diff --git a/types/react-virtualized/dist/es/ColumnSizer.d.ts b/types/react-virtualized/dist/es/ColumnSizer.d.ts index fd42ad5cf5..17e515ab0f 100644 --- a/types/react-virtualized/dist/es/ColumnSizer.d.ts +++ b/types/react-virtualized/dist/es/ColumnSizer.d.ts @@ -1,4 +1,4 @@ -import { PureComponent, Validator, Requireable } from "react"; +import { PureComponent, Validator, Requireable } from 'react'; export type SizedColumnProps = { adjustedWidth: number; diff --git a/types/react-virtualized/dist/es/Grid.d.ts b/types/react-virtualized/dist/es/Grid.d.ts index 593e594128..f55696009f 100644 --- a/types/react-virtualized/dist/es/Grid.d.ts +++ b/types/react-virtualized/dist/es/Grid.d.ts @@ -1,8 +1,8 @@ -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"; +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; @@ -60,8 +60,8 @@ export type ScrollbarPresenceParams = { vertical: boolean; }; export type SectionRenderedParams = RenderedSection; -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; @@ -74,9 +74,7 @@ export type OverscanIndices = { overscanStartIndex: number; overscanStopIndex: number; }; -export type OverscanIndicesGetter = ( - params: OverscanIndicesGetterParams -) => OverscanIndices; +export type OverscanIndicesGetter = (params: OverscanIndicesGetterParams) => OverscanIndices; export type ScrollOffset = { scrollLeft: number; @@ -89,10 +87,7 @@ 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. @@ -151,13 +146,11 @@ export type GridCellRangeProps = { visibleColumnIndices: VisibleCellRange; visibleRowIndices: VisibleCellRange; }; -export type GridCellRangeRenderer = ( - params: GridCellRangeProps -) => React.ReactNode[]; +export type GridCellRangeRenderer = (params: GridCellRangeProps) => React.ReactNode[]; export type GridCoreProps = { - "aria-label"?: string; - "aria-readonly"?: boolean; + '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. @@ -342,7 +335,7 @@ export type GridProps = GridCoreProps & { columnWidth: number | ((params: Index) => number); }; -export type ScrollDirection = "horizontal" | "vertical"; +export type ScrollDirection = 'horizontal' | 'vertical'; export type GridState = { isScrolling: boolean; @@ -364,13 +357,13 @@ export const DEFAULT_SCROLLING_RESET_TIME_INTERVAL = 150; */ export class Grid extends PureComponent { static defaultProps: { - "aria-label": "grid"; - "aria-readonly": true; + 'aria-label': 'grid'; + 'aria-readonly': true; autoContainerWidth: false; autoHeight: false; autoWidth: false; cellRangeRenderer: GridCellRangeRenderer; - containerRole: "rowgroup"; + containerRole: 'rowgroup'; containerStyle: {}; estimatedColumnSize: 100; estimatedRowSize: 30; @@ -382,9 +375,9 @@ export class Grid extends PureComponent { overscanColumnCount: 0; overscanIndicesGetter: OverscanIndicesGetter; overscanRowCount: 10; - role: "grid"; + role: 'grid'; scrollingResetTimeInterval: typeof DEFAULT_SCROLLING_RESET_TIME_INTERVAL; - scrollToAlignment: "auto"; + scrollToAlignment: 'auto'; scrollToColumn: -1; scrollToRow: -1; style: {}; @@ -394,11 +387,7 @@ export class Grid extends PureComponent { /** * Gets offsets for a given cell and alignment. */ - getOffsetForCell(params?: { - alignment?: Alignment; - columnIndex?: number; - rowIndex?: number; - }): ScrollOffset; + getOffsetForCell(params?: { alignment?: Alignment; columnIndex?: number; rowIndex?: number }): ScrollOffset; /** * This method handles a scroll event originating from an external scroll control. @@ -413,10 +402,7 @@ export class Grid extends PureComponent { * This method is intended for advanced use-cases like CellMeasurer. */ // @TODO (bvaughn) Add automated test coverage for this. - invalidateCellSizeAfterRender(params: { - columnIndex: number; - rowIndex: number; - }): void; + invalidateCellSizeAfterRender(params: { columnIndex: number; rowIndex: number }): void; /** * Pre-measure all columns and rows in a Grid. @@ -430,10 +416,7 @@ export class Grid extends PureComponent { * This function should be called if dynamic column or row sizes have changed but nothing else has. * Since Grid only receives :columnCount and :rowCount it has no way of detecting when the underlying data changes. */ - recomputeGridSize(params?: { - columnIndex?: number; - rowIndex?: number; - }): void; + recomputeGridSize(params?: { columnIndex?: number; rowIndex?: number }): void; /** * Ensure column and row are visible. diff --git a/types/react-virtualized/dist/es/InfiniteLoader.d.ts b/types/react-virtualized/dist/es/InfiniteLoader.d.ts index 78b3d0a39b..3252a53e27 100644 --- a/types/react-virtualized/dist/es/InfiniteLoader.d.ts +++ b/types/react-virtualized/dist/es/InfiniteLoader.d.ts @@ -1,5 +1,5 @@ -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; @@ -61,9 +61,7 @@ export type InfiniteLoaderProps = { */ export class InfiniteLoader extends PureComponent { static propTypes: { - children: Validator< - (props: InfiniteLoaderChildProps) => React.ReactNode - >; + children: Validator<(props: InfiniteLoaderChildProps) => React.ReactNode>; isRowLoaded: Validator<(params: Index) => boolean>; loadMoreRows: Validator<(params: IndexRange) => Promise>; minimumBatchSize: Validator; diff --git a/types/react-virtualized/dist/es/List.d.ts b/types/react-virtualized/dist/es/List.d.ts index 04c3d8f85e..ea4be7f6af 100644 --- a/types/react-virtualized/dist/es/List.d.ts +++ b/types/react-virtualized/dist/es/List.d.ts @@ -1,12 +1,7 @@ -import { PureComponent, Validator, Requireable } from "react"; -import { - Grid, - GridCoreProps, - GridCellProps, - OverscanIndicesGetter -} from "./Grid"; -import { Index, IndexRange, Alignment } from "../../index"; -import { CellMeasurerCache, CellPosition } 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'; import { OnScrollParams } from './ScrollSync'; export type ListRowProps = Pick> & { @@ -36,14 +31,12 @@ 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. @@ -96,7 +89,7 @@ export class List extends PureComponent { onRowsRendered: () => void; overscanIndicesGetter: OverscanIndicesGetter; overscanRowCount: 10; - scrollToAlignment: "auto"; + scrollToAlignment: 'auto'; scrollToIndex: -1; style: {}; }; @@ -109,10 +102,7 @@ export class List extends PureComponent { getOffsetForRow(params: { alignment?: Alignment; index?: number }): number; /** CellMeasurer compatibility */ - invalidateCellSizeAfterRender({ - columnIndex, - rowIndex - }: CellPosition): void; + invalidateCellSizeAfterRender({ columnIndex, rowIndex }: CellPosition): void; /** See Grid#measureAllCells */ measureAllRows(): void; diff --git a/types/react-virtualized/dist/es/Masonry.d.ts b/types/react-virtualized/dist/es/Masonry.d.ts index f29cf86749..113ccffd17 100644 --- a/types/react-virtualized/dist/es/Masonry.d.ts +++ b/types/react-virtualized/dist/es/Masonry.d.ts @@ -1,30 +1,15 @@ -import { PureComponent, Validator, Requireable } from "react"; -import { - CellMeasurerCacheInterface, - KeyMapper, - MeasuredCellParent -} 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 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; @@ -104,7 +89,7 @@ export class Masonry extends PureComponent { onCellsRendered: noop; onScroll: noop; overscanByPixels: 20; - role: "grid"; + role: 'grid'; scrollingResetTimeInterval: typeof DEFAULT_SCROLLING_RESET_TIME_INTERVAL; style: emptyObject; tabIndex: 0; @@ -117,10 +102,7 @@ export class Masonry extends PureComponent { recomputeCellPositions(): void; - static getDerivedStateFromProps( - nextProps: MasonryProps, - prevState: MasonryState - ): MasonryState | null; + static getDerivedStateFromProps(nextProps: MasonryProps, prevState: MasonryState): MasonryState | null; } export type emptyObject = {}; @@ -151,6 +133,4 @@ 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 7796b1c281..56d5c56774 100644 --- a/types/react-virtualized/dist/es/MultiGrid.d.ts +++ b/types/react-virtualized/dist/es/MultiGrid.d.ts @@ -1,6 +1,6 @@ -import { PureComponent, Validator, Requireable } from "react"; -import { GridProps } from "./Grid"; -import { CellPosition } from "./CellMeasurer"; +import { PureComponent, Validator, Requireable } from 'react'; +import { GridProps } from './Grid'; +import { CellPosition } from './CellMeasurer'; export type MultiGridProps = { classNameBottomLeftGrid?: string; @@ -48,10 +48,10 @@ export class MultiGrid extends PureComponent { }; static defaultProps: { - classNameBottomLeftGrid: ""; - classNameBottomRightGrid: ""; - classNameTopLeftGrid: ""; - classNameTopRightGrid: ""; + classNameBottomLeftGrid: ''; + classNameBottomRightGrid: ''; + classNameTopLeftGrid: ''; + classNameTopRightGrid: ''; enableFixedColumnScroll: false; enableFixedRowScroll: false; fixedColumnCount: 0; @@ -74,12 +74,6 @@ export class MultiGrid extends PureComponent { measureAllCells(): void; /** See Grid#recomputeGridSize */ - recomputeGridSize(params?: { - columnIndex?: number; - rowIndex?: number; - }): void; - static getDerivedStateFromProps( - nextProps: MultiGridProps, - prevState: MultiGridState - ): MultiGridState | null; + recomputeGridSize(params?: { columnIndex?: number; rowIndex?: number }): void; + 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 3a6cad6a6d..6a0b5e999b 100644 --- a/types/react-virtualized/dist/es/ScrollSync.d.ts +++ b/types/react-virtualized/dist/es/ScrollSync.d.ts @@ -1,4 +1,4 @@ -import { PureComponent, Validator, Requireable } from "react"; +import { PureComponent, Validator, Requireable } from 'react'; export type OnScrollParams = { clientHeight: number; @@ -48,10 +48,7 @@ export type ScrollSyncState = { /** * HOC that simplifies the process of synchronizing scrolling between two or more virtualized components. */ -export class ScrollSync extends PureComponent< - ScrollSyncProps, - ScrollSyncState -> { +export class ScrollSync extends PureComponent { static propTypes: { children: Validator<(props: ScrollSyncChildProps) => React.ReactNode>; }; diff --git a/types/react-virtualized/dist/es/Table.d.ts b/types/react-virtualized/dist/es/Table.d.ts index 568531b0ee..acf8e9853d 100644 --- a/types/react-virtualized/dist/es/Table.d.ts +++ b/types/react-virtualized/dist/es/Table.d.ts @@ -1,13 +1,7 @@ -import { Validator, ReactNode, Requireable, PureComponent, Component } from "react"; -import { CellMeasurerCache } from "./CellMeasurer"; -import { - Index, - Alignment, - ScrollEventData, - IndexRange, - OverscanIndexRange -} from "../../index"; -import { Grid, GridCoreProps } from "./Grid"; +import { Validator, ReactNode, 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; @@ -42,9 +36,7 @@ export type MultiSortReturn = { }; export function createMultiSort( - sortCallback: ( - params: { sortBy: string; sortDirection: SortDirectionType } - ) => void, + sortCallback: (params: { sortBy: string; sortDirection: SortDirectionType }) => void, options?: MultiSortOptions ): MultiSortReturn; @@ -97,15 +89,13 @@ export type TableRowProps = { 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 @@ -154,7 +144,7 @@ export type ColumnProps = { }; export class Column extends Component { static propTypes: { - "aria-label": Requireable; + 'aria-label': Requireable; cellDataGetter: Requireable; cellRenderer: Requireable; className: Requireable; @@ -184,7 +174,7 @@ export class Column extends Component { } export type RowMouseEventHandlerParams = { - rowData: any + rowData: any; index: number; event: React.MouseEvent; }; @@ -197,7 +187,7 @@ export type HeaderMouseEventHandlerParams = { // 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 @@ -342,9 +332,7 @@ export type TableProps = GridCoreProps & { export const defaultCellDataGetter: TableCellDataGetter; export const defaultCellRenderer: TableCellRenderer; -export const defaultHeaderRenderer: () => React.ReactElement< - TableHeaderProps ->[]; +export const defaultHeaderRenderer: () => React.ReactElement[]; export const defaultHeaderRowRenderer: TableHeaderRowRenderer; export const defaultRowRenderer: TableRowRenderer; @@ -353,18 +341,18 @@ 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 type SortDirectionType = "ASC" | "DESC"; +export type SortDirectionType = 'ASC' | 'DESC'; export const SortIndicator: React.StatelessComponent<{ sortDirection?: SortDirectionType; @@ -376,7 +364,7 @@ export const SortIndicator: React.StatelessComponent<{ */ export class Table extends PureComponent { static propTypes: { - "aria-label": Requireable; + 'aria-label': Requireable; autoHeight: Requireable; children: Validator; className: Requireable; @@ -391,22 +379,12 @@ export class Table extends PureComponent { height: Validator; id: Requireable; noRowsRenderer: Requireable<() => JSX.Element>; - onHeaderClick: Requireable< - (params: HeaderMouseEventHandlerParams) => void - >; + 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: IndexRange & OverscanIndexRange) => void - >; + onRowDoubleClick: Requireable<(params: RowMouseEventHandlerParams) => void>; + onRowMouseOut: Requireable<(params: RowMouseEventHandlerParams) => void>; + onRowMouseOver: Requireable<(params: RowMouseEventHandlerParams) => void>; + onRowsRendered: Requireable<(params: IndexRange & OverscanIndexRange) => void>; onScroll: Requireable<(params: ScrollEventData) => void>; overscanRowCount: Validator; rowClassName: Requireable string)>; @@ -414,17 +392,11 @@ export class Table extends PureComponent { rowHeight: Validator number)>; rowCount: Validator; rowRenderer: Requireable<(props: TableRowProps) => React.ReactNode>; - rowStyle: Validator< - React.CSSProperties | ((params: Index) => React.CSSProperties) - >; + rowStyle: Validator React.CSSProperties)>; scrollToAlignment: Validator; scrollToIndex: Validator; scrollTop: Requireable; - sort: Requireable< - ( - params: { sortBy: string; sortDirection: SortDirectionType } - ) => void - >; + sort: Requireable<(params: { sortBy: string; sortDirection: SortDirectionType }) => void>; sortBy: Requireable; sortDirection: Validator; style: Requireable; @@ -444,7 +416,7 @@ export class Table extends PureComponent { rowRenderer: TableRowRenderer; headerRowRenderer: TableHeaderRowRenderer; rowStyle: {}; - scrollToAlignment: "auto"; + scrollToAlignment: 'auto'; scrollToIndex: -1; style: {}; }; diff --git a/types/react-virtualized/index.d.ts b/types/react-virtualized/index.d.ts index 1fd2fb0b4f..3ec6ca53fd 100644 --- a/types/react-virtualized/index.d.ts +++ b/types/react-virtualized/index.d.ts @@ -15,21 +15,16 @@ export { ArrowKeyStepper, ArrowKeyStepperProps, ChildProps as ArrowKeyStepperChildProps, - ScrollIndices -} from "./dist/es/ArrowKeyStepper"; -export { - AutoSizer, - AutoSizerProps, - Dimensions, - Size -} from "./dist/es/AutoSizer"; + ScrollIndices, +} from './dist/es/ArrowKeyStepper'; +export { AutoSizer, AutoSizerProps, Dimensions, Size } from './dist/es/AutoSizer'; export { CellMeasurer, CellMeasurerCache, CellMeasurerCacheParams, CellMeasurerProps, - KeyMapper -} from "./dist/es/CellMeasurer"; + KeyMapper, +} from './dist/es/CellMeasurer'; export { Collection, CollectionCellGroupRenderer, @@ -38,13 +33,9 @@ export { CollectionCellRendererParams, CollectionCellSizeAndPosition, CollectionCellSizeAndPositionGetter, - CollectionProps -} from "./dist/es/Collection"; -export { - ColumnSizer, - ColumnSizerProps, - SizedColumnProps -} from "./dist/es/ColumnSizer"; + CollectionProps, +} from './dist/es/Collection'; +export { ColumnSizer, ColumnSizerProps, SizedColumnProps } from './dist/es/ColumnSizer'; export { accessibilityOverscanIndicesGetter, defaultOverscanIndicesGetter, @@ -67,14 +58,10 @@ export { SectionRenderedParams, SizeAndPositionData, VisibleCellRange, - ScrollbarPresenceParams -} from "./dist/es/Grid"; -export { - InfiniteLoader, - InfiniteLoaderChildProps, - InfiniteLoaderProps -} from "./dist/es/InfiniteLoader"; -export { List, ListProps, ListRowProps, ListRowRenderer } from "./dist/es/List"; + ScrollbarPresenceParams, +} from './dist/es/Grid'; +export { InfiniteLoader, InfiniteLoaderChildProps, InfiniteLoaderProps } from './dist/es/InfiniteLoader'; +export { List, ListProps, ListRowProps, ListRowRenderer } from './dist/es/List'; export { createCellPositioner as createMasonryCellPositioner, Masonry, @@ -85,16 +72,16 @@ export { OnCellsRenderedCallback, OnScrollCallback, Position, - Positioner -} from "./dist/es/Masonry"; -export { MultiGrid, MultiGridProps, MultiGridState } from "./dist/es/MultiGrid"; + Positioner, +} from './dist/es/Masonry'; +export { MultiGrid, MultiGridProps, MultiGridState } from './dist/es/MultiGrid'; export { ScrollSync, OnScrollParams, ScrollSyncChildProps, ScrollSyncProps, - ScrollSyncState -} from "./dist/es/ScrollSync"; + ScrollSyncState, +} from './dist/es/ScrollSync'; export { createMultiSort as createTableMultiSort, defaultCellDataGetter as defaultTableCellDataGetter, @@ -121,15 +108,15 @@ export { TableProps, TableRowProps, TableRowRenderer, - SortParams -} from "./dist/es/Table"; + SortParams, +} from './dist/es/Table'; export { WindowScroller, WindowScrollerChildProps, WindowScrollerProps, WindowScrollerState, - IS_SCROLLING_TIMEOUT -} from "./dist/es/WindowScroller"; + IS_SCROLLING_TIMEOUT, +} from './dist/es/WindowScroller'; export type Index = { index: number; @@ -154,7 +141,7 @@ 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; diff --git a/types/react-virtualized/react-virtualized-tests.tsx b/types/react-virtualized/react-virtualized-tests.tsx index 6c64fd42ef..4269c362ec 100644 --- a/types/react-virtualized/react-virtualized-tests.tsx +++ b/types/react-virtualized/react-virtualized-tests.tsx @@ -1,5 +1,5 @@ -import * as React from "react"; -import { PureComponent } from "react"; +import * as React from 'react'; +import { PureComponent } from 'react'; import { ArrowKeyStepper, AutoSizer, @@ -9,8 +9,8 @@ import { IndexRange, CellMeasurerProps, Size, - TableHeaderProps -} from "react-virtualized"; + TableHeaderProps, +} from 'react-virtualized'; export class ArrowKeyStepperExample extends PureComponent { state: any; @@ -18,34 +18,25 @@ export class ArrowKeyStepperExample extends PureComponent { const { mode } = this.state; return ( - + {({ onSectionRendered, scrollToColumn, scrollToRow }) => (
{({ width }) => ( + cellRenderer={({ columnIndex, key, rowIndex, style }) => this._cellRenderer({ columnIndex, key, rowIndex, scrollToColumn, scrollToRow, - style + style, }) } rowHeight={this._getRowHeight} @@ -63,30 +54,23 @@ export class ArrowKeyStepperExample extends PureComponent { } _getColumnWidth({ index }: Index) { - return (1 + index % 3) * 60; + return (1 + (index % 3)) * 60; } _getRowHeight({ index }: Index) { - return (1 + index % 3) * 30; + return (1 + (index % 3)) * 30; } - _cellRenderer({ - columnIndex, - key, - rowIndex, - scrollToColumn, - scrollToRow, - style - }: any) { + _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 { context: any; @@ -99,7 +83,7 @@ export class AutoSizerExample extends PureComponent { {({ width, height }) => ( { 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; @@ -137,7 +117,7 @@ export class DynamicHeightList extends PureComponent { this._cache = new CellMeasurerCache({ fixedWidth: true, - minHeight: 50 + minHeight: 50, }); } @@ -146,7 +126,7 @@ export class DynamicHeightList extends PureComponent { return ( { const source = `http://fillmurray.com/${imageWidth}/${imageHeight}`; return ( - + {({ measure }) => (
@@ -193,7 +167,7 @@ export class DynamicHeightList extends PureComponent { } } -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) @@ -217,7 +191,7 @@ export class CollectionExample extends PureComponent { horizontalOverscanSize: 0, scrollToCell: undefined, showScrollingPlaceholder: false, - verticalOverscanSize: 0 + verticalOverscanSize: 0, }; this._columnYMap = []; @@ -230,7 +204,7 @@ export class CollectionExample extends PureComponent { horizontalOverscanSize, scrollToCell, showScrollingPlaceholder, - verticalOverscanSize + verticalOverscanSize, } = this.state; return ( @@ -239,10 +213,8 @@ export class CollectionExample extends PureComponent { { ); } - _cellRenderer({ - index, - isScrolling, - key, - style - }: CollectionCellRendererParams) { + _cellRenderer({ index, isScrolling, key, style }: CollectionCellRendererParams) { const { list } = this.context; const { showScrollingPlaceholder } = this.state; const datum = list.get(index % list.size); return ( -
- {showScrollingPlaceholder && isScrolling ? "..." : index} +
+ {showScrollingPlaceholder && isScrolling ? '...' : index}
); } @@ -292,7 +259,7 @@ export class CollectionExample extends PureComponent { height, width, x, - y + y, }; } @@ -301,11 +268,11 @@ export class CollectionExample extends PureComponent { } _noContentRenderer() { - return
No cells
; + return
No cells
; } } -import { ColumnSizer } from "react-virtualized"; +import { ColumnSizer } from 'react-virtualized'; export class ColumnSizerExample extends PureComponent { state: any; @@ -323,16 +290,12 @@ export class ColumnSizerExample extends PureComponent { 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} @@ -358,12 +319,11 @@ export class ColumnSizerExample extends PureComponent { } _noContentRenderer() { - return
No cells
; + return
No cells
; } _cellRenderer({ columnIndex, key, rowIndex, style }: GridCellProps) { - const className = - columnIndex === 0 ? "styles.firstCell" : "styles.cell"; + const className = columnIndex === 0 ? 'styles.firstCell' : 'styles.cell'; return (
@@ -384,7 +344,7 @@ export class GridExample extends PureComponent { rowCount: 1000, scrollToColumn: undefined, scrollToRow: undefined, - useDynamicRowHeight: false + useDynamicRowHeight: false, }; render() { @@ -397,7 +357,7 @@ export class GridExample extends PureComponent { rowCount, scrollToColumn, scrollToRow, - useDynamicRowHeight + useDynamicRowHeight, } = this.state; return ( @@ -405,16 +365,14 @@ export class GridExample extends PureComponent { {({ width }) => ( { } _getRowClassName(row: number) { - return row % 2 === 0 ? "styles.evenRow" : "styles.oddRow"; + return row % 2 === 0 ? 'styles.evenRow' : 'styles.oddRow'; } _getRowHeight({ index }: Index) { @@ -461,7 +419,7 @@ export class GridExample extends PureComponent { } _noContentRenderer() { - return
No cells
; + return
No cells
; } _renderBodyCell({ columnIndex, key, rowIndex, style }: GridCellProps) { @@ -483,7 +441,7 @@ export class GridExample extends PureComponent { } return ( -
+
{content}
); @@ -497,18 +455,18 @@ export class GridExample extends PureComponent { // Since Grid caches and re-uses them, they aren't safe to modify. style = { ...style, - backgroundColor: datum.color + backgroundColor: datum.color, }; return ( -
+
{datum.name.charAt(0)}
); } } -import { InfiniteLoader } from "react-virtualized"; +import { InfiniteLoader } from 'react-virtualized'; const STATUS_LOADING = 1; const STATUS_LOADED = 2; @@ -527,17 +485,13 @@ export class InfiniteLoaderExample extends PureComponent { const { loadedRowCount, loadingRowCount } = this.state; return ( - + {({ onRowsRendered, registerChild }) => ( {({ width }) => ( { } this.setState({ - loadingRowCount: loadingRowCount + increment + loadingRowCount: loadingRowCount + increment, }); const timeoutId = setTimeout(() => { @@ -580,7 +534,7 @@ export class InfiniteLoaderExample extends PureComponent { this.setState({ loadingRowCount: loadingRowCount - increment, - loadedRowCount: loadedRowCount + increment + loadedRowCount: loadedRowCount + increment, }); promiseResolver(); @@ -600,21 +554,12 @@ export class InfiniteLoaderExample extends PureComponent { const { loadedRowsMap } = this.state; const row = list.get(index); - let content; - - if (loadedRowsMap[index] === STATUS_LOADED) { - content = row.name; - } else { - content = ( -
- ); - } + const content = loadedRowsMap[index] === STATUS_LOADED + ? row.name + :
; return ( -
+
{content}
); @@ -634,7 +579,7 @@ export class ListExample extends PureComponent { rowCount: context.list.size, scrollToIndex: undefined, showScrollingPlaceholder: false, - useDynamicRowHeight: false + useDynamicRowHeight: false, }; } @@ -646,7 +591,7 @@ export class ListExample extends PureComponent { rowCount, scrollToIndex, showScrollingPlaceholder, - useDynamicRowHeight + useDynamicRowHeight, } = this.state; return ( @@ -654,16 +599,12 @@ export class ListExample extends PureComponent { {({ width }) => ( { } _noRowsRenderer() { - return
No rows
; + return
No rows
; } _rowRenderer({ index, isScrolling, key, style }: ListRowProps) { @@ -692,11 +633,7 @@ export class ListExample extends PureComponent { if (showScrollingPlaceholder && isScrolling) { return ( -
+
Scrolling...
); @@ -714,7 +651,9 @@ export class ListExample extends PureComponent { case 100: additionalContent = (
- It is large-sized.
It has a 3rd row. + It is large-sized. +
+ It has a 3rd row.
); break; @@ -722,23 +661,21 @@ export class ListExample extends PureComponent { } 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}
); } @@ -749,8 +686,8 @@ import { createMasonryCellPositioner as createCellPositioner, Positioner, Masonry, - MasonryCellProps -} from "react-virtualized"; + MasonryCellProps, +} from 'react-virtualized'; export class GridExample2 extends PureComponent { _columnCount: number; @@ -773,7 +710,7 @@ export class GridExample2 extends PureComponent { this._cache = new CellMeasurerCache({ defaultHeight: 250, defaultWidth: 200, - fixedWidth: true + fixedWidth: true, }); this._columnHeights = {}; @@ -782,7 +719,7 @@ export class GridExample2 extends PureComponent { columnWidth: 200, height: 300, gutterSize: 10, - windowScrollerEnabled: false + windowScrollerEnabled: false, }; this._cellRenderer = this._cellRenderer.bind(this); @@ -793,12 +730,7 @@ export class GridExample2 extends PureComponent { } render() { - const { - columnWidth, - height, - gutterSize, - windowScrollerEnabled - } = this.state; + const { columnWidth, height, gutterSize, windowScrollerEnabled } = this.state; const child = windowScrollerEnabled ? ( {this._renderAutoSizer} @@ -812,9 +744,7 @@ export class GridExample2 extends PureComponent { _calculateColumnCount() { 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) { @@ -824,26 +754,21 @@ export class GridExample2 extends PureComponent { const datum = list.get(index % list.size); return ( - +
{datum.random} @@ -853,14 +778,14 @@ export class GridExample2 extends PureComponent { } _initCellPositioner() { - if (typeof this._cellPositioner === "undefined") { + if (typeof this._cellPositioner === 'undefined') { const { columnWidth, gutterSize } = this.state; this._cellPositioner = createCellPositioner({ cellMeasurerCache: this._cache, columnCount: this._columnCount, columnWidth, - spacer: gutterSize + spacer: gutterSize, }); } } @@ -874,13 +799,7 @@ export class GridExample2 extends PureComponent { this._masonry.recomputeCellPositions(); } - _renderAutoSizer({ - height, - scrollTop - }: { - height: number; - scrollTop?: number; - }) { + _renderAutoSizer({ height, scrollTop }: { height: number; scrollTop?: number }) { this._height = height; this._scrollTop = scrollTop; @@ -920,7 +839,7 @@ export class GridExample2 extends PureComponent { this._cellPositioner.reset({ columnCount: this._columnCount, columnWidth, - spacer: gutterSize + spacer: gutterSize, }); } @@ -929,24 +848,24 @@ export class GridExample2 extends PureComponent { } } -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> { @@ -954,7 +873,7 @@ export class MultiGridExample extends PureComponent<{}, any> { fixedColumnCount: 2, fixedRowCount: 1, scrollToColumn: 0, - scrollToRow: 0 + scrollToRow: 0, }; render() { @@ -982,19 +901,19 @@ export class MultiGridExample extends PureComponent<{}, any> { _cellRenderer({ columnIndex, key, rowIndex, style }: GridCellProps) { return ( -
+
{columnIndex}, {rowIndex}
); } } -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; @@ -1007,7 +926,7 @@ export class GridExample3 extends PureComponent<{}, any> { overscanColumnCount: 0, overscanRowCount: 5, rowHeight: 40, - rowCount: 100 + rowCount: 100, }; render() { @@ -1018,61 +937,37 @@ export class GridExample3 extends PureComponent<{}, any> { overscanColumnCount, overscanRowCount, rowHeight, - rowCount + rowCount, } = this.state; return ( - {({ - clientHeight, - clientWidth, - onScroll, - scrollHeight, - scrollLeft, - scrollTop, - scrollWidth - }) => { + {({ 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} @@ -1109,75 +1000,48 @@ export class GridExample3 extends PureComponent<{}, any> { width={columnWidth} />
-
+
{({ width }) => (
{ return this._renderLeftHeaderCell(params); } - _renderLeftHeaderCell({ - columnIndex, - key, - rowIndex, - style - }: GridCellProps) { + _renderLeftHeaderCell({ columnIndex, key, rowIndex, style }: GridCellProps) { return ( -
+
{`C${columnIndex}`}
); @@ -1225,7 +1084,7 @@ export class GridExample3 extends PureComponent<{}, any> { _renderLeftSideCell({ columnIndex, key, rowIndex, style }: GridCellProps) { return ( -
+
{`R${rowIndex}, C${columnIndex}`}
); @@ -1238,7 +1097,7 @@ function hexToRgb(hex: string) { ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), - b: parseInt(result[3], 16) + b: parseInt(result[3], 16), } : null; } @@ -1258,7 +1117,7 @@ function mixColors(color1: any, color2: any, amount: any) { 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> { context: any; @@ -1271,9 +1130,9 @@ export class TableExample extends PureComponent<{}, any> { rowHeight: 40, rowCount: 1000, scrollToIndex: undefined, - sortBy: "index", + sortBy: 'index', sortDirection: SortDirection.ASC, - useDynamicRowHeight: false + useDynamicRowHeight: false, }; render() { @@ -1288,14 +1147,13 @@ export class TableExample extends PureComponent<{}, any> { scrollToIndex, sortBy, sortDirection, - useDynamicRowHeight + useDynamicRowHeight, } = this.state; const { list } = this.context; const sortedList = list; - const rowGetter = ({ index }: Index) => - this._getDatum(sortedList, index); + const rowGetter = ({ index }: Index) => this._getDatum(sortedList, index); return (
@@ -1304,17 +1162,13 @@ export class TableExample extends PureComponent<{}, any> { { {!hideIndexRow && ( rowData.index} + cellDataGetter={({ columnData, dataKey, rowData }) => rowData.index} dataKey="index" disableSort={!this._isSortEnabled()} defaultSortDirection={SortDirection.DESC} @@ -1349,14 +1199,8 @@ export class TableExample extends PureComponent<{}, any> { disableSort 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} + className={'styles.exampleColumn'} + cellRenderer={({ cellData, columnData, dataKey, rowData, rowIndex }) => cellData} flexGrow={1} />
@@ -1376,20 +1220,11 @@ export class TableExample extends PureComponent<{}, any> { return this._getDatum(list, index).size; } - _headerRenderer({ - columnData, - dataKey, - disableSort, - label, - sortBy, - sortDirection - }: TableHeaderProps) { + _headerRenderer({ columnData, dataKey, disableSort, label, sortBy, sortDirection }: TableHeaderProps) { return (
Full Name - {sortBy === dataKey && ( - - )} + {sortBy === dataKey && }
); } @@ -1402,34 +1237,28 @@ export class TableExample extends PureComponent<{}, any> { } _noRowsRenderer() { - return
No rows
; + return
No rows
; } _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 - }: { - sortBy: string; - sortDirection: SortDirectionType; - }) { + _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 { _cache = new CellMeasurerCache({ fixedWidth: true, - minHeight: 25 + minHeight: 25, }); render() { @@ -1441,24 +1270,14 @@ export class DynamicHeightTableColumnExample extends PureComponent { headerHeight={20} height={400} overscanRowCount={2} - rowClassName={"styles.tableRow"} + rowClassName={'styles.tableRow'} rowHeight={this._cache.rowHeight} rowGetter={this._rowGetter} rowCount={1000} width={width} > - - + + { const { list } = this.props; const datum = list.get(args.rowIndex % list.size); - const content = args.rowIndex % 5 === 0 ? "" : datum.randomLong; + const content = args.rowIndex % 5 === 0 ? '' : datum.randomLong; return ( { rowIndex={args.rowIndex} >
{content} @@ -1506,7 +1325,7 @@ export class WindowScrollerExample extends PureComponent<{}, any> { _windowScroller: WindowScroller; context: any; state = { - showHeaderText: true + showHeaderText: true, }; render() { @@ -1514,20 +1333,15 @@ export class WindowScrollerExample extends PureComponent<{}, any> { const { showHeaderText } = this.state; return ( -
- +
+ {({ height, isScrolling, scrollTop, onChildScroll }) => ( {({ width }) => ( { rowRenderer={params => this._rowRenderer({ ...params, - isScrolling + isScrolling, }) } scrollTop={scrollTop} @@ -1555,7 +1369,7 @@ export class WindowScrollerExample extends PureComponent<{}, any> { const row = list.get(index); return ( -
+
{row.name}
); @@ -1566,12 +1380,7 @@ export class WindowScrollerExample extends PureComponent<{}, any> { } } -import { - GridCellProps, - GridCellRangeProps, - SortParams, - SortDirectionType -} from "react-virtualized"; +import { GridCellProps, GridCellRangeProps, SortParams, SortDirectionType } from 'react-virtualized'; export class GridCellRangeRendererExample extends PureComponent<{}, any> { state = { @@ -1579,17 +1388,11 @@ export class GridCellRangeRendererExample extends PureComponent<{}, any> { columnCount: 50, height: 300, rowHeight: 40, - rowCount: 100 + rowCount: 100, }; render() { - const { - columnCount, - columnWidth, - height, - rowHeight, - rowCount - } = this.state; + const { columnCount, columnWidth, height, rowHeight, rowCount } = this.state; return ( { verticalOffsetAdjustment, // Vertical pixel offset (required for scaling) parent, visibleColumnIndices, - visibleRowIndices + 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. @@ -1676,7 +1467,7 @@ export class GridCellRangeRendererExample extends PureComponent<{}, any> { key, parent, rowIndex, - style + style, }; renderedCells.push(cellRenderer(gridCellProps));