UNPKG

6.06 kBTypeScriptView Raw
1import { JSX, PureComponent, Requireable, Validator } from "react";
2import {
3 Alignment,
4 Index,
5 ScrollParams,
6 ScrollPosition,
7 SectionRenderedParams,
8 SizeAndPositionInfo,
9 SizeInfo,
10} from "../../index";
11
12export type CollectionCellSizeAndPosition = {
13 height: number;
14 width: number;
15 x: number;
16 y: number;
17};
18export type CollectionCellSizeAndPositionGetter = (params: Index) => CollectionCellSizeAndPosition;
19
20export type CollectionCellGroupRendererParams = {
21 cellSizeAndPositionGetter: CollectionCellSizeAndPositionGetter;
22 indices: number[];
23 cellRenderer: CollectionCellRenderer;
24};
25export type CollectionCellGroupRenderer = (params: CollectionCellGroupRendererParams) => React.ReactNode[];
26export type CollectionCellRendererParams = {
27 index: number;
28 isScrolling: boolean;
29 key: number;
30 style: React.CSSProperties;
31};
32export type CollectionCellRenderer = (params: CollectionCellRendererParams) => React.ReactNode;
33export type CollectionProps = {
34 "aria-label"?: string | undefined;
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 | undefined;
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 | undefined;
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 | undefined;
67 height: number;
68 horizontalOverscanSize?: number | undefined;
69 /**
70 * Optional custom id to attach to root Collection element.
71 */
72 id?: string | undefined;
73 noContentRenderer?: (() => JSX.Element) | undefined;
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) | undefined;
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) | undefined;
84 /**
85 * Horizontal offset
86 */
87 scrollLeft?: number | undefined;
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 | undefined;
96 scrollToCell?: number | undefined;
97 /**
98 * Vertical Offset
99 */
100 scrollTop?: number | undefined;
101 /**
102 * Optionally override the size of the sections a Collection's cells are split into.
103 */
104 sectionSize?: number | undefined;
105 /**
106 * Optional custom inline style to attach to root Collection element.
107 */
108 style?: React.CSSProperties | undefined;
109 verticalOverscanSize?: number | undefined;
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 */
129export 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
179export default Collection;
180
\No newline at end of file