@react-stately/layout 3.4.3-nightly.3040 → 3.4.3-nightly.3047
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/main.js +649 -879
- package/dist/main.js.map +1 -1
- package/dist/module.js +635 -871
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +7 -7
- package/dist/types.d.ts.map +1 -1
- package/package.json +6 -6
package/dist/main.js
CHANGED
|
@@ -1,912 +1,682 @@
|
|
|
1
|
-
var
|
|
2
|
-
Layout,
|
|
3
|
-
LayoutInfo,
|
|
4
|
-
Rect,
|
|
5
|
-
Size
|
|
6
|
-
} = require("@react-stately/virtualizer");
|
|
1
|
+
var $bz2xS$reactstatelyvirtualizer = require("@react-stately/virtualizer");
|
|
7
2
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
*
|
|
13
|
-
* To configure a ListLayout, you can use the properties to define the
|
|
14
|
-
* layouts and/or use the method for defining indentation.
|
|
15
|
-
* The {@link ListKeyboardDelegate} extends the existing collection view
|
|
16
|
-
* delegate with an additional method to do this (it uses the same delegate object as
|
|
17
|
-
* the collection view itself).
|
|
18
|
-
*/
|
|
19
|
-
|
|
20
|
-
class ListLayout extends Layout {
|
|
21
|
-
/**
|
|
22
|
-
* Creates a new ListLayout with options. See the list of properties below for a description
|
|
23
|
-
* of the options that can be provided.
|
|
24
|
-
*/
|
|
25
|
-
constructor(options) {
|
|
26
|
-
if (options === void 0) {
|
|
27
|
-
options = {};
|
|
3
|
+
function $parcel$exportWildcard(dest, source) {
|
|
4
|
+
Object.keys(source).forEach(function(key) {
|
|
5
|
+
if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {
|
|
6
|
+
return;
|
|
28
7
|
}
|
|
29
8
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
this.estimatedHeadingHeight = void 0;
|
|
35
|
-
this.padding = void 0;
|
|
36
|
-
this.indentationForItem = void 0;
|
|
37
|
-
this.layoutInfos = void 0;
|
|
38
|
-
this.layoutNodes = void 0;
|
|
39
|
-
this.contentSize = void 0;
|
|
40
|
-
this.collection = void 0;
|
|
41
|
-
this.disabledKeys = new Set();
|
|
42
|
-
this.isLoading = void 0;
|
|
43
|
-
this.lastWidth = void 0;
|
|
44
|
-
this.lastCollection = void 0;
|
|
45
|
-
this.rootNodes = void 0;
|
|
46
|
-
this.collator = void 0;
|
|
47
|
-
this.invalidateEverything = void 0;
|
|
48
|
-
this.loaderHeight = void 0;
|
|
49
|
-
this.placeholderHeight = void 0;
|
|
50
|
-
this.rowHeight = options.rowHeight;
|
|
51
|
-
this.estimatedRowHeight = options.estimatedRowHeight;
|
|
52
|
-
this.headingHeight = options.headingHeight;
|
|
53
|
-
this.estimatedHeadingHeight = options.estimatedHeadingHeight;
|
|
54
|
-
this.padding = options.padding || 0;
|
|
55
|
-
this.indentationForItem = options.indentationForItem;
|
|
56
|
-
this.collator = options.collator;
|
|
57
|
-
this.loaderHeight = options.loaderHeight;
|
|
58
|
-
this.placeholderHeight = options.placeholderHeight;
|
|
59
|
-
this.layoutInfos = new Map();
|
|
60
|
-
this.layoutNodes = new Map();
|
|
61
|
-
this.rootNodes = [];
|
|
62
|
-
this.lastWidth = 0;
|
|
63
|
-
this.lastCollection = null;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
getLayoutInfo(key) {
|
|
67
|
-
return this.layoutInfos.get(key);
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
getVisibleLayoutInfos(rect) {
|
|
71
|
-
let res = [];
|
|
72
|
-
|
|
73
|
-
let addNodes = nodes => {
|
|
74
|
-
for (let node of nodes) {
|
|
75
|
-
if (this.isVisible(node, rect)) {
|
|
76
|
-
res.push(node.layoutInfo);
|
|
77
|
-
|
|
78
|
-
if (node.header) {
|
|
79
|
-
res.push(node.header);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
if (node.children) {
|
|
83
|
-
addNodes(node.children);
|
|
84
|
-
}
|
|
85
|
-
}
|
|
9
|
+
Object.defineProperty(dest, key, {
|
|
10
|
+
enumerable: true,
|
|
11
|
+
get: function get() {
|
|
12
|
+
return source[key];
|
|
86
13
|
}
|
|
87
|
-
};
|
|
88
|
-
|
|
89
|
-
addNodes(this.rootNodes);
|
|
90
|
-
return res;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
isVisible(node, rect) {
|
|
94
|
-
return node.layoutInfo.rect.intersects(rect) || node.layoutInfo.isSticky;
|
|
95
|
-
}
|
|
14
|
+
});
|
|
15
|
+
});
|
|
96
16
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
if (this.lastCollection) {
|
|
105
|
-
for (let key of this.lastCollection.getKeys()) {
|
|
106
|
-
if (!this.collection.getItem(key)) {
|
|
107
|
-
let layoutNode = this.layoutNodes.get(key);
|
|
17
|
+
return dest;
|
|
18
|
+
}
|
|
19
|
+
function $parcel$export(e, n, v, s) {
|
|
20
|
+
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
21
|
+
}
|
|
22
|
+
var $aed36882df94379f$exports = {};
|
|
108
23
|
|
|
109
|
-
|
|
110
|
-
var _layoutNode$header;
|
|
24
|
+
$parcel$export($aed36882df94379f$exports, "ListLayout", () => $aed36882df94379f$export$cacbb3924155d68e);
|
|
111
25
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
26
|
+
const $aed36882df94379f$var$DEFAULT_HEIGHT = 48;
|
|
27
|
+
class $aed36882df94379f$export$cacbb3924155d68e extends $bz2xS$reactstatelyvirtualizer.Layout {
|
|
28
|
+
/**
|
|
29
|
+
* Creates a new ListLayout with options. See the list of properties below for a description
|
|
30
|
+
* of the options that can be provided.
|
|
31
|
+
*/ constructor(options = {
|
|
32
|
+
}){
|
|
33
|
+
super();
|
|
34
|
+
this.disabledKeys = new Set();
|
|
35
|
+
this.rowHeight = options.rowHeight;
|
|
36
|
+
this.estimatedRowHeight = options.estimatedRowHeight;
|
|
37
|
+
this.headingHeight = options.headingHeight;
|
|
38
|
+
this.estimatedHeadingHeight = options.estimatedHeadingHeight;
|
|
39
|
+
this.padding = options.padding || 0;
|
|
40
|
+
this.indentationForItem = options.indentationForItem;
|
|
41
|
+
this.collator = options.collator;
|
|
42
|
+
this.loaderHeight = options.loaderHeight;
|
|
43
|
+
this.placeholderHeight = options.placeholderHeight;
|
|
44
|
+
this.layoutInfos = new Map();
|
|
45
|
+
this.layoutNodes = new Map();
|
|
46
|
+
this.rootNodes = [];
|
|
47
|
+
this.lastWidth = 0;
|
|
48
|
+
this.lastCollection = null;
|
|
49
|
+
}
|
|
50
|
+
getLayoutInfo(key) {
|
|
51
|
+
return this.layoutInfos.get(key);
|
|
52
|
+
}
|
|
53
|
+
getVisibleLayoutInfos(rect) {
|
|
54
|
+
let res = [];
|
|
55
|
+
let addNodes = (nodes)=>{
|
|
56
|
+
for (let node of nodes)if (this.isVisible(node, rect)) {
|
|
57
|
+
res.push(node.layoutInfo);
|
|
58
|
+
if (node.header) res.push(node.header);
|
|
59
|
+
if (node.children) addNodes(node.children);
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
addNodes(this.rootNodes);
|
|
63
|
+
return res;
|
|
64
|
+
}
|
|
65
|
+
isVisible(node, rect) {
|
|
66
|
+
return node.layoutInfo.rect.intersects(rect) || node.layoutInfo.isSticky;
|
|
67
|
+
}
|
|
68
|
+
validate(invalidationContext) {
|
|
69
|
+
// Invalidate cache if the size of the collection changed.
|
|
70
|
+
// In this case, we need to recalculate the entire layout.
|
|
71
|
+
this.invalidateEverything = invalidationContext.sizeChanged;
|
|
72
|
+
this.collection = this.virtualizer.collection;
|
|
73
|
+
this.rootNodes = this.buildCollection();
|
|
74
|
+
// Remove deleted layout nodes
|
|
75
|
+
if (this.lastCollection) {
|
|
76
|
+
for (let key of this.lastCollection.getKeys())if (!this.collection.getItem(key)) {
|
|
77
|
+
let layoutNode = this.layoutNodes.get(key);
|
|
78
|
+
if (layoutNode) {
|
|
79
|
+
this.layoutInfos.delete(layoutNode.layoutInfo.key);
|
|
80
|
+
this.layoutInfos.delete(layoutNode.header?.key);
|
|
81
|
+
this.layoutNodes.delete(key);
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
this.lastWidth = this.virtualizer.visibleRect.width;
|
|
86
|
+
this.lastCollection = this.collection;
|
|
87
|
+
}
|
|
88
|
+
buildCollection() {
|
|
89
|
+
let y = this.padding;
|
|
90
|
+
let nodes = [];
|
|
91
|
+
for (let node of this.collection){
|
|
92
|
+
let layoutNode = this.buildChild(node, 0, y);
|
|
93
|
+
y = layoutNode.layoutInfo.rect.maxY;
|
|
94
|
+
nodes.push(layoutNode);
|
|
95
|
+
}
|
|
96
|
+
if (this.isLoading) {
|
|
97
|
+
let rect = new $bz2xS$reactstatelyvirtualizer.Rect(0, y, this.virtualizer.visibleRect.width, this.loaderHeight ?? this.virtualizer.visibleRect.height);
|
|
98
|
+
let loader = new $bz2xS$reactstatelyvirtualizer.LayoutInfo('loader', 'loader', rect);
|
|
99
|
+
this.layoutInfos.set('loader', loader);
|
|
100
|
+
nodes.push({
|
|
101
|
+
layoutInfo: loader
|
|
102
|
+
});
|
|
103
|
+
y = loader.rect.maxY;
|
|
104
|
+
}
|
|
105
|
+
if (nodes.length === 0) {
|
|
106
|
+
let rect = new $bz2xS$reactstatelyvirtualizer.Rect(0, y, this.virtualizer.visibleRect.width, this.placeholderHeight ?? this.virtualizer.visibleRect.height);
|
|
107
|
+
let placeholder = new $bz2xS$reactstatelyvirtualizer.LayoutInfo('placeholder', 'placeholder', rect);
|
|
108
|
+
this.layoutInfos.set('placeholder', placeholder);
|
|
109
|
+
nodes.push({
|
|
110
|
+
layoutInfo: placeholder
|
|
111
|
+
});
|
|
112
|
+
y = placeholder.rect.maxY;
|
|
113
|
+
}
|
|
114
|
+
this.contentSize = new $bz2xS$reactstatelyvirtualizer.Size(this.virtualizer.visibleRect.width, y + this.padding);
|
|
115
|
+
return nodes;
|
|
116
|
+
}
|
|
117
|
+
buildChild(node, x, y) {
|
|
118
|
+
let cached = this.layoutNodes.get(node.key);
|
|
119
|
+
if (!this.invalidateEverything && cached && cached.node === node && y === (cached.header || cached.layoutInfo).rect.y) return cached;
|
|
120
|
+
let layoutNode = this.buildNode(node, x, y);
|
|
121
|
+
layoutNode.node = node;
|
|
122
|
+
layoutNode.layoutInfo.parentKey = node.parentKey || null;
|
|
123
|
+
this.layoutInfos.set(layoutNode.layoutInfo.key, layoutNode.layoutInfo);
|
|
124
|
+
if (layoutNode.header) this.layoutInfos.set(layoutNode.header.key, layoutNode.header);
|
|
125
|
+
this.layoutNodes.set(node.key, layoutNode);
|
|
126
|
+
return layoutNode;
|
|
127
|
+
}
|
|
128
|
+
buildNode(node, x, y) {
|
|
129
|
+
switch(node.type){
|
|
130
|
+
case 'section':
|
|
131
|
+
return this.buildSection(node, x, y);
|
|
132
|
+
case 'item':
|
|
133
|
+
return this.buildItem(node, x, y);
|
|
116
134
|
}
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
this.lastWidth = this.virtualizer.visibleRect.width;
|
|
121
|
-
this.lastCollection = this.collection;
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
buildCollection() {
|
|
125
|
-
let y = this.padding;
|
|
126
|
-
let nodes = [];
|
|
127
|
-
|
|
128
|
-
for (let node of this.collection) {
|
|
129
|
-
let layoutNode = this.buildChild(node, 0, y);
|
|
130
|
-
y = layoutNode.layoutInfo.rect.maxY;
|
|
131
|
-
nodes.push(layoutNode);
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
if (this.isLoading) {
|
|
135
|
-
var _this$loaderHeight;
|
|
136
|
-
|
|
137
|
-
let rect = new Rect(0, y, this.virtualizer.visibleRect.width, (_this$loaderHeight = this.loaderHeight) != null ? _this$loaderHeight : this.virtualizer.visibleRect.height);
|
|
138
|
-
let loader = new LayoutInfo('loader', 'loader', rect);
|
|
139
|
-
this.layoutInfos.set('loader', loader);
|
|
140
|
-
nodes.push({
|
|
141
|
-
layoutInfo: loader
|
|
142
|
-
});
|
|
143
|
-
y = loader.rect.maxY;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
if (nodes.length === 0) {
|
|
147
|
-
var _this$placeholderHeig;
|
|
148
|
-
|
|
149
|
-
let rect = new Rect(0, y, this.virtualizer.visibleRect.width, (_this$placeholderHeig = this.placeholderHeight) != null ? _this$placeholderHeig : this.virtualizer.visibleRect.height);
|
|
150
|
-
let placeholder = new LayoutInfo('placeholder', 'placeholder', rect);
|
|
151
|
-
this.layoutInfos.set('placeholder', placeholder);
|
|
152
|
-
nodes.push({
|
|
153
|
-
layoutInfo: placeholder
|
|
154
|
-
});
|
|
155
|
-
y = placeholder.rect.maxY;
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
this.contentSize = new Size(this.virtualizer.visibleRect.width, y + this.padding);
|
|
159
|
-
return nodes;
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
buildChild(node, x, y) {
|
|
163
|
-
let cached = this.layoutNodes.get(node.key);
|
|
164
|
-
|
|
165
|
-
if (!this.invalidateEverything && cached && cached.node === node && y === (cached.header || cached.layoutInfo).rect.y) {
|
|
166
|
-
return cached;
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
let layoutNode = this.buildNode(node, x, y);
|
|
170
|
-
layoutNode.node = node;
|
|
171
|
-
layoutNode.layoutInfo.parentKey = node.parentKey || null;
|
|
172
|
-
this.layoutInfos.set(layoutNode.layoutInfo.key, layoutNode.layoutInfo);
|
|
173
|
-
|
|
174
|
-
if (layoutNode.header) {
|
|
175
|
-
this.layoutInfos.set(layoutNode.header.key, layoutNode.header);
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
this.layoutNodes.set(node.key, layoutNode);
|
|
179
|
-
return layoutNode;
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
buildNode(node, x, y) {
|
|
183
|
-
switch (node.type) {
|
|
184
|
-
case 'section':
|
|
185
|
-
return this.buildSection(node, x, y);
|
|
186
|
-
|
|
187
|
-
case 'item':
|
|
188
|
-
return this.buildItem(node, x, y);
|
|
189
|
-
}
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
buildSection(node, x, y) {
|
|
193
|
-
let width = this.virtualizer.visibleRect.width;
|
|
194
|
-
let rectHeight = this.headingHeight;
|
|
195
|
-
let isEstimated = false; // If no explicit height is available, use an estimated height.
|
|
196
|
-
|
|
197
|
-
if (rectHeight == null) {
|
|
198
|
-
// If a previous version of this layout info exists, reuse its height.
|
|
199
|
-
// Mark as estimated if the size of the overall collection view changed,
|
|
200
|
-
// or the content of the item changed.
|
|
201
|
-
let previousLayoutNode = this.layoutNodes.get(node.key);
|
|
202
|
-
|
|
203
|
-
if (previousLayoutNode && previousLayoutNode.header) {
|
|
204
|
-
let curNode = this.collection.getItem(node.key);
|
|
205
|
-
let lastNode = this.lastCollection ? this.lastCollection.getItem(node.key) : null;
|
|
206
|
-
rectHeight = previousLayoutNode.header.rect.height;
|
|
207
|
-
isEstimated = width !== this.lastWidth || curNode !== lastNode || previousLayoutNode.header.estimatedSize;
|
|
208
|
-
} else {
|
|
209
|
-
rectHeight = node.rendered ? this.estimatedHeadingHeight : 0;
|
|
210
|
-
isEstimated = true;
|
|
211
|
-
}
|
|
212
|
-
}
|
|
213
|
-
|
|
214
|
-
if (rectHeight == null) {
|
|
215
|
-
rectHeight = $da979b46fc00f04fc945a444d6278293$var$DEFAULT_HEIGHT;
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
let headerRect = new Rect(0, y, width, rectHeight);
|
|
219
|
-
let header = new LayoutInfo('header', node.key + ':header', headerRect);
|
|
220
|
-
header.estimatedSize = isEstimated;
|
|
221
|
-
header.parentKey = node.key;
|
|
222
|
-
y += header.rect.height;
|
|
223
|
-
let rect = new Rect(0, y, width, 0);
|
|
224
|
-
let layoutInfo = new LayoutInfo(node.type, node.key, rect);
|
|
225
|
-
let startY = y;
|
|
226
|
-
let children = [];
|
|
227
|
-
|
|
228
|
-
for (let child of node.childNodes) {
|
|
229
|
-
let layoutNode = this.buildChild(child, x, y);
|
|
230
|
-
y = layoutNode.layoutInfo.rect.maxY;
|
|
231
|
-
children.push(layoutNode);
|
|
232
|
-
}
|
|
233
|
-
|
|
234
|
-
rect.height = y - startY;
|
|
235
|
-
return {
|
|
236
|
-
header,
|
|
237
|
-
layoutInfo,
|
|
238
|
-
children
|
|
239
|
-
};
|
|
240
|
-
}
|
|
241
|
-
|
|
242
|
-
buildItem(node, x, y) {
|
|
243
|
-
let width = this.virtualizer.visibleRect.width;
|
|
244
|
-
let rectHeight = this.rowHeight;
|
|
245
|
-
let isEstimated = false; // If no explicit height is available, use an estimated height.
|
|
246
|
-
|
|
247
|
-
if (rectHeight == null) {
|
|
248
|
-
// If a previous version of this layout info exists, reuse its height.
|
|
249
|
-
// Mark as estimated if the size of the overall collection view changed,
|
|
250
|
-
// or the content of the item changed.
|
|
251
|
-
let previousLayoutNode = this.layoutNodes.get(node.key);
|
|
252
|
-
|
|
253
|
-
if (previousLayoutNode) {
|
|
254
|
-
let curNode = this.collection.getItem(node.key);
|
|
255
|
-
let lastNode = this.lastCollection ? this.lastCollection.getItem(node.key) : null;
|
|
256
|
-
rectHeight = previousLayoutNode.layoutInfo.rect.height;
|
|
257
|
-
isEstimated = width !== this.lastWidth || curNode !== lastNode || previousLayoutNode.layoutInfo.estimatedSize;
|
|
258
|
-
} else {
|
|
259
|
-
rectHeight = this.estimatedRowHeight;
|
|
260
|
-
isEstimated = true;
|
|
261
|
-
}
|
|
262
|
-
}
|
|
263
|
-
|
|
264
|
-
if (rectHeight == null) {
|
|
265
|
-
rectHeight = $da979b46fc00f04fc945a444d6278293$var$DEFAULT_HEIGHT;
|
|
266
|
-
}
|
|
267
|
-
|
|
268
|
-
if (typeof this.indentationForItem === 'function') {
|
|
269
|
-
x += this.indentationForItem(this.collection, node.key) || 0;
|
|
270
|
-
}
|
|
271
|
-
|
|
272
|
-
let rect = new Rect(x, y, width - x, rectHeight);
|
|
273
|
-
let layoutInfo = new LayoutInfo(node.type, node.key, rect);
|
|
274
|
-
layoutInfo.estimatedSize = isEstimated;
|
|
275
|
-
return {
|
|
276
|
-
layoutInfo
|
|
277
|
-
};
|
|
278
|
-
}
|
|
279
|
-
|
|
280
|
-
updateItemSize(key, size) {
|
|
281
|
-
let layoutInfo = this.layoutInfos.get(key); // If no layoutInfo, item has been deleted/removed.
|
|
282
|
-
|
|
283
|
-
if (!layoutInfo) {
|
|
284
|
-
return false;
|
|
285
|
-
}
|
|
286
|
-
|
|
287
|
-
layoutInfo.estimatedSize = false;
|
|
288
|
-
|
|
289
|
-
if (layoutInfo.rect.height !== size.height) {
|
|
290
|
-
// Copy layout info rather than mutating so that later caches are invalidated.
|
|
291
|
-
let newLayoutInfo = layoutInfo.copy();
|
|
292
|
-
newLayoutInfo.rect.height = size.height;
|
|
293
|
-
this.layoutInfos.set(key, newLayoutInfo); // Invalidate layout for this layout node and all parents
|
|
294
|
-
|
|
295
|
-
this.updateLayoutNode(key, layoutInfo, newLayoutInfo);
|
|
296
|
-
let node = this.collection.getItem(layoutInfo.parentKey);
|
|
297
|
-
|
|
298
|
-
while (node) {
|
|
299
|
-
this.updateLayoutNode(node.key, layoutInfo, newLayoutInfo);
|
|
300
|
-
node = this.collection.getItem(node.parentKey);
|
|
301
|
-
}
|
|
302
|
-
|
|
303
|
-
return true;
|
|
304
|
-
}
|
|
305
|
-
|
|
306
|
-
return false;
|
|
307
|
-
}
|
|
308
|
-
|
|
309
|
-
updateLayoutNode(key, oldLayoutInfo, newLayoutInfo) {
|
|
310
|
-
let n = this.layoutNodes.get(key);
|
|
311
|
-
|
|
312
|
-
if (n) {
|
|
313
|
-
// Invalidate by clearing node.
|
|
314
|
-
n.node = null; // Replace layout info in LayoutNode
|
|
315
|
-
|
|
316
|
-
if (n.header === oldLayoutInfo) {
|
|
317
|
-
n.header = newLayoutInfo;
|
|
318
|
-
} else if (n.layoutInfo === oldLayoutInfo) {
|
|
319
|
-
n.layoutInfo = newLayoutInfo;
|
|
320
|
-
}
|
|
321
|
-
}
|
|
322
|
-
}
|
|
323
|
-
|
|
324
|
-
getContentSize() {
|
|
325
|
-
return this.contentSize;
|
|
326
|
-
}
|
|
327
|
-
|
|
328
|
-
getKeyAbove(key) {
|
|
329
|
-
let collection = this.collection;
|
|
330
|
-
key = collection.getKeyBefore(key);
|
|
331
|
-
|
|
332
|
-
while (key != null) {
|
|
333
|
-
let item = collection.getItem(key);
|
|
334
|
-
|
|
335
|
-
if (item.type === 'item' && !this.disabledKeys.has(item.key)) {
|
|
336
|
-
return key;
|
|
337
|
-
}
|
|
338
|
-
|
|
339
|
-
key = collection.getKeyBefore(key);
|
|
340
135
|
}
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
136
|
+
buildSection(node, x, y) {
|
|
137
|
+
let width = this.virtualizer.visibleRect.width;
|
|
138
|
+
let rectHeight = this.headingHeight;
|
|
139
|
+
let isEstimated = false;
|
|
140
|
+
// If no explicit height is available, use an estimated height.
|
|
141
|
+
if (rectHeight == null) {
|
|
142
|
+
// If a previous version of this layout info exists, reuse its height.
|
|
143
|
+
// Mark as estimated if the size of the overall collection view changed,
|
|
144
|
+
// or the content of the item changed.
|
|
145
|
+
let previousLayoutNode = this.layoutNodes.get(node.key);
|
|
146
|
+
if (previousLayoutNode && previousLayoutNode.header) {
|
|
147
|
+
let curNode = this.collection.getItem(node.key);
|
|
148
|
+
let lastNode = this.lastCollection ? this.lastCollection.getItem(node.key) : null;
|
|
149
|
+
rectHeight = previousLayoutNode.header.rect.height;
|
|
150
|
+
isEstimated = width !== this.lastWidth || curNode !== lastNode || previousLayoutNode.header.estimatedSize;
|
|
151
|
+
} else {
|
|
152
|
+
rectHeight = node.rendered ? this.estimatedHeadingHeight : 0;
|
|
153
|
+
isEstimated = true;
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
if (rectHeight == null) rectHeight = $aed36882df94379f$var$DEFAULT_HEIGHT;
|
|
157
|
+
let headerRect = new $bz2xS$reactstatelyvirtualizer.Rect(0, y, width, rectHeight);
|
|
158
|
+
let header = new $bz2xS$reactstatelyvirtualizer.LayoutInfo('header', node.key + ':header', headerRect);
|
|
159
|
+
header.estimatedSize = isEstimated;
|
|
160
|
+
header.parentKey = node.key;
|
|
161
|
+
y += header.rect.height;
|
|
162
|
+
let rect = new $bz2xS$reactstatelyvirtualizer.Rect(0, y, width, 0);
|
|
163
|
+
let layoutInfo = new $bz2xS$reactstatelyvirtualizer.LayoutInfo(node.type, node.key, rect);
|
|
164
|
+
let startY = y;
|
|
165
|
+
let children = [];
|
|
166
|
+
for (let child of node.childNodes){
|
|
167
|
+
let layoutNode = this.buildChild(child, x, y);
|
|
168
|
+
y = layoutNode.layoutInfo.rect.maxY;
|
|
169
|
+
children.push(layoutNode);
|
|
170
|
+
}
|
|
171
|
+
rect.height = y - startY;
|
|
172
|
+
return {
|
|
173
|
+
header: header,
|
|
174
|
+
layoutInfo: layoutInfo,
|
|
175
|
+
children: children
|
|
176
|
+
};
|
|
177
|
+
}
|
|
178
|
+
buildItem(node, x, y) {
|
|
179
|
+
let width = this.virtualizer.visibleRect.width;
|
|
180
|
+
let rectHeight = this.rowHeight;
|
|
181
|
+
let isEstimated = false;
|
|
182
|
+
// If no explicit height is available, use an estimated height.
|
|
183
|
+
if (rectHeight == null) {
|
|
184
|
+
// If a previous version of this layout info exists, reuse its height.
|
|
185
|
+
// Mark as estimated if the size of the overall collection view changed,
|
|
186
|
+
// or the content of the item changed.
|
|
187
|
+
let previousLayoutNode = this.layoutNodes.get(node.key);
|
|
188
|
+
if (previousLayoutNode) {
|
|
189
|
+
let curNode = this.collection.getItem(node.key);
|
|
190
|
+
let lastNode = this.lastCollection ? this.lastCollection.getItem(node.key) : null;
|
|
191
|
+
rectHeight = previousLayoutNode.layoutInfo.rect.height;
|
|
192
|
+
isEstimated = width !== this.lastWidth || curNode !== lastNode || previousLayoutNode.layoutInfo.estimatedSize;
|
|
193
|
+
} else {
|
|
194
|
+
rectHeight = this.estimatedRowHeight;
|
|
195
|
+
isEstimated = true;
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
if (rectHeight == null) rectHeight = $aed36882df94379f$var$DEFAULT_HEIGHT;
|
|
199
|
+
if (typeof this.indentationForItem === 'function') x += this.indentationForItem(this.collection, node.key) || 0;
|
|
200
|
+
let rect = new $bz2xS$reactstatelyvirtualizer.Rect(x, y, width - x, rectHeight);
|
|
201
|
+
let layoutInfo = new $bz2xS$reactstatelyvirtualizer.LayoutInfo(node.type, node.key, rect);
|
|
202
|
+
layoutInfo.estimatedSize = isEstimated;
|
|
203
|
+
return {
|
|
204
|
+
layoutInfo: layoutInfo
|
|
205
|
+
};
|
|
206
|
+
}
|
|
207
|
+
updateItemSize(key, size) {
|
|
208
|
+
let layoutInfo = this.layoutInfos.get(key);
|
|
209
|
+
// If no layoutInfo, item has been deleted/removed.
|
|
210
|
+
if (!layoutInfo) return false;
|
|
211
|
+
layoutInfo.estimatedSize = false;
|
|
212
|
+
if (layoutInfo.rect.height !== size.height) {
|
|
213
|
+
// Copy layout info rather than mutating so that later caches are invalidated.
|
|
214
|
+
let newLayoutInfo = layoutInfo.copy();
|
|
215
|
+
newLayoutInfo.rect.height = size.height;
|
|
216
|
+
this.layoutInfos.set(key, newLayoutInfo);
|
|
217
|
+
// Invalidate layout for this layout node and all parents
|
|
218
|
+
this.updateLayoutNode(key, layoutInfo, newLayoutInfo);
|
|
219
|
+
let node = this.collection.getItem(layoutInfo.parentKey);
|
|
220
|
+
while(node){
|
|
221
|
+
this.updateLayoutNode(node.key, layoutInfo, newLayoutInfo);
|
|
222
|
+
node = this.collection.getItem(node.parentKey);
|
|
223
|
+
}
|
|
224
|
+
return true;
|
|
225
|
+
}
|
|
226
|
+
return false;
|
|
227
|
+
}
|
|
228
|
+
updateLayoutNode(key, oldLayoutInfo, newLayoutInfo) {
|
|
229
|
+
let n = this.layoutNodes.get(key);
|
|
230
|
+
if (n) {
|
|
231
|
+
// Invalidate by clearing node.
|
|
232
|
+
n.node = null;
|
|
233
|
+
// Replace layout info in LayoutNode
|
|
234
|
+
if (n.header === oldLayoutInfo) n.header = newLayoutInfo;
|
|
235
|
+
else if (n.layoutInfo === oldLayoutInfo) n.layoutInfo = newLayoutInfo;
|
|
236
|
+
}
|
|
355
237
|
}
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
getKeyPageAbove(key) {
|
|
359
|
-
let layoutInfo = this.getLayoutInfo(key);
|
|
360
|
-
|
|
361
|
-
if (layoutInfo) {
|
|
362
|
-
let pageY = Math.max(0, layoutInfo.rect.y + layoutInfo.rect.height - this.virtualizer.visibleRect.height);
|
|
363
|
-
|
|
364
|
-
while (layoutInfo && layoutInfo.rect.y > pageY) {
|
|
365
|
-
let keyAbove = this.getKeyAbove(layoutInfo.key);
|
|
366
|
-
layoutInfo = this.getLayoutInfo(keyAbove);
|
|
367
|
-
}
|
|
368
|
-
|
|
369
|
-
if (layoutInfo) {
|
|
370
|
-
return layoutInfo.key;
|
|
371
|
-
}
|
|
238
|
+
getContentSize() {
|
|
239
|
+
return this.contentSize;
|
|
372
240
|
}
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
let pageY = Math.min(this.virtualizer.contentSize.height, layoutInfo.rect.y - layoutInfo.rect.height + this.virtualizer.visibleRect.height);
|
|
382
|
-
|
|
383
|
-
while (layoutInfo && layoutInfo.rect.y < pageY) {
|
|
384
|
-
let keyBelow = this.getKeyBelow(layoutInfo.key);
|
|
385
|
-
layoutInfo = this.getLayoutInfo(keyBelow);
|
|
386
|
-
}
|
|
387
|
-
|
|
388
|
-
if (layoutInfo) {
|
|
389
|
-
return layoutInfo.key;
|
|
390
|
-
}
|
|
241
|
+
getKeyAbove(key) {
|
|
242
|
+
let collection = this.collection;
|
|
243
|
+
key = collection.getKeyBefore(key);
|
|
244
|
+
while(key != null){
|
|
245
|
+
let item = collection.getItem(key);
|
|
246
|
+
if (item.type === 'item' && !this.disabledKeys.has(item.key)) return key;
|
|
247
|
+
key = collection.getKeyBefore(key);
|
|
248
|
+
}
|
|
391
249
|
}
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
while (key != null) {
|
|
401
|
-
let item = collection.getItem(key);
|
|
402
|
-
|
|
403
|
-
if (item.type === 'item' && !this.disabledKeys.has(item.key)) {
|
|
404
|
-
return key;
|
|
405
|
-
}
|
|
406
|
-
|
|
407
|
-
key = collection.getKeyAfter(key);
|
|
250
|
+
getKeyBelow(key) {
|
|
251
|
+
let collection = this.collection;
|
|
252
|
+
key = collection.getKeyAfter(key);
|
|
253
|
+
while(key != null){
|
|
254
|
+
let item = collection.getItem(key);
|
|
255
|
+
if (item.type === 'item' && !this.disabledKeys.has(item.key)) return key;
|
|
256
|
+
key = collection.getKeyAfter(key);
|
|
257
|
+
}
|
|
408
258
|
}
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
return
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
259
|
+
getKeyPageAbove(key) {
|
|
260
|
+
let layoutInfo = this.getLayoutInfo(key);
|
|
261
|
+
if (layoutInfo) {
|
|
262
|
+
let pageY = Math.max(0, layoutInfo.rect.y + layoutInfo.rect.height - this.virtualizer.visibleRect.height);
|
|
263
|
+
while(layoutInfo && layoutInfo.rect.y > pageY){
|
|
264
|
+
let keyAbove = this.getKeyAbove(layoutInfo.key);
|
|
265
|
+
layoutInfo = this.getLayoutInfo(keyAbove);
|
|
266
|
+
}
|
|
267
|
+
if (layoutInfo) return layoutInfo.key;
|
|
268
|
+
}
|
|
269
|
+
return this.getFirstKey();
|
|
270
|
+
}
|
|
271
|
+
getKeyPageBelow(key) {
|
|
272
|
+
let layoutInfo = this.getLayoutInfo(key != null ? key : this.getFirstKey());
|
|
273
|
+
if (layoutInfo) {
|
|
274
|
+
let pageY = Math.min(this.virtualizer.contentSize.height, layoutInfo.rect.y - layoutInfo.rect.height + this.virtualizer.visibleRect.height);
|
|
275
|
+
while(layoutInfo && layoutInfo.rect.y < pageY){
|
|
276
|
+
let keyBelow = this.getKeyBelow(layoutInfo.key);
|
|
277
|
+
layoutInfo = this.getLayoutInfo(keyBelow);
|
|
278
|
+
}
|
|
279
|
+
if (layoutInfo) return layoutInfo.key;
|
|
280
|
+
}
|
|
281
|
+
return this.getLastKey();
|
|
282
|
+
}
|
|
283
|
+
getFirstKey() {
|
|
284
|
+
let collection = this.collection;
|
|
285
|
+
let key = collection.getFirstKey();
|
|
286
|
+
while(key != null){
|
|
287
|
+
let item = collection.getItem(key);
|
|
288
|
+
if (item.type === 'item' && !this.disabledKeys.has(item.key)) return key;
|
|
289
|
+
key = collection.getKeyAfter(key);
|
|
290
|
+
}
|
|
423
291
|
}
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
292
|
+
getLastKey() {
|
|
293
|
+
let collection = this.collection;
|
|
294
|
+
let key = collection.getLastKey();
|
|
295
|
+
while(key != null){
|
|
296
|
+
let item = collection.getItem(key);
|
|
297
|
+
if (item.type === 'item' && !this.disabledKeys.has(item.key)) return key;
|
|
298
|
+
key = collection.getKeyBefore(key);
|
|
299
|
+
}
|
|
429
300
|
}
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
301
|
+
getKeyForSearch(search, fromKey) {
|
|
302
|
+
if (!this.collator) return null;
|
|
303
|
+
let collection = this.collection;
|
|
304
|
+
let key = fromKey || this.getFirstKey();
|
|
305
|
+
while(key != null){
|
|
306
|
+
let item = collection.getItem(key);
|
|
307
|
+
let substring = item.textValue.slice(0, search.length);
|
|
308
|
+
if (item.textValue && this.collator.compare(substring, search) === 0) return key;
|
|
309
|
+
key = this.getKeyBelow(key);
|
|
310
|
+
}
|
|
311
|
+
return null;
|
|
312
|
+
}
|
|
313
|
+
// getDragTarget(point: Point): DragTarget {
|
|
314
|
+
// let visible = this.getVisibleLayoutInfos(new Rect(point.x, point.y, 1, 1));
|
|
315
|
+
// if (visible.length > 0) {
|
|
316
|
+
// visible = visible.sort((a, b) => b.zIndex - a.zIndex);
|
|
317
|
+
// return {
|
|
318
|
+
// type: 'item',
|
|
319
|
+
// key: visible[0].key
|
|
320
|
+
// };
|
|
321
|
+
// }
|
|
322
|
+
// return null;
|
|
323
|
+
// }
|
|
324
|
+
// getDropTarget(point: Point): DropTarget {
|
|
325
|
+
// let key = this.virtualizer.keyAtPoint(point);
|
|
326
|
+
// if (key) {
|
|
327
|
+
// return {
|
|
328
|
+
// type: 'item',
|
|
329
|
+
// key,
|
|
330
|
+
// dropPosition: DropPosition.ON
|
|
331
|
+
// };
|
|
332
|
+
// }
|
|
333
|
+
// return null;
|
|
334
|
+
// }
|
|
335
|
+
getInitialLayoutInfo(layoutInfo) {
|
|
336
|
+
layoutInfo.opacity = 0;
|
|
337
|
+
layoutInfo.transform = 'scale3d(0.8, 0.8, 0.8)';
|
|
338
|
+
return layoutInfo;
|
|
339
|
+
}
|
|
340
|
+
getFinalLayoutInfo(layoutInfo) {
|
|
341
|
+
layoutInfo.opacity = 0;
|
|
342
|
+
layoutInfo.transform = 'scale3d(0.8, 0.8, 0.8)';
|
|
343
|
+
return layoutInfo;
|
|
443
344
|
}
|
|
444
|
-
|
|
445
|
-
return null;
|
|
446
|
-
} // getDragTarget(point: Point): DragTarget {
|
|
447
|
-
// let visible = this.getVisibleLayoutInfos(new Rect(point.x, point.y, 1, 1));
|
|
448
|
-
// if (visible.length > 0) {
|
|
449
|
-
// visible = visible.sort((a, b) => b.zIndex - a.zIndex);
|
|
450
|
-
// return {
|
|
451
|
-
// type: 'item',
|
|
452
|
-
// key: visible[0].key
|
|
453
|
-
// };
|
|
454
|
-
// }
|
|
455
|
-
// return null;
|
|
456
|
-
// }
|
|
457
|
-
// getDropTarget(point: Point): DropTarget {
|
|
458
|
-
// let key = this.virtualizer.keyAtPoint(point);
|
|
459
|
-
// if (key) {
|
|
460
|
-
// return {
|
|
461
|
-
// type: 'item',
|
|
462
|
-
// key,
|
|
463
|
-
// dropPosition: DropPosition.ON
|
|
464
|
-
// };
|
|
465
|
-
// }
|
|
466
|
-
// return null;
|
|
467
|
-
// }
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
getInitialLayoutInfo(layoutInfo) {
|
|
471
|
-
layoutInfo.opacity = 0;
|
|
472
|
-
layoutInfo.transform = 'scale3d(0.8, 0.8, 0.8)';
|
|
473
|
-
return layoutInfo;
|
|
474
|
-
}
|
|
475
|
-
|
|
476
|
-
getFinalLayoutInfo(layoutInfo) {
|
|
477
|
-
layoutInfo.opacity = 0;
|
|
478
|
-
layoutInfo.transform = 'scale3d(0.8, 0.8, 0.8)';
|
|
479
|
-
return layoutInfo;
|
|
480
|
-
}
|
|
481
|
-
|
|
482
345
|
}
|
|
483
346
|
|
|
484
|
-
exports.ListLayout = ListLayout;
|
|
485
|
-
|
|
486
|
-
class TableLayout extends ListLayout {
|
|
487
|
-
constructor(options) {
|
|
488
|
-
super(options);
|
|
489
|
-
this.collection = void 0;
|
|
490
|
-
this.lastCollection = void 0;
|
|
491
|
-
this.columnWidths = void 0;
|
|
492
|
-
this.stickyColumnIndices = void 0;
|
|
493
|
-
this.getDefaultWidth = void 0;
|
|
494
|
-
this.wasLoading = false;
|
|
495
|
-
this.isLoading = false;
|
|
496
|
-
this.getDefaultWidth = options.getDefaultWidth;
|
|
497
|
-
}
|
|
498
|
-
|
|
499
|
-
buildCollection() {
|
|
500
|
-
// If columns changed, clear layout cache.
|
|
501
|
-
if (!this.lastCollection || this.collection.columns.length !== this.lastCollection.columns.length || this.collection.columns.some((c, i) => c.key !== this.lastCollection.columns[i].key)) {
|
|
502
|
-
// Invalidate everything in this layout pass. Will be reset in ListLayout on the next pass.
|
|
503
|
-
this.invalidateEverything = true;
|
|
504
|
-
} // Track whether we were previously loading. This is used to adjust the animations of async loading vs inserts.
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
let loadingState = this.collection.body.props.loadingState;
|
|
508
|
-
this.wasLoading = this.isLoading;
|
|
509
|
-
this.isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
|
|
510
|
-
this.buildColumnWidths();
|
|
511
|
-
let header = this.buildHeader();
|
|
512
|
-
let body = this.buildBody(0);
|
|
513
|
-
body.layoutInfo.rect.width = Math.max(header.layoutInfo.rect.width, body.layoutInfo.rect.width);
|
|
514
|
-
this.contentSize = new Size(body.layoutInfo.rect.width, body.layoutInfo.rect.maxY);
|
|
515
|
-
return [header, body];
|
|
516
|
-
}
|
|
517
|
-
|
|
518
|
-
buildColumnWidths() {
|
|
519
|
-
this.columnWidths = new Map();
|
|
520
|
-
this.stickyColumnIndices = []; // Pass 1: set widths for all explicitly defined columns.
|
|
521
|
-
|
|
522
|
-
let remainingColumns = new Set();
|
|
523
|
-
let remainingSpace = this.virtualizer.visibleRect.width;
|
|
524
|
-
|
|
525
|
-
for (let column of this.collection.columns) {
|
|
526
|
-
var _props$width;
|
|
527
|
-
|
|
528
|
-
let props = column.props;
|
|
529
|
-
let width = (_props$width = props.width) != null ? _props$width : this.getDefaultWidth(props);
|
|
530
|
-
|
|
531
|
-
if (width != null) {
|
|
532
|
-
let w = this.parseWidth(width);
|
|
533
|
-
this.columnWidths.set(column.key, w);
|
|
534
|
-
remainingSpace -= w;
|
|
535
|
-
} else {
|
|
536
|
-
remainingColumns.add(column);
|
|
537
|
-
} // The selection cell and any other sticky columns always need to be visible.
|
|
538
|
-
// In addition, row headers need to be in the DOM for accessibility labeling.
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
if (column.props.isSelectionCell || this.collection.rowHeaderColumnKeys.has(column.key)) {
|
|
542
|
-
this.stickyColumnIndices.push(column.index);
|
|
543
|
-
}
|
|
544
|
-
} // Pass 2: if there are remaining columns, then distribute the remaining space evenly.
|
|
545
347
|
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
this.
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
348
|
+
var $df0363d94e6d34b1$exports = {};
|
|
349
|
+
|
|
350
|
+
$parcel$export($df0363d94e6d34b1$exports, "TableLayout", () => $df0363d94e6d34b1$export$62444c3c724b1b20);
|
|
351
|
+
|
|
352
|
+
|
|
353
|
+
class $df0363d94e6d34b1$export$62444c3c724b1b20 extends $aed36882df94379f$export$cacbb3924155d68e {
|
|
354
|
+
constructor(options){
|
|
355
|
+
super(options);
|
|
356
|
+
this.wasLoading = false;
|
|
357
|
+
this.isLoading = false;
|
|
358
|
+
this.getDefaultWidth = options.getDefaultWidth;
|
|
359
|
+
}
|
|
360
|
+
buildCollection() {
|
|
361
|
+
// If columns changed, clear layout cache.
|
|
362
|
+
if (!this.lastCollection || this.collection.columns.length !== this.lastCollection.columns.length || this.collection.columns.some((c, i)=>c.key !== this.lastCollection.columns[i].key
|
|
363
|
+
)) // Invalidate everything in this layout pass. Will be reset in ListLayout on the next pass.
|
|
364
|
+
this.invalidateEverything = true;
|
|
365
|
+
// Track whether we were previously loading. This is used to adjust the animations of async loading vs inserts.
|
|
366
|
+
let loadingState = this.collection.body.props.loadingState;
|
|
367
|
+
this.wasLoading = this.isLoading;
|
|
368
|
+
this.isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
|
|
369
|
+
this.buildColumnWidths();
|
|
370
|
+
let header = this.buildHeader();
|
|
371
|
+
let body = this.buildBody(0);
|
|
372
|
+
body.layoutInfo.rect.width = Math.max(header.layoutInfo.rect.width, body.layoutInfo.rect.width);
|
|
373
|
+
this.contentSize = new $bz2xS$reactstatelyvirtualizer.Size(body.layoutInfo.rect.width, body.layoutInfo.rect.maxY);
|
|
374
|
+
return [
|
|
375
|
+
header,
|
|
376
|
+
body
|
|
377
|
+
];
|
|
378
|
+
}
|
|
379
|
+
buildColumnWidths() {
|
|
380
|
+
this.columnWidths = new Map();
|
|
381
|
+
this.stickyColumnIndices = [];
|
|
382
|
+
// Pass 1: set widths for all explicitly defined columns.
|
|
383
|
+
let remainingColumns = new Set();
|
|
384
|
+
let remainingSpace = this.virtualizer.visibleRect.width;
|
|
385
|
+
for (let column of this.collection.columns){
|
|
386
|
+
let props = column.props;
|
|
387
|
+
let width = props.width ?? this.getDefaultWidth(props);
|
|
388
|
+
if (width != null) {
|
|
389
|
+
let w = this.parseWidth(width);
|
|
390
|
+
this.columnWidths.set(column.key, w);
|
|
391
|
+
remainingSpace -= w;
|
|
392
|
+
} else remainingColumns.add(column);
|
|
393
|
+
// The selection cell and any other sticky columns always need to be visible.
|
|
394
|
+
// In addition, row headers need to be in the DOM for accessibility labeling.
|
|
395
|
+
if (column.props.isSelectionCell || this.collection.rowHeaderColumnKeys.has(column.key)) this.stickyColumnIndices.push(column.index);
|
|
396
|
+
}
|
|
397
|
+
// Pass 2: if there are remaining columns, then distribute the remaining space evenly.
|
|
398
|
+
if (remainingColumns.size > 0) {
|
|
399
|
+
let columnWidth = remainingSpace / (this.collection.columns.length - this.columnWidths.size);
|
|
400
|
+
for (let column of remainingColumns){
|
|
401
|
+
let props = column.props;
|
|
402
|
+
let minWidth = props.minWidth != null ? this.parseWidth(props.minWidth) : 75;
|
|
403
|
+
let maxWidth = props.maxWidth != null ? this.parseWidth(props.maxWidth) : Infinity;
|
|
404
|
+
let width = Math.max(minWidth, Math.min(maxWidth, columnWidth));
|
|
405
|
+
this.columnWidths.set(column.key, width);
|
|
406
|
+
remainingSpace -= width;
|
|
407
|
+
if (width !== columnWidth) columnWidth = remainingSpace / (this.collection.columns.length - this.columnWidths.size);
|
|
408
|
+
}
|
|
560
409
|
}
|
|
561
|
-
}
|
|
562
|
-
}
|
|
563
|
-
}
|
|
564
|
-
|
|
565
|
-
parseWidth(width) {
|
|
566
|
-
if (typeof width === 'string') {
|
|
567
|
-
let match = width.match(/^(\d+)%$/);
|
|
568
|
-
|
|
569
|
-
if (!match) {
|
|
570
|
-
throw new Error('Only percentages are supported as column widths');
|
|
571
|
-
}
|
|
572
|
-
|
|
573
|
-
return this.virtualizer.visibleRect.width * (parseInt(match[1], 10) / 100);
|
|
574
|
-
}
|
|
575
|
-
|
|
576
|
-
return width;
|
|
577
|
-
}
|
|
578
|
-
|
|
579
|
-
buildHeader() {
|
|
580
|
-
let rect = new Rect(0, 0, 0, 0);
|
|
581
|
-
let layoutInfo = new LayoutInfo('header', 'header', rect);
|
|
582
|
-
let y = 0;
|
|
583
|
-
let width = 0;
|
|
584
|
-
let children = [];
|
|
585
|
-
|
|
586
|
-
for (let headerRow of this.collection.headerRows) {
|
|
587
|
-
let layoutNode = this.buildChild(headerRow, 0, y);
|
|
588
|
-
layoutNode.layoutInfo.parentKey = 'header';
|
|
589
|
-
y = layoutNode.layoutInfo.rect.maxY;
|
|
590
|
-
width = Math.max(width, layoutNode.layoutInfo.rect.width);
|
|
591
|
-
children.push(layoutNode);
|
|
592
|
-
}
|
|
593
|
-
|
|
594
|
-
rect.width = width;
|
|
595
|
-
rect.height = y;
|
|
596
|
-
this.layoutInfos.set('header', layoutInfo);
|
|
597
|
-
return {
|
|
598
|
-
layoutInfo,
|
|
599
|
-
children
|
|
600
|
-
};
|
|
601
|
-
}
|
|
602
|
-
|
|
603
|
-
buildHeaderRow(headerRow, x, y) {
|
|
604
|
-
let rect = new Rect(0, y, 0, 0);
|
|
605
|
-
let row = new LayoutInfo('headerrow', headerRow.key, rect);
|
|
606
|
-
let height = 0;
|
|
607
|
-
let columns = [];
|
|
608
|
-
|
|
609
|
-
for (let cell of headerRow.childNodes) {
|
|
610
|
-
let layoutNode = this.buildChild(cell, x, y);
|
|
611
|
-
layoutNode.layoutInfo.parentKey = row.key;
|
|
612
|
-
x = layoutNode.layoutInfo.rect.maxX;
|
|
613
|
-
height = Math.max(height, layoutNode.layoutInfo.rect.height);
|
|
614
|
-
columns.push(layoutNode);
|
|
615
|
-
}
|
|
616
|
-
|
|
617
|
-
this.setChildHeights(columns, height);
|
|
618
|
-
rect.height = height;
|
|
619
|
-
rect.width = x;
|
|
620
|
-
return {
|
|
621
|
-
layoutInfo: row,
|
|
622
|
-
children: columns
|
|
623
|
-
};
|
|
624
|
-
}
|
|
625
|
-
|
|
626
|
-
setChildHeights(children, height) {
|
|
627
|
-
for (let child of children) {
|
|
628
|
-
if (child.layoutInfo.rect.height !== height) {
|
|
629
|
-
// Need to copy the layout info before we mutate it.
|
|
630
|
-
child.layoutInfo = child.layoutInfo.copy();
|
|
631
|
-
this.layoutInfos.set(child.layoutInfo.key, child.layoutInfo);
|
|
632
|
-
child.layoutInfo.rect.height = height;
|
|
633
|
-
}
|
|
634
|
-
}
|
|
635
|
-
}
|
|
636
|
-
|
|
637
|
-
getColumnWidth(node) {
|
|
638
|
-
var _node$colspan;
|
|
639
|
-
|
|
640
|
-
let colspan = (_node$colspan = node.colspan) != null ? _node$colspan : 1;
|
|
641
|
-
let width = 0;
|
|
642
|
-
|
|
643
|
-
for (let i = 0; i < colspan; i++) {
|
|
644
|
-
let column = this.collection.columns[node.index + i];
|
|
645
|
-
width += this.columnWidths.get(column.key);
|
|
646
|
-
}
|
|
647
|
-
|
|
648
|
-
return width;
|
|
649
|
-
}
|
|
650
|
-
|
|
651
|
-
getEstimatedHeight(node, width, height, estimatedHeight) {
|
|
652
|
-
let isEstimated = false; // If no explicit height is available, use an estimated height.
|
|
653
|
-
|
|
654
|
-
if (height == null) {
|
|
655
|
-
// If a previous version of this layout info exists, reuse its height.
|
|
656
|
-
// Mark as estimated if the size of the overall collection view changed,
|
|
657
|
-
// or the content of the item changed.
|
|
658
|
-
let previousLayoutNode = this.layoutNodes.get(node.key);
|
|
659
|
-
|
|
660
|
-
if (previousLayoutNode) {
|
|
661
|
-
let curNode = this.collection.getItem(node.key);
|
|
662
|
-
let lastNode = this.lastCollection ? this.lastCollection.getItem(node.key) : null;
|
|
663
|
-
height = previousLayoutNode.layoutInfo.rect.height;
|
|
664
|
-
isEstimated = curNode !== lastNode || width !== previousLayoutNode.layoutInfo.rect.width || previousLayoutNode.layoutInfo.estimatedSize;
|
|
665
|
-
} else {
|
|
666
|
-
height = estimatedHeight;
|
|
667
|
-
isEstimated = true;
|
|
668
|
-
}
|
|
669
|
-
}
|
|
670
|
-
|
|
671
|
-
return {
|
|
672
|
-
height,
|
|
673
|
-
isEstimated
|
|
674
|
-
};
|
|
675
|
-
}
|
|
676
|
-
|
|
677
|
-
buildColumn(node, x, y) {
|
|
678
|
-
var _node$props;
|
|
679
|
-
|
|
680
|
-
let width = this.getColumnWidth(node);
|
|
681
|
-
let {
|
|
682
|
-
height,
|
|
683
|
-
isEstimated
|
|
684
|
-
} = this.getEstimatedHeight(node, width, this.headingHeight, this.estimatedHeadingHeight);
|
|
685
|
-
let rect = new Rect(x, y, width, height);
|
|
686
|
-
let layoutInfo = new LayoutInfo(node.type, node.key, rect);
|
|
687
|
-
layoutInfo.isSticky = (_node$props = node.props) == null ? void 0 : _node$props.isSelectionCell;
|
|
688
|
-
layoutInfo.zIndex = layoutInfo.isSticky ? 2 : 1;
|
|
689
|
-
layoutInfo.estimatedSize = isEstimated;
|
|
690
|
-
return {
|
|
691
|
-
layoutInfo
|
|
692
|
-
};
|
|
693
|
-
}
|
|
694
|
-
|
|
695
|
-
buildBody(y) {
|
|
696
|
-
let rect = new Rect(0, y, 0, 0);
|
|
697
|
-
let layoutInfo = new LayoutInfo('rowgroup', 'body', rect);
|
|
698
|
-
let startY = y;
|
|
699
|
-
let width = 0;
|
|
700
|
-
let children = [];
|
|
701
|
-
|
|
702
|
-
for (let node of this.collection.body.childNodes) {
|
|
703
|
-
let layoutNode = this.buildChild(node, 0, y);
|
|
704
|
-
layoutNode.layoutInfo.parentKey = 'body';
|
|
705
|
-
y = layoutNode.layoutInfo.rect.maxY;
|
|
706
|
-
width = Math.max(width, layoutNode.layoutInfo.rect.width);
|
|
707
|
-
children.push(layoutNode);
|
|
708
|
-
}
|
|
709
|
-
|
|
710
|
-
if (this.isLoading) {
|
|
711
|
-
let rect = new Rect(0, y, width || this.virtualizer.visibleRect.width, children.length === 0 ? this.virtualizer.visibleRect.height : 60);
|
|
712
|
-
let loader = new LayoutInfo('loader', 'loader', rect);
|
|
713
|
-
loader.parentKey = 'body';
|
|
714
|
-
loader.isSticky = children.length === 0;
|
|
715
|
-
this.layoutInfos.set('loader', loader);
|
|
716
|
-
children.push({
|
|
717
|
-
layoutInfo: loader
|
|
718
|
-
});
|
|
719
|
-
y = loader.rect.maxY;
|
|
720
|
-
width = Math.max(width, rect.width);
|
|
721
|
-
} else if (children.length === 0) {
|
|
722
|
-
let rect = new Rect(0, y, this.virtualizer.visibleRect.width, this.virtualizer.visibleRect.height);
|
|
723
|
-
let empty = new LayoutInfo('empty', 'empty', rect);
|
|
724
|
-
empty.parentKey = 'body';
|
|
725
|
-
empty.isSticky = true;
|
|
726
|
-
this.layoutInfos.set('empty', empty);
|
|
727
|
-
children.push({
|
|
728
|
-
layoutInfo: empty
|
|
729
|
-
});
|
|
730
|
-
y = empty.rect.maxY;
|
|
731
|
-
width = Math.max(width, rect.width);
|
|
732
|
-
}
|
|
733
|
-
|
|
734
|
-
rect.width = width;
|
|
735
|
-
rect.height = y - startY;
|
|
736
|
-
this.layoutInfos.set('body', layoutInfo);
|
|
737
|
-
return {
|
|
738
|
-
layoutInfo,
|
|
739
|
-
children
|
|
740
|
-
};
|
|
741
|
-
}
|
|
742
|
-
|
|
743
|
-
buildNode(node, x, y) {
|
|
744
|
-
switch (node.type) {
|
|
745
|
-
case 'headerrow':
|
|
746
|
-
return this.buildHeaderRow(node, x, y);
|
|
747
|
-
|
|
748
|
-
case 'item':
|
|
749
|
-
return this.buildRow(node, x, y);
|
|
750
|
-
|
|
751
|
-
case 'column':
|
|
752
|
-
case 'placeholder':
|
|
753
|
-
return this.buildColumn(node, x, y);
|
|
754
|
-
|
|
755
|
-
case 'cell':
|
|
756
|
-
return this.buildCell(node, x, y);
|
|
757
|
-
|
|
758
|
-
default:
|
|
759
|
-
throw new Error('Unknown node type ' + node.type);
|
|
760
|
-
}
|
|
761
|
-
}
|
|
762
|
-
|
|
763
|
-
buildRow(node, x, y) {
|
|
764
|
-
let rect = new Rect(x, y, 0, 0);
|
|
765
|
-
let layoutInfo = new LayoutInfo('row', node.key, rect);
|
|
766
|
-
let children = [];
|
|
767
|
-
let height = 0;
|
|
768
|
-
|
|
769
|
-
for (let child of node.childNodes) {
|
|
770
|
-
let layoutNode = this.buildChild(child, x, y);
|
|
771
|
-
x = layoutNode.layoutInfo.rect.maxX;
|
|
772
|
-
height = Math.max(height, layoutNode.layoutInfo.rect.height);
|
|
773
|
-
children.push(layoutNode);
|
|
774
410
|
}
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
411
|
+
parseWidth(width) {
|
|
412
|
+
if (typeof width === 'string') {
|
|
413
|
+
let match = width.match(/^(\d+)%$/);
|
|
414
|
+
if (!match) throw new Error('Only percentages are supported as column widths');
|
|
415
|
+
return this.virtualizer.visibleRect.width * (parseInt(match[1], 10) / 100);
|
|
416
|
+
}
|
|
417
|
+
return width;
|
|
418
|
+
}
|
|
419
|
+
buildHeader() {
|
|
420
|
+
let rect = new $bz2xS$reactstatelyvirtualizer.Rect(0, 0, 0, 0);
|
|
421
|
+
let layoutInfo = new $bz2xS$reactstatelyvirtualizer.LayoutInfo('header', 'header', rect);
|
|
422
|
+
let y = 0;
|
|
423
|
+
let width = 0;
|
|
424
|
+
let children = [];
|
|
425
|
+
for (let headerRow of this.collection.headerRows){
|
|
426
|
+
let layoutNode = this.buildChild(headerRow, 0, y);
|
|
427
|
+
layoutNode.layoutInfo.parentKey = 'header';
|
|
428
|
+
y = layoutNode.layoutInfo.rect.maxY;
|
|
429
|
+
width = Math.max(width, layoutNode.layoutInfo.rect.width);
|
|
430
|
+
children.push(layoutNode);
|
|
431
|
+
}
|
|
432
|
+
rect.width = width;
|
|
433
|
+
rect.height = y;
|
|
434
|
+
this.layoutInfos.set('header', layoutInfo);
|
|
435
|
+
return {
|
|
436
|
+
layoutInfo: layoutInfo,
|
|
437
|
+
children: children
|
|
438
|
+
};
|
|
439
|
+
}
|
|
440
|
+
buildHeaderRow(headerRow, x, y) {
|
|
441
|
+
let rect = new $bz2xS$reactstatelyvirtualizer.Rect(0, y, 0, 0);
|
|
442
|
+
let row = new $bz2xS$reactstatelyvirtualizer.LayoutInfo('headerrow', headerRow.key, rect);
|
|
443
|
+
let height = 0;
|
|
444
|
+
let columns = [];
|
|
445
|
+
for (let cell of headerRow.childNodes){
|
|
446
|
+
let layoutNode = this.buildChild(cell, x, y);
|
|
447
|
+
layoutNode.layoutInfo.parentKey = row.key;
|
|
448
|
+
x = layoutNode.layoutInfo.rect.maxX;
|
|
449
|
+
height = Math.max(height, layoutNode.layoutInfo.rect.height);
|
|
450
|
+
columns.push(layoutNode);
|
|
451
|
+
}
|
|
452
|
+
this.setChildHeights(columns, height);
|
|
453
|
+
rect.height = height;
|
|
454
|
+
rect.width = x;
|
|
455
|
+
return {
|
|
456
|
+
layoutInfo: row,
|
|
457
|
+
children: columns
|
|
458
|
+
};
|
|
459
|
+
}
|
|
460
|
+
setChildHeights(children, height) {
|
|
461
|
+
for (let child of children)if (child.layoutInfo.rect.height !== height) {
|
|
462
|
+
// Need to copy the layout info before we mutate it.
|
|
463
|
+
child.layoutInfo = child.layoutInfo.copy();
|
|
464
|
+
this.layoutInfos.set(child.layoutInfo.key, child.layoutInfo);
|
|
465
|
+
child.layoutInfo.rect.height = height;
|
|
466
|
+
}
|
|
810
467
|
}
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
468
|
+
getColumnWidth(node) {
|
|
469
|
+
let colspan = node.colspan ?? 1;
|
|
470
|
+
let width = 0;
|
|
471
|
+
for(let i = 0; i < colspan; i++){
|
|
472
|
+
let column = this.collection.columns[node.index + i];
|
|
473
|
+
width += this.columnWidths.get(column.key);
|
|
474
|
+
}
|
|
475
|
+
return width;
|
|
476
|
+
}
|
|
477
|
+
getEstimatedHeight(node, width, height, estimatedHeight) {
|
|
478
|
+
let isEstimated = false;
|
|
479
|
+
// If no explicit height is available, use an estimated height.
|
|
480
|
+
if (height == null) {
|
|
481
|
+
// If a previous version of this layout info exists, reuse its height.
|
|
482
|
+
// Mark as estimated if the size of the overall collection view changed,
|
|
483
|
+
// or the content of the item changed.
|
|
484
|
+
let previousLayoutNode = this.layoutNodes.get(node.key);
|
|
485
|
+
if (previousLayoutNode) {
|
|
486
|
+
let curNode = this.collection.getItem(node.key);
|
|
487
|
+
let lastNode = this.lastCollection ? this.lastCollection.getItem(node.key) : null;
|
|
488
|
+
height = previousLayoutNode.layoutInfo.rect.height;
|
|
489
|
+
isEstimated = curNode !== lastNode || width !== previousLayoutNode.layoutInfo.rect.width || previousLayoutNode.layoutInfo.estimatedSize;
|
|
490
|
+
} else {
|
|
491
|
+
height = estimatedHeight;
|
|
492
|
+
isEstimated = true;
|
|
493
|
+
}
|
|
494
|
+
}
|
|
495
|
+
return {
|
|
496
|
+
height: height,
|
|
497
|
+
isEstimated: isEstimated
|
|
498
|
+
};
|
|
499
|
+
}
|
|
500
|
+
buildColumn(node, x, y) {
|
|
501
|
+
let width = this.getColumnWidth(node);
|
|
502
|
+
let { height: height , isEstimated: isEstimated } = this.getEstimatedHeight(node, width, this.headingHeight, this.estimatedHeadingHeight);
|
|
503
|
+
let rect = new $bz2xS$reactstatelyvirtualizer.Rect(x, y, width, height);
|
|
504
|
+
let layoutInfo = new $bz2xS$reactstatelyvirtualizer.LayoutInfo(node.type, node.key, rect);
|
|
505
|
+
layoutInfo.isSticky = node.props?.isSelectionCell;
|
|
506
|
+
layoutInfo.zIndex = layoutInfo.isSticky ? 2 : 1;
|
|
507
|
+
layoutInfo.estimatedSize = isEstimated;
|
|
508
|
+
return {
|
|
509
|
+
layoutInfo: layoutInfo
|
|
510
|
+
};
|
|
511
|
+
}
|
|
512
|
+
buildBody(y) {
|
|
513
|
+
let rect = new $bz2xS$reactstatelyvirtualizer.Rect(0, y, 0, 0);
|
|
514
|
+
let layoutInfo = new $bz2xS$reactstatelyvirtualizer.LayoutInfo('rowgroup', 'body', rect);
|
|
515
|
+
let startY = y;
|
|
516
|
+
let width = 0;
|
|
517
|
+
let children = [];
|
|
518
|
+
for (let node of this.collection.body.childNodes){
|
|
519
|
+
let layoutNode = this.buildChild(node, 0, y);
|
|
520
|
+
layoutNode.layoutInfo.parentKey = 'body';
|
|
521
|
+
y = layoutNode.layoutInfo.rect.maxY;
|
|
522
|
+
width = Math.max(width, layoutNode.layoutInfo.rect.width);
|
|
523
|
+
children.push(layoutNode);
|
|
524
|
+
}
|
|
525
|
+
if (this.isLoading) {
|
|
526
|
+
let rect = new $bz2xS$reactstatelyvirtualizer.Rect(0, y, width || this.virtualizer.visibleRect.width, children.length === 0 ? this.virtualizer.visibleRect.height : 60);
|
|
527
|
+
let loader = new $bz2xS$reactstatelyvirtualizer.LayoutInfo('loader', 'loader', rect);
|
|
528
|
+
loader.parentKey = 'body';
|
|
529
|
+
loader.isSticky = children.length === 0;
|
|
530
|
+
this.layoutInfos.set('loader', loader);
|
|
531
|
+
children.push({
|
|
532
|
+
layoutInfo: loader
|
|
533
|
+
});
|
|
534
|
+
y = loader.rect.maxY;
|
|
535
|
+
width = Math.max(width, rect.width);
|
|
536
|
+
} else if (children.length === 0) {
|
|
537
|
+
let rect = new $bz2xS$reactstatelyvirtualizer.Rect(0, y, this.virtualizer.visibleRect.width, this.virtualizer.visibleRect.height);
|
|
538
|
+
let empty = new $bz2xS$reactstatelyvirtualizer.LayoutInfo('empty', 'empty', rect);
|
|
539
|
+
empty.parentKey = 'body';
|
|
540
|
+
empty.isSticky = true;
|
|
541
|
+
this.layoutInfos.set('empty', empty);
|
|
542
|
+
children.push({
|
|
543
|
+
layoutInfo: empty
|
|
544
|
+
});
|
|
545
|
+
y = empty.rect.maxY;
|
|
546
|
+
width = Math.max(width, rect.width);
|
|
547
|
+
}
|
|
548
|
+
rect.width = width;
|
|
549
|
+
rect.height = y - startY;
|
|
550
|
+
this.layoutInfos.set('body', layoutInfo);
|
|
551
|
+
return {
|
|
552
|
+
layoutInfo: layoutInfo,
|
|
553
|
+
children: children
|
|
554
|
+
};
|
|
555
|
+
}
|
|
556
|
+
buildNode(node, x, y) {
|
|
557
|
+
switch(node.type){
|
|
558
|
+
case 'headerrow':
|
|
559
|
+
return this.buildHeaderRow(node, x, y);
|
|
560
|
+
case 'item':
|
|
561
|
+
return this.buildRow(node, x, y);
|
|
562
|
+
case 'column':
|
|
563
|
+
case 'placeholder':
|
|
564
|
+
return this.buildColumn(node, x, y);
|
|
565
|
+
case 'cell':
|
|
566
|
+
return this.buildCell(node, x, y);
|
|
567
|
+
default:
|
|
568
|
+
throw new Error('Unknown node type ' + node.type);
|
|
569
|
+
}
|
|
818
570
|
}
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
this.
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
571
|
+
buildRow(node, x, y) {
|
|
572
|
+
let rect = new $bz2xS$reactstatelyvirtualizer.Rect(x, y, 0, 0);
|
|
573
|
+
let layoutInfo = new $bz2xS$reactstatelyvirtualizer.LayoutInfo('row', node.key, rect);
|
|
574
|
+
let children = [];
|
|
575
|
+
let height = 0;
|
|
576
|
+
for (let child of node.childNodes){
|
|
577
|
+
let layoutNode = this.buildChild(child, x, y);
|
|
578
|
+
x = layoutNode.layoutInfo.rect.maxX;
|
|
579
|
+
height = Math.max(height, layoutNode.layoutInfo.rect.height);
|
|
580
|
+
children.push(layoutNode);
|
|
829
581
|
}
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
582
|
+
this.setChildHeights(children, height);
|
|
583
|
+
rect.width = x;
|
|
584
|
+
rect.height = height + 1; // +1 for bottom border
|
|
585
|
+
return {
|
|
586
|
+
layoutInfo: layoutInfo,
|
|
587
|
+
children: children
|
|
588
|
+
};
|
|
589
|
+
}
|
|
590
|
+
buildCell(node, x, y) {
|
|
591
|
+
let width = this.getColumnWidth(node);
|
|
592
|
+
let { height: height , isEstimated: isEstimated } = this.getEstimatedHeight(node, width, this.rowHeight, this.estimatedRowHeight);
|
|
593
|
+
let rect = new $bz2xS$reactstatelyvirtualizer.Rect(x, y, width, height);
|
|
594
|
+
let layoutInfo = new $bz2xS$reactstatelyvirtualizer.LayoutInfo(node.type, node.key, rect);
|
|
595
|
+
layoutInfo.isSticky = node.props?.isSelectionCell;
|
|
596
|
+
layoutInfo.zIndex = layoutInfo.isSticky ? 2 : 1;
|
|
597
|
+
layoutInfo.estimatedSize = isEstimated;
|
|
598
|
+
return {
|
|
599
|
+
layoutInfo: layoutInfo
|
|
600
|
+
};
|
|
601
|
+
}
|
|
602
|
+
getVisibleLayoutInfos(rect) {
|
|
603
|
+
let res = [];
|
|
604
|
+
for (let node of this.rootNodes){
|
|
605
|
+
res.push(node.layoutInfo);
|
|
606
|
+
this.addVisibleLayoutInfos(res, node, rect);
|
|
842
607
|
}
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
608
|
+
return res;
|
|
609
|
+
}
|
|
610
|
+
addVisibleLayoutInfos(res, node, rect) {
|
|
611
|
+
if (!node.children || node.children.length === 0) return;
|
|
612
|
+
switch(node.layoutInfo.type){
|
|
613
|
+
case 'header':
|
|
614
|
+
for (let child of node.children){
|
|
615
|
+
res.push(child.layoutInfo);
|
|
616
|
+
this.addVisibleLayoutInfos(res, child, rect);
|
|
617
|
+
}
|
|
618
|
+
break;
|
|
619
|
+
case 'rowgroup':
|
|
620
|
+
{
|
|
621
|
+
let firstVisibleRow = this.binarySearch(node.children, rect.topLeft, 'y');
|
|
622
|
+
let lastVisibleRow = this.binarySearch(node.children, rect.bottomRight, 'y');
|
|
623
|
+
for(let i = firstVisibleRow; i <= lastVisibleRow; i++){
|
|
624
|
+
res.push(node.children[i].layoutInfo);
|
|
625
|
+
this.addVisibleLayoutInfos(res, node.children[i], rect);
|
|
626
|
+
}
|
|
627
|
+
break;
|
|
628
|
+
}
|
|
629
|
+
case 'headerrow':
|
|
630
|
+
case 'row':
|
|
631
|
+
{
|
|
632
|
+
let firstVisibleCell = this.binarySearch(node.children, rect.topLeft, 'x');
|
|
633
|
+
let lastVisibleCell = this.binarySearch(node.children, rect.topRight, 'x');
|
|
634
|
+
let stickyIndex = 0;
|
|
635
|
+
for(let i = firstVisibleCell; i <= lastVisibleCell; i++){
|
|
636
|
+
// Sticky columns and row headers are always in the DOM. Interleave these
|
|
637
|
+
// with the visible range so that they are in the right order.
|
|
638
|
+
if (stickyIndex < this.stickyColumnIndices.length) {
|
|
639
|
+
let idx = this.stickyColumnIndices[stickyIndex];
|
|
640
|
+
while(idx < i){
|
|
641
|
+
res.push(node.children[idx].layoutInfo);
|
|
642
|
+
idx = this.stickyColumnIndices[stickyIndex++];
|
|
643
|
+
}
|
|
644
|
+
}
|
|
645
|
+
res.push(node.children[i].layoutInfo);
|
|
646
|
+
}
|
|
647
|
+
while(stickyIndex < this.stickyColumnIndices.length){
|
|
648
|
+
let idx = this.stickyColumnIndices[stickyIndex++];
|
|
649
|
+
res.push(node.children[idx].layoutInfo);
|
|
650
|
+
}
|
|
651
|
+
break;
|
|
652
|
+
}
|
|
653
|
+
default:
|
|
654
|
+
throw new Error('Unknown node type ' + node.layoutInfo.type);
|
|
872
655
|
}
|
|
873
|
-
|
|
874
|
-
default:
|
|
875
|
-
throw new Error('Unknown node type ' + node.layoutInfo.type);
|
|
876
656
|
}
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
low = mid + 1;
|
|
889
|
-
} else if (axis === 'x' && item.layoutInfo.rect.x > point.x || axis === 'y' && item.layoutInfo.rect.y > point.y) {
|
|
890
|
-
high = mid - 1;
|
|
891
|
-
} else {
|
|
892
|
-
return mid;
|
|
893
|
-
}
|
|
657
|
+
binarySearch(items, point, axis) {
|
|
658
|
+
let low = 0;
|
|
659
|
+
let high = items.length - 1;
|
|
660
|
+
while(low <= high){
|
|
661
|
+
let mid = low + high >> 1;
|
|
662
|
+
let item = items[mid];
|
|
663
|
+
if (axis === 'x' && item.layoutInfo.rect.maxX < point.x || axis === 'y' && item.layoutInfo.rect.maxY < point.y) low = mid + 1;
|
|
664
|
+
else if (axis === 'x' && item.layoutInfo.rect.x > point.x || axis === 'y' && item.layoutInfo.rect.y > point.y) high = mid - 1;
|
|
665
|
+
else return mid;
|
|
666
|
+
}
|
|
667
|
+
return Math.max(0, Math.min(items.length - 1, low));
|
|
894
668
|
}
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
let res = super.getInitialLayoutInfo(layoutInfo); // If this insert was the result of async loading, remove the zoom effect and just keep the fade in.
|
|
901
|
-
|
|
902
|
-
if (this.wasLoading) {
|
|
903
|
-
res.transform = null;
|
|
669
|
+
getInitialLayoutInfo(layoutInfo) {
|
|
670
|
+
let res = super.getInitialLayoutInfo(layoutInfo);
|
|
671
|
+
// If this insert was the result of async loading, remove the zoom effect and just keep the fade in.
|
|
672
|
+
if (this.wasLoading) res.transform = null;
|
|
673
|
+
return res;
|
|
904
674
|
}
|
|
675
|
+
}
|
|
905
676
|
|
|
906
|
-
return res;
|
|
907
|
-
}
|
|
908
677
|
|
|
909
|
-
|
|
678
|
+
$parcel$exportWildcard(module.exports, $aed36882df94379f$exports);
|
|
679
|
+
$parcel$exportWildcard(module.exports, $df0363d94e6d34b1$exports);
|
|
680
|
+
|
|
910
681
|
|
|
911
|
-
exports.TableLayout = TableLayout;
|
|
912
682
|
//# sourceMappingURL=main.js.map
|