UNPKG

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