virtual-scroller 1.7.9 → 1.9.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/.gitlab-ci.yml +1 -1
- package/CHANGELOG.md +71 -1
- package/README.md +434 -151
- package/bundle/index-bypass.html +1 -1
- package/bundle/index-dom.html +1 -1
- package/bundle/index-grid.html +1 -2
- package/bundle/index-scrollableContainer.html +1 -1
- package/bundle/index-tbody-scrollableContainer.html +2 -0
- package/bundle/index-tbody.html +2 -0
- package/bundle/virtual-scroller-dom.js +1 -1
- package/bundle/virtual-scroller-dom.js.map +1 -1
- package/bundle/virtual-scroller-react.js +1 -1
- package/bundle/virtual-scroller-react.js.map +1 -1
- package/bundle/virtual-scroller.js +1 -1
- package/bundle/virtual-scroller.js.map +1 -1
- package/commonjs/BeforeResize.js +315 -0
- package/commonjs/BeforeResize.js.map +1 -0
- package/commonjs/DOM/Engine.js +46 -0
- package/commonjs/DOM/Engine.js.map +1 -0
- package/commonjs/DOM/ItemsContainer.js +78 -0
- package/commonjs/DOM/ItemsContainer.js.map +1 -0
- package/commonjs/DOM/{WaitForStylesToLoad.js → ListTopOffsetWatcher.js} +71 -44
- package/commonjs/DOM/ListTopOffsetWatcher.js.map +1 -0
- package/commonjs/DOM/ScrollableContainer.js +69 -101
- package/commonjs/DOM/ScrollableContainer.js.map +1 -1
- package/commonjs/DOM/VirtualScroller.js +37 -29
- package/commonjs/DOM/VirtualScroller.js.map +1 -1
- package/commonjs/DOM/tbody.js +17 -11
- package/commonjs/DOM/tbody.js.map +1 -1
- package/commonjs/ItemHeights.js +33 -34
- package/commonjs/ItemHeights.js.map +1 -1
- package/commonjs/Layout.js +591 -216
- package/commonjs/Layout.js.map +1 -1
- package/commonjs/Layout.test.js +196 -0
- package/commonjs/Layout.test.js.map +1 -0
- package/commonjs/ListHeightMeasurement.js +124 -0
- package/commonjs/ListHeightMeasurement.js.map +1 -0
- package/commonjs/Resize.js +50 -39
- package/commonjs/Resize.js.map +1 -1
- package/commonjs/Scroll.js +139 -95
- package/commonjs/Scroll.js.map +1 -1
- package/commonjs/VirtualScroller.columns.js +43 -0
- package/commonjs/VirtualScroller.columns.js.map +1 -0
- package/commonjs/VirtualScroller.constructor.js +408 -0
- package/commonjs/VirtualScroller.constructor.js.map +1 -0
- package/commonjs/VirtualScroller.items.js +305 -0
- package/commonjs/VirtualScroller.items.js.map +1 -0
- package/commonjs/VirtualScroller.js +160 -1021
- package/commonjs/VirtualScroller.js.map +1 -1
- package/commonjs/VirtualScroller.layout.js +562 -0
- package/commonjs/VirtualScroller.layout.js.map +1 -0
- package/commonjs/VirtualScroller.onRender.js +357 -0
- package/commonjs/VirtualScroller.onRender.js.map +1 -0
- package/commonjs/VirtualScroller.resize.js +186 -0
- package/commonjs/VirtualScroller.resize.js.map +1 -0
- package/commonjs/VirtualScroller.state.js +301 -0
- package/commonjs/VirtualScroller.state.js.map +1 -0
- package/commonjs/VirtualScroller.verticalSpacing.js +65 -0
- package/commonjs/VirtualScroller.verticalSpacing.js.map +1 -0
- package/commonjs/getItemCoordinates.js.map +1 -1
- package/commonjs/getItemsDiff.js.map +1 -1
- package/commonjs/getVerticalSpacing.js +8 -8
- package/commonjs/getVerticalSpacing.js.map +1 -1
- package/commonjs/package.json +5 -0
- package/commonjs/react/VirtualScroller.js +182 -628
- package/commonjs/react/VirtualScroller.js.map +1 -1
- package/commonjs/react/useClassName.js +26 -0
- package/commonjs/react/useClassName.js.map +1 -0
- package/commonjs/react/useHandleItemsChange.js +116 -0
- package/commonjs/react/useHandleItemsChange.js.map +1 -0
- package/commonjs/react/useInstanceMethods.js +37 -0
- package/commonjs/react/useInstanceMethods.js.map +1 -0
- package/commonjs/react/useItemKeys.js +60 -0
- package/commonjs/react/useItemKeys.js.map +1 -0
- package/commonjs/react/useOnItemHeightChange.js +32 -0
- package/commonjs/react/useOnItemHeightChange.js.map +1 -0
- package/commonjs/react/useOnItemStateChange.js +32 -0
- package/commonjs/react/useOnItemStateChange.js.map +1 -0
- package/commonjs/react/useState.js +140 -0
- package/commonjs/react/useState.js.map +1 -0
- package/commonjs/react/useStyle.js +29 -0
- package/commonjs/react/useStyle.js.map +1 -0
- package/commonjs/react/useVirtualScroller.js +62 -0
- package/commonjs/react/useVirtualScroller.js.map +1 -0
- package/commonjs/react/useVirtualScrollerStartStop.js +20 -0
- package/commonjs/react/useVirtualScrollerStartStop.js.map +1 -0
- package/commonjs/test/Engine.js +23 -0
- package/commonjs/test/Engine.js.map +1 -0
- package/commonjs/test/ItemsContainer.js +127 -0
- package/commonjs/test/ItemsContainer.js.map +1 -0
- package/commonjs/test/ScrollableContainer.js +130 -0
- package/commonjs/test/ScrollableContainer.js.map +1 -0
- package/commonjs/test/VirtualScroller.js +281 -0
- package/commonjs/test/VirtualScroller.js.map +1 -0
- package/commonjs/utility/debounce.js +28 -6
- package/commonjs/utility/debounce.js.map +1 -1
- package/commonjs/utility/debug.js +51 -12
- package/commonjs/utility/debug.js.map +1 -1
- package/commonjs/utility/getStateSnapshot.js +50 -0
- package/commonjs/utility/getStateSnapshot.js.map +1 -0
- package/commonjs/utility/px.js +1 -1
- package/commonjs/utility/px.js.map +1 -1
- package/commonjs/utility/px.test.js +14 -0
- package/commonjs/utility/px.test.js.map +1 -0
- package/commonjs/utility/shallowEqual.js +1 -1
- package/commonjs/utility/shallowEqual.js.map +1 -1
- package/commonjs/utility/throttle.js.map +1 -1
- package/dom/index.cjs +4 -0
- package/dom/index.cjs.js +9 -0
- package/dom/index.d.ts +25 -0
- package/dom/index.js +1 -1
- package/dom/package.json +10 -4
- package/index.cjs +4 -0
- package/index.cjs.js +9 -0
- package/index.d.ts +99 -0
- package/index.js +1 -1
- package/modules/BeforeResize.js +305 -0
- package/modules/BeforeResize.js.map +1 -0
- package/modules/DOM/Engine.js +27 -0
- package/modules/DOM/Engine.js.map +1 -0
- package/modules/DOM/ItemsContainer.js +71 -0
- package/modules/DOM/ItemsContainer.js.map +1 -0
- package/modules/DOM/{WaitForStylesToLoad.js → ListTopOffsetWatcher.js} +72 -44
- package/modules/DOM/ListTopOffsetWatcher.js.map +1 -0
- package/modules/DOM/ScrollableContainer.js +68 -100
- package/modules/DOM/ScrollableContainer.js.map +1 -1
- package/modules/DOM/VirtualScroller.js +32 -28
- package/modules/DOM/VirtualScroller.js.map +1 -1
- package/modules/DOM/tbody.js +11 -9
- package/modules/DOM/tbody.js.map +1 -1
- package/modules/ItemHeights.js +28 -33
- package/modules/ItemHeights.js.map +1 -1
- package/modules/Layout.js +585 -214
- package/modules/Layout.js.map +1 -1
- package/modules/Layout.test.js +190 -0
- package/modules/Layout.test.js.map +1 -0
- package/modules/ListHeightMeasurement.js +117 -0
- package/modules/ListHeightMeasurement.js.map +1 -0
- package/modules/Resize.js +50 -39
- package/modules/Resize.js.map +1 -1
- package/modules/Scroll.js +139 -94
- package/modules/Scroll.js.map +1 -1
- package/modules/VirtualScroller.columns.js +36 -0
- package/modules/VirtualScroller.columns.js.map +1 -0
- package/modules/VirtualScroller.constructor.js +371 -0
- package/modules/VirtualScroller.constructor.js.map +1 -0
- package/modules/VirtualScroller.items.js +288 -0
- package/modules/VirtualScroller.items.js.map +1 -0
- package/modules/VirtualScroller.js +159 -1014
- package/modules/VirtualScroller.js.map +1 -1
- package/modules/VirtualScroller.layout.js +549 -0
- package/modules/VirtualScroller.layout.js.map +1 -0
- package/modules/VirtualScroller.onRender.js +337 -0
- package/modules/VirtualScroller.onRender.js.map +1 -0
- package/modules/VirtualScroller.resize.js +176 -0
- package/modules/VirtualScroller.resize.js.map +1 -0
- package/modules/VirtualScroller.state.js +283 -0
- package/modules/VirtualScroller.state.js.map +1 -0
- package/modules/VirtualScroller.verticalSpacing.js +54 -0
- package/modules/VirtualScroller.verticalSpacing.js.map +1 -0
- package/modules/getItemCoordinates.js.map +1 -1
- package/modules/getItemsDiff.js.map +1 -1
- package/modules/getVerticalSpacing.js +8 -8
- package/modules/getVerticalSpacing.js.map +1 -1
- package/modules/react/VirtualScroller.js +179 -634
- package/modules/react/VirtualScroller.js.map +1 -1
- package/modules/react/useClassName.js +18 -0
- package/modules/react/useClassName.js.map +1 -0
- package/modules/react/useHandleItemsChange.js +108 -0
- package/modules/react/useHandleItemsChange.js.map +1 -0
- package/modules/react/useInstanceMethods.js +28 -0
- package/modules/react/useInstanceMethods.js.map +1 -0
- package/modules/react/useItemKeys.js +52 -0
- package/modules/react/useItemKeys.js.map +1 -0
- package/modules/react/useOnItemHeightChange.js +24 -0
- package/modules/react/useOnItemHeightChange.js.map +1 -0
- package/modules/react/useOnItemStateChange.js +24 -0
- package/modules/react/useOnItemStateChange.js.map +1 -0
- package/modules/react/useState.js +132 -0
- package/modules/react/useState.js.map +1 -0
- package/modules/react/useStyle.js +19 -0
- package/modules/react/useStyle.js.map +1 -0
- package/modules/react/useVirtualScroller.js +51 -0
- package/modules/react/useVirtualScroller.js.map +1 -0
- package/modules/react/useVirtualScrollerStartStop.js +12 -0
- package/modules/react/useVirtualScrollerStartStop.js.map +1 -0
- package/modules/test/Engine.js +11 -0
- package/modules/test/Engine.js.map +1 -0
- package/modules/test/ItemsContainer.js +120 -0
- package/modules/test/ItemsContainer.js.map +1 -0
- package/modules/test/ScrollableContainer.js +123 -0
- package/modules/test/ScrollableContainer.js.map +1 -0
- package/modules/test/VirtualScroller.js +270 -0
- package/modules/test/VirtualScroller.js.map +1 -0
- package/modules/utility/debounce.js +28 -6
- package/modules/utility/debounce.js.map +1 -1
- package/modules/utility/debug.js +47 -10
- package/modules/utility/debug.js.map +1 -1
- package/modules/utility/getStateSnapshot.js +43 -0
- package/modules/utility/getStateSnapshot.js.map +1 -0
- package/modules/utility/px.js +1 -1
- package/modules/utility/px.js.map +1 -1
- package/modules/utility/px.test.js +9 -0
- package/modules/utility/px.test.js.map +1 -0
- package/modules/utility/shallowEqual.js +1 -1
- package/modules/utility/shallowEqual.js.map +1 -1
- package/modules/utility/throttle.js.map +1 -1
- package/package.json +54 -29
- package/react/index.cjs +4 -0
- package/react/index.cjs.js +9 -0
- package/react/index.d.ts +28 -0
- package/react/index.js +1 -1
- package/react/package.json +10 -4
- package/rollup.config.mjs +62 -0
- package/runnable/create-commonjs-package-json.js +11 -0
- package/source/BeforeResize.js +312 -0
- package/source/DOM/Engine.js +30 -0
- package/source/DOM/ItemsContainer.js +48 -0
- package/source/DOM/{WaitForStylesToLoad.js → ListTopOffsetWatcher.js} +61 -30
- package/source/DOM/ScrollableContainer.js +51 -73
- package/source/DOM/VirtualScroller.js +33 -18
- package/source/DOM/tbody.js +30 -21
- package/source/ItemHeights.js +27 -27
- package/source/Layout.js +629 -252
- package/source/Layout.test.js +176 -0
- package/source/ListHeightMeasurement.js +95 -0
- package/source/Resize.js +56 -32
- package/source/Scroll.js +135 -82
- package/source/VirtualScroller.columns.js +26 -0
- package/source/VirtualScroller.constructor.js +336 -0
- package/source/VirtualScroller.items.js +302 -0
- package/source/VirtualScroller.js +162 -936
- package/source/VirtualScroller.layout.js +539 -0
- package/source/VirtualScroller.onRender.js +345 -0
- package/source/VirtualScroller.resize.js +189 -0
- package/source/VirtualScroller.state.js +284 -0
- package/source/VirtualScroller.verticalSpacing.js +51 -0
- package/source/getVerticalSpacing.js +7 -7
- package/source/react/VirtualScroller.js +243 -603
- package/source/react/useClassName.js +14 -0
- package/source/react/useHandleItemsChange.js +115 -0
- package/source/react/useInstanceMethods.js +25 -0
- package/source/react/useItemKeys.js +59 -0
- package/source/react/useOnItemHeightChange.js +28 -0
- package/source/react/useOnItemStateChange.js +28 -0
- package/source/react/useState.js +114 -0
- package/source/react/useStyle.js +20 -0
- package/source/react/useVirtualScroller.js +59 -0
- package/source/react/useVirtualScrollerStartStop.js +12 -0
- package/source/test/Engine.js +11 -0
- package/source/test/ItemsContainer.js +87 -0
- package/source/test/ScrollableContainer.js +88 -0
- package/source/test/VirtualScroller.js +232 -0
- package/source/utility/debounce.js +22 -5
- package/source/utility/debug.js +34 -3
- package/source/utility/getStateSnapshot.js +36 -0
- package/source/utility/px.js +1 -1
- package/source/utility/px.test.js +9 -0
- package/website/index-bypass.html +195 -0
- package/website/index-grid.html +0 -1
- package/website/index-scrollableContainer.html +208 -0
- package/website/index-tbody-scrollableContainer.html +68 -0
- package/website/index-tbody.html +55 -0
- package/commonjs/DOM/RenderingEngine.js +0 -33
- package/commonjs/DOM/RenderingEngine.js.map +0 -1
- package/commonjs/DOM/Screen.js +0 -87
- package/commonjs/DOM/Screen.js.map +0 -1
- package/commonjs/DOM/WaitForStylesToLoad.js.map +0 -1
- package/commonjs/RestoreScroll.js +0 -118
- package/commonjs/RestoreScroll.js.map +0 -1
- package/dom/index.commonjs.js +0 -4
- package/index.commonjs.js +0 -4
- package/modules/DOM/RenderingEngine.js +0 -19
- package/modules/DOM/RenderingEngine.js.map +0 -1
- package/modules/DOM/Screen.js +0 -80
- package/modules/DOM/Screen.js.map +0 -1
- package/modules/DOM/WaitForStylesToLoad.js.map +0 -1
- package/modules/RestoreScroll.js +0 -111
- package/modules/RestoreScroll.js.map +0 -1
- package/react/index.commonjs.js +0 -4
- package/source/DOM/RenderingEngine.js +0 -22
- package/source/DOM/Screen.js +0 -51
- package/source/RestoreScroll.js +0 -86
package/modules/Resize.js
CHANGED
|
@@ -2,89 +2,100 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
|
|
|
2
2
|
|
|
3
3
|
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
|
4
4
|
|
|
5
|
-
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
|
5
|
+
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
6
6
|
|
|
7
7
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
8
8
|
|
|
9
|
-
import
|
|
10
|
-
import
|
|
9
|
+
import debounce from './utility/debounce.js';
|
|
10
|
+
import log from './utility/debug.js';
|
|
11
11
|
|
|
12
|
-
var Resize =
|
|
13
|
-
/*#__PURE__*/
|
|
14
|
-
function () {
|
|
12
|
+
var Resize = /*#__PURE__*/function () {
|
|
15
13
|
function Resize(_ref) {
|
|
16
14
|
var _this = this;
|
|
17
15
|
|
|
18
16
|
var bypass = _ref.bypass,
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
17
|
+
getWidth = _ref.getWidth,
|
|
18
|
+
getHeight = _ref.getHeight,
|
|
19
|
+
listenForResize = _ref.listenForResize,
|
|
20
|
+
onResizeStart = _ref.onResizeStart,
|
|
21
|
+
onResizeStop = _ref.onResizeStop,
|
|
22
|
+
onHeightChange = _ref.onHeightChange,
|
|
23
|
+
onWidthChange = _ref.onWidthChange,
|
|
24
|
+
onNoChange = _ref.onNoChange;
|
|
23
25
|
|
|
24
26
|
_classCallCheck(this, Resize);
|
|
25
27
|
|
|
26
|
-
_defineProperty(this, "
|
|
28
|
+
_defineProperty(this, "_onResize", function () {
|
|
27
29
|
// If `VirtualScroller` has been unmounted
|
|
28
30
|
// while `debounce()`'s `setTimeout()` was waiting, then exit.
|
|
29
|
-
|
|
31
|
+
// If the `VirtualScroller` gets restarted later, it will detect
|
|
32
|
+
// that `state.scrollableContainerWidth` doesn't match the actual
|
|
33
|
+
// scrollable container width, and will call `this.onResize()`.
|
|
34
|
+
if (!_this.isActive) {
|
|
30
35
|
return;
|
|
31
36
|
}
|
|
32
37
|
|
|
33
|
-
var prevScrollableContainerWidth = _this.
|
|
34
|
-
var prevScrollableContainerHeight = _this.
|
|
35
|
-
_this.
|
|
36
|
-
_this.
|
|
38
|
+
var prevScrollableContainerWidth = _this.width;
|
|
39
|
+
var prevScrollableContainerHeight = _this.height;
|
|
40
|
+
_this.width = _this.getWidth();
|
|
41
|
+
_this.height = _this.getHeight();
|
|
37
42
|
|
|
38
|
-
if (_this.
|
|
39
|
-
if (_this.
|
|
43
|
+
if (_this.width === prevScrollableContainerWidth) {
|
|
44
|
+
if (_this.height === prevScrollableContainerHeight) {
|
|
40
45
|
// The dimensions of the container didn't change,
|
|
41
46
|
// so there's no need to re-layout anything.
|
|
42
|
-
|
|
47
|
+
_this.onNoChange();
|
|
43
48
|
} else {
|
|
44
49
|
// Scrollable container height has changed,
|
|
45
50
|
// so just recalculate shown item indexes.
|
|
46
51
|
// No need to perform a re-layout from scratch.
|
|
47
|
-
_this.
|
|
48
|
-
reason: LAYOUT_REASON.RESIZE
|
|
49
|
-
});
|
|
52
|
+
_this.onHeightChange(prevScrollableContainerHeight, _this.height);
|
|
50
53
|
}
|
|
51
54
|
} else {
|
|
52
55
|
// Reset item heights, because if scrollable container's width (or height)
|
|
53
56
|
// has changed, then the list width (or height) most likely also has changed,
|
|
54
57
|
// and also some CSS `@media()` rules might have been added or removed.
|
|
55
58
|
// So re-render the list entirely.
|
|
56
|
-
_this.
|
|
59
|
+
_this.onWidthChange(prevScrollableContainerWidth, _this.width);
|
|
57
60
|
}
|
|
58
|
-
}
|
|
61
|
+
});
|
|
59
62
|
|
|
60
63
|
this.bypass = bypass;
|
|
61
|
-
this.
|
|
62
|
-
this.
|
|
63
|
-
this.
|
|
64
|
-
this.
|
|
64
|
+
this.onHeightChange = onHeightChange;
|
|
65
|
+
this.onWidthChange = onWidthChange;
|
|
66
|
+
this.onNoChange = onNoChange;
|
|
67
|
+
this.getWidth = getWidth;
|
|
68
|
+
this.getHeight = getHeight;
|
|
69
|
+
this.listenForResize = listenForResize;
|
|
70
|
+
this.onResize = debounce(this._onResize, SCROLLABLE_CONTAINER_RESIZE_DEBOUNCE_INTERVAL, {
|
|
71
|
+
onStart: onResizeStart,
|
|
72
|
+
onStop: onResizeStop
|
|
73
|
+
});
|
|
65
74
|
}
|
|
66
75
|
|
|
67
76
|
_createClass(Resize, [{
|
|
68
|
-
key: "
|
|
69
|
-
value: function
|
|
77
|
+
key: "start",
|
|
78
|
+
value: function start() {
|
|
79
|
+
this.isActive = true;
|
|
80
|
+
|
|
70
81
|
if (this.bypass) {
|
|
71
82
|
return;
|
|
72
83
|
}
|
|
73
84
|
|
|
74
|
-
this.
|
|
75
|
-
this.
|
|
76
|
-
this.
|
|
77
|
-
this.scrollableContainerUnlistenResize = this.scrollableContainer.onResize(this.onResize, {
|
|
78
|
-
container: this.getContainerElement()
|
|
79
|
-
});
|
|
85
|
+
this.width = this.getWidth();
|
|
86
|
+
this.height = this.getHeight();
|
|
87
|
+
this.unlistenResize = this.listenForResize(this.onResize);
|
|
80
88
|
}
|
|
81
89
|
}, {
|
|
82
90
|
key: "stop",
|
|
83
91
|
value: function stop() {
|
|
84
|
-
this.
|
|
92
|
+
this.isActive = false;
|
|
93
|
+
this.width = undefined;
|
|
94
|
+
this.height = undefined;
|
|
85
95
|
|
|
86
|
-
if (this.
|
|
87
|
-
this.
|
|
96
|
+
if (this.unlistenResize) {
|
|
97
|
+
this.unlistenResize();
|
|
98
|
+
this.unlistenResize = undefined;
|
|
88
99
|
}
|
|
89
100
|
}
|
|
90
101
|
/**
|
package/modules/Resize.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"Resize.js","names":["debounce","log","Resize","bypass","getWidth","getHeight","listenForResize","onResizeStart","onResizeStop","onHeightChange","onWidthChange","onNoChange","isActive","prevScrollableContainerWidth","width","prevScrollableContainerHeight","height","onResize","_onResize","SCROLLABLE_CONTAINER_RESIZE_DEBOUNCE_INTERVAL","onStart","onStop","unlistenResize","undefined"],"sources":["../source/Resize.js"],"sourcesContent":["import debounce from './utility/debounce.js'\r\nimport log from './utility/debug.js'\r\n\r\nexport default class Resize {\r\n\tconstructor({\r\n\t\tbypass,\r\n\t\tgetWidth,\r\n\t\tgetHeight,\r\n\t\tlistenForResize,\r\n\t\tonResizeStart,\r\n\t\tonResizeStop,\r\n\t\tonHeightChange,\r\n\t\tonWidthChange,\r\n\t\tonNoChange\r\n\t}) {\r\n\t\tthis.bypass = bypass\r\n\r\n\t\tthis.onHeightChange = onHeightChange\r\n\t\tthis.onWidthChange = onWidthChange\r\n\t\tthis.onNoChange = onNoChange\r\n\r\n\t\tthis.getWidth = getWidth\r\n\t\tthis.getHeight = getHeight\r\n\t\tthis.listenForResize = listenForResize\r\n\r\n\t\tthis.onResize = debounce(\r\n\t\t\tthis._onResize,\r\n\t\t\tSCROLLABLE_CONTAINER_RESIZE_DEBOUNCE_INTERVAL,\r\n\t\t\t{\r\n\t\t\t\tonStart: onResizeStart,\r\n\t\t\t\tonStop: onResizeStop\r\n\t\t\t}\r\n\t\t)\r\n\t}\r\n\r\n\tstart() {\r\n\t\tthis.isActive = true\r\n\t\tif (this.bypass) {\r\n\t\t\treturn\r\n\t\t}\r\n\t\tthis.width = this.getWidth()\r\n\t\tthis.height = this.getHeight()\r\n\t\tthis.unlistenResize = this.listenForResize(this.onResize)\r\n\t}\r\n\r\n\tstop() {\r\n\t\tthis.isActive = false\r\n\t\tthis.width = undefined\r\n\t\tthis.height = undefined\r\n\t\tif (this.unlistenResize) {\r\n\t\t\tthis.unlistenResize()\r\n\t\t\tthis.unlistenResize = undefined\r\n\t\t}\r\n\t}\r\n\r\n\t/**\r\n\t * On scrollable container resize.\r\n\t */\r\n\t_onResize = () => {\r\n\t\t// If `VirtualScroller` has been unmounted\r\n\t\t// while `debounce()`'s `setTimeout()` was waiting, then exit.\r\n\t\t// If the `VirtualScroller` gets restarted later, it will detect\r\n\t\t// that `state.scrollableContainerWidth` doesn't match the actual\r\n\t\t// scrollable container width, and will call `this.onResize()`.\r\n\t\tif (!this.isActive) {\r\n\t\t\treturn\r\n\t\t}\r\n\r\n\t\tconst prevScrollableContainerWidth = this.width\r\n\t\tconst prevScrollableContainerHeight = this.height\r\n\r\n\t\tthis.width = this.getWidth()\r\n\t\tthis.height = this.getHeight()\r\n\r\n\t\tif (this.width === prevScrollableContainerWidth) {\r\n\t\t\tif (this.height === prevScrollableContainerHeight) {\r\n\t\t\t\t// The dimensions of the container didn't change,\r\n\t\t\t\t// so there's no need to re-layout anything.\r\n\t\t\t\tthis.onNoChange()\r\n\t\t\t} else {\r\n\t\t\t\t// Scrollable container height has changed,\r\n\t\t\t\t// so just recalculate shown item indexes.\r\n\t\t\t\t// No need to perform a re-layout from scratch.\r\n\t\t\t\tthis.onHeightChange(prevScrollableContainerHeight, this.height)\r\n\t\t\t}\r\n\t\t} else {\r\n\t\t\t// Reset item heights, because if scrollable container's width (or height)\r\n\t\t\t// has changed, then the list width (or height) most likely also has changed,\r\n\t\t\t// and also some CSS `@media()` rules might have been added or removed.\r\n\t\t\t// So re-render the list entirely.\r\n\t\t\tthis.onWidthChange(prevScrollableContainerWidth, this.width)\r\n\t\t}\r\n\t}\r\n}\r\n\r\nconst SCROLLABLE_CONTAINER_RESIZE_DEBOUNCE_INTERVAL = 250"],"mappings":";;;;;;;;AAAA,OAAOA,QAAP,MAAqB,uBAArB;AACA,OAAOC,GAAP,MAAgB,oBAAhB;;IAEqBC,M;EACpB,sBAUG;IAAA;;IAAA,IATFC,MASE,QATFA,MASE;IAAA,IARFC,QAQE,QARFA,QAQE;IAAA,IAPFC,SAOE,QAPFA,SAOE;IAAA,IANFC,eAME,QANFA,eAME;IAAA,IALFC,aAKE,QALFA,aAKE;IAAA,IAJFC,YAIE,QAJFA,YAIE;IAAA,IAHFC,cAGE,QAHFA,cAGE;IAAA,IAFFC,aAEE,QAFFA,aAEE;IAAA,IADFC,UACE,QADFA,UACE;;IAAA;;IAAA,mCA4CS,YAAM;MACjB;MACA;MACA;MACA;MACA;MACA,IAAI,CAAC,KAAI,CAACC,QAAV,EAAoB;QACnB;MACA;;MAED,IAAMC,4BAA4B,GAAG,KAAI,CAACC,KAA1C;MACA,IAAMC,6BAA6B,GAAG,KAAI,CAACC,MAA3C;MAEA,KAAI,CAACF,KAAL,GAAa,KAAI,CAACV,QAAL,EAAb;MACA,KAAI,CAACY,MAAL,GAAc,KAAI,CAACX,SAAL,EAAd;;MAEA,IAAI,KAAI,CAACS,KAAL,KAAeD,4BAAnB,EAAiD;QAChD,IAAI,KAAI,CAACG,MAAL,KAAgBD,6BAApB,EAAmD;UAClD;UACA;UACA,KAAI,CAACJ,UAAL;QACA,CAJD,MAIO;UACN;UACA;UACA;UACA,KAAI,CAACF,cAAL,CAAoBM,6BAApB,EAAmD,KAAI,CAACC,MAAxD;QACA;MACD,CAXD,MAWO;QACN;QACA;QACA;QACA;QACA,KAAI,CAACN,aAAL,CAAmBG,4BAAnB,EAAiD,KAAI,CAACC,KAAtD;MACA;IACD,CA9EE;;IACF,KAAKX,MAAL,GAAcA,MAAd;IAEA,KAAKM,cAAL,GAAsBA,cAAtB;IACA,KAAKC,aAAL,GAAqBA,aAArB;IACA,KAAKC,UAAL,GAAkBA,UAAlB;IAEA,KAAKP,QAAL,GAAgBA,QAAhB;IACA,KAAKC,SAAL,GAAiBA,SAAjB;IACA,KAAKC,eAAL,GAAuBA,eAAvB;IAEA,KAAKW,QAAL,GAAgBjB,QAAQ,CACvB,KAAKkB,SADkB,EAEvBC,6CAFuB,EAGvB;MACCC,OAAO,EAAEb,aADV;MAECc,MAAM,EAAEb;IAFT,CAHuB,CAAxB;EAQA;;;;WAED,iBAAQ;MACP,KAAKI,QAAL,GAAgB,IAAhB;;MACA,IAAI,KAAKT,MAAT,EAAiB;QAChB;MACA;;MACD,KAAKW,KAAL,GAAa,KAAKV,QAAL,EAAb;MACA,KAAKY,MAAL,GAAc,KAAKX,SAAL,EAAd;MACA,KAAKiB,cAAL,GAAsB,KAAKhB,eAAL,CAAqB,KAAKW,QAA1B,CAAtB;IACA;;;WAED,gBAAO;MACN,KAAKL,QAAL,GAAgB,KAAhB;MACA,KAAKE,KAAL,GAAaS,SAAb;MACA,KAAKP,MAAL,GAAcO,SAAd;;MACA,IAAI,KAAKD,cAAT,EAAyB;QACxB,KAAKA,cAAL;QACA,KAAKA,cAAL,GAAsBC,SAAtB;MACA;IACD;IAED;AACD;AACA;;;;;;;SAtDqBrB,M;AA4FrB,IAAMiB,6CAA6C,GAAG,GAAtD"}
|
package/modules/Scroll.js
CHANGED
|
@@ -2,7 +2,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
|
|
|
2
2
|
|
|
3
3
|
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
|
4
4
|
|
|
5
|
-
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
|
5
|
+
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
6
6
|
|
|
7
7
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
8
8
|
|
|
@@ -11,178 +11,223 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
|
|
|
11
11
|
// Replacing `setTimeout()` with `requestAnimationFrame()` can work around that Chrome bug.
|
|
12
12
|
// https://github.com/bvaughn/react-virtualized/issues/722
|
|
13
13
|
import { setTimeout, clearTimeout } from 'request-animation-frame-timeout';
|
|
14
|
-
import
|
|
15
|
-
import log from './utility/debug';
|
|
14
|
+
import log from './utility/debug.js';
|
|
16
15
|
|
|
17
|
-
var Scroll =
|
|
18
|
-
/*#__PURE__*/
|
|
19
|
-
function () {
|
|
16
|
+
var Scroll = /*#__PURE__*/function () {
|
|
20
17
|
function Scroll(_ref) {
|
|
21
18
|
var _this = this;
|
|
22
19
|
|
|
23
20
|
var bypass = _ref.bypass,
|
|
24
21
|
scrollableContainer = _ref.scrollableContainer,
|
|
25
|
-
|
|
22
|
+
itemsContainer = _ref.itemsContainer,
|
|
23
|
+
onScroll = _ref.onScroll,
|
|
26
24
|
initialScrollPosition = _ref.initialScrollPosition,
|
|
27
25
|
onScrollPositionChange = _ref.onScrollPositionChange,
|
|
28
26
|
isImmediateLayoutScheduled = _ref.isImmediateLayoutScheduled,
|
|
29
27
|
hasNonRenderedItemsAtTheTop = _ref.hasNonRenderedItemsAtTheTop,
|
|
30
28
|
hasNonRenderedItemsAtTheBottom = _ref.hasNonRenderedItemsAtTheBottom,
|
|
31
|
-
|
|
32
|
-
|
|
29
|
+
getLatestLayoutVisibleArea = _ref.getLatestLayoutVisibleArea,
|
|
30
|
+
getListTopOffset = _ref.getListTopOffset,
|
|
31
|
+
getPrerenderMargin = _ref.getPrerenderMargin,
|
|
32
|
+
onScrolledToTop = _ref.onScrolledToTop,
|
|
33
|
+
waitForScrollingToStop = _ref.waitForScrollingToStop;
|
|
33
34
|
|
|
34
35
|
_classCallCheck(this, Scroll);
|
|
35
36
|
|
|
36
|
-
_defineProperty(this, "
|
|
37
|
-
_this.
|
|
37
|
+
_defineProperty(this, "scrollByY", function (scrollByY) {
|
|
38
|
+
_this.scrollToY(_this.getScrollY() + scrollByY);
|
|
38
39
|
});
|
|
39
40
|
|
|
40
|
-
_defineProperty(this, "
|
|
41
|
-
|
|
41
|
+
_defineProperty(this, "onScrollListener", function () {
|
|
42
|
+
if (_this.onScrollPositionChange) {
|
|
43
|
+
_this.onScrollPositionChange(_this.getScrollY());
|
|
44
|
+
} // If the user has scrolled up to the top of the items container.
|
|
45
|
+
// (this option isn't currently used)
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
if (_this.onScrolledToTop) {
|
|
49
|
+
if (_this.getScrollY() < _this.getListTopOffset()) {
|
|
50
|
+
_this.onScrolledToTop();
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
if (_this.bypass) {
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
if (_this.ignoreScrollEvents) {
|
|
59
|
+
return;
|
|
60
|
+
} // Prefer not performing a re-layout while the user is scrolling (if possible).
|
|
42
61
|
// If the user doesn't scroll too far and then stops for a moment,
|
|
43
62
|
// then a mid-scroll re-layout could be delayed until such a brief stop:
|
|
44
63
|
// presumably, this results in better (smoother) scrolling performance,
|
|
45
64
|
// delaying the work to when it doesn't introduce any stutter or "jank".
|
|
46
|
-
// Reset `this.
|
|
47
|
-
|
|
48
|
-
|
|
65
|
+
// Reset `this.onStopScrollingTimer` (will be re-created below).
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
_this.cancelOnStopScrollingTimer(); // See if the latest "layout" (the currently rendered set of items)
|
|
69
|
+
// is still sufficient in order to show all the items that're
|
|
70
|
+
// currently inside the viewport. If there're some non-rendered items
|
|
71
|
+
// that're visible in the current viewport, then those items
|
|
72
|
+
// should be rendered "immediately" rather than waiting until
|
|
73
|
+
// the user stops scrolling.
|
|
49
74
|
|
|
50
75
|
|
|
51
76
|
var forceUpdate = // If the items have been rendered at least once
|
|
52
|
-
_this.
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
77
|
+
_this.getLatestLayoutVisibleArea() && ( // If the user has scrolled up past the "prerender margin"
|
|
78
|
+
// and there're some non-rendered items at the top,
|
|
79
|
+
// then force a re-layout.
|
|
80
|
+
//
|
|
81
|
+
// (during these calculations we assume that the list's top coordinate
|
|
82
|
+
// hasn't changed since previous layout; even if that's not exactly true,
|
|
83
|
+
// the items will be re-layout when the user stops scrolling anyway)
|
|
84
|
+
//
|
|
85
|
+
_this.getScrollY() < _this.getLatestLayoutVisibleArea().top - _this.getPrerenderMargin() && _this.hasNonRenderedItemsAtTheTop() || // If the user has scrolled down past the "prerender margin"
|
|
86
|
+
// and there're any non-rendered items left at the end,
|
|
87
|
+
// then force a re-layout.
|
|
88
|
+
//
|
|
89
|
+
// (during these calculations we assume that the list's top coordinate
|
|
90
|
+
// hasn't changed since previous layout; even if that's not exactly true,
|
|
91
|
+
// the items will be re-layout when the user stops scrolling anyway)
|
|
92
|
+
//
|
|
93
|
+
_this.getScrollY() + _this.scrollableContainer.getHeight() > _this.getLatestLayoutVisibleArea().bottom + _this.getPrerenderMargin() && _this.hasNonRenderedItemsAtTheBottom());
|
|
57
94
|
|
|
58
95
|
if (forceUpdate) {
|
|
59
|
-
log('The user has scrolled far enough:
|
|
96
|
+
log('The user has scrolled far enough: perform a re-layout');
|
|
60
97
|
} else {
|
|
61
|
-
log('The user
|
|
98
|
+
log('The user is scrolling: perform a re-layout when they stop scrolling');
|
|
62
99
|
}
|
|
63
100
|
|
|
64
|
-
if (
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
return;
|
|
69
|
-
}
|
|
101
|
+
if (forceUpdate || _this.waitForScrollingToStop === false) {
|
|
102
|
+
return _this.onScroll();
|
|
103
|
+
} // If a re-layout is already scheduled at the next "frame",
|
|
104
|
+
// don't schedule a "re-layout when user stops scrolling" timer.
|
|
70
105
|
|
|
71
|
-
_this.onUserStopsScrollingTimer = setTimeout(function () {
|
|
72
|
-
_this.onUserStopsScrollingTimer = undefined;
|
|
73
106
|
|
|
74
|
-
|
|
75
|
-
reason: LAYOUT_REASON.STOPPED_SCROLLING
|
|
76
|
-
});
|
|
77
|
-
}, // "scroll" events are usually dispatched every 16 milliseconds
|
|
78
|
-
// for 60fps refresh rate, so waiting for 100 milliseconds feels
|
|
79
|
-
// reasonable: that would be about 6 frames of inactivity period,
|
|
80
|
-
// which could mean that either the user has stopped scrolling
|
|
81
|
-
// (for a moment) or the browser is lagging and stuttering
|
|
82
|
-
// (skipping frames due to high load).
|
|
83
|
-
// If the user continues scrolling then this timeout is constantly
|
|
84
|
-
// refreshed (cancelled and then re-created).
|
|
85
|
-
WAIT_FOR_USER_TO_STOP_SCROLLING_TIMEOUT);
|
|
107
|
+
if (_this.isImmediateLayoutScheduled()) {
|
|
86
108
|
return;
|
|
87
109
|
}
|
|
88
110
|
|
|
89
|
-
_this.
|
|
90
|
-
|
|
91
|
-
|
|
111
|
+
_this.shouldCallOnScrollListenerWhenStopsScrolling = true;
|
|
112
|
+
|
|
113
|
+
_this.watchOnStopScrolling();
|
|
92
114
|
});
|
|
93
115
|
|
|
94
116
|
this.bypass = bypass;
|
|
95
117
|
this.scrollableContainer = scrollableContainer;
|
|
96
|
-
this.
|
|
118
|
+
this.itemsContainer = itemsContainer;
|
|
119
|
+
this.onScroll = onScroll;
|
|
97
120
|
this.initialScrollPosition = initialScrollPosition;
|
|
98
121
|
this.onScrollPositionChange = onScrollPositionChange;
|
|
99
122
|
this.isImmediateLayoutScheduled = isImmediateLayoutScheduled;
|
|
100
123
|
this.hasNonRenderedItemsAtTheTop = hasNonRenderedItemsAtTheTop;
|
|
101
124
|
this.hasNonRenderedItemsAtTheBottom = hasNonRenderedItemsAtTheBottom;
|
|
102
|
-
this.
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
scrollableContainerContentHeight: scrollableContainer.getContentHeight()
|
|
108
|
-
};
|
|
109
|
-
}
|
|
110
|
-
}
|
|
125
|
+
this.getLatestLayoutVisibleArea = getLatestLayoutVisibleArea;
|
|
126
|
+
this.getListTopOffset = getListTopOffset;
|
|
127
|
+
this.getPrerenderMargin = getPrerenderMargin;
|
|
128
|
+
this.onScrolledToTop = onScrolledToTop;
|
|
129
|
+
this.waitForScrollingToStop = waitForScrollingToStop;
|
|
111
130
|
}
|
|
112
131
|
|
|
113
132
|
_createClass(Scroll, [{
|
|
114
|
-
key: "
|
|
115
|
-
value: function
|
|
133
|
+
key: "start",
|
|
134
|
+
value: function start() {
|
|
116
135
|
if (this.initialScrollPosition !== undefined) {
|
|
117
136
|
this.scrollToY(this.initialScrollPosition);
|
|
137
|
+
this.initialScrollPosition = undefined;
|
|
118
138
|
}
|
|
119
139
|
|
|
120
140
|
if (this.onScrollPositionChange) {
|
|
121
|
-
this.
|
|
122
|
-
this.removeScrollPositionListener = this.scrollableContainer.addScrollListener(this.updateScrollPosition);
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
if (!this.bypass) {
|
|
126
|
-
this.removeScrollListener = this.scrollableContainer.addScrollListener(this.onScroll);
|
|
141
|
+
this.onScrollPositionChange(this.getScrollY());
|
|
127
142
|
}
|
|
128
143
|
|
|
129
|
-
|
|
130
|
-
this.scrollToY(this.getScrollY() + (this.scrollableContainer.getContentHeight() - this.preserveScrollPositionOfTheBottomOfTheListOnMount.scrollableContainerContentHeight));
|
|
131
|
-
}
|
|
144
|
+
this.stopListeningToScroll = this.scrollableContainer.onScroll(this.onScrollListener);
|
|
132
145
|
}
|
|
133
146
|
}, {
|
|
134
147
|
key: "stop",
|
|
135
148
|
value: function stop() {
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
if (this.removeScrollListener) {
|
|
141
|
-
this.removeScrollListener();
|
|
142
|
-
}
|
|
149
|
+
this.stopListeningToScroll();
|
|
150
|
+
this.stopListeningToScroll = undefined; // this.onStopScrollingListener = undefined
|
|
143
151
|
|
|
144
|
-
this.
|
|
152
|
+
this.shouldCallOnScrollListenerWhenStopsScrolling = undefined;
|
|
153
|
+
this.cancelOnStopScrollingTimer();
|
|
145
154
|
}
|
|
146
155
|
}, {
|
|
147
156
|
key: "scrollToY",
|
|
148
157
|
value: function scrollToY(scrollY) {
|
|
158
|
+
this.ignoreScrollEvents = true;
|
|
149
159
|
this.scrollableContainer.scrollToY(scrollY);
|
|
150
|
-
|
|
151
|
-
}, {
|
|
152
|
-
key: "scrollByY",
|
|
153
|
-
value: function scrollByY(_scrollByY) {
|
|
154
|
-
this.scrollToY(this.getScrollY() + _scrollByY);
|
|
160
|
+
this.ignoreScrollEvents = undefined;
|
|
155
161
|
}
|
|
156
162
|
}, {
|
|
157
163
|
key: "getScrollY",
|
|
158
164
|
value: function getScrollY() {
|
|
159
165
|
return this.scrollableContainer.getScrollY();
|
|
160
166
|
}
|
|
161
|
-
/**
|
|
162
|
-
* Updates the current scroll Y position in state.
|
|
163
|
-
*/
|
|
164
|
-
|
|
165
167
|
}, {
|
|
166
|
-
key: "
|
|
167
|
-
value: function
|
|
168
|
-
if (this.
|
|
169
|
-
clearTimeout(this.
|
|
170
|
-
this.
|
|
168
|
+
key: "cancelOnStopScrollingTimer",
|
|
169
|
+
value: function cancelOnStopScrollingTimer() {
|
|
170
|
+
if (this.onStopScrollingTimer) {
|
|
171
|
+
clearTimeout(this.onStopScrollingTimer);
|
|
172
|
+
this.onStopScrollingTimer = undefined;
|
|
171
173
|
}
|
|
172
174
|
}
|
|
173
175
|
}, {
|
|
174
|
-
key: "
|
|
175
|
-
value: function
|
|
176
|
+
key: "cancelScheduledLayout",
|
|
177
|
+
value: function cancelScheduledLayout() {
|
|
176
178
|
// Cancel a "re-layout when user stops scrolling" timer.
|
|
177
|
-
this.
|
|
179
|
+
this.cancelOnStopScrollingTimer();
|
|
178
180
|
}
|
|
179
181
|
}, {
|
|
180
|
-
key: "
|
|
182
|
+
key: "watchOnStopScrolling",
|
|
183
|
+
value: function watchOnStopScrolling() {
|
|
184
|
+
var _this2 = this;
|
|
185
|
+
|
|
186
|
+
this.onStopScrollingTimer = setTimeout(function () {
|
|
187
|
+
_this2.onStopScrollingTimer = undefined;
|
|
188
|
+
|
|
189
|
+
if (_this2.shouldCallOnScrollListenerWhenStopsScrolling) {
|
|
190
|
+
_this2.shouldCallOnScrollListenerWhenStopsScrolling = undefined;
|
|
191
|
+
|
|
192
|
+
_this2.onScroll({
|
|
193
|
+
delayed: true
|
|
194
|
+
});
|
|
195
|
+
} // `onStopScrolling()` feature is not currently used.
|
|
196
|
+
// if (this.onStopScrollingListener) {
|
|
197
|
+
// const onStopScrollingListener = this.onStopScrollingListener
|
|
198
|
+
// this.onStopScrollingListener = undefined
|
|
199
|
+
// // `onStopScrollingListener()` may hypothetically schedule
|
|
200
|
+
// // another `onStopScrolling()` listener, so set
|
|
201
|
+
// // `this.onStopScrollingListener` to `undefined` before
|
|
202
|
+
// // calling it rather than after.
|
|
203
|
+
// log('~ The user has stopped scrolling ~')
|
|
204
|
+
// onStopScrollingListener()
|
|
205
|
+
// }
|
|
206
|
+
|
|
207
|
+
}, // "scroll" events are usually dispatched every 16 milliseconds
|
|
208
|
+
// for 60fps refresh rate, so waiting for 100 milliseconds feels
|
|
209
|
+
// reasonable: that would be about 6 frames of inactivity period,
|
|
210
|
+
// which could mean that either the user has stopped scrolling
|
|
211
|
+
// (for a moment) or the browser is lagging and stuttering
|
|
212
|
+
// (skipping frames due to high load).
|
|
213
|
+
// If the user continues scrolling then this timeout is constantly
|
|
214
|
+
// refreshed (cancelled and then re-created).
|
|
215
|
+
ON_STOP_SCROLLING_INACTIVE_PERIOD);
|
|
216
|
+
} // (this function isn't currently used)
|
|
217
|
+
// onStopScrolling(onStopScrollingListener) {
|
|
218
|
+
// this.onStopScrollingListener = onStopScrollingListener
|
|
219
|
+
// if (!this.onStopScrollingTimer) {
|
|
220
|
+
// this.watchOnStopScrolling()
|
|
221
|
+
// }
|
|
222
|
+
// }
|
|
181
223
|
|
|
182
224
|
/**
|
|
183
225
|
* Returns visible area coordinates relative to the scrollable container.
|
|
184
226
|
* @return {object} `{ top: number, bottom: number }`
|
|
185
227
|
*/
|
|
228
|
+
|
|
229
|
+
}, {
|
|
230
|
+
key: "getVisibleAreaBounds",
|
|
186
231
|
value: function getVisibleAreaBounds() {
|
|
187
232
|
var scrollY = this.getScrollY();
|
|
188
233
|
return {
|
|
@@ -198,5 +243,5 @@ function () {
|
|
|
198
243
|
}();
|
|
199
244
|
|
|
200
245
|
export { Scroll as default };
|
|
201
|
-
var
|
|
246
|
+
var ON_STOP_SCROLLING_INACTIVE_PERIOD = 100;
|
|
202
247
|
//# sourceMappingURL=Scroll.js.map
|
package/modules/Scroll.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../source/Scroll.js"],"names":["setTimeout","clearTimeout","LAYOUT_REASON","log","Scroll","bypass","scrollableContainer","updateLayout","initialScrollPosition","onScrollPositionChange","isImmediateLayoutScheduled","hasNonRenderedItemsAtTheTop","hasNonRenderedItemsAtTheBottom","getLatestLayoutVisibleAreaIncludingMargins","preserveScrollPositionOfTheBottomOfTheListOnMount","getScrollY","cancelOnUserStopsScrollingTimer","forceUpdate","top","getHeight","bottom","onUserStopsScrollingTimer","undefined","reason","STOPPED_SCROLLING","WAIT_FOR_USER_TO_STOP_SCROLLING_TIMEOUT","SCROLL","scrollableContainerContentHeight","getContentHeight","scrollToY","updateScrollPosition","removeScrollPositionListener","addScrollListener","removeScrollListener","onScroll","scrollY","scrollByY"],"mappings":"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","sourcesContent":["// For some weird reason, in Chrome, `setTimeout()` would lag up to a second (or more) behind.\r\n// Turns out, Chrome developers have deprecated `setTimeout()` API entirely without asking anyone.\r\n// Replacing `setTimeout()` with `requestAnimationFrame()` can work around that Chrome bug.\r\n// https://github.com/bvaughn/react-virtualized/issues/722\r\nimport { setTimeout, clearTimeout } from 'request-animation-frame-timeout'\r\n\r\nimport { LAYOUT_REASON } from './Layout'\r\nimport log from './utility/debug'\r\n\r\nexport default class Scroll {\r\n\tconstructor({\r\n\t\tbypass,\r\n\t\tscrollableContainer,\r\n\t\tupdateLayout,\r\n\t\tinitialScrollPosition,\r\n\t\tonScrollPositionChange,\r\n\t\tisImmediateLayoutScheduled,\r\n\t\thasNonRenderedItemsAtTheTop,\r\n\t\thasNonRenderedItemsAtTheBottom,\r\n\t\tgetLatestLayoutVisibleAreaIncludingMargins,\r\n\t\tpreserveScrollPositionOfTheBottomOfTheListOnMount\r\n\t}) {\r\n\t\tthis.bypass = bypass\r\n\t\tthis.scrollableContainer = scrollableContainer\r\n\t\tthis.updateLayout = updateLayout\r\n\t\tthis.initialScrollPosition = initialScrollPosition\r\n\t\tthis.onScrollPositionChange = onScrollPositionChange\r\n\t\tthis.isImmediateLayoutScheduled = isImmediateLayoutScheduled\r\n\t\tthis.hasNonRenderedItemsAtTheTop = hasNonRenderedItemsAtTheTop\r\n\t\tthis.hasNonRenderedItemsAtTheBottom = hasNonRenderedItemsAtTheBottom\r\n\t\tthis.getLatestLayoutVisibleAreaIncludingMargins = getLatestLayoutVisibleAreaIncludingMargins\r\n\r\n\t\tif (preserveScrollPositionOfTheBottomOfTheListOnMount) {\r\n\t\t\tif (scrollableContainer) {\r\n\t\t\t\tthis.preserveScrollPositionOfTheBottomOfTheListOnMount = {\r\n\t\t\t\t\tscrollableContainerContentHeight: scrollableContainer.getContentHeight()\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\tlisten() {\r\n\t\tif (this.initialScrollPosition !== undefined) {\r\n\t\t\tthis.scrollToY(this.initialScrollPosition)\r\n\t\t}\r\n\t\tif (this.onScrollPositionChange) {\r\n\t\t\tthis.updateScrollPosition()\r\n\t\t\tthis.removeScrollPositionListener = this.scrollableContainer.addScrollListener(this.updateScrollPosition)\r\n\t\t}\r\n\t\tif (!this.bypass) {\r\n\t\t\tthis.removeScrollListener = this.scrollableContainer.addScrollListener(this.onScroll)\r\n\t\t}\r\n\t\tif (this.preserveScrollPositionOfTheBottomOfTheListOnMount) {\r\n\t\t\tthis.scrollToY(this.getScrollY() + (this.scrollableContainer.getContentHeight() - this.preserveScrollPositionOfTheBottomOfTheListOnMount.scrollableContainerContentHeight))\r\n\t\t}\r\n\t}\r\n\r\n\tstop() {\r\n\t\tif (this.removeScrollPositionListener) {\r\n\t\t\tthis.removeScrollPositionListener()\r\n\t\t}\r\n\t\tif (this.removeScrollListener) {\r\n\t\t\tthis.removeScrollListener()\r\n\t\t}\r\n\t\tthis.cancelOnUserStopsScrollingTimer()\r\n\t}\r\n\r\n\tscrollToY(scrollY) {\r\n\t\tthis.scrollableContainer.scrollToY(scrollY)\r\n\t}\r\n\r\n\tscrollByY(scrollByY) {\r\n\t\tthis.scrollToY(this.getScrollY() + scrollByY)\r\n\t}\r\n\r\n\tgetScrollY() {\r\n\t\treturn this.scrollableContainer.getScrollY()\r\n\t}\r\n\r\n\t/**\r\n\t * Updates the current scroll Y position in state.\r\n\t */\r\n\tupdateScrollPosition = () => {\r\n\t\tthis.onScrollPositionChange(this.getScrollY())\r\n\t}\r\n\r\n\tcancelOnUserStopsScrollingTimer() {\r\n\t\tif (this.onUserStopsScrollingTimer) {\r\n\t\t\tclearTimeout(this.onUserStopsScrollingTimer)\r\n\t\t\tthis.onUserStopsScrollingTimer = undefined\r\n\t\t}\r\n\t}\r\n\r\n\tonLayout() {\r\n\t\t// Cancel a \"re-layout when user stops scrolling\" timer.\r\n\t\tthis.cancelOnUserStopsScrollingTimer()\r\n\t}\r\n\r\n\tonScroll = () => {\r\n\t\t// Prefer not performing a re-layout while the user is scrolling (if possible).\r\n\t\t// If the user doesn't scroll too far and then stops for a moment,\r\n\t\t// then a mid-scroll re-layout could be delayed until such a brief stop:\r\n\t\t// presumably, this results in better (smoother) scrolling performance,\r\n\t\t// delaying the work to when it doesn't introduce any stutter or \"jank\".\r\n\r\n\t\t// Reset `this.onUserStopsScrollingTimer` (will be re-created below).\r\n\t\tthis.cancelOnUserStopsScrollingTimer()\r\n\r\n\t\t// See whether rendering \"new\" previous/next items is required\r\n\t\t// right now, or it can wait until the user stops scrolling.\r\n\t\tconst forceUpdate =\r\n\t\t\t// If the items have been rendered at least once\r\n\t\t\tthis.getLatestLayoutVisibleAreaIncludingMargins() && (\r\n\t\t\t\t(\r\n\t\t\t\t\t// If the user has scrolled up past the extra \"margin\"\r\n\t\t\t\t\t(this.getScrollY() < this.getLatestLayoutVisibleAreaIncludingMargins().top) &&\r\n\t\t\t\t\t// and if there're any previous non-rendered items to render.\r\n\t\t\t\t\tthis.hasNonRenderedItemsAtTheTop()\r\n\t\t\t\t)\r\n\t\t\t\t||\r\n\t\t\t\t(\r\n\t\t\t\t\t// If the user has scrolled down past the extra \"margin\"\r\n\t\t\t\t\t(this.getScrollY() + this.scrollableContainer.getHeight() > this.getLatestLayoutVisibleAreaIncludingMargins().bottom) &&\r\n\t\t\t\t\t// and if there're any next non-rendered items to render.\r\n\t\t\t\t\tthis.hasNonRenderedItemsAtTheBottom()\r\n\t\t\t\t)\r\n\t\t\t)\r\n\r\n\t\tif (forceUpdate) {\r\n\t\t\tlog('The user has scrolled far enough: force re-layout')\r\n\t\t} else {\r\n\t\t\tlog('The user hasn\\'t scrolled too much: delay re-layout')\r\n\t\t}\r\n\r\n\t\tif (!forceUpdate) {\r\n\t\t\t// If a re-layout is already scheduled at the next \"frame\",\r\n\t\t\t// don't schedule a \"re-layout when user stops scrolling\" timer.\r\n\t\t\tif (this.isImmediateLayoutScheduled()) {\r\n\t\t\t\treturn\r\n\t\t\t}\r\n\t\t\tthis.onUserStopsScrollingTimer = setTimeout(\r\n\t\t\t\t() => {\r\n\t\t\t\t\tthis.onUserStopsScrollingTimer = undefined\r\n\t\t\t\t\tthis.updateLayout({ reason: LAYOUT_REASON.STOPPED_SCROLLING })\r\n\t\t\t\t},\r\n\t\t\t\t// \"scroll\" events are usually dispatched every 16 milliseconds\r\n\t\t\t\t// for 60fps refresh rate, so waiting for 100 milliseconds feels\r\n\t\t\t\t// reasonable: that would be about 6 frames of inactivity period,\r\n\t\t\t\t// which could mean that either the user has stopped scrolling\r\n\t\t\t\t// (for a moment) or the browser is lagging and stuttering\r\n\t\t\t\t// (skipping frames due to high load).\r\n\t\t\t\t// If the user continues scrolling then this timeout is constantly\r\n\t\t\t\t// refreshed (cancelled and then re-created).\r\n\t\t\t\tWAIT_FOR_USER_TO_STOP_SCROLLING_TIMEOUT\r\n\t\t\t)\r\n\t\t\treturn\r\n\t\t}\r\n\r\n\t\tthis.updateLayout({ reason: LAYOUT_REASON.SCROLL })\r\n\t}\r\n\r\n\t/**\r\n\t * Returns visible area coordinates relative to the scrollable container.\r\n\t * @return {object} `{ top: number, bottom: number }`\r\n\t */\r\n\tgetVisibleAreaBounds() {\r\n\t\tconst scrollY = this.getScrollY()\r\n\t\treturn {\r\n\t\t\t// The first pixel of the screen.\r\n\t\t\ttop: scrollY,\r\n\t\t\t// The pixel after the last pixel of the screen.\r\n\t\t\tbottom: scrollY + this.scrollableContainer.getHeight()\r\n\t\t}\r\n\t}\r\n}\r\n\r\nconst WAIT_FOR_USER_TO_STOP_SCROLLING_TIMEOUT = 100"],"file":"Scroll.js"}
|
|
1
|
+
{"version":3,"file":"Scroll.js","names":["setTimeout","clearTimeout","log","Scroll","bypass","scrollableContainer","itemsContainer","onScroll","initialScrollPosition","onScrollPositionChange","isImmediateLayoutScheduled","hasNonRenderedItemsAtTheTop","hasNonRenderedItemsAtTheBottom","getLatestLayoutVisibleArea","getListTopOffset","getPrerenderMargin","onScrolledToTop","waitForScrollingToStop","scrollByY","scrollToY","getScrollY","ignoreScrollEvents","cancelOnStopScrollingTimer","forceUpdate","top","getHeight","bottom","shouldCallOnScrollListenerWhenStopsScrolling","watchOnStopScrolling","undefined","stopListeningToScroll","onScrollListener","scrollY","onStopScrollingTimer","delayed","ON_STOP_SCROLLING_INACTIVE_PERIOD"],"sources":["../source/Scroll.js"],"sourcesContent":["// For some weird reason, in Chrome, `setTimeout()` would lag up to a second (or more) behind.\r\n// Turns out, Chrome developers have deprecated `setTimeout()` API entirely without asking anyone.\r\n// Replacing `setTimeout()` with `requestAnimationFrame()` can work around that Chrome bug.\r\n// https://github.com/bvaughn/react-virtualized/issues/722\r\nimport { setTimeout, clearTimeout } from 'request-animation-frame-timeout'\r\n\r\nimport log from './utility/debug.js'\r\n\r\nexport default class Scroll {\r\n\tconstructor({\r\n\t\tbypass,\r\n\t\tscrollableContainer,\r\n\t\titemsContainer,\r\n\t\tonScroll,\r\n\t\tinitialScrollPosition,\r\n\t\tonScrollPositionChange,\r\n\t\tisImmediateLayoutScheduled,\r\n\t\thasNonRenderedItemsAtTheTop,\r\n\t\thasNonRenderedItemsAtTheBottom,\r\n\t\tgetLatestLayoutVisibleArea,\r\n\t\tgetListTopOffset,\r\n\t\tgetPrerenderMargin,\r\n\t\tonScrolledToTop,\r\n\t\twaitForScrollingToStop\r\n\t}) {\r\n\t\tthis.bypass = bypass\r\n\t\tthis.scrollableContainer = scrollableContainer\r\n\t\tthis.itemsContainer = itemsContainer\r\n\t\tthis.onScroll = onScroll\r\n\t\tthis.initialScrollPosition = initialScrollPosition\r\n\t\tthis.onScrollPositionChange = onScrollPositionChange\r\n\t\tthis.isImmediateLayoutScheduled = isImmediateLayoutScheduled\r\n\t\tthis.hasNonRenderedItemsAtTheTop = hasNonRenderedItemsAtTheTop\r\n\t\tthis.hasNonRenderedItemsAtTheBottom = hasNonRenderedItemsAtTheBottom\r\n\t\tthis.getLatestLayoutVisibleArea = getLatestLayoutVisibleArea\r\n\t\tthis.getListTopOffset = getListTopOffset\r\n\t\tthis.getPrerenderMargin = getPrerenderMargin\r\n\t\tthis.onScrolledToTop = onScrolledToTop\r\n\t\tthis.waitForScrollingToStop = waitForScrollingToStop\r\n\t}\r\n\r\n\tstart() {\r\n\t\tif (this.initialScrollPosition !== undefined) {\r\n\t\t\tthis.scrollToY(this.initialScrollPosition)\r\n\t\t\tthis.initialScrollPosition = undefined\r\n\t\t}\r\n\t\tif (this.onScrollPositionChange) {\r\n\t\t\tthis.onScrollPositionChange(this.getScrollY())\r\n\t\t}\r\n\t\tthis.stopListeningToScroll = this.scrollableContainer.onScroll(this.onScrollListener)\r\n\t}\r\n\r\n\tstop() {\r\n\t\tthis.stopListeningToScroll()\r\n\t\tthis.stopListeningToScroll = undefined\r\n\t\t// this.onStopScrollingListener = undefined\r\n\t\tthis.shouldCallOnScrollListenerWhenStopsScrolling = undefined\r\n\t\tthis.cancelOnStopScrollingTimer()\r\n\t}\r\n\r\n\tscrollToY(scrollY) {\r\n\t\tthis.ignoreScrollEvents = true\r\n\t\tthis.scrollableContainer.scrollToY(scrollY)\r\n\t\tthis.ignoreScrollEvents = undefined\r\n\t}\r\n\r\n\tscrollByY = (scrollByY) => {\r\n\t\tthis.scrollToY(this.getScrollY() + scrollByY)\r\n\t}\r\n\r\n\tgetScrollY() {\r\n\t\treturn this.scrollableContainer.getScrollY()\r\n\t}\r\n\r\n\tcancelOnStopScrollingTimer() {\r\n\t\tif (this.onStopScrollingTimer) {\r\n\t\t\tclearTimeout(this.onStopScrollingTimer)\r\n\t\t\tthis.onStopScrollingTimer = undefined\r\n\t\t}\r\n\t}\r\n\r\n\tcancelScheduledLayout() {\r\n\t\t// Cancel a \"re-layout when user stops scrolling\" timer.\r\n\t\tthis.cancelOnStopScrollingTimer()\r\n\t}\r\n\r\n\tonScrollListener = () => {\r\n\t\tif (this.onScrollPositionChange) {\r\n\t\t\tthis.onScrollPositionChange(this.getScrollY())\r\n\t\t}\r\n\r\n\t\t// If the user has scrolled up to the top of the items container.\r\n\t\t// (this option isn't currently used)\r\n\t\tif (this.onScrolledToTop) {\r\n\t\t\tif (this.getScrollY() < this.getListTopOffset()) {\r\n\t\t\t\tthis.onScrolledToTop()\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tif (this.bypass) {\r\n\t\t\treturn\r\n\t\t}\r\n\r\n\t\tif (this.ignoreScrollEvents) {\r\n\t\t\treturn\r\n\t\t}\r\n\r\n\t\t// Prefer not performing a re-layout while the user is scrolling (if possible).\r\n\t\t// If the user doesn't scroll too far and then stops for a moment,\r\n\t\t// then a mid-scroll re-layout could be delayed until such a brief stop:\r\n\t\t// presumably, this results in better (smoother) scrolling performance,\r\n\t\t// delaying the work to when it doesn't introduce any stutter or \"jank\".\r\n\r\n\t\t// Reset `this.onStopScrollingTimer` (will be re-created below).\r\n\t\tthis.cancelOnStopScrollingTimer()\r\n\r\n\t\t// See if the latest \"layout\" (the currently rendered set of items)\r\n\t\t// is still sufficient in order to show all the items that're\r\n\t\t// currently inside the viewport. If there're some non-rendered items\r\n\t\t// that're visible in the current viewport, then those items\r\n\t\t// should be rendered \"immediately\" rather than waiting until\r\n\t\t// the user stops scrolling.\r\n\t\tconst forceUpdate =\r\n\t\t\t// If the items have been rendered at least once\r\n\t\t\tthis.getLatestLayoutVisibleArea() && (\r\n\t\t\t\t(\r\n\t\t\t\t\t// If the user has scrolled up past the \"prerender margin\"\r\n\t\t\t\t\t// and there're some non-rendered items at the top,\r\n\t\t\t\t\t// then force a re-layout.\r\n\t\t\t\t\t//\r\n\t\t\t\t\t// (during these calculations we assume that the list's top coordinate\r\n\t\t\t\t\t// hasn't changed since previous layout; even if that's not exactly true,\r\n\t\t\t\t\t// the items will be re-layout when the user stops scrolling anyway)\r\n\t\t\t\t\t//\r\n\t\t\t\t\t(this.getScrollY() < this.getLatestLayoutVisibleArea().top - this.getPrerenderMargin()) &&\r\n\t\t\t\t\tthis.hasNonRenderedItemsAtTheTop()\r\n\t\t\t\t)\r\n\t\t\t\t||\r\n\t\t\t\t(\r\n\t\t\t\t\t// If the user has scrolled down past the \"prerender margin\"\r\n\t\t\t\t\t// and there're any non-rendered items left at the end,\r\n\t\t\t\t\t// then force a re-layout.\r\n\t\t\t\t\t//\r\n\t\t\t\t\t// (during these calculations we assume that the list's top coordinate\r\n\t\t\t\t\t// hasn't changed since previous layout; even if that's not exactly true,\r\n\t\t\t\t\t// the items will be re-layout when the user stops scrolling anyway)\r\n\t\t\t\t\t//\r\n\t\t\t\t\t(this.getScrollY() + this.scrollableContainer.getHeight() > this.getLatestLayoutVisibleArea().bottom + this.getPrerenderMargin()) &&\r\n\t\t\t\t\tthis.hasNonRenderedItemsAtTheBottom()\r\n\t\t\t\t)\r\n\t\t\t)\r\n\r\n\t\tif (forceUpdate) {\r\n\t\t\tlog('The user has scrolled far enough: perform a re-layout')\r\n\t\t} else {\r\n\t\t\tlog('The user is scrolling: perform a re-layout when they stop scrolling')\r\n\t\t}\r\n\r\n\t\tif (forceUpdate || this.waitForScrollingToStop === false) {\r\n\t\t\treturn this.onScroll()\r\n\t\t}\r\n\r\n\t\t// If a re-layout is already scheduled at the next \"frame\",\r\n\t\t// don't schedule a \"re-layout when user stops scrolling\" timer.\r\n\t\tif (this.isImmediateLayoutScheduled()) {\r\n\t\t\treturn\r\n\t\t}\r\n\r\n\t\tthis.shouldCallOnScrollListenerWhenStopsScrolling = true\r\n\t\tthis.watchOnStopScrolling()\r\n\t}\r\n\r\n\twatchOnStopScrolling() {\r\n\t\tthis.onStopScrollingTimer = setTimeout(\r\n\t\t\t() => {\r\n\t\t\t\tthis.onStopScrollingTimer = undefined\r\n\r\n\t\t\t\tif (this.shouldCallOnScrollListenerWhenStopsScrolling) {\r\n\t\t\t\t\tthis.shouldCallOnScrollListenerWhenStopsScrolling = undefined\r\n\t\t\t\t\tthis.onScroll({ delayed: true })\r\n\t\t\t\t}\r\n\r\n\t\t\t\t// `onStopScrolling()` feature is not currently used.\r\n\t\t\t\t// if (this.onStopScrollingListener) {\r\n\t\t\t\t// \tconst onStopScrollingListener = this.onStopScrollingListener\r\n\t\t\t\t// \tthis.onStopScrollingListener = undefined\r\n\t\t\t\t// \t// `onStopScrollingListener()` may hypothetically schedule\r\n\t\t\t\t// \t// another `onStopScrolling()` listener, so set\r\n\t\t\t\t// \t// `this.onStopScrollingListener` to `undefined` before\r\n\t\t\t\t// \t// calling it rather than after.\r\n\t\t\t\t// \tlog('~ The user has stopped scrolling ~')\r\n\t\t\t\t// \tonStopScrollingListener()\r\n\t\t\t\t// }\r\n\t\t\t},\r\n\t\t\t// \"scroll\" events are usually dispatched every 16 milliseconds\r\n\t\t\t// for 60fps refresh rate, so waiting for 100 milliseconds feels\r\n\t\t\t// reasonable: that would be about 6 frames of inactivity period,\r\n\t\t\t// which could mean that either the user has stopped scrolling\r\n\t\t\t// (for a moment) or the browser is lagging and stuttering\r\n\t\t\t// (skipping frames due to high load).\r\n\t\t\t// If the user continues scrolling then this timeout is constantly\r\n\t\t\t// refreshed (cancelled and then re-created).\r\n\t\t\tON_STOP_SCROLLING_INACTIVE_PERIOD\r\n\t\t)\r\n\t}\r\n\r\n\t// (this function isn't currently used)\r\n\t// onStopScrolling(onStopScrollingListener) {\r\n\t// \tthis.onStopScrollingListener = onStopScrollingListener\r\n\t// \tif (!this.onStopScrollingTimer) {\r\n\t// \t\tthis.watchOnStopScrolling()\r\n\t// \t}\r\n\t// }\r\n\r\n\t/**\r\n\t * Returns visible area coordinates relative to the scrollable container.\r\n\t * @return {object} `{ top: number, bottom: number }`\r\n\t */\r\n\tgetVisibleAreaBounds() {\r\n\t\tconst scrollY = this.getScrollY()\r\n\t\treturn {\r\n\t\t\t// The first pixel of the screen.\r\n\t\t\ttop: scrollY,\r\n\t\t\t// The pixel after the last pixel of the screen.\r\n\t\t\tbottom: scrollY + this.scrollableContainer.getHeight()\r\n\t\t}\r\n\t}\r\n}\r\n\r\nconst ON_STOP_SCROLLING_INACTIVE_PERIOD = 100"],"mappings":"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"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
export default function createColumnsHelpers(_ref) {
|
|
2
|
+
var _this = this;
|
|
3
|
+
|
|
4
|
+
var getColumnsCount = _ref.getColumnsCount;
|
|
5
|
+
|
|
6
|
+
if (getColumnsCount) {
|
|
7
|
+
var scrollableContainerArgument = {
|
|
8
|
+
getWidth: function getWidth() {
|
|
9
|
+
return _this.scrollableContainer.getWidth();
|
|
10
|
+
}
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
this.getActualColumnsCountForState = function () {
|
|
14
|
+
var columnsCount = getColumnsCount(scrollableContainerArgument); // `columnsCount: 1` is effectively same as `columnsCount: undefined`
|
|
15
|
+
// from the code's point of view. This makes one less property in `state`
|
|
16
|
+
// which makes `state` a bit less cluttered (easier for inspection).
|
|
17
|
+
|
|
18
|
+
if (columnsCount !== 1) {
|
|
19
|
+
return columnsCount;
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
} else {
|
|
23
|
+
this.getActualColumnsCountForState = function () {
|
|
24
|
+
return undefined;
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
this.getActualColumnsCount = function () {
|
|
29
|
+
return _this.getActualColumnsCountForState() || 1;
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
this.getColumnsCount = function () {
|
|
33
|
+
return _this.getState() && _this.getState().columnsCount || 1;
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
//# sourceMappingURL=VirtualScroller.columns.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"VirtualScroller.columns.js","names":["createColumnsHelpers","getColumnsCount","scrollableContainerArgument","getWidth","scrollableContainer","getActualColumnsCountForState","columnsCount","undefined","getActualColumnsCount","getState"],"sources":["../source/VirtualScroller.columns.js"],"sourcesContent":["export default function createColumnsHelpers({ getColumnsCount }) {\r\n\tif (getColumnsCount) {\r\n\t\tconst scrollableContainerArgument = {\r\n\t\t\tgetWidth: () => this.scrollableContainer.getWidth()\r\n\t\t}\r\n\t\tthis.getActualColumnsCountForState = () => {\r\n\t\t\tconst columnsCount = getColumnsCount(scrollableContainerArgument)\r\n\t\t\t// `columnsCount: 1` is effectively same as `columnsCount: undefined`\r\n\t\t\t// from the code's point of view. This makes one less property in `state`\r\n\t\t\t// which makes `state` a bit less cluttered (easier for inspection).\r\n\t\t\tif (columnsCount !== 1) {\r\n\t\t\t\treturn columnsCount\r\n\t\t\t}\r\n\t\t}\r\n\t} else {\r\n\t\tthis.getActualColumnsCountForState = () => undefined\r\n\t}\r\n\r\n\tthis.getActualColumnsCount = () => {\r\n\t\treturn this.getActualColumnsCountForState() || 1\r\n\t}\r\n\r\n\tthis.getColumnsCount = () => {\r\n\t\treturn this.getState() && this.getState().columnsCount || 1\r\n\t}\r\n}"],"mappings":"AAAA,eAAe,SAASA,oBAAT,OAAmD;EAAA;;EAAA,IAAnBC,eAAmB,QAAnBA,eAAmB;;EACjE,IAAIA,eAAJ,EAAqB;IACpB,IAAMC,2BAA2B,GAAG;MACnCC,QAAQ,EAAE;QAAA,OAAM,KAAI,CAACC,mBAAL,CAAyBD,QAAzB,EAAN;MAAA;IADyB,CAApC;;IAGA,KAAKE,6BAAL,GAAqC,YAAM;MAC1C,IAAMC,YAAY,GAAGL,eAAe,CAACC,2BAAD,CAApC,CAD0C,CAE1C;MACA;MACA;;MACA,IAAII,YAAY,KAAK,CAArB,EAAwB;QACvB,OAAOA,YAAP;MACA;IACD,CARD;EASA,CAbD,MAaO;IACN,KAAKD,6BAAL,GAAqC;MAAA,OAAME,SAAN;IAAA,CAArC;EACA;;EAED,KAAKC,qBAAL,GAA6B,YAAM;IAClC,OAAO,KAAI,CAACH,6BAAL,MAAwC,CAA/C;EACA,CAFD;;EAIA,KAAKJ,eAAL,GAAuB,YAAM;IAC5B,OAAO,KAAI,CAACQ,QAAL,MAAmB,KAAI,CAACA,QAAL,GAAgBH,YAAnC,IAAmD,CAA1D;EACA,CAFD;AAGA"}
|