@tanstack/virtual-core 3.0.0-beta.30 → 3.0.0-beta.33
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/build/lib/_virtual/_rollupPluginBabelHelpers.esm.js +27 -0
- package/build/lib/_virtual/_rollupPluginBabelHelpers.esm.js.map +1 -0
- package/build/lib/_virtual/_rollupPluginBabelHelpers.js +31 -0
- package/build/lib/_virtual/_rollupPluginBabelHelpers.js.map +1 -0
- package/build/lib/_virtual/_rollupPluginBabelHelpers.mjs +27 -0
- package/build/lib/_virtual/_rollupPluginBabelHelpers.mjs.map +1 -0
- package/build/lib/index.d.ts +12 -8
- package/build/lib/index.esm.js +421 -399
- package/build/lib/index.esm.js.map +1 -1
- package/build/lib/index.js +421 -399
- package/build/lib/index.js.map +1 -1
- package/build/lib/index.mjs +421 -399
- package/build/lib/index.mjs.map +1 -1
- package/build/lib/utils.esm.js +15 -16
- package/build/lib/utils.esm.js.map +1 -1
- package/build/lib/utils.js +15 -16
- package/build/lib/utils.js.map +1 -1
- package/build/lib/utils.mjs +15 -16
- package/build/lib/utils.mjs.map +1 -1
- package/build/umd/index.development.js +450 -415
- package/build/umd/index.development.js.map +1 -1
- package/build/umd/index.production.js +1 -1
- package/build/umd/index.production.js.map +1 -1
- package/package.json +1 -1
- package/src/index.ts +97 -66
package/build/lib/index.js
CHANGED
|
@@ -12,36 +12,39 @@
|
|
|
12
12
|
|
|
13
13
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
14
14
|
|
|
15
|
+
var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
|
|
15
16
|
var utils = require('./utils.js');
|
|
16
17
|
|
|
17
18
|
//
|
|
18
19
|
|
|
19
20
|
//
|
|
20
21
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
22
|
+
var defaultKeyExtractor = function defaultKeyExtractor(index) {
|
|
23
|
+
return index;
|
|
24
|
+
};
|
|
25
|
+
var defaultRangeExtractor = function defaultRangeExtractor(range) {
|
|
26
|
+
var start = Math.max(range.startIndex - range.overscan, 0);
|
|
27
|
+
var end = Math.min(range.endIndex + range.overscan, range.count - 1);
|
|
28
|
+
var arr = [];
|
|
29
|
+
for (var _i = start; _i <= end; _i++) {
|
|
30
|
+
arr.push(_i);
|
|
28
31
|
}
|
|
29
32
|
return arr;
|
|
30
33
|
};
|
|
31
|
-
|
|
32
|
-
|
|
34
|
+
var memoRectCallback = function memoRectCallback(instance, cb) {
|
|
35
|
+
var prev = {
|
|
33
36
|
height: -1,
|
|
34
37
|
width: -1
|
|
35
38
|
};
|
|
36
|
-
return rect
|
|
39
|
+
return function (rect) {
|
|
37
40
|
if (instance.options.horizontal ? rect.width !== prev.width : rect.height !== prev.height) {
|
|
38
41
|
cb(rect);
|
|
39
42
|
}
|
|
40
43
|
prev = rect;
|
|
41
44
|
};
|
|
42
45
|
};
|
|
43
|
-
|
|
44
|
-
|
|
46
|
+
var observeElementRect = function observeElementRect(instance, cb) {
|
|
47
|
+
var observer = new ResizeObserver(function (entries) {
|
|
45
48
|
var _entries$, _entries$2;
|
|
46
49
|
cb({
|
|
47
50
|
width: (_entries$ = entries[0]) == null ? void 0 : _entries$.contentRect.width,
|
|
@@ -53,16 +56,18 @@ const observeElementRect = (instance, cb) => {
|
|
|
53
56
|
}
|
|
54
57
|
cb(instance.scrollElement.getBoundingClientRect());
|
|
55
58
|
observer.observe(instance.scrollElement);
|
|
56
|
-
return ()
|
|
59
|
+
return function () {
|
|
57
60
|
observer.unobserve(instance.scrollElement);
|
|
58
61
|
};
|
|
59
62
|
};
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
63
|
+
var observeWindowRect = function observeWindowRect(instance, cb) {
|
|
64
|
+
var memoizedCallback = memoRectCallback(instance, cb);
|
|
65
|
+
var onResize = function onResize() {
|
|
66
|
+
return memoizedCallback({
|
|
67
|
+
width: instance.scrollElement.innerWidth,
|
|
68
|
+
height: instance.scrollElement.innerHeight
|
|
69
|
+
});
|
|
70
|
+
};
|
|
66
71
|
if (!instance.scrollElement) {
|
|
67
72
|
return;
|
|
68
73
|
}
|
|
@@ -71,32 +76,32 @@ const observeWindowRect = (instance, cb) => {
|
|
|
71
76
|
capture: false,
|
|
72
77
|
passive: true
|
|
73
78
|
});
|
|
74
|
-
return ()
|
|
79
|
+
return function () {
|
|
75
80
|
instance.scrollElement.removeEventListener('resize', onResize);
|
|
76
81
|
};
|
|
77
82
|
};
|
|
78
|
-
|
|
83
|
+
var scrollProps = {
|
|
79
84
|
element: ['scrollLeft', 'scrollTop'],
|
|
80
85
|
window: ['scrollX', 'scrollY']
|
|
81
86
|
};
|
|
82
|
-
|
|
83
|
-
return (instance, cb)
|
|
87
|
+
var createOffsetObserver = function createOffsetObserver(mode) {
|
|
88
|
+
return function (instance, cb) {
|
|
84
89
|
if (!instance.scrollElement) {
|
|
85
90
|
return;
|
|
86
91
|
}
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
cb(
|
|
92
|
+
var propX = scrollProps[mode][0];
|
|
93
|
+
var propY = scrollProps[mode][1];
|
|
94
|
+
var prevX = instance.scrollElement[propX];
|
|
95
|
+
var prevY = instance.scrollElement[propY];
|
|
96
|
+
var scroll = function scroll() {
|
|
97
|
+
var offset = instance.scrollElement[instance.options.horizontal ? propX : propY];
|
|
98
|
+
cb(offset);
|
|
94
99
|
};
|
|
95
100
|
scroll();
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
101
|
+
var onScroll = function onScroll(e) {
|
|
102
|
+
var target = e.currentTarget;
|
|
103
|
+
var scrollX = target[propX];
|
|
104
|
+
var scrollY = target[propY];
|
|
100
105
|
if (instance.options.horizontal ? prevX - scrollX : prevY - scrollY) {
|
|
101
106
|
scroll();
|
|
102
107
|
}
|
|
@@ -107,390 +112,407 @@ const createOffsetObserver = mode => {
|
|
|
107
112
|
capture: false,
|
|
108
113
|
passive: true
|
|
109
114
|
});
|
|
110
|
-
return ()
|
|
115
|
+
return function () {
|
|
111
116
|
instance.scrollElement.removeEventListener('scroll', onScroll);
|
|
112
117
|
};
|
|
113
118
|
};
|
|
114
119
|
};
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
120
|
+
var observeElementOffset = createOffsetObserver('element');
|
|
121
|
+
var observeWindowOffset = createOffsetObserver('window');
|
|
122
|
+
var measureElement = function measureElement(element, instance) {
|
|
118
123
|
return Math.round(element.getBoundingClientRect()[instance.options.horizontal ? 'width' : 'height']);
|
|
119
124
|
};
|
|
120
|
-
|
|
121
|
-
var _instance$scrollEleme;
|
|
122
|
-
|
|
123
|
-
adjustments,
|
|
124
|
-
behavior
|
|
125
|
-
|
|
126
|
-
} =
|
|
127
|
-
const toOffset = (sync ? offset : offset + instance.options.scrollMargin) + (adjustments ?? 0);
|
|
128
|
-
(_instance$scrollEleme = instance.scrollElement) == null ? void 0 : _instance$scrollEleme.scrollTo == null ? void 0 : _instance$scrollEleme.scrollTo({
|
|
129
|
-
[instance.options.horizontal ? 'left' : 'top']: toOffset,
|
|
130
|
-
behavior
|
|
131
|
-
});
|
|
125
|
+
var windowScroll = function windowScroll(offset, _ref, instance) {
|
|
126
|
+
var _instance$scrollEleme, _instance$scrollEleme2;
|
|
127
|
+
var _ref$adjustments = _ref.adjustments,
|
|
128
|
+
adjustments = _ref$adjustments === void 0 ? 0 : _ref$adjustments,
|
|
129
|
+
behavior = _ref.behavior;
|
|
130
|
+
var toOffset = offset + adjustments;
|
|
131
|
+
(_instance$scrollEleme = instance.scrollElement) == null ? void 0 : _instance$scrollEleme.scrollTo == null ? void 0 : _instance$scrollEleme.scrollTo((_instance$scrollEleme2 = {}, _instance$scrollEleme2[instance.options.horizontal ? 'left' : 'top'] = toOffset, _instance$scrollEleme2.behavior = behavior, _instance$scrollEleme2));
|
|
132
132
|
};
|
|
133
|
-
|
|
134
|
-
var _instance$
|
|
135
|
-
|
|
136
|
-
adjustments,
|
|
137
|
-
behavior
|
|
138
|
-
|
|
139
|
-
} =
|
|
140
|
-
const toOffset = (sync ? offset : offset + instance.options.scrollMargin) + (adjustments ?? 0);
|
|
141
|
-
(_instance$scrollEleme2 = instance.scrollElement) == null ? void 0 : _instance$scrollEleme2.scrollTo == null ? void 0 : _instance$scrollEleme2.scrollTo({
|
|
142
|
-
[instance.options.horizontal ? 'left' : 'top']: toOffset,
|
|
143
|
-
behavior
|
|
144
|
-
});
|
|
133
|
+
var elementScroll = function elementScroll(offset, _ref2, instance) {
|
|
134
|
+
var _instance$scrollEleme3, _instance$scrollEleme4;
|
|
135
|
+
var _ref2$adjustments = _ref2.adjustments,
|
|
136
|
+
adjustments = _ref2$adjustments === void 0 ? 0 : _ref2$adjustments,
|
|
137
|
+
behavior = _ref2.behavior;
|
|
138
|
+
var toOffset = offset + adjustments;
|
|
139
|
+
(_instance$scrollEleme3 = instance.scrollElement) == null ? void 0 : _instance$scrollEleme3.scrollTo == null ? void 0 : _instance$scrollEleme3.scrollTo((_instance$scrollEleme4 = {}, _instance$scrollEleme4[instance.options.horizontal ? 'left' : 'top'] = toOffset, _instance$scrollEleme4.behavior = behavior, _instance$scrollEleme4));
|
|
145
140
|
};
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
});
|
|
141
|
+
var Virtualizer = function Virtualizer(_opts) {
|
|
142
|
+
var _this = this;
|
|
143
|
+
this.unsubs = [];
|
|
144
|
+
this.scrollElement = null;
|
|
145
|
+
this.isScrolling = false;
|
|
146
|
+
this.isScrollingTimeoutId = null;
|
|
147
|
+
this.measurementsCache = [];
|
|
148
|
+
this.itemSizeCache = {};
|
|
149
|
+
this.pendingMeasuredCacheIndexes = [];
|
|
150
|
+
this.scrollDirection = null;
|
|
151
|
+
this.scrollAdjustments = 0;
|
|
152
|
+
this.measureElementCache = {};
|
|
153
|
+
this.pendingScrollToIndexCallback = null;
|
|
154
|
+
this.getResizeObserver = function () {
|
|
155
|
+
var _ro = null;
|
|
156
|
+
return function () {
|
|
157
|
+
if (_ro) {
|
|
158
|
+
return _ro;
|
|
159
|
+
} else if (typeof ResizeObserver !== 'undefined') {
|
|
160
|
+
return _ro = new ResizeObserver(function (entries) {
|
|
161
|
+
entries.forEach(function (entry) {
|
|
162
|
+
_this._measureElement(entry.target, false);
|
|
169
163
|
});
|
|
170
|
-
} else {
|
|
171
|
-
return null;
|
|
172
|
-
}
|
|
173
|
-
};
|
|
174
|
-
})();
|
|
175
|
-
this.range = {
|
|
176
|
-
startIndex: 0,
|
|
177
|
-
endIndex: 0
|
|
178
|
-
};
|
|
179
|
-
this.setOptions = opts => {
|
|
180
|
-
Object.entries(opts).forEach(_ref3 => {
|
|
181
|
-
let [key, value] = _ref3;
|
|
182
|
-
if (typeof value === 'undefined') delete opts[key];
|
|
183
|
-
});
|
|
184
|
-
this.options = {
|
|
185
|
-
debug: false,
|
|
186
|
-
initialOffset: 0,
|
|
187
|
-
overscan: 1,
|
|
188
|
-
paddingStart: 0,
|
|
189
|
-
paddingEnd: 0,
|
|
190
|
-
scrollPaddingStart: 0,
|
|
191
|
-
scrollPaddingEnd: 0,
|
|
192
|
-
horizontal: false,
|
|
193
|
-
getItemKey: defaultKeyExtractor,
|
|
194
|
-
rangeExtractor: defaultRangeExtractor,
|
|
195
|
-
onChange: () => {},
|
|
196
|
-
measureElement,
|
|
197
|
-
initialRect: {
|
|
198
|
-
width: 0,
|
|
199
|
-
height: 0
|
|
200
|
-
},
|
|
201
|
-
scrollMargin: 0,
|
|
202
|
-
scrollingDelay: 150,
|
|
203
|
-
indexAttribute: 'data-index',
|
|
204
|
-
...opts
|
|
205
|
-
};
|
|
206
|
-
};
|
|
207
|
-
this.notify = () => {
|
|
208
|
-
var _this$options$onChang, _this$options;
|
|
209
|
-
(_this$options$onChang = (_this$options = this.options).onChange) == null ? void 0 : _this$options$onChang.call(_this$options, this);
|
|
210
|
-
};
|
|
211
|
-
this.cleanup = () => {
|
|
212
|
-
this.unsubs.filter(Boolean).forEach(d => d());
|
|
213
|
-
this.unsubs = [];
|
|
214
|
-
this.scrollElement = null;
|
|
215
|
-
};
|
|
216
|
-
this._didMount = () => {
|
|
217
|
-
const ro = this.getResizeObserver();
|
|
218
|
-
Object.values(this.measureElementCache).forEach(node => ro == null ? void 0 : ro.observe(node));
|
|
219
|
-
return () => {
|
|
220
|
-
ro == null ? void 0 : ro.disconnect();
|
|
221
|
-
this.cleanup();
|
|
222
|
-
};
|
|
223
|
-
};
|
|
224
|
-
this._willUpdate = () => {
|
|
225
|
-
var _this$pendingScrollTo;
|
|
226
|
-
(_this$pendingScrollTo = this.pendingScrollToIndexCallback) == null ? void 0 : _this$pendingScrollTo.call(this);
|
|
227
|
-
const scrollElement = this.options.getScrollElement();
|
|
228
|
-
if (this.scrollElement !== scrollElement) {
|
|
229
|
-
this.cleanup();
|
|
230
|
-
this.scrollElement = scrollElement;
|
|
231
|
-
this._scrollToOffset(this.scrollOffset, {
|
|
232
|
-
adjustments: undefined,
|
|
233
|
-
behavior: undefined,
|
|
234
|
-
sync: true
|
|
235
164
|
});
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
this.calculateRange();
|
|
239
|
-
}));
|
|
240
|
-
this.unsubs.push(this.options.observeElementOffset(this, offset => {
|
|
241
|
-
if (this.isScrollingTimeoutId !== null) {
|
|
242
|
-
clearTimeout(this.isScrollingTimeoutId);
|
|
243
|
-
this.isScrollingTimeoutId = null;
|
|
244
|
-
}
|
|
245
|
-
const onIsScrollingChange = isScrolling => {
|
|
246
|
-
if (this.isScrolling !== isScrolling) {
|
|
247
|
-
this.isScrolling = isScrolling;
|
|
248
|
-
this.notify();
|
|
249
|
-
}
|
|
250
|
-
};
|
|
251
|
-
this.scrollAdjustments = 0;
|
|
252
|
-
if (this.scrollOffset !== offset) {
|
|
253
|
-
this.scrollOffset = offset;
|
|
254
|
-
onIsScrollingChange(true);
|
|
255
|
-
}
|
|
256
|
-
this.calculateRange();
|
|
257
|
-
this.isScrollingTimeoutId = setTimeout(() => {
|
|
258
|
-
this.isScrollingTimeoutId = null;
|
|
259
|
-
onIsScrollingChange(false);
|
|
260
|
-
}, this.options.scrollingDelay);
|
|
261
|
-
}));
|
|
262
|
-
} else if (!this.isScrolling) {
|
|
263
|
-
this.calculateRange();
|
|
165
|
+
} else {
|
|
166
|
+
return null;
|
|
264
167
|
}
|
|
265
168
|
};
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
const start = measurements[i - 1] ? measurements[i - 1].end : paddingStart;
|
|
277
|
-
const size = typeof measuredSize === 'number' ? measuredSize : this.options.estimateSize(i);
|
|
278
|
-
const end = start + size;
|
|
279
|
-
measurements[i] = {
|
|
280
|
-
index: i,
|
|
281
|
-
start,
|
|
282
|
-
size,
|
|
283
|
-
end,
|
|
284
|
-
key
|
|
285
|
-
};
|
|
286
|
-
}
|
|
287
|
-
this.measurementsCache = measurements;
|
|
288
|
-
return measurements;
|
|
289
|
-
}, {
|
|
290
|
-
key: process.env.NODE_ENV !== 'production' && 'getMeasurements',
|
|
291
|
-
debug: () => this.options.debug
|
|
169
|
+
}();
|
|
170
|
+
this.range = {
|
|
171
|
+
startIndex: 0,
|
|
172
|
+
endIndex: 0
|
|
173
|
+
};
|
|
174
|
+
this.setOptions = function (opts) {
|
|
175
|
+
Object.entries(opts).forEach(function (_ref3) {
|
|
176
|
+
var key = _ref3[0],
|
|
177
|
+
value = _ref3[1];
|
|
178
|
+
if (typeof value === 'undefined') delete opts[key];
|
|
292
179
|
});
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
180
|
+
_this.options = _rollupPluginBabelHelpers["extends"]({
|
|
181
|
+
debug: false,
|
|
182
|
+
initialOffset: 0,
|
|
183
|
+
overscan: 1,
|
|
184
|
+
paddingStart: 0,
|
|
185
|
+
paddingEnd: 0,
|
|
186
|
+
scrollPaddingStart: 0,
|
|
187
|
+
scrollPaddingEnd: 0,
|
|
188
|
+
horizontal: false,
|
|
189
|
+
getItemKey: defaultKeyExtractor,
|
|
190
|
+
rangeExtractor: defaultRangeExtractor,
|
|
191
|
+
onChange: function onChange() {},
|
|
192
|
+
measureElement: measureElement,
|
|
193
|
+
initialRect: {
|
|
194
|
+
width: 0,
|
|
195
|
+
height: 0
|
|
196
|
+
},
|
|
197
|
+
scrollMargin: 0,
|
|
198
|
+
scrollingDelay: 150,
|
|
199
|
+
indexAttribute: 'data-index',
|
|
200
|
+
initialMeasurementsCache: []
|
|
201
|
+
}, opts);
|
|
202
|
+
};
|
|
203
|
+
this.notify = function () {
|
|
204
|
+
_this.options.onChange == null ? void 0 : _this.options.onChange(_this);
|
|
205
|
+
};
|
|
206
|
+
this.cleanup = function () {
|
|
207
|
+
_this.unsubs.filter(Boolean).forEach(function (d) {
|
|
208
|
+
return d();
|
|
307
209
|
});
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
key: process.env.NODE_ENV !== 'production' && 'getIndexes',
|
|
316
|
-
debug: () => this.options.debug
|
|
210
|
+
_this.unsubs = [];
|
|
211
|
+
_this.scrollElement = null;
|
|
212
|
+
};
|
|
213
|
+
this._didMount = function () {
|
|
214
|
+
var ro = _this.getResizeObserver();
|
|
215
|
+
Object.values(_this.measureElementCache).forEach(function (node) {
|
|
216
|
+
return ro == null ? void 0 : ro.observe(node);
|
|
317
217
|
});
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
if (!indexStr) {
|
|
322
|
-
console.warn(`Missing attribute name '${attributeName}={index}' on measured element.`);
|
|
323
|
-
return -1;
|
|
324
|
-
}
|
|
325
|
-
return parseInt(indexStr, 10);
|
|
218
|
+
return function () {
|
|
219
|
+
ro == null ? void 0 : ro.disconnect();
|
|
220
|
+
_this.cleanup();
|
|
326
221
|
};
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
222
|
+
};
|
|
223
|
+
this._willUpdate = function () {
|
|
224
|
+
_this.pendingScrollToIndexCallback == null ? void 0 : _this.pendingScrollToIndexCallback();
|
|
225
|
+
var scrollElement = _this.options.getScrollElement();
|
|
226
|
+
if (_this.scrollElement !== scrollElement) {
|
|
227
|
+
_this.cleanup();
|
|
228
|
+
_this.scrollElement = scrollElement;
|
|
229
|
+
_this._scrollToOffset(_this.scrollOffset, {
|
|
230
|
+
adjustments: undefined,
|
|
231
|
+
behavior: undefined
|
|
232
|
+
});
|
|
233
|
+
_this.unsubs.push(_this.options.observeElementRect(_this, function (rect) {
|
|
234
|
+
_this.scrollRect = rect;
|
|
235
|
+
_this.calculateRange();
|
|
236
|
+
}));
|
|
237
|
+
_this.unsubs.push(_this.options.observeElementOffset(_this, function (offset) {
|
|
238
|
+
_this.scrollAdjustments = 0;
|
|
239
|
+
if (_this.scrollOffset === offset) {
|
|
240
|
+
return;
|
|
339
241
|
}
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
if (prevNode) {
|
|
344
|
-
ro == null ? void 0 : ro.unobserve(prevNode);
|
|
242
|
+
if (_this.isScrollingTimeoutId !== null) {
|
|
243
|
+
clearTimeout(_this.isScrollingTimeoutId);
|
|
244
|
+
_this.isScrollingTimeoutId = null;
|
|
345
245
|
}
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
const itemSize = this.itemMeasurementsCache[item.key] ?? item.size;
|
|
351
|
-
const delta = measuredItemSize - itemSize;
|
|
352
|
-
if (delta !== 0) {
|
|
353
|
-
if (item.start < this.scrollOffset && this.isScrolling) {
|
|
354
|
-
if (process.env.NODE_ENV !== 'production' && this.options.debug) {
|
|
355
|
-
console.info('correction', delta);
|
|
246
|
+
var onIsScrollingChange = function onIsScrollingChange(isScrolling) {
|
|
247
|
+
if (_this.isScrolling !== isScrolling) {
|
|
248
|
+
_this.isScrolling = isScrolling;
|
|
249
|
+
_this.notify();
|
|
356
250
|
}
|
|
357
|
-
this._scrollToOffset(this.scrollOffset, {
|
|
358
|
-
adjustments: this.scrollAdjustments += delta,
|
|
359
|
-
behavior: undefined,
|
|
360
|
-
sync: false
|
|
361
|
-
});
|
|
362
|
-
}
|
|
363
|
-
this.pendingMeasuredCacheIndexes.push(index);
|
|
364
|
-
this.itemMeasurementsCache = {
|
|
365
|
-
...this.itemMeasurementsCache,
|
|
366
|
-
[item.key]: measuredItemSize
|
|
367
251
|
};
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
252
|
+
_this.scrollDirection = _this.scrollOffset < offset ? 'forward' : 'backward';
|
|
253
|
+
_this.scrollOffset = offset;
|
|
254
|
+
_this.calculateRange();
|
|
255
|
+
onIsScrollingChange(true);
|
|
256
|
+
_this.isScrollingTimeoutId = setTimeout(function () {
|
|
257
|
+
_this.isScrollingTimeoutId = null;
|
|
258
|
+
_this.scrollDirection = null;
|
|
259
|
+
onIsScrollingChange(false);
|
|
260
|
+
}, _this.options.scrollingDelay);
|
|
261
|
+
}));
|
|
262
|
+
} else if (!_this.isScrolling) {
|
|
263
|
+
_this.calculateRange();
|
|
264
|
+
}
|
|
265
|
+
};
|
|
266
|
+
this.getSize = function () {
|
|
267
|
+
return _this.scrollRect[_this.options.horizontal ? 'width' : 'height'];
|
|
268
|
+
};
|
|
269
|
+
this.getMeasurements = utils.memo(function () {
|
|
270
|
+
return [_this.options.count, _this.options.paddingStart, _this.options.scrollMargin, _this.options.getItemKey, _this.itemSizeCache];
|
|
271
|
+
}, function (count, paddingStart, scrollMargin, getItemKey, itemSizeCache) {
|
|
272
|
+
var min = _this.pendingMeasuredCacheIndexes.length > 0 ? Math.min.apply(Math, _this.pendingMeasuredCacheIndexes) : 0;
|
|
273
|
+
_this.pendingMeasuredCacheIndexes = [];
|
|
274
|
+
var measurements = _this.measurementsCache.slice(0, min);
|
|
275
|
+
for (var _i2 = min; _i2 < count; _i2++) {
|
|
276
|
+
var key = getItemKey(_i2);
|
|
277
|
+
var measuredSize = itemSizeCache[key];
|
|
278
|
+
var start = measurements[_i2 - 1] ? measurements[_i2 - 1].end : paddingStart + scrollMargin;
|
|
279
|
+
var size = typeof measuredSize === 'number' ? measuredSize : _this.options.estimateSize(_i2);
|
|
280
|
+
var end = start + size;
|
|
281
|
+
measurements[_i2] = {
|
|
282
|
+
index: _i2,
|
|
283
|
+
start: start,
|
|
284
|
+
size: size,
|
|
285
|
+
end: end,
|
|
286
|
+
key: key
|
|
287
|
+
};
|
|
288
|
+
}
|
|
289
|
+
_this.measurementsCache = measurements;
|
|
290
|
+
return measurements;
|
|
291
|
+
}, {
|
|
292
|
+
key: process.env.NODE_ENV !== 'production' && 'getMeasurements',
|
|
293
|
+
debug: function debug() {
|
|
294
|
+
return _this.options.debug;
|
|
295
|
+
}
|
|
296
|
+
});
|
|
297
|
+
this.calculateRange = utils.memo(function () {
|
|
298
|
+
return [_this.getMeasurements(), _this.getSize(), _this.scrollOffset];
|
|
299
|
+
}, function (measurements, outerSize, scrollOffset) {
|
|
300
|
+
var range = calculateRange({
|
|
301
|
+
measurements: measurements,
|
|
302
|
+
outerSize: outerSize,
|
|
303
|
+
scrollOffset: scrollOffset
|
|
304
|
+
});
|
|
305
|
+
if (range.startIndex !== _this.range.startIndex || range.endIndex !== _this.range.endIndex) {
|
|
306
|
+
_this.range = range;
|
|
307
|
+
_this.notify();
|
|
308
|
+
}
|
|
309
|
+
return _this.range;
|
|
310
|
+
}, {
|
|
311
|
+
key: process.env.NODE_ENV !== 'production' && 'calculateRange',
|
|
312
|
+
debug: function debug() {
|
|
313
|
+
return _this.options.debug;
|
|
314
|
+
}
|
|
315
|
+
});
|
|
316
|
+
this.getIndexes = utils.memo(function () {
|
|
317
|
+
return [_this.options.rangeExtractor, _this.range, _this.options.overscan, _this.options.count];
|
|
318
|
+
}, function (rangeExtractor, range, overscan, count) {
|
|
319
|
+
return rangeExtractor(_rollupPluginBabelHelpers["extends"]({}, range, {
|
|
320
|
+
overscan: overscan,
|
|
321
|
+
count: count
|
|
322
|
+
}));
|
|
323
|
+
}, {
|
|
324
|
+
key: process.env.NODE_ENV !== 'production' && 'getIndexes',
|
|
325
|
+
debug: function debug() {
|
|
326
|
+
return _this.options.debug;
|
|
327
|
+
}
|
|
328
|
+
});
|
|
329
|
+
this.indexFromElement = function (node) {
|
|
330
|
+
var attributeName = _this.options.indexAttribute;
|
|
331
|
+
var indexStr = node.getAttribute(attributeName);
|
|
332
|
+
if (!indexStr) {
|
|
333
|
+
console.warn("Missing attribute name '" + attributeName + "={index}' on measured element.");
|
|
334
|
+
return -1;
|
|
335
|
+
}
|
|
336
|
+
return parseInt(indexStr, 10);
|
|
337
|
+
};
|
|
338
|
+
this._measureElement = function (node, _sync) {
|
|
339
|
+
var _this$itemSizeCache$i;
|
|
340
|
+
var index = _this.indexFromElement(node);
|
|
341
|
+
var item = _this.measurementsCache[index];
|
|
342
|
+
if (!item) {
|
|
343
|
+
return;
|
|
344
|
+
}
|
|
345
|
+
var prevNode = _this.measureElementCache[item.key];
|
|
346
|
+
var ro = _this.getResizeObserver();
|
|
347
|
+
if (!node.isConnected) {
|
|
348
|
+
if (prevNode) {
|
|
349
|
+
ro == null ? void 0 : ro.unobserve(prevNode);
|
|
350
|
+
delete _this.measureElementCache[item.key];
|
|
374
351
|
}
|
|
375
|
-
|
|
376
|
-
}
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
const i = indexes[k];
|
|
381
|
-
const measurement = measurements[i];
|
|
382
|
-
virtualItems.push(measurement);
|
|
352
|
+
return;
|
|
353
|
+
}
|
|
354
|
+
if (!prevNode || prevNode !== node) {
|
|
355
|
+
if (prevNode) {
|
|
356
|
+
ro == null ? void 0 : ro.unobserve(prevNode);
|
|
383
357
|
}
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
const size = _this.getSize();
|
|
396
|
-
if (align === 'auto') {
|
|
397
|
-
if (toOffset <= offset) {
|
|
398
|
-
align = 'start';
|
|
399
|
-
} else if (toOffset >= offset + size) {
|
|
400
|
-
align = 'end';
|
|
401
|
-
} else {
|
|
402
|
-
align = 'start';
|
|
358
|
+
_this.measureElementCache[item.key] = node;
|
|
359
|
+
ro == null ? void 0 : ro.observe(node);
|
|
360
|
+
}
|
|
361
|
+
var measuredItemSize = _this.options.measureElement(node, _this);
|
|
362
|
+
var itemSize = (_this$itemSizeCache$i = _this.itemSizeCache[item.key]) != null ? _this$itemSizeCache$i : item.size;
|
|
363
|
+
var delta = measuredItemSize - itemSize;
|
|
364
|
+
if (delta !== 0) {
|
|
365
|
+
var _extends2;
|
|
366
|
+
if (item.start < _this.scrollOffset && _this.isScrolling && _this.scrollDirection === 'backward') {
|
|
367
|
+
if (process.env.NODE_ENV !== 'production' && _this.options.debug) {
|
|
368
|
+
console.info('correction', delta);
|
|
403
369
|
}
|
|
370
|
+
_this._scrollToOffset(_this.scrollOffset, {
|
|
371
|
+
adjustments: _this.scrollAdjustments += delta,
|
|
372
|
+
behavior: undefined
|
|
373
|
+
});
|
|
404
374
|
}
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
375
|
+
_this.pendingMeasuredCacheIndexes.push(index);
|
|
376
|
+
_this.itemSizeCache = _rollupPluginBabelHelpers["extends"]({}, _this.itemSizeCache, (_extends2 = {}, _extends2[item.key] = measuredItemSize, _extends2));
|
|
377
|
+
_this.notify();
|
|
378
|
+
}
|
|
379
|
+
};
|
|
380
|
+
this.measureElement = function (node) {
|
|
381
|
+
if (!node) {
|
|
382
|
+
return;
|
|
383
|
+
}
|
|
384
|
+
_this._measureElement(node, true);
|
|
385
|
+
};
|
|
386
|
+
this.getVirtualItems = utils.memo(function () {
|
|
387
|
+
return [_this.getIndexes(), _this.getMeasurements()];
|
|
388
|
+
}, function (indexes, measurements) {
|
|
389
|
+
var virtualItems = [];
|
|
390
|
+
for (var k = 0, len = indexes.length; k < len; k++) {
|
|
391
|
+
var _i3 = indexes[k];
|
|
392
|
+
var measurement = measurements[_i3];
|
|
393
|
+
virtualItems.push(measurement);
|
|
394
|
+
}
|
|
395
|
+
return virtualItems;
|
|
396
|
+
}, {
|
|
397
|
+
key: process.env.NODE_ENV !== 'production' && 'getIndexes',
|
|
398
|
+
debug: function debug() {
|
|
399
|
+
return _this.options.debug;
|
|
400
|
+
}
|
|
401
|
+
});
|
|
402
|
+
this.getOffsetForAlignment = function (toOffset, align) {
|
|
403
|
+
var offset = _this.scrollOffset;
|
|
404
|
+
var size = _this.getSize();
|
|
405
|
+
if (align === 'auto') {
|
|
406
|
+
if (toOffset <= offset) {
|
|
407
|
+
align = 'start';
|
|
408
|
+
} else if (toOffset >= offset + size) {
|
|
409
|
+
align = 'end';
|
|
410
|
+
} else {
|
|
411
|
+
align = 'start';
|
|
416
412
|
}
|
|
413
|
+
}
|
|
414
|
+
if (align === 'start') {
|
|
415
|
+
return toOffset;
|
|
416
|
+
} else if (align === 'end') {
|
|
417
|
+
return toOffset - size;
|
|
418
|
+
} else if (align === 'center') {
|
|
419
|
+
return toOffset - size / 2;
|
|
420
|
+
}
|
|
421
|
+
return toOffset;
|
|
422
|
+
};
|
|
423
|
+
this.scrollToOffset = function (toOffset, _temp) {
|
|
424
|
+
var _ref4 = _temp === void 0 ? {} : _temp,
|
|
425
|
+
_ref4$align = _ref4.align,
|
|
426
|
+
align = _ref4$align === void 0 ? 'start' : _ref4$align,
|
|
427
|
+
behavior = _ref4.behavior;
|
|
428
|
+
var options = {
|
|
429
|
+
adjustments: undefined,
|
|
430
|
+
behavior: behavior,
|
|
431
|
+
sync: false
|
|
417
432
|
};
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
433
|
+
_this._scrollToOffset(_this.getOffsetForAlignment(toOffset, align), options);
|
|
434
|
+
};
|
|
435
|
+
this.scrollToIndex = function (index, _temp2) {
|
|
436
|
+
var _ref5 = _temp2 === void 0 ? {} : _temp2,
|
|
437
|
+
_ref5$align = _ref5.align,
|
|
438
|
+
align = _ref5$align === void 0 ? 'auto' : _ref5$align,
|
|
439
|
+
behavior = _ref5.behavior;
|
|
440
|
+
_this.pendingScrollToIndexCallback = null;
|
|
441
|
+
var offset = _this.scrollOffset;
|
|
442
|
+
var size = _this.getSize();
|
|
443
|
+
var count = _this.options.count;
|
|
444
|
+
var measurements = _this.getMeasurements();
|
|
445
|
+
var measurement = measurements[Math.max(0, Math.min(index, count - 1))];
|
|
446
|
+
if (!measurement) {
|
|
447
|
+
throw new Error("VirtualItem not found for index = " + index);
|
|
448
|
+
}
|
|
449
|
+
if (align === 'auto') {
|
|
450
|
+
if (measurement.end >= offset + size - _this.options.scrollPaddingEnd) {
|
|
451
|
+
align = 'end';
|
|
452
|
+
} else if (measurement.start <= offset + _this.options.scrollPaddingStart) {
|
|
453
|
+
align = 'start';
|
|
454
|
+
} else {
|
|
432
455
|
return;
|
|
433
456
|
}
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
align = 'start';
|
|
439
|
-
} else {
|
|
440
|
-
return;
|
|
441
|
-
}
|
|
442
|
-
}
|
|
443
|
-
const toOffset = align === 'end' ? measurement.end + _this.options.scrollPaddingEnd : measurement.start - _this.options.scrollPaddingStart;
|
|
444
|
-
_this.scrollToOffset(toOffset, {
|
|
445
|
-
align,
|
|
446
|
-
...rest
|
|
447
|
-
});
|
|
448
|
-
const isDynamic = Object.keys(_this.measureElementCache).length > 0;
|
|
449
|
-
if (isDynamic) {
|
|
450
|
-
const didSeen = () => typeof _this.itemMeasurementsCache[_this.options.getItemKey(index)] === 'number';
|
|
451
|
-
if (!didSeen()) {
|
|
452
|
-
_this.pendingScrollToIndexCallback = () => {
|
|
453
|
-
if (didSeen()) {
|
|
454
|
-
_this.pendingScrollToIndexCallback = null;
|
|
455
|
-
_this.scrollToIndex(index, {
|
|
456
|
-
align,
|
|
457
|
-
...rest
|
|
458
|
-
});
|
|
459
|
-
}
|
|
460
|
-
};
|
|
461
|
-
}
|
|
462
|
-
}
|
|
463
|
-
};
|
|
464
|
-
this.getTotalSize = () => {
|
|
465
|
-
var _this$getMeasurements;
|
|
466
|
-
return (((_this$getMeasurements = this.getMeasurements()[this.options.count - 1]) == null ? void 0 : _this$getMeasurements.end) || this.options.paddingStart) + this.options.paddingEnd;
|
|
467
|
-
};
|
|
468
|
-
this._scrollToOffset = (offset, _ref4) => {
|
|
469
|
-
let {
|
|
470
|
-
adjustments,
|
|
471
|
-
behavior,
|
|
472
|
-
sync
|
|
473
|
-
} = _ref4;
|
|
474
|
-
this.options.scrollToFn(offset, {
|
|
475
|
-
behavior,
|
|
476
|
-
sync,
|
|
477
|
-
adjustments
|
|
478
|
-
}, this);
|
|
457
|
+
}
|
|
458
|
+
var getOffsetForIndexAndAlignment = function getOffsetForIndexAndAlignment(measurement) {
|
|
459
|
+
var toOffset = align === 'end' ? measurement.end + _this.options.scrollPaddingEnd : measurement.start - _this.options.scrollPaddingStart;
|
|
460
|
+
return _this.getOffsetForAlignment(toOffset, align);
|
|
479
461
|
};
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
462
|
+
var toOffset = getOffsetForIndexAndAlignment(measurement);
|
|
463
|
+
if (toOffset === offset) {
|
|
464
|
+
return;
|
|
465
|
+
}
|
|
466
|
+
var options = {
|
|
467
|
+
adjustments: undefined,
|
|
468
|
+
behavior: behavior
|
|
483
469
|
};
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
470
|
+
_this._scrollToOffset(toOffset, options);
|
|
471
|
+
var isDynamic = Object.keys(_this.measureElementCache).length > 0;
|
|
472
|
+
if (isDynamic) {
|
|
473
|
+
_this.pendingScrollToIndexCallback = function () {
|
|
474
|
+
_this.scrollToIndex(index, {
|
|
475
|
+
align: align,
|
|
476
|
+
behavior: behavior
|
|
477
|
+
});
|
|
478
|
+
};
|
|
479
|
+
}
|
|
480
|
+
};
|
|
481
|
+
this.scrollBy = function (adjustments, options) {
|
|
482
|
+
_this._scrollToOffset(_this.scrollOffset, {
|
|
483
|
+
adjustments: adjustments,
|
|
484
|
+
behavior: options == null ? void 0 : options.behavior
|
|
485
|
+
});
|
|
486
|
+
};
|
|
487
|
+
this.getTotalSize = function () {
|
|
488
|
+
var _this$getMeasurements;
|
|
489
|
+
return (((_this$getMeasurements = _this.getMeasurements()[_this.options.count - 1]) == null ? void 0 : _this$getMeasurements.end) || _this.options.paddingStart) - _this.options.scrollMargin + _this.options.paddingEnd;
|
|
490
|
+
};
|
|
491
|
+
this._scrollToOffset = function (offset, _ref6) {
|
|
492
|
+
var adjustments = _ref6.adjustments,
|
|
493
|
+
behavior = _ref6.behavior;
|
|
494
|
+
_this.options.scrollToFn(offset, {
|
|
495
|
+
behavior: behavior,
|
|
496
|
+
adjustments: adjustments
|
|
497
|
+
}, _this);
|
|
498
|
+
};
|
|
499
|
+
this.measure = function () {
|
|
500
|
+
_this.itemSizeCache = {};
|
|
501
|
+
_this.notify();
|
|
502
|
+
};
|
|
503
|
+
this.setOptions(_opts);
|
|
504
|
+
this.scrollRect = this.options.initialRect;
|
|
505
|
+
this.scrollOffset = this.options.initialOffset;
|
|
506
|
+
this.measurementsCache = this.options.initialMeasurementsCache;
|
|
507
|
+
this.measurementsCache.forEach(function (item) {
|
|
508
|
+
_this.itemSizeCache[item.key] = item.size;
|
|
509
|
+
});
|
|
510
|
+
this.calculateRange();
|
|
511
|
+
};
|
|
512
|
+
var findNearestBinarySearch = function findNearestBinarySearch(low, high, getCurrentValue, value) {
|
|
491
513
|
while (low <= high) {
|
|
492
|
-
|
|
493
|
-
|
|
514
|
+
var middle = (low + high) / 2 | 0;
|
|
515
|
+
var currentValue = getCurrentValue(middle);
|
|
494
516
|
if (currentValue < value) {
|
|
495
517
|
low = middle + 1;
|
|
496
518
|
} else if (currentValue > value) {
|
|
@@ -505,22 +527,22 @@ const findNearestBinarySearch = (low, high, getCurrentValue, value) => {
|
|
|
505
527
|
return 0;
|
|
506
528
|
}
|
|
507
529
|
};
|
|
508
|
-
function calculateRange(
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
530
|
+
function calculateRange(_ref7) {
|
|
531
|
+
var measurements = _ref7.measurements,
|
|
532
|
+
outerSize = _ref7.outerSize,
|
|
533
|
+
scrollOffset = _ref7.scrollOffset;
|
|
534
|
+
var count = measurements.length - 1;
|
|
535
|
+
var getOffset = function getOffset(index) {
|
|
536
|
+
return measurements[index].start;
|
|
537
|
+
};
|
|
538
|
+
var startIndex = findNearestBinarySearch(0, count, getOffset, scrollOffset);
|
|
539
|
+
var endIndex = startIndex;
|
|
518
540
|
while (endIndex < count && measurements[endIndex].end < scrollOffset + outerSize) {
|
|
519
541
|
endIndex++;
|
|
520
542
|
}
|
|
521
543
|
return {
|
|
522
|
-
startIndex,
|
|
523
|
-
endIndex
|
|
544
|
+
startIndex: startIndex,
|
|
545
|
+
endIndex: endIndex
|
|
524
546
|
};
|
|
525
547
|
}
|
|
526
548
|
|