1 | import { PureComponent, Validator, Requireable } from 'react';
|
2 | import {
|
3 | Alignment,
|
4 | Index,
|
5 | ScrollParams,
|
6 | ScrollPosition,
|
7 | SectionRenderedParams,
|
8 | SizeInfo,
|
9 | SizeAndPositionInfo,
|
10 | } from '../../index';
|
11 |
|
12 | export type CollectionCellSizeAndPosition = {
|
13 | height: number;
|
14 | width: number;
|
15 | x: number;
|
16 | y: number;
|
17 | };
|
18 | export type CollectionCellSizeAndPositionGetter = (params: Index) => CollectionCellSizeAndPosition;
|
19 |
|
20 | export type CollectionCellGroupRendererParams = {
|
21 | cellSizeAndPositionGetter: CollectionCellSizeAndPositionGetter;
|
22 | indices: number[];
|
23 | cellRenderer: CollectionCellRenderer;
|
24 | };
|
25 | export type CollectionCellGroupRenderer = (params: CollectionCellGroupRendererParams) => React.ReactNode[];
|
26 | export type CollectionCellRendererParams = {
|
27 | index: number;
|
28 | isScrolling: boolean;
|
29 | key: number;
|
30 | style: React.CSSProperties;
|
31 | };
|
32 | export type CollectionCellRenderer = (params: CollectionCellRendererParams) => React.ReactNode;
|
33 | export type CollectionProps = {
|
34 | 'aria-label'?: string;
|
35 | /**
|
36 | * Outer height of Collection is set to "auto". This property should only be
|
37 | * used in conjunction with the WindowScroller HOC.
|
38 | */
|
39 | autoHeight?: boolean;
|
40 | /**
|
41 | * Number of cells in Collection.
|
42 | */
|
43 | cellCount: number;
|
44 | /**
|
45 | * Responsible for rendering a group of cells given their indices.
|
46 | * Should implement the following interface: ({
|
47 | * cellSizeAndPositionGetter:Function,
|
48 | * indices: Array<number>,
|
49 | * cellRenderer: Function
|
50 | * }): Array<PropTypes.node>
|
51 | */
|
52 | cellGroupRenderer?: CollectionCellGroupRenderer;
|
53 | /**
|
54 | * Responsible for rendering a cell given an row and column index.
|
55 | * Should implement the following interface: ({ index: number, key: string, style: object }): PropTypes.element
|
56 | */
|
57 | cellRenderer: CollectionCellRenderer;
|
58 | /**
|
59 | * Callback responsible for returning size and offset/position information for a given cell (index).
|
60 | * ({ index: number }): { height: number, width: number, x: number, y: number }
|
61 | */
|
62 | cellSizeAndPositionGetter: CollectionCellSizeAndPositionGetter;
|
63 | /**
|
64 | * Optional custom CSS class name to attach to root Collection element.
|
65 | */
|
66 | className?: string;
|
67 | height: number;
|
68 | horizontalOverscanSize?: number;
|
69 | /**
|
70 | * Optional custom id to attach to root Collection element.
|
71 | */
|
72 | id?: string;
|
73 | noContentRenderer?: () => JSX.Element;
|
74 | /**
|
75 | * Callback invoked whenever the scroll offset changes within the inner
|
76 | * scrollable region: ({ clientHeight, clientWidth, scrollHeight, scrollLeft, scrollTop, scrollWidth }): void
|
77 | */
|
78 | onScroll?: (params: ScrollParams) => any;
|
79 | /**
|
80 | * Callback invoked with information about the section of the Collection
|
81 | * that was just rendered: ({ indices: Array<number> }): void
|
82 | */
|
83 | onSectionRendered?: (params: SectionRenderedParams) => any;
|
84 | /**
|
85 | * Horizontal offset
|
86 | */
|
87 | scrollLeft?: number;
|
88 | /**
|
89 | * Controls the alignment of scrolled-to-cells. The default ("auto") scrolls
|
90 | * the least amount possible to ensure that the specified cell is fully
|
91 | * visible. Use "start" to always align cells to the top/left of the
|
92 | * Collection and "end" to align them bottom/right. Use "center" to align
|
93 | * specified cell in the middle of container.
|
94 | */
|
95 | scrollToAlignment?: Alignment;
|
96 | scrollToCell?: number;
|
97 | /**
|
98 | * Vertical Offset
|
99 | */
|
100 | scrollTop?: number;
|
101 | /**
|
102 | * Optionally override the size of the sections a Collection's cells are split into.
|
103 | */
|
104 | sectionSize?: number;
|
105 | /**
|
106 | * Optional custom inline style to attach to root Collection element.
|
107 | */
|
108 | style?: React.CSSProperties;
|
109 | verticalOverscanSize?: number;
|
110 | /**
|
111 | * Width of Collection; this property determines the number of visible
|
112 | * (vs virtualized) columns.
|
113 | */
|
114 | width: number;
|
115 | /**
|
116 | * PLEASE NOTE
|
117 | * The [key: string]: any; line is here on purpose
|
118 | * This is due to the need of force re-render of PureComponent
|
119 | * Check the following link if you want to know more
|
120 | * https://github.com/bvaughn/react-virtualized#pass-thru-props
|
121 | */
|
122 | [key: string]: any;
|
123 | };
|
124 |
|
125 | /**
|
126 | * Renders scattered or non-linear data.
|
127 | * Unlike Grid, which renders checkerboard data, Collection can render arbitrarily positioned- even overlapping- data.
|
128 | */
|
129 | export class Collection extends PureComponent<CollectionProps> {
|
130 | static propTypes: {
|
131 | 'aria-label': Requireable<string>;
|
132 | cellCount: Validator<number>;
|
133 | cellGroupRenderer: Validator<CollectionCellGroupRenderer>;
|
134 | cellRenderer: Validator<CollectionCellRenderer>;
|
135 | cellSizeAndPositionGetter: Validator<CollectionCellSizeAndPositionGetter>;
|
136 | sectionSize: Requireable<number>;
|
137 | };
|
138 |
|
139 | static defaultProps: {
|
140 | 'aria-label': 'grid';
|
141 | cellGroupRenderer: CollectionCellGroupRenderer;
|
142 | };
|
143 |
|
144 | forceUpdate(): void;
|
145 |
|
146 | /** See Collection#recomputeCellSizesAndPositions */
|
147 | recomputeCellSizesAndPositions(): void;
|
148 |
|
149 | /** CellLayoutManager interface */
|
150 |
|
151 | calculateSizeAndPositionData(): void;
|
152 |
|
153 | /**
|
154 | * Returns the most recently rendered set of cell indices.
|
155 | */
|
156 | getLastRenderedIndices(): number[];
|
157 |
|
158 | /**
|
159 | * Calculates the minimum amount of change from the current scroll position to ensure the specified cell is (fully) visible.
|
160 | */
|
161 | getScrollPositionForCell(params: {
|
162 | align: 'auto' | 'start' | 'end' | 'center';
|
163 | cellIndex: number;
|
164 | height: number;
|
165 | scrollLeft: number;
|
166 | scrollTop: number;
|
167 | width: number;
|
168 | }): ScrollPosition;
|
169 |
|
170 | getTotalSize(): SizeInfo;
|
171 |
|
172 | cellRenderers(
|
173 | params: {
|
174 | isScrolling: boolean;
|
175 | } & SizeInfo
|
176 | ): React.ReactNode[];
|
177 | }
|
178 |
|
179 | export default Collection;
|