1 | import { PureComponent, Validator, Requireable } from 'react';
|
2 | import { CellMeasurerCacheInterface, KeyMapper, MeasuredCellParent } from './CellMeasurer';
|
3 | import { GridCellRenderer } from './Grid';
|
4 | import { IndexRange } from '../../index';
|
5 |
|
6 |
|
7 |
|
8 |
|
9 | export const DEFAULT_SCROLLING_RESET_TIME_INTERVAL = 150;
|
10 |
|
11 | export type OnCellsRenderedCallback = (params: IndexRange) => void;
|
12 |
|
13 | export type OnScrollCallback = (params: { clientHeight: number; scrollHeight: number; scrollTop: number }) => void;
|
14 |
|
15 | export type MasonryCellProps = {
|
16 | index: number;
|
17 | isScrolling: boolean;
|
18 | key: React.Key;
|
19 | parent: MeasuredCellParent;
|
20 | style?: React.CSSProperties | undefined;
|
21 | };
|
22 |
|
23 | export type CellRenderer = (props: MasonryCellProps) => React.ReactNode;
|
24 |
|
25 | export type MasonryProps = {
|
26 | autoHeight: boolean;
|
27 | cellCount: number;
|
28 | cellMeasurerCache: CellMeasurerCacheInterface;
|
29 | cellPositioner: Positioner;
|
30 | cellRenderer: CellRenderer;
|
31 | className?: string | undefined;
|
32 | height: number;
|
33 | id?: string | undefined;
|
34 | keyMapper?: KeyMapper | undefined;
|
35 | onCellsRendered?: OnCellsRenderedCallback | undefined;
|
36 | onScroll?: OnScrollCallback | undefined;
|
37 | overscanByPixels?: number | undefined;
|
38 | role?: string | undefined;
|
39 | scrollingResetTimeInterval?: number | undefined;
|
40 | style?: React.CSSProperties | undefined;
|
41 | tabIndex?: number | null | undefined;
|
42 | width: number;
|
43 | |
44 |
|
45 |
|
46 |
|
47 |
|
48 |
|
49 |
|
50 | [key: string]: any;
|
51 | };
|
52 |
|
53 | export type MasonryState = {
|
54 | isScrolling: boolean;
|
55 | scrollTop: number;
|
56 | };
|
57 |
|
58 |
|
59 |
|
60 |
|
61 |
|
62 |
|
63 |
|
64 |
|
65 |
|
66 |
|
67 |
|
68 |
|
69 |
|
70 |
|
71 |
|
72 |
|
73 |
|
74 |
|
75 |
|
76 |
|
77 |
|
78 |
|
79 |
|
80 |
|
81 |
|
82 |
|
83 |
|
84 |
|
85 |
|
86 | export class Masonry extends PureComponent<MasonryProps, MasonryState> {
|
87 | static defaultProps: {
|
88 | autoHeight: false;
|
89 | keyMapper: identity;
|
90 | onCellsRendered: noop;
|
91 | onScroll: noop;
|
92 | overscanByPixels: 20;
|
93 | role: 'grid';
|
94 | scrollingResetTimeInterval: typeof DEFAULT_SCROLLING_RESET_TIME_INTERVAL;
|
95 | style: emptyObject;
|
96 | tabIndex: 0;
|
97 | };
|
98 |
|
99 | clearCellPositions(): void;
|
100 |
|
101 |
|
102 | invalidateCellSizeAfterRender(params: { rowIndex: number }): void;
|
103 |
|
104 | recomputeCellPositions(): void;
|
105 |
|
106 | static getDerivedStateFromProps(nextProps: MasonryProps, prevState: MasonryState): MasonryState | null;
|
107 | }
|
108 |
|
109 | export default Masonry;
|
110 |
|
111 | export type emptyObject = {};
|
112 |
|
113 | export type identity = <T>(value: T) => T;
|
114 |
|
115 | export type noop = () => void;
|
116 |
|
117 | export type Position = {
|
118 | left: number;
|
119 | top: number;
|
120 | };
|
121 |
|
122 | export type createCellPositionerParams = {
|
123 | cellMeasurerCache: CellMeasurerCacheInterface;
|
124 | columnCount: number;
|
125 | columnWidth: number;
|
126 | spacer?: number | undefined;
|
127 | };
|
128 |
|
129 | export type resetParams = {
|
130 | columnCount: number;
|
131 | columnWidth: number;
|
132 | spacer?: number | undefined;
|
133 | };
|
134 |
|
135 | export type Positioner = ((index: number) => Position) & {
|
136 | reset: (params: resetParams) => void;
|
137 | };
|
138 |
|
139 | export const createCellPositioner: (params: createCellPositionerParams) => Positioner;
|