1 | import type * as PropTypes from "prop-types";
|
2 | import { JSX, PureComponent } from "react";
|
3 | import {
|
4 | Alignment,
|
5 | Index,
|
6 | ScrollParams,
|
7 | ScrollPosition,
|
8 | SectionRenderedParams,
|
9 | SizeAndPositionInfo,
|
10 | SizeInfo,
|
11 | } from "../../index";
|
12 |
|
13 | export type CollectionCellSizeAndPosition = {
|
14 | height: number;
|
15 | width: number;
|
16 | x: number;
|
17 | y: number;
|
18 | };
|
19 | export type CollectionCellSizeAndPositionGetter = (params: Index) => CollectionCellSizeAndPosition;
|
20 |
|
21 | export type CollectionCellGroupRendererParams = {
|
22 | cellSizeAndPositionGetter: CollectionCellSizeAndPositionGetter;
|
23 | indices: number[];
|
24 | cellRenderer: CollectionCellRenderer;
|
25 | };
|
26 | export type CollectionCellGroupRenderer = (params: CollectionCellGroupRendererParams) => React.ReactNode[];
|
27 | export type CollectionCellRendererParams = {
|
28 | index: number;
|
29 | isScrolling: boolean;
|
30 | key: number;
|
31 | style: React.CSSProperties;
|
32 | };
|
33 | export type CollectionCellRenderer = (params: CollectionCellRendererParams) => React.ReactNode;
|
34 | export type CollectionProps = {
|
35 | "aria-label"?: string | undefined;
|
36 | |
37 |
|
38 |
|
39 |
|
40 | autoHeight?: boolean | undefined;
|
41 | |
42 |
|
43 |
|
44 | cellCount: number;
|
45 | |
46 |
|
47 |
|
48 |
|
49 |
|
50 |
|
51 |
|
52 |
|
53 | cellGroupRenderer?: CollectionCellGroupRenderer | undefined;
|
54 | |
55 |
|
56 |
|
57 |
|
58 | cellRenderer: CollectionCellRenderer;
|
59 | |
60 |
|
61 |
|
62 |
|
63 | cellSizeAndPositionGetter: CollectionCellSizeAndPositionGetter;
|
64 | |
65 |
|
66 |
|
67 | className?: string | undefined;
|
68 | height: number;
|
69 | horizontalOverscanSize?: number | undefined;
|
70 | |
71 |
|
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 | */
|
130 | export 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 |
|
180 | export default Collection;
|
181 |
|
\ | No newline at end of file |