@tanstack/virtual-core 3.0.4 → 3.1.0
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/cjs/index.cjs +645 -0
- package/dist/cjs/index.cjs.map +1 -0
- package/dist/cjs/index.d.cts +126 -0
- package/dist/cjs/utils.cjs +59 -0
- package/dist/cjs/utils.cjs.map +1 -0
- package/{build/lib → dist/esm}/index.d.ts +1 -1
- package/dist/esm/index.js +645 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/esm/utils.d.ts +10 -0
- package/dist/esm/utils.js +59 -0
- package/dist/esm/utils.js.map +1 -0
- package/package.json +33 -23
- package/src/index.ts +18 -21
- package/build/lib/_virtual/_rollupPluginBabelHelpers.esm.js +0 -27
- package/build/lib/_virtual/_rollupPluginBabelHelpers.esm.js.map +0 -1
- package/build/lib/_virtual/_rollupPluginBabelHelpers.js +0 -31
- package/build/lib/_virtual/_rollupPluginBabelHelpers.js.map +0 -1
- package/build/lib/_virtual/_rollupPluginBabelHelpers.mjs +0 -27
- package/build/lib/_virtual/_rollupPluginBabelHelpers.mjs.map +0 -1
- package/build/lib/index.esm.js +0 -653
- package/build/lib/index.esm.js.map +0 -1
- package/build/lib/index.js +0 -668
- package/build/lib/index.js.map +0 -1
- package/build/lib/index.mjs +0 -653
- package/build/lib/index.mjs.map +0 -1
- package/build/lib/utils.esm.js +0 -58
- package/build/lib/utils.esm.js.map +0 -1
- package/build/lib/utils.js +0 -64
- package/build/lib/utils.js.map +0 -1
- package/build/lib/utils.mjs +0 -58
- package/build/lib/utils.mjs.map +0 -1
- package/build/umd/index.development.js +0 -732
- package/build/umd/index.development.js.map +0 -1
- package/build/umd/index.production.js +0 -12
- package/build/umd/index.production.js.map +0 -1
- /package/{build/lib/utils.d.ts → dist/cjs/utils.d.cts} +0 -0
package/build/lib/index.esm.js
DELETED
|
@@ -1,653 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* virtual-core
|
|
3
|
-
*
|
|
4
|
-
* Copyright (c) TanStack
|
|
5
|
-
*
|
|
6
|
-
* This source code is licensed under the MIT license found in the
|
|
7
|
-
* LICENSE.md file in the root directory of this source tree.
|
|
8
|
-
*
|
|
9
|
-
* @license MIT
|
|
10
|
-
*/
|
|
11
|
-
import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.esm.js';
|
|
12
|
-
import { memo, notUndefined, approxEqual } from './utils.esm.js';
|
|
13
|
-
export { approxEqual, memo, notUndefined } from './utils.esm.js';
|
|
14
|
-
|
|
15
|
-
//
|
|
16
|
-
|
|
17
|
-
//
|
|
18
|
-
|
|
19
|
-
var defaultKeyExtractor = function defaultKeyExtractor(index) {
|
|
20
|
-
return index;
|
|
21
|
-
};
|
|
22
|
-
var defaultRangeExtractor = function defaultRangeExtractor(range) {
|
|
23
|
-
var start = Math.max(range.startIndex - range.overscan, 0);
|
|
24
|
-
var end = Math.min(range.endIndex + range.overscan, range.count - 1);
|
|
25
|
-
var arr = [];
|
|
26
|
-
for (var _i = start; _i <= end; _i++) {
|
|
27
|
-
arr.push(_i);
|
|
28
|
-
}
|
|
29
|
-
return arr;
|
|
30
|
-
};
|
|
31
|
-
var observeElementRect = function observeElementRect(instance, cb) {
|
|
32
|
-
var element = instance.scrollElement;
|
|
33
|
-
if (!element) {
|
|
34
|
-
return;
|
|
35
|
-
}
|
|
36
|
-
var handler = function handler(rect) {
|
|
37
|
-
var width = rect.width,
|
|
38
|
-
height = rect.height;
|
|
39
|
-
cb({
|
|
40
|
-
width: Math.round(width),
|
|
41
|
-
height: Math.round(height)
|
|
42
|
-
});
|
|
43
|
-
};
|
|
44
|
-
handler(element.getBoundingClientRect());
|
|
45
|
-
var observer = new ResizeObserver(function (entries) {
|
|
46
|
-
var entry = entries[0];
|
|
47
|
-
if (entry != null && entry.borderBoxSize) {
|
|
48
|
-
var box = entry.borderBoxSize[0];
|
|
49
|
-
if (box) {
|
|
50
|
-
handler({
|
|
51
|
-
width: box.inlineSize,
|
|
52
|
-
height: box.blockSize
|
|
53
|
-
});
|
|
54
|
-
return;
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
handler(element.getBoundingClientRect());
|
|
58
|
-
});
|
|
59
|
-
observer.observe(element, {
|
|
60
|
-
box: 'border-box'
|
|
61
|
-
});
|
|
62
|
-
return function () {
|
|
63
|
-
observer.unobserve(element);
|
|
64
|
-
};
|
|
65
|
-
};
|
|
66
|
-
var observeWindowRect = function observeWindowRect(instance, cb) {
|
|
67
|
-
var element = instance.scrollElement;
|
|
68
|
-
if (!element) {
|
|
69
|
-
return;
|
|
70
|
-
}
|
|
71
|
-
var handler = function handler() {
|
|
72
|
-
cb({
|
|
73
|
-
width: element.innerWidth,
|
|
74
|
-
height: element.innerHeight
|
|
75
|
-
});
|
|
76
|
-
};
|
|
77
|
-
handler();
|
|
78
|
-
element.addEventListener('resize', handler, {
|
|
79
|
-
passive: true
|
|
80
|
-
});
|
|
81
|
-
return function () {
|
|
82
|
-
element.removeEventListener('resize', handler);
|
|
83
|
-
};
|
|
84
|
-
};
|
|
85
|
-
var observeElementOffset = function observeElementOffset(instance, cb) {
|
|
86
|
-
var element = instance.scrollElement;
|
|
87
|
-
if (!element) {
|
|
88
|
-
return;
|
|
89
|
-
}
|
|
90
|
-
var handler = function handler() {
|
|
91
|
-
cb(element[instance.options.horizontal ? 'scrollLeft' : 'scrollTop']);
|
|
92
|
-
};
|
|
93
|
-
handler();
|
|
94
|
-
element.addEventListener('scroll', handler, {
|
|
95
|
-
passive: true
|
|
96
|
-
});
|
|
97
|
-
return function () {
|
|
98
|
-
element.removeEventListener('scroll', handler);
|
|
99
|
-
};
|
|
100
|
-
};
|
|
101
|
-
var observeWindowOffset = function observeWindowOffset(instance, cb) {
|
|
102
|
-
var element = instance.scrollElement;
|
|
103
|
-
if (!element) {
|
|
104
|
-
return;
|
|
105
|
-
}
|
|
106
|
-
var handler = function handler() {
|
|
107
|
-
cb(element[instance.options.horizontal ? 'scrollX' : 'scrollY']);
|
|
108
|
-
};
|
|
109
|
-
handler();
|
|
110
|
-
element.addEventListener('scroll', handler, {
|
|
111
|
-
passive: true
|
|
112
|
-
});
|
|
113
|
-
return function () {
|
|
114
|
-
element.removeEventListener('scroll', handler);
|
|
115
|
-
};
|
|
116
|
-
};
|
|
117
|
-
var measureElement = function measureElement(element, entry, instance) {
|
|
118
|
-
if (entry != null && entry.borderBoxSize) {
|
|
119
|
-
var box = entry.borderBoxSize[0];
|
|
120
|
-
if (box) {
|
|
121
|
-
var size = Math.round(box[instance.options.horizontal ? 'inlineSize' : 'blockSize']);
|
|
122
|
-
return size;
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
return Math.round(element.getBoundingClientRect()[instance.options.horizontal ? 'width' : 'height']);
|
|
126
|
-
};
|
|
127
|
-
var windowScroll = function windowScroll(offset, _ref, instance) {
|
|
128
|
-
var _instance$scrollEleme, _instance$scrollEleme2;
|
|
129
|
-
var _ref$adjustments = _ref.adjustments,
|
|
130
|
-
adjustments = _ref$adjustments === void 0 ? 0 : _ref$adjustments,
|
|
131
|
-
behavior = _ref.behavior;
|
|
132
|
-
var toOffset = offset + adjustments;
|
|
133
|
-
(_instance$scrollEleme = instance.scrollElement) == null || _instance$scrollEleme.scrollTo == null || _instance$scrollEleme.scrollTo((_instance$scrollEleme2 = {}, _instance$scrollEleme2[instance.options.horizontal ? 'left' : 'top'] = toOffset, _instance$scrollEleme2.behavior = behavior, _instance$scrollEleme2));
|
|
134
|
-
};
|
|
135
|
-
var elementScroll = function elementScroll(offset, _ref2, instance) {
|
|
136
|
-
var _instance$scrollEleme3, _instance$scrollEleme4;
|
|
137
|
-
var _ref2$adjustments = _ref2.adjustments,
|
|
138
|
-
adjustments = _ref2$adjustments === void 0 ? 0 : _ref2$adjustments,
|
|
139
|
-
behavior = _ref2.behavior;
|
|
140
|
-
var toOffset = offset + adjustments;
|
|
141
|
-
(_instance$scrollEleme3 = instance.scrollElement) == null || _instance$scrollEleme3.scrollTo == null || _instance$scrollEleme3.scrollTo((_instance$scrollEleme4 = {}, _instance$scrollEleme4[instance.options.horizontal ? 'left' : 'top'] = toOffset, _instance$scrollEleme4.behavior = behavior, _instance$scrollEleme4));
|
|
142
|
-
};
|
|
143
|
-
var Virtualizer = function Virtualizer(_opts) {
|
|
144
|
-
var _this = this;
|
|
145
|
-
this.unsubs = [];
|
|
146
|
-
this.scrollElement = null;
|
|
147
|
-
this.isScrolling = false;
|
|
148
|
-
this.isScrollingTimeoutId = null;
|
|
149
|
-
this.scrollToIndexTimeoutId = null;
|
|
150
|
-
this.measurementsCache = [];
|
|
151
|
-
this.itemSizeCache = new Map();
|
|
152
|
-
this.pendingMeasuredCacheIndexes = [];
|
|
153
|
-
this.scrollDirection = null;
|
|
154
|
-
this.scrollAdjustments = 0;
|
|
155
|
-
this.measureElementCache = new Map();
|
|
156
|
-
this.observer = function () {
|
|
157
|
-
var _ro = null;
|
|
158
|
-
var get = function get() {
|
|
159
|
-
if (_ro) {
|
|
160
|
-
return _ro;
|
|
161
|
-
} else if (typeof ResizeObserver !== 'undefined') {
|
|
162
|
-
return _ro = new ResizeObserver(function (entries) {
|
|
163
|
-
entries.forEach(function (entry) {
|
|
164
|
-
_this._measureElement(entry.target, entry);
|
|
165
|
-
});
|
|
166
|
-
});
|
|
167
|
-
} else {
|
|
168
|
-
return null;
|
|
169
|
-
}
|
|
170
|
-
};
|
|
171
|
-
return {
|
|
172
|
-
disconnect: function disconnect() {
|
|
173
|
-
var _get;
|
|
174
|
-
return (_get = get()) == null ? void 0 : _get.disconnect();
|
|
175
|
-
},
|
|
176
|
-
observe: function observe(target) {
|
|
177
|
-
var _get2;
|
|
178
|
-
return (_get2 = get()) == null ? void 0 : _get2.observe(target, {
|
|
179
|
-
box: 'border-box'
|
|
180
|
-
});
|
|
181
|
-
},
|
|
182
|
-
unobserve: function unobserve(target) {
|
|
183
|
-
var _get3;
|
|
184
|
-
return (_get3 = get()) == null ? void 0 : _get3.unobserve(target);
|
|
185
|
-
}
|
|
186
|
-
};
|
|
187
|
-
}();
|
|
188
|
-
this.range = null;
|
|
189
|
-
this.setOptions = function (opts) {
|
|
190
|
-
Object.entries(opts).forEach(function (_ref3) {
|
|
191
|
-
var key = _ref3[0],
|
|
192
|
-
value = _ref3[1];
|
|
193
|
-
if (typeof value === 'undefined') delete opts[key];
|
|
194
|
-
});
|
|
195
|
-
_this.options = _extends({
|
|
196
|
-
debug: false,
|
|
197
|
-
initialOffset: 0,
|
|
198
|
-
overscan: 1,
|
|
199
|
-
paddingStart: 0,
|
|
200
|
-
paddingEnd: 0,
|
|
201
|
-
scrollPaddingStart: 0,
|
|
202
|
-
scrollPaddingEnd: 0,
|
|
203
|
-
horizontal: false,
|
|
204
|
-
getItemKey: defaultKeyExtractor,
|
|
205
|
-
rangeExtractor: defaultRangeExtractor,
|
|
206
|
-
onChange: function onChange() {},
|
|
207
|
-
measureElement: measureElement,
|
|
208
|
-
initialRect: {
|
|
209
|
-
width: 0,
|
|
210
|
-
height: 0
|
|
211
|
-
},
|
|
212
|
-
scrollMargin: 0,
|
|
213
|
-
scrollingDelay: 150,
|
|
214
|
-
indexAttribute: 'data-index',
|
|
215
|
-
initialMeasurementsCache: [],
|
|
216
|
-
lanes: 1
|
|
217
|
-
}, opts);
|
|
218
|
-
};
|
|
219
|
-
this.notify = function (sync) {
|
|
220
|
-
_this.options.onChange == null || _this.options.onChange(_this, sync);
|
|
221
|
-
};
|
|
222
|
-
this.maybeNotify = memo(function () {
|
|
223
|
-
_this.calculateRange();
|
|
224
|
-
return [_this.isScrolling, _this.range ? _this.range.startIndex : null, _this.range ? _this.range.endIndex : null];
|
|
225
|
-
}, function (isScrolling) {
|
|
226
|
-
_this.notify(isScrolling);
|
|
227
|
-
}, {
|
|
228
|
-
key: process.env.NODE_ENV !== 'production' && 'maybeNotify',
|
|
229
|
-
debug: function debug() {
|
|
230
|
-
return _this.options.debug;
|
|
231
|
-
},
|
|
232
|
-
initialDeps: [this.isScrolling, this.range ? this.range.startIndex : null, this.range ? this.range.endIndex : null]
|
|
233
|
-
});
|
|
234
|
-
this.cleanup = function () {
|
|
235
|
-
_this.unsubs.filter(Boolean).forEach(function (d) {
|
|
236
|
-
return d();
|
|
237
|
-
});
|
|
238
|
-
_this.unsubs = [];
|
|
239
|
-
_this.scrollElement = null;
|
|
240
|
-
};
|
|
241
|
-
this._didMount = function () {
|
|
242
|
-
_this.measureElementCache.forEach(_this.observer.observe);
|
|
243
|
-
return function () {
|
|
244
|
-
_this.observer.disconnect();
|
|
245
|
-
_this.cleanup();
|
|
246
|
-
};
|
|
247
|
-
};
|
|
248
|
-
this._willUpdate = function () {
|
|
249
|
-
var scrollElement = _this.options.getScrollElement();
|
|
250
|
-
if (_this.scrollElement !== scrollElement) {
|
|
251
|
-
_this.cleanup();
|
|
252
|
-
_this.scrollElement = scrollElement;
|
|
253
|
-
_this._scrollToOffset(_this.scrollOffset, {
|
|
254
|
-
adjustments: undefined,
|
|
255
|
-
behavior: undefined
|
|
256
|
-
});
|
|
257
|
-
_this.unsubs.push(_this.options.observeElementRect(_this, function (rect) {
|
|
258
|
-
_this.scrollRect = rect;
|
|
259
|
-
_this.maybeNotify();
|
|
260
|
-
}));
|
|
261
|
-
_this.unsubs.push(_this.options.observeElementOffset(_this, function (offset) {
|
|
262
|
-
_this.scrollAdjustments = 0;
|
|
263
|
-
if (_this.scrollOffset === offset) {
|
|
264
|
-
return;
|
|
265
|
-
}
|
|
266
|
-
if (_this.isScrollingTimeoutId !== null) {
|
|
267
|
-
clearTimeout(_this.isScrollingTimeoutId);
|
|
268
|
-
_this.isScrollingTimeoutId = null;
|
|
269
|
-
}
|
|
270
|
-
_this.isScrolling = true;
|
|
271
|
-
_this.scrollDirection = _this.scrollOffset < offset ? 'forward' : 'backward';
|
|
272
|
-
_this.scrollOffset = offset;
|
|
273
|
-
_this.maybeNotify();
|
|
274
|
-
_this.isScrollingTimeoutId = setTimeout(function () {
|
|
275
|
-
_this.isScrollingTimeoutId = null;
|
|
276
|
-
_this.isScrolling = false;
|
|
277
|
-
_this.scrollDirection = null;
|
|
278
|
-
_this.maybeNotify();
|
|
279
|
-
}, _this.options.scrollingDelay);
|
|
280
|
-
}));
|
|
281
|
-
}
|
|
282
|
-
};
|
|
283
|
-
this.getSize = function () {
|
|
284
|
-
return _this.scrollRect[_this.options.horizontal ? 'width' : 'height'];
|
|
285
|
-
};
|
|
286
|
-
this.memoOptions = memo(function () {
|
|
287
|
-
return [_this.options.count, _this.options.paddingStart, _this.options.scrollMargin, _this.options.getItemKey];
|
|
288
|
-
}, function (count, paddingStart, scrollMargin, getItemKey) {
|
|
289
|
-
_this.pendingMeasuredCacheIndexes = [];
|
|
290
|
-
return {
|
|
291
|
-
count: count,
|
|
292
|
-
paddingStart: paddingStart,
|
|
293
|
-
scrollMargin: scrollMargin,
|
|
294
|
-
getItemKey: getItemKey
|
|
295
|
-
};
|
|
296
|
-
}, {
|
|
297
|
-
key: false
|
|
298
|
-
});
|
|
299
|
-
this.getFurthestMeasurement = function (measurements, index) {
|
|
300
|
-
var furthestMeasurementsFound = new Map();
|
|
301
|
-
var furthestMeasurements = new Map();
|
|
302
|
-
for (var m = index - 1; m >= 0; m--) {
|
|
303
|
-
var measurement = measurements[m];
|
|
304
|
-
if (furthestMeasurementsFound.has(measurement.lane)) {
|
|
305
|
-
continue;
|
|
306
|
-
}
|
|
307
|
-
var previousFurthestMeasurement = furthestMeasurements.get(measurement.lane);
|
|
308
|
-
if (previousFurthestMeasurement == null || measurement.end > previousFurthestMeasurement.end) {
|
|
309
|
-
furthestMeasurements.set(measurement.lane, measurement);
|
|
310
|
-
} else if (measurement.end < previousFurthestMeasurement.end) {
|
|
311
|
-
furthestMeasurementsFound.set(measurement.lane, true);
|
|
312
|
-
}
|
|
313
|
-
if (furthestMeasurementsFound.size === _this.options.lanes) {
|
|
314
|
-
break;
|
|
315
|
-
}
|
|
316
|
-
}
|
|
317
|
-
return furthestMeasurements.size === _this.options.lanes ? Array.from(furthestMeasurements.values()).sort(function (a, b) {
|
|
318
|
-
if (a.end === b.end) {
|
|
319
|
-
return a.index - b.index;
|
|
320
|
-
}
|
|
321
|
-
return a.end - b.end;
|
|
322
|
-
})[0] : undefined;
|
|
323
|
-
};
|
|
324
|
-
this.getMeasurements = memo(function () {
|
|
325
|
-
return [_this.memoOptions(), _this.itemSizeCache];
|
|
326
|
-
}, function (_ref4, itemSizeCache) {
|
|
327
|
-
var count = _ref4.count,
|
|
328
|
-
paddingStart = _ref4.paddingStart,
|
|
329
|
-
scrollMargin = _ref4.scrollMargin,
|
|
330
|
-
getItemKey = _ref4.getItemKey;
|
|
331
|
-
var min = _this.pendingMeasuredCacheIndexes.length > 0 ? Math.min.apply(Math, _this.pendingMeasuredCacheIndexes) : 0;
|
|
332
|
-
_this.pendingMeasuredCacheIndexes = [];
|
|
333
|
-
var measurements = _this.measurementsCache.slice(0, min);
|
|
334
|
-
for (var _i2 = min; _i2 < count; _i2++) {
|
|
335
|
-
var key = getItemKey(_i2);
|
|
336
|
-
var furthestMeasurement = _this.options.lanes === 1 ? measurements[_i2 - 1] : _this.getFurthestMeasurement(measurements, _i2);
|
|
337
|
-
var start = furthestMeasurement ? furthestMeasurement.end : paddingStart + scrollMargin;
|
|
338
|
-
var measuredSize = itemSizeCache.get(key);
|
|
339
|
-
var size = typeof measuredSize === 'number' ? measuredSize : _this.options.estimateSize(_i2);
|
|
340
|
-
var end = start + size;
|
|
341
|
-
var lane = furthestMeasurement ? furthestMeasurement.lane : _i2 % _this.options.lanes;
|
|
342
|
-
measurements[_i2] = {
|
|
343
|
-
index: _i2,
|
|
344
|
-
start: start,
|
|
345
|
-
size: size,
|
|
346
|
-
end: end,
|
|
347
|
-
key: key,
|
|
348
|
-
lane: lane
|
|
349
|
-
};
|
|
350
|
-
}
|
|
351
|
-
_this.measurementsCache = measurements;
|
|
352
|
-
return measurements;
|
|
353
|
-
}, {
|
|
354
|
-
key: process.env.NODE_ENV !== 'production' && 'getMeasurements',
|
|
355
|
-
debug: function debug() {
|
|
356
|
-
return _this.options.debug;
|
|
357
|
-
}
|
|
358
|
-
});
|
|
359
|
-
this.calculateRange = memo(function () {
|
|
360
|
-
return [_this.getMeasurements(), _this.getSize(), _this.scrollOffset];
|
|
361
|
-
}, function (measurements, outerSize, scrollOffset) {
|
|
362
|
-
return _this.range = measurements.length > 0 && outerSize > 0 ? calculateRange({
|
|
363
|
-
measurements: measurements,
|
|
364
|
-
outerSize: outerSize,
|
|
365
|
-
scrollOffset: scrollOffset
|
|
366
|
-
}) : null;
|
|
367
|
-
}, {
|
|
368
|
-
key: process.env.NODE_ENV !== 'production' && 'calculateRange',
|
|
369
|
-
debug: function debug() {
|
|
370
|
-
return _this.options.debug;
|
|
371
|
-
}
|
|
372
|
-
});
|
|
373
|
-
this.getIndexes = memo(function () {
|
|
374
|
-
return [_this.options.rangeExtractor, _this.calculateRange(), _this.options.overscan, _this.options.count];
|
|
375
|
-
}, function (rangeExtractor, range, overscan, count) {
|
|
376
|
-
return range === null ? [] : rangeExtractor(_extends({}, range, {
|
|
377
|
-
overscan: overscan,
|
|
378
|
-
count: count
|
|
379
|
-
}));
|
|
380
|
-
}, {
|
|
381
|
-
key: process.env.NODE_ENV !== 'production' && 'getIndexes',
|
|
382
|
-
debug: function debug() {
|
|
383
|
-
return _this.options.debug;
|
|
384
|
-
}
|
|
385
|
-
});
|
|
386
|
-
this.indexFromElement = function (node) {
|
|
387
|
-
var attributeName = _this.options.indexAttribute;
|
|
388
|
-
var indexStr = node.getAttribute(attributeName);
|
|
389
|
-
if (!indexStr) {
|
|
390
|
-
console.warn("Missing attribute name '" + attributeName + "={index}' on measured element.");
|
|
391
|
-
return -1;
|
|
392
|
-
}
|
|
393
|
-
return parseInt(indexStr, 10);
|
|
394
|
-
};
|
|
395
|
-
this._measureElement = function (node, entry) {
|
|
396
|
-
var item = _this.measurementsCache[_this.indexFromElement(node)];
|
|
397
|
-
if (!item || !node.isConnected) {
|
|
398
|
-
_this.measureElementCache.forEach(function (cached, key) {
|
|
399
|
-
if (cached === node) {
|
|
400
|
-
_this.observer.unobserve(node);
|
|
401
|
-
_this.measureElementCache["delete"](key);
|
|
402
|
-
}
|
|
403
|
-
});
|
|
404
|
-
return;
|
|
405
|
-
}
|
|
406
|
-
var prevNode = _this.measureElementCache.get(item.key);
|
|
407
|
-
if (prevNode !== node) {
|
|
408
|
-
if (prevNode) {
|
|
409
|
-
_this.observer.unobserve(prevNode);
|
|
410
|
-
}
|
|
411
|
-
_this.observer.observe(node);
|
|
412
|
-
_this.measureElementCache.set(item.key, node);
|
|
413
|
-
}
|
|
414
|
-
var measuredItemSize = _this.options.measureElement(node, entry, _this);
|
|
415
|
-
_this.resizeItem(item, measuredItemSize);
|
|
416
|
-
};
|
|
417
|
-
this.resizeItem = function (item, size) {
|
|
418
|
-
var _this$itemSizeCache$g;
|
|
419
|
-
var itemSize = (_this$itemSizeCache$g = _this.itemSizeCache.get(item.key)) != null ? _this$itemSizeCache$g : item.size;
|
|
420
|
-
var delta = size - itemSize;
|
|
421
|
-
if (delta !== 0) {
|
|
422
|
-
if (item.start < _this.scrollOffset + _this.scrollAdjustments) {
|
|
423
|
-
if (process.env.NODE_ENV !== 'production' && _this.options.debug) {
|
|
424
|
-
console.info('correction', delta);
|
|
425
|
-
}
|
|
426
|
-
_this._scrollToOffset(_this.scrollOffset, {
|
|
427
|
-
adjustments: _this.scrollAdjustments += delta,
|
|
428
|
-
behavior: undefined
|
|
429
|
-
});
|
|
430
|
-
}
|
|
431
|
-
_this.pendingMeasuredCacheIndexes.push(item.index);
|
|
432
|
-
_this.itemSizeCache = new Map(_this.itemSizeCache.set(item.key, size));
|
|
433
|
-
_this.notify(false);
|
|
434
|
-
}
|
|
435
|
-
};
|
|
436
|
-
this.measureElement = function (node) {
|
|
437
|
-
if (!node) {
|
|
438
|
-
return;
|
|
439
|
-
}
|
|
440
|
-
_this._measureElement(node, undefined);
|
|
441
|
-
};
|
|
442
|
-
this.getVirtualItems = memo(function () {
|
|
443
|
-
return [_this.getIndexes(), _this.getMeasurements()];
|
|
444
|
-
}, function (indexes, measurements) {
|
|
445
|
-
var virtualItems = [];
|
|
446
|
-
for (var k = 0, len = indexes.length; k < len; k++) {
|
|
447
|
-
var _i3 = indexes[k];
|
|
448
|
-
var measurement = measurements[_i3];
|
|
449
|
-
virtualItems.push(measurement);
|
|
450
|
-
}
|
|
451
|
-
return virtualItems;
|
|
452
|
-
}, {
|
|
453
|
-
key: process.env.NODE_ENV !== 'production' && 'getIndexes',
|
|
454
|
-
debug: function debug() {
|
|
455
|
-
return _this.options.debug;
|
|
456
|
-
}
|
|
457
|
-
});
|
|
458
|
-
this.getVirtualItemForOffset = function (offset) {
|
|
459
|
-
var measurements = _this.getMeasurements();
|
|
460
|
-
return notUndefined(measurements[findNearestBinarySearch(0, measurements.length - 1, function (index) {
|
|
461
|
-
return notUndefined(measurements[index]).start;
|
|
462
|
-
}, offset)]);
|
|
463
|
-
};
|
|
464
|
-
this.getOffsetForAlignment = function (toOffset, align) {
|
|
465
|
-
var size = _this.getSize();
|
|
466
|
-
if (align === 'auto') {
|
|
467
|
-
if (toOffset <= _this.scrollOffset) {
|
|
468
|
-
align = 'start';
|
|
469
|
-
} else if (toOffset >= _this.scrollOffset + size) {
|
|
470
|
-
align = 'end';
|
|
471
|
-
} else {
|
|
472
|
-
align = 'start';
|
|
473
|
-
}
|
|
474
|
-
}
|
|
475
|
-
if (align === 'start') {
|
|
476
|
-
toOffset = toOffset;
|
|
477
|
-
} else if (align === 'end') {
|
|
478
|
-
toOffset = toOffset - size;
|
|
479
|
-
} else if (align === 'center') {
|
|
480
|
-
toOffset = toOffset - size / 2;
|
|
481
|
-
}
|
|
482
|
-
var scrollSizeProp = _this.options.horizontal ? 'scrollWidth' : 'scrollHeight';
|
|
483
|
-
var scrollSize = _this.scrollElement ? 'document' in _this.scrollElement ? _this.scrollElement.document.documentElement[scrollSizeProp] : _this.scrollElement[scrollSizeProp] : 0;
|
|
484
|
-
var maxOffset = scrollSize - _this.getSize();
|
|
485
|
-
return Math.max(Math.min(maxOffset, toOffset), 0);
|
|
486
|
-
};
|
|
487
|
-
this.getOffsetForIndex = function (index, align) {
|
|
488
|
-
if (align === void 0) {
|
|
489
|
-
align = 'auto';
|
|
490
|
-
}
|
|
491
|
-
index = Math.max(0, Math.min(index, _this.options.count - 1));
|
|
492
|
-
var measurement = notUndefined(_this.getMeasurements()[index]);
|
|
493
|
-
if (align === 'auto') {
|
|
494
|
-
if (measurement.end >= _this.scrollOffset + _this.getSize() - _this.options.scrollPaddingEnd) {
|
|
495
|
-
align = 'end';
|
|
496
|
-
} else if (measurement.start <= _this.scrollOffset + _this.options.scrollPaddingStart) {
|
|
497
|
-
align = 'start';
|
|
498
|
-
} else {
|
|
499
|
-
return [_this.scrollOffset, align];
|
|
500
|
-
}
|
|
501
|
-
}
|
|
502
|
-
var toOffset = align === 'end' ? measurement.end + _this.options.scrollPaddingEnd : measurement.start - _this.options.scrollPaddingStart;
|
|
503
|
-
return [_this.getOffsetForAlignment(toOffset, align), align];
|
|
504
|
-
};
|
|
505
|
-
this.isDynamicMode = function () {
|
|
506
|
-
return _this.measureElementCache.size > 0;
|
|
507
|
-
};
|
|
508
|
-
this.cancelScrollToIndex = function () {
|
|
509
|
-
if (_this.scrollToIndexTimeoutId !== null) {
|
|
510
|
-
clearTimeout(_this.scrollToIndexTimeoutId);
|
|
511
|
-
_this.scrollToIndexTimeoutId = null;
|
|
512
|
-
}
|
|
513
|
-
};
|
|
514
|
-
this.scrollToOffset = function (toOffset, _temp) {
|
|
515
|
-
var _ref5 = _temp === void 0 ? {} : _temp,
|
|
516
|
-
_ref5$align = _ref5.align,
|
|
517
|
-
align = _ref5$align === void 0 ? 'start' : _ref5$align,
|
|
518
|
-
behavior = _ref5.behavior;
|
|
519
|
-
_this.cancelScrollToIndex();
|
|
520
|
-
if (behavior === 'smooth' && _this.isDynamicMode()) {
|
|
521
|
-
console.warn('The `smooth` scroll behavior is not fully supported with dynamic size.');
|
|
522
|
-
}
|
|
523
|
-
_this._scrollToOffset(_this.getOffsetForAlignment(toOffset, align), {
|
|
524
|
-
adjustments: undefined,
|
|
525
|
-
behavior: behavior
|
|
526
|
-
});
|
|
527
|
-
};
|
|
528
|
-
this.scrollToIndex = function (index, _temp2) {
|
|
529
|
-
var _ref6 = _temp2 === void 0 ? {} : _temp2,
|
|
530
|
-
_ref6$align = _ref6.align,
|
|
531
|
-
initialAlign = _ref6$align === void 0 ? 'auto' : _ref6$align,
|
|
532
|
-
behavior = _ref6.behavior;
|
|
533
|
-
index = Math.max(0, Math.min(index, _this.options.count - 1));
|
|
534
|
-
_this.cancelScrollToIndex();
|
|
535
|
-
if (behavior === 'smooth' && _this.isDynamicMode()) {
|
|
536
|
-
console.warn('The `smooth` scroll behavior is not fully supported with dynamic size.');
|
|
537
|
-
}
|
|
538
|
-
var _this$getOffsetForInd = _this.getOffsetForIndex(index, initialAlign),
|
|
539
|
-
toOffset = _this$getOffsetForInd[0],
|
|
540
|
-
align = _this$getOffsetForInd[1];
|
|
541
|
-
_this._scrollToOffset(toOffset, {
|
|
542
|
-
adjustments: undefined,
|
|
543
|
-
behavior: behavior
|
|
544
|
-
});
|
|
545
|
-
if (behavior !== 'smooth' && _this.isDynamicMode()) {
|
|
546
|
-
_this.scrollToIndexTimeoutId = setTimeout(function () {
|
|
547
|
-
_this.scrollToIndexTimeoutId = null;
|
|
548
|
-
var elementInDOM = _this.measureElementCache.has(_this.options.getItemKey(index));
|
|
549
|
-
if (elementInDOM) {
|
|
550
|
-
var _this$getOffsetForInd2 = _this.getOffsetForIndex(index, align),
|
|
551
|
-
_toOffset = _this$getOffsetForInd2[0];
|
|
552
|
-
if (!approxEqual(_toOffset, _this.scrollOffset)) {
|
|
553
|
-
_this.scrollToIndex(index, {
|
|
554
|
-
align: align,
|
|
555
|
-
behavior: behavior
|
|
556
|
-
});
|
|
557
|
-
}
|
|
558
|
-
} else {
|
|
559
|
-
_this.scrollToIndex(index, {
|
|
560
|
-
align: align,
|
|
561
|
-
behavior: behavior
|
|
562
|
-
});
|
|
563
|
-
}
|
|
564
|
-
});
|
|
565
|
-
}
|
|
566
|
-
};
|
|
567
|
-
this.scrollBy = function (delta, _temp3) {
|
|
568
|
-
var _ref7 = _temp3 === void 0 ? {} : _temp3,
|
|
569
|
-
behavior = _ref7.behavior;
|
|
570
|
-
_this.cancelScrollToIndex();
|
|
571
|
-
if (behavior === 'smooth' && _this.isDynamicMode()) {
|
|
572
|
-
console.warn('The `smooth` scroll behavior is not fully supported with dynamic size.');
|
|
573
|
-
}
|
|
574
|
-
_this._scrollToOffset(_this.scrollOffset + delta, {
|
|
575
|
-
adjustments: undefined,
|
|
576
|
-
behavior: behavior
|
|
577
|
-
});
|
|
578
|
-
};
|
|
579
|
-
this.getTotalSize = function () {
|
|
580
|
-
var measurements = _this.getMeasurements();
|
|
581
|
-
var end;
|
|
582
|
-
// If there are no measurements, set the end to paddingStart
|
|
583
|
-
if (measurements.length === 0) {
|
|
584
|
-
end = _this.options.paddingStart;
|
|
585
|
-
} else {
|
|
586
|
-
var _measurements$end, _measurements;
|
|
587
|
-
// If lanes is 1, use the last measurement's end, otherwise find the maximum end value among all measurements
|
|
588
|
-
end = _this.options.lanes === 1 ? (_measurements$end = (_measurements = measurements[measurements.length - 1]) == null ? void 0 : _measurements.end) != null ? _measurements$end : 0 : Math.max.apply(Math, measurements.slice(-_this.options.lanes).map(function (m) {
|
|
589
|
-
return m.end;
|
|
590
|
-
}));
|
|
591
|
-
}
|
|
592
|
-
return end - _this.options.scrollMargin + _this.options.paddingEnd;
|
|
593
|
-
};
|
|
594
|
-
this._scrollToOffset = function (offset, _ref8) {
|
|
595
|
-
var adjustments = _ref8.adjustments,
|
|
596
|
-
behavior = _ref8.behavior;
|
|
597
|
-
_this.options.scrollToFn(offset, {
|
|
598
|
-
behavior: behavior,
|
|
599
|
-
adjustments: adjustments
|
|
600
|
-
}, _this);
|
|
601
|
-
};
|
|
602
|
-
this.measure = function () {
|
|
603
|
-
_this.itemSizeCache = new Map();
|
|
604
|
-
_this.notify(false);
|
|
605
|
-
};
|
|
606
|
-
this.setOptions(_opts);
|
|
607
|
-
this.scrollRect = this.options.initialRect;
|
|
608
|
-
this.scrollOffset = this.options.initialOffset;
|
|
609
|
-
this.measurementsCache = this.options.initialMeasurementsCache;
|
|
610
|
-
this.measurementsCache.forEach(function (item) {
|
|
611
|
-
_this.itemSizeCache.set(item.key, item.size);
|
|
612
|
-
});
|
|
613
|
-
this.maybeNotify();
|
|
614
|
-
};
|
|
615
|
-
var findNearestBinarySearch = function findNearestBinarySearch(low, high, getCurrentValue, value) {
|
|
616
|
-
while (low <= high) {
|
|
617
|
-
var middle = (low + high) / 2 | 0;
|
|
618
|
-
var currentValue = getCurrentValue(middle);
|
|
619
|
-
if (currentValue < value) {
|
|
620
|
-
low = middle + 1;
|
|
621
|
-
} else if (currentValue > value) {
|
|
622
|
-
high = middle - 1;
|
|
623
|
-
} else {
|
|
624
|
-
return middle;
|
|
625
|
-
}
|
|
626
|
-
}
|
|
627
|
-
if (low > 0) {
|
|
628
|
-
return low - 1;
|
|
629
|
-
} else {
|
|
630
|
-
return 0;
|
|
631
|
-
}
|
|
632
|
-
};
|
|
633
|
-
function calculateRange(_ref9) {
|
|
634
|
-
var measurements = _ref9.measurements,
|
|
635
|
-
outerSize = _ref9.outerSize,
|
|
636
|
-
scrollOffset = _ref9.scrollOffset;
|
|
637
|
-
var count = measurements.length - 1;
|
|
638
|
-
var getOffset = function getOffset(index) {
|
|
639
|
-
return measurements[index].start;
|
|
640
|
-
};
|
|
641
|
-
var startIndex = findNearestBinarySearch(0, count, getOffset, scrollOffset);
|
|
642
|
-
var endIndex = startIndex;
|
|
643
|
-
while (endIndex < count && measurements[endIndex].end < scrollOffset + outerSize) {
|
|
644
|
-
endIndex++;
|
|
645
|
-
}
|
|
646
|
-
return {
|
|
647
|
-
startIndex: startIndex,
|
|
648
|
-
endIndex: endIndex
|
|
649
|
-
};
|
|
650
|
-
}
|
|
651
|
-
|
|
652
|
-
export { Virtualizer, defaultKeyExtractor, defaultRangeExtractor, elementScroll, measureElement, observeElementOffset, observeElementRect, observeWindowOffset, observeWindowRect, windowScroll };
|
|
653
|
-
//# sourceMappingURL=index.esm.js.map
|