virtual-scroller 1.8.0 → 1.9.1
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 +57 -0
- package/README.md +337 -160
- 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 +23 -27
- package/commonjs/BeforeResize.js.map +1 -1
- package/commonjs/DOM/Engine.js +7 -7
- package/commonjs/DOM/Engine.js.map +1 -1
- package/commonjs/DOM/ItemsContainer.js +1 -1
- package/commonjs/DOM/ItemsContainer.js.map +1 -1
- package/commonjs/DOM/ListTopOffsetWatcher.js +15 -9
- package/commonjs/DOM/ListTopOffsetWatcher.js.map +1 -1
- package/commonjs/DOM/ScrollableContainer.js +28 -28
- package/commonjs/DOM/ScrollableContainer.js.map +1 -1
- package/commonjs/DOM/VirtualScroller.js +20 -17
- package/commonjs/DOM/VirtualScroller.js.map +1 -1
- package/commonjs/DOM/tbody.js +16 -10
- package/commonjs/DOM/tbody.js.map +1 -1
- package/commonjs/ItemHeights.js +23 -17
- package/commonjs/ItemHeights.js.map +1 -1
- package/commonjs/Layout.js +15 -13
- package/commonjs/Layout.js.map +1 -1
- package/commonjs/Layout.test.js +8 -3
- package/commonjs/Layout.test.js.map +1 -1
- package/commonjs/{ListHeightChangeWatcher.js → ListHeightMeasurement.js} +26 -28
- package/commonjs/ListHeightMeasurement.js.map +1 -0
- package/commonjs/Resize.js +38 -28
- package/commonjs/Resize.js.map +1 -1
- package/commonjs/Scroll.js +28 -44
- 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 +132 -1872
- 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.map +1 -1
- package/commonjs/package.json +5 -0
- package/commonjs/react/VirtualScroller.js +184 -618
- 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 +2 -2
- package/commonjs/utility/debounce.js.map +1 -1
- package/commonjs/utility/debug.js.map +1 -1
- package/commonjs/utility/getStateSnapshot.js +2 -2
- package/commonjs/utility/getStateSnapshot.js.map +1 -1
- package/commonjs/utility/px.js.map +1 -1
- package/commonjs/utility/px.test.js +1 -1
- package/commonjs/utility/px.test.js.map +1 -1
- 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 +6 -4
- 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 +30 -15
- package/index.js +1 -1
- package/modules/BeforeResize.js +22 -27
- package/modules/BeforeResize.js.map +1 -1
- package/modules/DOM/Engine.js +6 -6
- package/modules/DOM/Engine.js.map +1 -1
- package/modules/DOM/ItemsContainer.js +1 -1
- package/modules/DOM/ItemsContainer.js.map +1 -1
- package/modules/DOM/ListTopOffsetWatcher.js +15 -9
- package/modules/DOM/ListTopOffsetWatcher.js.map +1 -1
- package/modules/DOM/ScrollableContainer.js +28 -28
- package/modules/DOM/ScrollableContainer.js.map +1 -1
- package/modules/DOM/VirtualScroller.js +19 -16
- 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 +22 -16
- package/modules/ItemHeights.js.map +1 -1
- package/modules/Layout.js +14 -12
- package/modules/Layout.js.map +1 -1
- package/modules/Layout.test.js +8 -3
- package/modules/Layout.test.js.map +1 -1
- package/modules/{ListHeightChangeWatcher.js → ListHeightMeasurement.js} +25 -27
- package/modules/ListHeightMeasurement.js.map +1 -0
- package/modules/Resize.js +38 -28
- package/modules/Resize.js.map +1 -1
- package/modules/Scroll.js +28 -44
- 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 +132 -1860
- 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.map +1 -1
- package/modules/react/VirtualScroller.js +176 -625
- 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 +2 -2
- package/modules/utility/debounce.js.map +1 -1
- package/modules/utility/debug.js.map +1 -1
- package/modules/utility/getStateSnapshot.js +2 -2
- package/modules/utility/getStateSnapshot.js.map +1 -1
- package/modules/utility/px.js.map +1 -1
- package/modules/utility/px.test.js +1 -1
- package/modules/utility/px.test.js.map +1 -1
- 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 +46 -23
- package/react/index.cjs +4 -0
- package/react/index.cjs.js +9 -0
- package/react/index.d.ts +10 -9
- 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 +16 -21
- package/source/DOM/Engine.js +8 -10
- package/source/DOM/ListTopOffsetWatcher.js +13 -8
- package/source/DOM/ScrollableContainer.js +23 -21
- package/source/DOM/VirtualScroller.js +27 -11
- package/source/DOM/tbody.js +30 -21
- package/source/ItemHeights.js +19 -14
- package/source/Layout.js +12 -9
- package/source/Layout.test.js +8 -3
- package/source/{ListHeightChangeWatcher.js → ListHeightMeasurement.js} +21 -20
- package/source/Resize.js +41 -25
- package/source/Scroll.js +27 -35
- 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 +144 -1872
- 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/react/VirtualScroller.js +243 -587
- 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 +2 -2
- package/source/utility/px.test.js +1 -1
- package/babel.config.js +0 -25
- package/babel.js +0 -5
- package/commonjs/ListHeightChangeWatcher.js.map +0 -1
- package/dom/index.commonjs.js +0 -4
- package/index.commonjs.js +0 -4
- package/modules/ListHeightChangeWatcher.js.map +0 -1
- package/react/index.commonjs.js +0 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../source/DOM/ScrollableContainer.js"],"names":["ScrollableContainer","element","getItemsContainerElement","scrollTop","scrollY","scrollTo","offsetWidth","offsetHeight","scrollableContainerTop","getBoundingClientRect","top","scrollableContainerBorderTopWidth","clientTop","itemsContainerTop","getScrollY","onScroll","addEventListener","removeEventListener","onResize","unobserve","ResizeObserver","resizeObserver","entries","entry","observe","unlistenGlobalResize","addGlobalResizeListener","itemsContainerElement","ScrollableWindowContainer","window","pageYOffset","innerWidth","innerHeight","borderTopWidth","document","body","onResizeListener","fullscreenElement","contains"],"mappings":"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","sourcesContent":["export default class ScrollableContainer {\r\n\t/**\r\n\t * Constructs a new \"scrollable container\" from an element.\r\n\t * @param {Element} scrollableContainer\r\n\t * @param {func} getItemsContainerElement — Returns items \"container\" element.\r\n\t */\r\n\tconstructor(element, getItemsContainerElement) {\r\n\t\tthis.element = element\r\n\t\tthis.getItemsContainerElement = getItemsContainerElement\r\n\t}\r\n\r\n\t/**\r\n\t * Returns the current scroll position.\r\n\t * @return {number}\r\n\t */\r\n\tgetScrollY() {\r\n\t\treturn this.element.scrollTop\r\n\t}\r\n\r\n\t/**\r\n\t * Scrolls to a specific position.\r\n\t * @param {number} scrollY\r\n\t */\r\n\tscrollToY(scrollY) {\r\n\t\t// IE 11 doesn't seem to have a `.scrollTo()` method.\r\n\t\t// https://gitlab.com/catamphetamine/virtual-scroller/-/issues/10\r\n\t\t// https://stackoverflow.com/questions/39908825/window-scrollto-is-not-working-in-internet-explorer-11\r\n\t\tif (this.element.scrollTo) {\r\n\t\t\tthis.element.scrollTo(0, scrollY)\r\n\t\t} else {\r\n\t\t\tthis.element.scrollTop = scrollY\r\n\t\t}\r\n\t}\r\n\r\n\t/**\r\n\t * Returns \"scrollable container\" width,\r\n\t * i.e. the available width for its content.\r\n\t * @return {number}\r\n\t */\r\n\tgetWidth() {\r\n\t\treturn this.element.offsetWidth\r\n\t}\r\n\r\n\t/**\r\n\t * Returns the height of the \"scrollable container\" itself.\r\n\t * Not to be confused with the height of \"scrollable container\"'s content.\r\n\t * @return {number}\r\n\t */\r\n\tgetHeight() {\r\n\t\t// if (!this.element && !precise) {\r\n\t\t// \treturn getScreenHeight()\r\n\t\t// }\r\n\t\treturn this.element.offsetHeight\r\n\t}\r\n\r\n\t/**\r\n\t * Returns a \"top offset\" of an items container element\r\n\t * relative to the \"scrollable container\"'s top edge.\r\n\t * @return {number}\r\n\t */\r\n\tgetItemsContainerTopOffset() {\r\n\t\tconst scrollableContainerTop = this.element.getBoundingClientRect().top\r\n\t\tconst scrollableContainerBorderTopWidth = this.element.clientTop\r\n\t\tconst itemsContainerTop = this.getItemsContainerElement().getBoundingClientRect().top\r\n\t\treturn (itemsContainerTop - scrollableContainerTop) + this.getScrollY() - scrollableContainerBorderTopWidth\r\n\t}\r\n\r\n\t// isVisible() {\r\n\t// \tconst { top, bottom } = this.element.getBoundingClientRect()\r\n\t// \treturn bottom > 0 && top < getScreenHeight()\r\n\t// }\r\n\r\n\t/**\r\n\t * Adds a \"scroll\" event listener to the \"scrollable container\".\r\n\t * @param {onScroll} Should be called whenever the scroll position inside the \"scrollable container\" (potentially) changes.\r\n\t * @return {function} Returns a function that stops listening.\r\n\t */\r\n\tonScroll(onScroll) {\r\n\t\tthis.element.addEventListener('scroll', onScroll)\r\n\t\treturn () => this.element.removeEventListener('scroll', onScroll)\r\n\t}\r\n\r\n\t/**\r\n\t * Adds a \"resize\" event listener to the \"scrollable container\".\r\n\t * @param {onResize} Should be called whenever the \"scrollable container\"'s width or height (potentially) changes.\r\n * @return {function} Returns a function that stops listening.\r\n\t */\r\n\tonResize(onResize) {\r\n\t\t// Watches \"scrollable container\"'s dimensions via a `ResizeObserver`.\r\n\t\t// https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver\r\n\t\t// https://web.dev/resize-observer/\r\n\t\tlet unobserve\r\n\t\tif (typeof ResizeObserver !== 'undefined') {\r\n\t\t\tconst resizeObserver = new ResizeObserver((entries) => {\r\n\t\t\t\t// \"one entry per observed element\".\r\n\t\t\t\t// https://web.dev/resize-observer/\r\n\t\t\t\t// `entry.target === this.element`.\r\n\t\t\t\tconst entry = entries[0]\r\n\t\t\t\t// // If `entry.contentBoxSize` property is supported by the web browser.\r\n\t\t\t\t// if (entry.contentBoxSize) {\r\n\t\t\t\t// \t// https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentBoxSize\r\n\t\t\t\t// \tconst width = entry.contentBoxSize.inlineSize\r\n\t\t\t\t// \tconst height = entry.contentBoxSize.blockSize\r\n\t\t\t\t// }\r\n\t\t\t\tonResize()\r\n\t\t\t})\r\n\t\t\tresizeObserver.observe(this.element)\r\n\t\t\tunobserve = () => resizeObserver.unobserve(this.element)\r\n\t\t}\r\n\t\t// I guess, if window is resized, `onResize()` will be triggered twice:\r\n\t\t// once for window resize, and once for the scrollable container resize.\r\n\t\t// But `onResize()` also has an internal check: if the container size\r\n\t\t// hasn't changed since the previous time `onResize()` has been called,\r\n\t\t// then `onResize()` doesn't do anything, so, I guess, there shouldn't be\r\n\t\t// any \"performance implications\" of running the listener twice in such case.\r\n\t\tconst unlistenGlobalResize = addGlobalResizeListener(onResize, {\r\n\t\t\titemsContainerElement: this.getItemsContainerElement()\r\n\t\t})\r\n\t\treturn () => {\r\n\t\t\tif (unobserve) {\r\n\t\t\t\tunobserve()\r\n\t\t\t}\r\n\t\t\tunlistenGlobalResize()\r\n\t\t}\r\n\t}\r\n}\r\n\r\nexport class ScrollableWindowContainer extends ScrollableContainer {\r\n\t/**\r\n\t * Constructs a new window \"scrollable container\".\r\n\t * @param {func} getItemsContainerElement — Returns items \"container\" element.\r\n\t */\r\n\tconstructor(getItemsContainerElement) {\r\n\t\tsuper(window, getItemsContainerElement)\r\n\t}\r\n\r\n\t/**\r\n\t * Returns the current scroll position.\r\n\t * @return {number}\r\n\t */\r\n\tgetScrollY() {\r\n\t\t// `window.scrollY` is not supported by Internet Explorer.\r\n\t\treturn window.pageYOffset\r\n\t}\r\n\r\n\t/**\r\n\t * Returns \"scrollable container\" width,\r\n\t * i.e. the available width for its content.\r\n\t * @return {number}\r\n\t */\r\n\tgetWidth() {\r\n\t\t// https://javascript.info/size-and-scroll-window\r\n\t\t// `<!DOCTYPE html>` may be required in order for this to work correctly.\r\n\t\t// Includes scrollbar (if any).\r\n\t\t// Correctly reflects page zoom in iOS Safari.\r\n\t\t// (scales screen width accordingly).\r\n\t\t// But, includes scrollbar (if any).\r\n\t\treturn window.innerWidth\r\n\t}\r\n\r\n\t/**\r\n\t * Returns the height of the \"scrollable container\" itself.\r\n\t * Not to be confused with the height of \"scrollable container\"'s content.\r\n\t * @return {number}\r\n\t */\r\n\tgetHeight() {\r\n\t\t// https://javascript.info/size-and-scroll-window\r\n\t\t// `<!DOCTYPE html>` is required in order for this to work correctly.\r\n\t\t// Without it, the returned height would be the height of the entire document.\r\n\t\t// Includes scrollbar (if any).\r\n\t\t// Supports iOS Safari's dynamically shown/hidden\r\n\t\t// top URL bar and bottom actions bar.\r\n\t\t// https://codesandbox.io/s/elegant-fog-iddrh\r\n\t\t// Tested in IE 11.\r\n\t\t// It also correctly reflects page zoom in iOS Safari.\r\n\t\t// (scales screen height accordingly).\r\n\t\t// But, includes scrollbar (if any).\r\n\t\treturn window.innerHeight\r\n\t}\r\n\r\n\t/**\r\n\t * Returns a \"top offset\" of an items container element\r\n\t * relative to the \"scrollable container\"'s top edge.\r\n\t * @return {number}\r\n\t */\r\n\tgetItemsContainerTopOffset() {\r\n\t\tconst borderTopWidth = document.clientTop || document.body.clientTop || 0\r\n\t\treturn this.getItemsContainerElement().getBoundingClientRect().top + this.getScrollY() - borderTopWidth\r\n\t}\r\n\r\n\t/**\r\n\t * Adds a \"resize\" event listener to the \"scrollable container\".\r\n\t * @param {onScroll} Should be called whenever the \"scrollable container\"'s width or height (potentially) changes.\r\n\t * @return {function} Returns a function that stops listening.\r\n\t */\r\n\tonResize(onResize) {\r\n\t\treturn addGlobalResizeListener(onResize, {\r\n\t\t\titemsContainerElement: this.getItemsContainerElement()\r\n\t\t})\r\n\t}\r\n\r\n\t// isVisible() {\r\n\t// \treturn true\r\n\t// }\r\n}\r\n\r\n/**\r\n * Adds a \"resize\" event listener to the `window`.\r\n * @param {onResize} Should be called whenever the \"scrollable container\"'s width or height (potentially) changes.\r\n * @param {Element} options.itemsContainerElement — The items \"container\" element, which is not the same as the \"scrollable container\" element. For example, \"scrollable container\" could be resized while the list element retaining its size. One such example is a user entering fullscreen mode on an HTML5 `<video/>` element: in that case, a \"resize\" event is triggered on a window, and window dimensions change to the user's screen size, but such \"resize\" event can be ignored because the list isn't visible until the user exits fullscreen mode.\r\n * @return {function} Returns a function that stops listening.\r\n */\r\nfunction addGlobalResizeListener(onResize, { itemsContainerElement }) {\r\n\tconst onResizeListener = () => {\r\n\t\t// By default, `VirtualScroller` always performs a re-layout\r\n\t\t// on window `resize` event. But browsers (Chrome, Firefox)\r\n\t\t// [trigger](https://developer.mozilla.org/en-US/docs/Web/API/Window/fullScreen#Notes)\r\n\t\t// window `resize` event also when a user switches into fullscreen mode:\r\n\t\t// for example, when a user is watching a video and double-clicks on it\r\n\t\t// to maximize it. And also when the user goes out of the fullscreen mode.\r\n\t\t// Each such fullscreen mode entering/exiting will trigger window `resize`\r\n\t\t// event that will it turn trigger a re-layout of `VirtualScroller`,\r\n\t\t// resulting in bad user experience. To prevent that, such cases are filtered out.\r\n\t\t// Some other workaround:\r\n\t\t// https://stackoverflow.com/questions/23770449/embedded-youtube-video-fullscreen-or-causing-resize\r\n\t\tif (document.fullscreenElement) {\r\n\t\t\t// If the fullscreened element doesn't contain the list\r\n\t\t\t// (and is not the list itself), then the layout hasn't been affected,\r\n\t\t\t// so don't perform a re-layout.\r\n\t\t\t//\r\n\t\t\t// For example, suppose there's a list of items, and some item contains a video.\r\n\t\t\t// If, upon clicking such video, it plays inline, and the user enters\r\n\t\t\t// fullscreen mode while playing such inline video, then the layout won't be\r\n\t\t\t// affected, and so such `resize` event should be ignored: when\r\n\t\t\t// `document.fullscreenElement` is in a separate \"branch\" relative to the\r\n\t\t\t// `container`.\r\n\t\t\t//\r\n\t\t\t// Another scenario: suppose that upon click, the video doesn't play inline,\r\n\t\t\t// but instead a \"Slideshow\" component is open, with the video shown at the\r\n\t\t\t// center of the screen in an overlay. If then the user enters fullscreen mode,\r\n\t\t\t// the layout wouldn't be affected too, so such `resize` event should also be\r\n\t\t\t// ignored: when `document.fullscreenElement` is inside the `container`.\r\n\t\t\t//\r\n\t\t\tif (document.fullscreenElement.contains(itemsContainerElement)) {\r\n\t\t\t\t// The element is either the `container`'s ancestor,\r\n\t\t\t\t// Or is the `container` itself.\r\n\t\t\t\t// (`a.contains(b)` includes the `a === b` case).\r\n\t\t\t\t// So the `resize` event will affect the `container`'s dimensions.\r\n\t\t\t} else {\r\n\t\t\t\t// The element is either inside the `container`,\r\n\t\t\t\t// Or is in a separate tree.\r\n\t\t\t\t// So the `resize` event won't affect the `container`'s dimensions.\r\n\t\t\t\treturn\r\n\t\t\t}\r\n\t\t}\r\n\t\tonResize()\r\n\t}\r\n\twindow.addEventListener('resize', onResizeListener)\r\n\treturn () => window.removeEventListener('resize', onResizeListener)\r\n}"],"file":"ScrollableContainer.js"}
|
|
1
|
+
{"version":3,"file":"ScrollableContainer.js","names":["ScrollableContainer","getElement","getItemsContainerElement","scrollTop","scrollY","scrollTo","offsetWidth","offsetHeight","scrollableContainerTop","getBoundingClientRect","top","scrollableContainerBorderTopWidth","clientTop","itemsContainerTop","getScrollY","onScrollListener","element","addEventListener","removeEventListener","onResize","unobserve","ResizeObserver","resizeObserver","entries","entry","observe","unlistenGlobalResize","addGlobalResizeListener","itemsContainerElement","ScrollableWindowContainer","window","pageYOffset","innerWidth","innerHeight","borderTopWidth","document","body","onResizeListener","fullscreenElement","contains"],"sources":["../../source/DOM/ScrollableContainer.js"],"sourcesContent":["export default class ScrollableContainer {\r\n\t/**\r\n\t * Constructs a new \"scrollable container\" from an element.\r\n\t * @param {func} getElement — Returns the scrollable container element.\r\n\t * @param {func} getItemsContainerElement — Returns items \"container\" element.\r\n\t */\r\n\tconstructor(getElement, getItemsContainerElement) {\r\n\t\tthis.getElement = getElement\r\n\t\tthis.getItemsContainerElement = getItemsContainerElement\r\n\t}\r\n\r\n\t/**\r\n\t * Returns the current scroll position.\r\n\t * @return {number}\r\n\t */\r\n\tgetScrollY() {\r\n\t\treturn this.getElement().scrollTop\r\n\t}\r\n\r\n\t/**\r\n\t * Scrolls to a specific position.\r\n\t * @param {number} scrollY\r\n\t */\r\n\tscrollToY(scrollY) {\r\n\t\t// IE 11 doesn't seem to have a `.scrollTo()` method.\r\n\t\t// https://gitlab.com/catamphetamine/virtual-scroller/-/issues/10\r\n\t\t// https://stackoverflow.com/questions/39908825/window-scrollto-is-not-working-in-internet-explorer-11\r\n\t\tif (this.getElement().scrollTo) {\r\n\t\t\tthis.getElement().scrollTo(0, scrollY)\r\n\t\t} else {\r\n\t\t\tthis.getElement().scrollTop = scrollY\r\n\t\t}\r\n\t}\r\n\r\n\t/**\r\n\t * Returns \"scrollable container\" width,\r\n\t * i.e. the available width for its content.\r\n\t * @return {number}\r\n\t */\r\n\tgetWidth() {\r\n\t\treturn this.getElement().offsetWidth\r\n\t}\r\n\r\n\t/**\r\n\t * Returns the height of the \"scrollable container\" itself.\r\n\t * Not to be confused with the height of \"scrollable container\"'s content.\r\n\t * @return {number}\r\n\t */\r\n\tgetHeight() {\r\n\t\t// if (!this.getElement() && !precise) {\r\n\t\t// \treturn getScreenHeight()\r\n\t\t// }\r\n\t\treturn this.getElement().offsetHeight\r\n\t}\r\n\r\n\t/**\r\n\t * Returns a \"top offset\" of an items container element\r\n\t * relative to the \"scrollable container\"'s top edge.\r\n\t * @return {number}\r\n\t */\r\n\tgetItemsContainerTopOffset() {\r\n\t\tconst scrollableContainerTop = this.getElement().getBoundingClientRect().top\r\n\t\tconst scrollableContainerBorderTopWidth = this.getElement().clientTop\r\n\t\tconst itemsContainerTop = this.getItemsContainerElement().getBoundingClientRect().top\r\n\t\treturn (itemsContainerTop - scrollableContainerTop) + this.getScrollY() - scrollableContainerBorderTopWidth\r\n\t}\r\n\r\n\t// isVisible() {\r\n\t// \tconst { top, bottom } = this.getElement().getBoundingClientRect()\r\n\t// \treturn bottom > 0 && top < getScreenHeight()\r\n\t// }\r\n\r\n\t/**\r\n\t * Adds a \"scroll\" event listener to the \"scrollable container\".\r\n\t * @param {onScrollListener} Should be called whenever the scroll position inside the \"scrollable container\" (potentially) changes.\r\n\t * @return {function} Returns a function that stops listening.\r\n\t */\r\n\tonScroll(onScrollListener) {\r\n\t\tconst element = this.getElement()\r\n\t\telement.addEventListener('scroll', onScrollListener)\r\n\t\treturn () => element.removeEventListener('scroll', onScrollListener)\r\n\t}\r\n\r\n\t/**\r\n\t * Adds a \"resize\" event listener to the \"scrollable container\".\r\n\t * @param {onResize} Should be called whenever the \"scrollable container\"'s width or height (potentially) changes.\r\n * @return {function} Returns a function that stops listening.\r\n\t */\r\n\tonResize(onResize) {\r\n\t\t// Watches \"scrollable container\"'s dimensions via a `ResizeObserver`.\r\n\t\t// https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver\r\n\t\t// https://web.dev/resize-observer/\r\n\t\tlet unobserve\r\n\t\tif (typeof ResizeObserver !== 'undefined') {\r\n\t\t\tconst resizeObserver = new ResizeObserver((entries) => {\r\n\t\t\t\t// \"one entry per observed element\".\r\n\t\t\t\t// https://web.dev/resize-observer/\r\n\t\t\t\t// `entry.target === this.getElement()`.\r\n\t\t\t\tconst entry = entries[0]\r\n\t\t\t\t// // If `entry.contentBoxSize` property is supported by the web browser.\r\n\t\t\t\t// if (entry.contentBoxSize) {\r\n\t\t\t\t// \t// https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentBoxSize\r\n\t\t\t\t// \tconst width = entry.contentBoxSize.inlineSize\r\n\t\t\t\t// \tconst height = entry.contentBoxSize.blockSize\r\n\t\t\t\t// }\r\n\t\t\t\tonResize()\r\n\t\t\t})\r\n\t\t\tconst element = this.getElement()\r\n\t\t\tresizeObserver.observe(element)\r\n\t\t\tunobserve = () => resizeObserver.unobserve(element)\r\n\t\t}\r\n\t\t// I guess, if window is resized, `onResize()` will be triggered twice:\r\n\t\t// once for window resize, and once for the scrollable container resize.\r\n\t\t// But `onResize()` also has an internal check: if the container size\r\n\t\t// hasn't changed since the previous time `onResize()` has been called,\r\n\t\t// then `onResize()` doesn't do anything, so, I guess, there shouldn't be\r\n\t\t// any \"performance implications\" of running the listener twice in such case.\r\n\t\tconst unlistenGlobalResize = addGlobalResizeListener(onResize, {\r\n\t\t\titemsContainerElement: this.getItemsContainerElement()\r\n\t\t})\r\n\t\treturn () => {\r\n\t\t\tif (unobserve) {\r\n\t\t\t\tunobserve()\r\n\t\t\t}\r\n\t\t\tunlistenGlobalResize()\r\n\t\t}\r\n\t}\r\n}\r\n\r\nexport class ScrollableWindowContainer extends ScrollableContainer {\r\n\t/**\r\n\t * Constructs a new window \"scrollable container\".\r\n\t * @param {func} getItemsContainerElement — Returns items \"container\" element.\r\n\t */\r\n\tconstructor(getItemsContainerElement) {\r\n\t\tsuper(() => window, getItemsContainerElement)\r\n\t}\r\n\r\n\t/**\r\n\t * Returns the current scroll position.\r\n\t * @return {number}\r\n\t */\r\n\tgetScrollY() {\r\n\t\t// `window.scrollY` is not supported by Internet Explorer.\r\n\t\treturn window.pageYOffset\r\n\t}\r\n\r\n\t/**\r\n\t * Returns \"scrollable container\" width,\r\n\t * i.e. the available width for its content.\r\n\t * @return {number}\r\n\t */\r\n\tgetWidth() {\r\n\t\t// https://javascript.info/size-and-scroll-window\r\n\t\t// `<!DOCTYPE html>` may be required in order for this to work correctly.\r\n\t\t// Includes scrollbar (if any).\r\n\t\t// Correctly reflects page zoom in iOS Safari.\r\n\t\t// (scales screen width accordingly).\r\n\t\t// But, includes scrollbar (if any).\r\n\t\treturn window.innerWidth\r\n\t}\r\n\r\n\t/**\r\n\t * Returns the height of the \"scrollable container\" itself.\r\n\t * Not to be confused with the height of \"scrollable container\"'s content.\r\n\t * @return {number}\r\n\t */\r\n\tgetHeight() {\r\n\t\t// https://javascript.info/size-and-scroll-window\r\n\t\t// `<!DOCTYPE html>` is required in order for this to work correctly.\r\n\t\t// Without it, the returned height would be the height of the entire document.\r\n\t\t// Includes scrollbar (if any).\r\n\t\t// Supports iOS Safari's dynamically shown/hidden\r\n\t\t// top URL bar and bottom actions bar.\r\n\t\t// https://codesandbox.io/s/elegant-fog-iddrh\r\n\t\t// Tested in IE 11.\r\n\t\t// It also correctly reflects page zoom in iOS Safari.\r\n\t\t// (scales screen height accordingly).\r\n\t\t// But, includes scrollbar (if any).\r\n\t\treturn window.innerHeight\r\n\t}\r\n\r\n\t/**\r\n\t * Returns a \"top offset\" of an items container element\r\n\t * relative to the \"scrollable container\"'s top edge.\r\n\t * @return {number}\r\n\t */\r\n\tgetItemsContainerTopOffset() {\r\n\t\tconst borderTopWidth = document.clientTop || document.body.clientTop || 0\r\n\t\treturn this.getItemsContainerElement().getBoundingClientRect().top + this.getScrollY() - borderTopWidth\r\n\t}\r\n\r\n\t/**\r\n\t * Adds a \"resize\" event listener to the \"scrollable container\".\r\n\t * @param {onScroll} Should be called whenever the \"scrollable container\"'s width or height (potentially) changes.\r\n\t * @return {function} Returns a function that stops listening.\r\n\t */\r\n\tonResize(onResize) {\r\n\t\treturn addGlobalResizeListener(onResize, {\r\n\t\t\titemsContainerElement: this.getItemsContainerElement()\r\n\t\t})\r\n\t}\r\n\r\n\t// isVisible() {\r\n\t// \treturn true\r\n\t// }\r\n}\r\n\r\n/**\r\n * Adds a \"resize\" event listener to the `window`.\r\n * @param {onResize} Should be called whenever the \"scrollable container\"'s width or height (potentially) changes.\r\n * @param {Element} options.itemsContainerElement — The items \"container\" element, which is not the same as the \"scrollable container\" element. For example, \"scrollable container\" could be resized while the list element retaining its size. One such example is a user entering fullscreen mode on an HTML5 `<video/>` element: in that case, a \"resize\" event is triggered on a window, and window dimensions change to the user's screen size, but such \"resize\" event can be ignored because the list isn't visible until the user exits fullscreen mode.\r\n * @return {function} Returns a function that stops listening.\r\n */\r\nfunction addGlobalResizeListener(onResize, { itemsContainerElement }) {\r\n\tconst onResizeListener = () => {\r\n\t\t// By default, `VirtualScroller` always performs a re-layout\r\n\t\t// on window `resize` event. But browsers (Chrome, Firefox)\r\n\t\t// [trigger](https://developer.mozilla.org/en-US/docs/Web/API/Window/fullScreen#Notes)\r\n\t\t// window `resize` event also when a user switches into fullscreen mode:\r\n\t\t// for example, when a user is watching a video and double-clicks on it\r\n\t\t// to maximize it. And also when the user goes out of the fullscreen mode.\r\n\t\t// Each such fullscreen mode entering/exiting will trigger window `resize`\r\n\t\t// event that will it turn trigger a re-layout of `VirtualScroller`,\r\n\t\t// resulting in bad user experience. To prevent that, such cases are filtered out.\r\n\t\t// Some other workaround:\r\n\t\t// https://stackoverflow.com/questions/23770449/embedded-youtube-video-fullscreen-or-causing-resize\r\n\t\tif (document.fullscreenElement) {\r\n\t\t\t// If the fullscreened element doesn't contain the list\r\n\t\t\t// (and is not the list itself), then the layout hasn't been affected,\r\n\t\t\t// so don't perform a re-layout.\r\n\t\t\t//\r\n\t\t\t// For example, suppose there's a list of items, and some item contains a video.\r\n\t\t\t// If, upon clicking such video, it plays inline, and the user enters\r\n\t\t\t// fullscreen mode while playing such inline video, then the layout won't be\r\n\t\t\t// affected, and so such `resize` event should be ignored: when\r\n\t\t\t// `document.fullscreenElement` is in a separate \"branch\" relative to the\r\n\t\t\t// `container`.\r\n\t\t\t//\r\n\t\t\t// Another scenario: suppose that upon click, the video doesn't play inline,\r\n\t\t\t// but instead a \"Slideshow\" component is open, with the video shown at the\r\n\t\t\t// center of the screen in an overlay. If then the user enters fullscreen mode,\r\n\t\t\t// the layout wouldn't be affected too, so such `resize` event should also be\r\n\t\t\t// ignored: when `document.fullscreenElement` is inside the `container`.\r\n\t\t\t//\r\n\t\t\tif (document.fullscreenElement.contains(itemsContainerElement)) {\r\n\t\t\t\t// The element is either the `container`'s ancestor,\r\n\t\t\t\t// Or is the `container` itself.\r\n\t\t\t\t// (`a.contains(b)` includes the `a === b` case).\r\n\t\t\t\t// So the `resize` event will affect the `container`'s dimensions.\r\n\t\t\t} else {\r\n\t\t\t\t// The element is either inside the `container`,\r\n\t\t\t\t// Or is in a separate tree.\r\n\t\t\t\t// So the `resize` event won't affect the `container`'s dimensions.\r\n\t\t\t\treturn\r\n\t\t\t}\r\n\t\t}\r\n\t\tonResize()\r\n\t}\r\n\twindow.addEventListener('resize', onResizeListener)\r\n\treturn () => window.removeEventListener('resize', onResizeListener)\r\n}"],"mappings":"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"}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof";
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
4
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
8
|
exports["default"] = void 0;
|
|
9
9
|
|
|
10
|
-
var _VirtualScroller = _interopRequireDefault(require("../VirtualScroller"));
|
|
10
|
+
var _VirtualScroller = _interopRequireDefault(require("../VirtualScroller.js"));
|
|
11
11
|
|
|
12
|
-
var _debug = _interopRequireWildcard(require("../utility/debug"));
|
|
12
|
+
var _debug = _interopRequireWildcard(require("../utility/debug.js"));
|
|
13
13
|
|
|
14
|
-
var _px = _interopRequireDefault(require("../utility/px"));
|
|
14
|
+
var _px = _interopRequireDefault(require("../utility/px.js"));
|
|
15
15
|
|
|
16
16
|
var _excluded = ["onMount", "onItemUnmount"];
|
|
17
17
|
|
|
@@ -21,9 +21,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
21
21
|
|
|
22
22
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
23
23
|
|
|
24
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
|
24
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
25
25
|
|
|
26
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
26
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
27
27
|
|
|
28
28
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
29
29
|
|
|
@@ -33,7 +33,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
|
|
|
33
33
|
|
|
34
34
|
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); } }
|
|
35
35
|
|
|
36
|
-
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
|
36
|
+
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
37
37
|
|
|
38
38
|
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; }
|
|
39
39
|
|
|
@@ -45,15 +45,15 @@ var VirtualScroller = /*#__PURE__*/function () {
|
|
|
45
45
|
|
|
46
46
|
_classCallCheck(this, VirtualScroller);
|
|
47
47
|
|
|
48
|
-
_defineProperty(this, "
|
|
48
|
+
_defineProperty(this, "render", function (state, prevState) {
|
|
49
49
|
var items = state.items,
|
|
50
50
|
firstShownItemIndex = state.firstShownItemIndex,
|
|
51
51
|
lastShownItemIndex = state.lastShownItemIndex,
|
|
52
52
|
beforeItemsHeight = state.beforeItemsHeight,
|
|
53
|
-
afterItemsHeight = state.afterItemsHeight;
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
53
|
+
afterItemsHeight = state.afterItemsHeight; // log('~ On state change ~')
|
|
54
|
+
// log('Previous state', prevState)
|
|
55
|
+
// log('New state', state)
|
|
56
|
+
// Set container padding top and bottom.
|
|
57
57
|
// Work around `<tbody/>` not being able to have `padding`.
|
|
58
58
|
// https://gitlab.com/catamphetamine/virtual-scroller/-/issues/1
|
|
59
59
|
// `this.virtualScroller` hasn't been initialized yet at this stage,
|
|
@@ -136,6 +136,10 @@ var VirtualScroller = /*#__PURE__*/function () {
|
|
|
136
136
|
_this.virtualScroller.stop();
|
|
137
137
|
});
|
|
138
138
|
|
|
139
|
+
_defineProperty(this, "start", function () {
|
|
140
|
+
_this.virtualScroller.start();
|
|
141
|
+
});
|
|
142
|
+
|
|
139
143
|
this.container = itemsContainerElement;
|
|
140
144
|
this.renderItem = renderItem;
|
|
141
145
|
|
|
@@ -148,16 +152,15 @@ var VirtualScroller = /*#__PURE__*/function () {
|
|
|
148
152
|
this.virtualScroller = new _VirtualScroller["default"](function () {
|
|
149
153
|
return _this.container;
|
|
150
154
|
}, _items, _objectSpread(_objectSpread({}, restOptions), {}, {
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
}));
|
|
155
|
+
render: this.render,
|
|
156
|
+
tbody: this.tbody
|
|
157
|
+
}));
|
|
158
|
+
this.start(); // `onMount()` option is deprecated due to no longer being used.
|
|
154
159
|
// If someone thinks there's a valid use case for it, create an issue.
|
|
155
160
|
|
|
156
161
|
if (onMount) {
|
|
157
162
|
onMount();
|
|
158
163
|
}
|
|
159
|
-
|
|
160
|
-
this.virtualScroller.listen();
|
|
161
164
|
}
|
|
162
165
|
|
|
163
166
|
_createClass(VirtualScroller, [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"VirtualScroller.js","names":["VirtualScroller","itemsContainerElement","items","renderItem","options","state","prevState","firstShownItemIndex","lastShownItemIndex","beforeItemsHeight","afterItemsHeight","tbody","container","style","paddingTop","px","paddingBottom","diffRender","length","i","log","unmountItem","childNodes","firstChild","shouldPrependItems","prependBeforeItemElement","item","insertBefore","appendChild","warn","stop","virtualScroller","start","onMount","onItemUnmount","restOptions","tagName","VirtualScrollerCore","render","itemElement","removeChild","onItemHeightChange","newItems","setItems"],"sources":["../../source/DOM/VirtualScroller.js"],"sourcesContent":["import VirtualScrollerCore from '../VirtualScroller.js'\r\n\r\nimport log, { warn } from '../utility/debug.js'\r\nimport px from '../utility/px.js'\r\n\r\nexport default class VirtualScroller {\r\n constructor(itemsContainerElement, items, renderItem, options = {}) {\r\n this.container = itemsContainerElement\r\n this.renderItem = renderItem\r\n\r\n const {\r\n onMount,\r\n onItemUnmount,\r\n ...restOptions\r\n } = options\r\n\r\n this.onItemUnmount = onItemUnmount\r\n this.tbody = this.container.tagName === 'TBODY'\r\n\r\n this.virtualScroller = new VirtualScrollerCore(\r\n () => this.container,\r\n items,\r\n {\r\n ...restOptions,\r\n render: this.render,\r\n tbody: this.tbody\r\n }\r\n )\r\n\r\n this.start()\r\n\r\n // `onMount()` option is deprecated due to no longer being used.\r\n // If someone thinks there's a valid use case for it, create an issue.\r\n if (onMount) {\r\n onMount()\r\n }\r\n }\r\n\r\n render = (state, prevState) => {\r\n const {\r\n items,\r\n firstShownItemIndex,\r\n lastShownItemIndex,\r\n beforeItemsHeight,\r\n afterItemsHeight\r\n } = state\r\n\r\n // log('~ On state change ~')\r\n // log('Previous state', prevState)\r\n // log('New state', state)\r\n\r\n // Set container padding top and bottom.\r\n // Work around `<tbody/>` not being able to have `padding`.\r\n // https://gitlab.com/catamphetamine/virtual-scroller/-/issues/1\r\n // `this.virtualScroller` hasn't been initialized yet at this stage,\r\n // so using `this.tbody` instead of `this.virtualScroller.tbody`.\r\n if (!this.tbody) {\r\n this.container.style.paddingTop = px(beforeItemsHeight)\r\n this.container.style.paddingBottom = px(afterItemsHeight)\r\n }\r\n\r\n // Perform an intelligent \"diff\" re-render if the `items` are the same.\r\n const diffRender = prevState && items === prevState.items && items.length > 0\r\n // Remove no longer visible items from the DOM.\r\n if (diffRender) {\r\n // Decrement instead of increment here because\r\n // `this.container.removeChild()` changes indexes.\r\n let i = prevState.lastShownItemIndex\r\n while (i >= prevState.firstShownItemIndex) {\r\n if (i >= firstShownItemIndex && i <= lastShownItemIndex) {\r\n // The item is still visible.\r\n } else {\r\n log('DOM: Remove element for item index', i)\r\n // The item is no longer visible. Remove it.\r\n this.unmountItem(this.container.childNodes[i - prevState.firstShownItemIndex])\r\n }\r\n i--\r\n }\r\n } else {\r\n log('DOM: Rerender the list from scratch')\r\n while (this.container.firstChild) {\r\n this.unmountItem(this.container.firstChild)\r\n }\r\n }\r\n\r\n // Add newly visible items to the DOM.\r\n let shouldPrependItems = diffRender\r\n const prependBeforeItemElement = shouldPrependItems && this.container.firstChild\r\n let i = firstShownItemIndex\r\n while (i <= lastShownItemIndex) {\r\n if (diffRender && i >= prevState.firstShownItemIndex && i <= prevState.lastShownItemIndex) {\r\n // The item is already being rendered.\r\n // Next items will be appended rather than prepended.\r\n if (shouldPrependItems) {\r\n shouldPrependItems = false\r\n }\r\n } else {\r\n const item = this.renderItem(items[i])\r\n if (shouldPrependItems) {\r\n log('DOM: Prepend element for item index', i)\r\n // Append `item` to `this.container` before the retained items.\r\n this.container.insertBefore(item, prependBeforeItemElement)\r\n } else {\r\n log('DOM: Append element for item index', i)\r\n // Append `item` to `this.container`.\r\n this.container.appendChild(item)\r\n }\r\n }\r\n i++\r\n }\r\n }\r\n\r\n // Public API. Should be \"bound\" to `this`.\r\n onUnmount = () => {\r\n warn('`.onUnmount()` instance method name is deprecated, use `.stop()` instance method name instead.')\r\n this.stop()\r\n }\r\n\r\n // Public API. Should be \"bound\" to `this`.\r\n destroy = () => {\r\n warn('`.destroy()` instance method name is deprecated, use `.stop()` instance method name instead.')\r\n this.stop()\r\n }\r\n\r\n // Public API.\r\n // Should be \"bound\" to `this`.\r\n stop = () => {\r\n this.virtualScroller.stop()\r\n }\r\n\r\n // Potentially public API in some hypothetical scenario.\r\n // Should be \"bound\" to `this`.\r\n start = () => {\r\n this.virtualScroller.start()\r\n }\r\n\r\n unmountItem(itemElement) {\r\n this.container.removeChild(itemElement)\r\n if (this.onItemUnmount) {\r\n this.onItemUnmount(itemElement)\r\n }\r\n }\r\n\r\n onItemHeightChange(i) {\r\n this.virtualScroller.onItemHeightChange(i)\r\n }\r\n\r\n /**\r\n * @deprecated\r\n * `.updateItems()` has been renamed to `.setItems()`.\r\n */\r\n updateItems(newItems, options) {\r\n this.setItems(newItems, options)\r\n }\r\n\r\n setItems(newItems, options) {\r\n this.virtualScroller.setItems(newItems, options)\r\n }\r\n\r\n /*\r\n getItemCoordinates(i) {\r\n return this.virtualScroller.getItemCoordinates(i)\r\n }\r\n */\r\n}"],"mappings":"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"}
|
package/commonjs/DOM/tbody.js
CHANGED
|
@@ -3,12 +3,13 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.BROWSER_NOT_SUPPORTED_ERROR = void 0;
|
|
6
|
+
exports.TBODY_CLASS_NAME = exports.BROWSER_NOT_SUPPORTED_ERROR = void 0;
|
|
7
7
|
exports.addTbodyStyles = addTbodyStyles;
|
|
8
|
+
exports.hasTbodyStyles = hasTbodyStyles;
|
|
8
9
|
exports.setTbodyPadding = setTbodyPadding;
|
|
9
10
|
exports.supportsTbody = supportsTbody;
|
|
10
11
|
|
|
11
|
-
var _px = _interopRequireDefault(require("../utility/px"));
|
|
12
|
+
var _px = _interopRequireDefault(require("../utility/px.js"));
|
|
12
13
|
|
|
13
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
14
15
|
|
|
@@ -31,18 +32,23 @@ function supportsTbody() {
|
|
|
31
32
|
return true;
|
|
32
33
|
}
|
|
33
34
|
|
|
35
|
+
var TBODY_CLASS_NAME = 'VirtualScroller';
|
|
36
|
+
exports.TBODY_CLASS_NAME = TBODY_CLASS_NAME;
|
|
37
|
+
var STYLE_ELEMENT_ID = 'VirtualScrollerStyle';
|
|
38
|
+
|
|
39
|
+
function hasTbodyStyles(tbody) {
|
|
40
|
+
return tbody.classList.contains(TBODY_CLASS_NAME) && Boolean(document.getElementById(STYLE_ELEMENT_ID));
|
|
41
|
+
}
|
|
42
|
+
|
|
34
43
|
function addTbodyStyles(tbody) {
|
|
35
44
|
// `classList.add` is supported in Internet Explorer 10+.
|
|
36
|
-
tbody.classList.add(
|
|
37
|
-
var style = document.getElementById('VirtualScrollerStyle');
|
|
45
|
+
tbody.classList.add(TBODY_CLASS_NAME); // Create a `<style/>` element.
|
|
38
46
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
style.id = 'VirtualScrollerStyle'; // CSS variables aren't supported in Internet Explorer.
|
|
47
|
+
var style = document.createElement('style');
|
|
48
|
+
style.id = STYLE_ELEMENT_ID; // CSS variables aren't supported in Internet Explorer.
|
|
42
49
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
}
|
|
50
|
+
style.innerText = "\n\t\ttbody.".concat(TBODY_CLASS_NAME, ":before {\n\t\t\tcontent: '';\n\t\t\tdisplay: table-row;\n\t\t\theight: var(--VirtualScroller-paddingTop);\n\t\t}\n\t\ttbody.").concat(TBODY_CLASS_NAME, ":after {\n\t\t\tcontent: '';\n\t\t\tdisplay: table-row;\n\t\t\theight: var(--VirtualScroller-paddingBottom);\n\t\t}\n\t").replace(/[\n\t]/g, '');
|
|
51
|
+
document.head.appendChild(style);
|
|
46
52
|
}
|
|
47
53
|
|
|
48
54
|
function setTbodyPadding(tbody, beforeItemsHeight, afterItemsHeight) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"tbody.js","names":["BROWSER_NOT_SUPPORTED_ERROR","supportsTbody","window","document","documentMode","TBODY_CLASS_NAME","STYLE_ELEMENT_ID","hasTbodyStyles","tbody","classList","contains","Boolean","getElementById","addTbodyStyles","add","style","createElement","id","innerText","replace","head","appendChild","setTbodyPadding","beforeItemsHeight","afterItemsHeight","setProperty","px"],"sources":["../../source/DOM/tbody.js"],"sourcesContent":["// A workaround for `<tbody/>` not being able to have `padding`.\r\n// https://gitlab.com/catamphetamine/virtual-scroller/-/issues/1\r\n\r\nimport px from '../utility/px.js'\r\n\r\nexport const BROWSER_NOT_SUPPORTED_ERROR = 'It looks like you\\'re using Internet Explorer which doesn\\'t support CSS variables required for a <tbody/> container. VirtualScroller has been switched into \"bypass\" mode (render all items). See: https://gitlab.com/catamphetamine/virtual-scroller/-/issues/1'\r\n\r\nexport function supportsTbody() {\r\n\t// Detect Internet Explorer.\r\n\t// https://stackoverflow.com/questions/19999388/check-if-user-is-using-ie\r\n\t// `documentMode` is an IE-only property.\r\n\t// Supports IE 9-11. Maybe even IE 8.\r\n\t// http://msdn.microsoft.com/en-us/library/ie/cc196988(v=vs.85).aspx\r\n\tif (typeof window !== 'undefined' && window.document.documentMode) {\r\n\t\t// CSS variables aren't supported in Internet Explorer.\r\n\t\treturn false\r\n\t}\r\n\treturn true\r\n}\r\n\r\nexport const TBODY_CLASS_NAME = 'VirtualScroller'\r\nconst STYLE_ELEMENT_ID = 'VirtualScrollerStyle'\r\n\r\nexport function hasTbodyStyles(tbody) {\r\n\treturn tbody.classList.contains(TBODY_CLASS_NAME) &&\r\n\t\tBoolean(document.getElementById(STYLE_ELEMENT_ID))\r\n}\r\n\r\nexport function addTbodyStyles(tbody) {\r\n\t// `classList.add` is supported in Internet Explorer 10+.\r\n\ttbody.classList.add(TBODY_CLASS_NAME)\r\n\r\n\t// Create a `<style/>` element.\r\n\tconst style = document.createElement('style')\r\n\tstyle.id = STYLE_ELEMENT_ID\r\n\r\n\t// CSS variables aren't supported in Internet Explorer.\r\n\tstyle.innerText = `\r\n\t\ttbody.${TBODY_CLASS_NAME}:before {\r\n\t\t\tcontent: '';\r\n\t\t\tdisplay: table-row;\r\n\t\t\theight: var(--VirtualScroller-paddingTop);\r\n\t\t}\r\n\t\ttbody.${TBODY_CLASS_NAME}:after {\r\n\t\t\tcontent: '';\r\n\t\t\tdisplay: table-row;\r\n\t\t\theight: var(--VirtualScroller-paddingBottom);\r\n\t\t}\r\n\t`.replace(/[\\n\\t]/g, '')\r\n\r\n\tdocument.head.appendChild(style)\r\n}\r\n\r\nexport function setTbodyPadding(tbody, beforeItemsHeight, afterItemsHeight) {\r\n\t// CSS variables aren't supported in Internet Explorer.\r\n\ttbody.style.setProperty('--VirtualScroller-paddingTop', px(beforeItemsHeight));\r\n\ttbody.style.setProperty('--VirtualScroller-paddingBottom', px(afterItemsHeight));\r\n}"],"mappings":";;;;;;;;;;;AAGA;;;;AAHA;AACA;AAIO,IAAMA,2BAA2B,GAAG,mQAApC;;;AAEA,SAASC,aAAT,GAAyB;EAC/B;EACA;EACA;EACA;EACA;EACA,IAAI,OAAOC,MAAP,KAAkB,WAAlB,IAAiCA,MAAM,CAACC,QAAP,CAAgBC,YAArD,EAAmE;IAClE;IACA,OAAO,KAAP;EACA;;EACD,OAAO,IAAP;AACA;;AAEM,IAAMC,gBAAgB,GAAG,iBAAzB;;AACP,IAAMC,gBAAgB,GAAG,sBAAzB;;AAEO,SAASC,cAAT,CAAwBC,KAAxB,EAA+B;EACrC,OAAOA,KAAK,CAACC,SAAN,CAAgBC,QAAhB,CAAyBL,gBAAzB,KACNM,OAAO,CAACR,QAAQ,CAACS,cAAT,CAAwBN,gBAAxB,CAAD,CADR;AAEA;;AAEM,SAASO,cAAT,CAAwBL,KAAxB,EAA+B;EACrC;EACAA,KAAK,CAACC,SAAN,CAAgBK,GAAhB,CAAoBT,gBAApB,EAFqC,CAIrC;;EACA,IAAMU,KAAK,GAAGZ,QAAQ,CAACa,aAAT,CAAuB,OAAvB,CAAd;EACAD,KAAK,CAACE,EAAN,GAAWX,gBAAX,CANqC,CAQrC;;EACAS,KAAK,CAACG,SAAN,GAAkB,sBACTb,gBADS,0IAMTA,gBANS,6HAWhBc,OAXgB,CAWR,SAXQ,EAWG,EAXH,CAAlB;EAaAhB,QAAQ,CAACiB,IAAT,CAAcC,WAAd,CAA0BN,KAA1B;AACA;;AAEM,SAASO,eAAT,CAAyBd,KAAzB,EAAgCe,iBAAhC,EAAmDC,gBAAnD,EAAqE;EAC3E;EACAhB,KAAK,CAACO,KAAN,CAAYU,WAAZ,CAAwB,8BAAxB,EAAwD,IAAAC,cAAA,EAAGH,iBAAH,CAAxD;EACAf,KAAK,CAACO,KAAN,CAAYU,WAAZ,CAAwB,iCAAxB,EAA2D,IAAAC,cAAA,EAAGF,gBAAH,CAA3D;AACA"}
|
package/commonjs/ItemHeights.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof";
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
4
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
8
|
exports["default"] = void 0;
|
|
9
9
|
|
|
10
|
-
var _debug = _interopRequireWildcard(require("./utility/debug"));
|
|
10
|
+
var _debug = _interopRequireWildcard(require("./utility/debug.js"));
|
|
11
11
|
|
|
12
12
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
13
13
|
|
|
@@ -17,10 +17,15 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
|
|
|
17
17
|
|
|
18
18
|
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); } }
|
|
19
19
|
|
|
20
|
-
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
|
20
|
+
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
21
21
|
|
|
22
22
|
var ItemHeights = /*#__PURE__*/function () {
|
|
23
|
-
function ItemHeights(
|
|
23
|
+
function ItemHeights(_ref) {
|
|
24
|
+
var container = _ref.container,
|
|
25
|
+
itemHeights = _ref.itemHeights,
|
|
26
|
+
getItemHeight = _ref.getItemHeight,
|
|
27
|
+
setItemHeight = _ref.setItemHeight;
|
|
28
|
+
|
|
24
29
|
_classCallCheck(this, ItemHeights);
|
|
25
30
|
|
|
26
31
|
this.container = container;
|
|
@@ -46,7 +51,7 @@ var ItemHeights = /*#__PURE__*/function () {
|
|
|
46
51
|
this.lastMeasuredItemIndex = undefined;
|
|
47
52
|
}
|
|
48
53
|
/**
|
|
49
|
-
*
|
|
54
|
+
* Can only be called after a `.reset()` (including new instance creation).
|
|
50
55
|
* Initializes `this.measuredItemsHeight`, `this.firstMeasuredItemIndex`
|
|
51
56
|
* and `this.lastMeasuredItemIndex` instance variables from `VirtualScroller` `state`.
|
|
52
57
|
* These instance variables are used when calculating "average" item height:
|
|
@@ -55,8 +60,9 @@ var ItemHeights = /*#__PURE__*/function () {
|
|
|
55
60
|
*/
|
|
56
61
|
|
|
57
62
|
}, {
|
|
58
|
-
key: "
|
|
59
|
-
value: function
|
|
63
|
+
key: "readItemHeightsFromState",
|
|
64
|
+
value: function readItemHeightsFromState(_ref2) {
|
|
65
|
+
var itemHeights = _ref2.itemHeights;
|
|
60
66
|
var i = 0;
|
|
61
67
|
|
|
62
68
|
while (i < itemHeights.length) {
|
|
@@ -141,15 +147,12 @@ var ItemHeights = /*#__PURE__*/function () {
|
|
|
141
147
|
var i = firstShownItemIndex;
|
|
142
148
|
|
|
143
149
|
while (i <= lastShownItemIndex) {
|
|
150
|
+
// Measure item heights that haven't been measured previously.
|
|
144
151
|
// Don't re-measure item heights that have been measured previously.
|
|
145
152
|
// The rationale is that developers are supposed to manually call
|
|
146
153
|
// `.onItemHeightChange()` every time an item's height changes.
|
|
147
|
-
// If developers
|
|
154
|
+
// If developers don't neglect that rule, item heights won't
|
|
148
155
|
// change unexpectedly.
|
|
149
|
-
// // Re-measure all shown items' heights, because an item's height
|
|
150
|
-
// // might have changed since it has been measured initially.
|
|
151
|
-
// // For example, if an item is a long comment with a "Show more" button,
|
|
152
|
-
// // then the user might have clicked that "Show more" button.
|
|
153
156
|
if (this._get(i) === undefined) {
|
|
154
157
|
nonPreviouslyMeasuredItemIndexes.push(i);
|
|
155
158
|
|
|
@@ -195,16 +198,19 @@ var ItemHeights = /*#__PURE__*/function () {
|
|
|
195
198
|
this.lastMeasuredItemIndex = i;
|
|
196
199
|
}
|
|
197
200
|
} else {
|
|
198
|
-
// Validate the item's height
|
|
199
|
-
//
|
|
200
|
-
//
|
|
201
|
-
//
|
|
201
|
+
// Validate that the item's height didn't change since it was last measured.
|
|
202
|
+
// If it did, then display a warning and update the item's height
|
|
203
|
+
// as an attempt to fix things.
|
|
204
|
+
// If an item's height changes unexpectedly then it means that there'll
|
|
205
|
+
// likely be "content jumping".
|
|
202
206
|
var previousHeight = this._get(i);
|
|
203
207
|
|
|
204
208
|
var _height = this._measureItemHeight(i, firstShownItemIndex);
|
|
205
209
|
|
|
206
210
|
if (previousHeight !== _height) {
|
|
207
|
-
(0, _debug.warn)('Item index', i, 'height was', previousHeight, 'before it
|
|
211
|
+
(0, _debug.warn)('Item index', i, 'height changed unexpectedly: it was', previousHeight, 'before, but now it is', _height, '. An item\'s height is allowed to change only in two cases: when the item\'s "state" changes and the developer calls `onItemStateChange(i, newState)`, or when the item\'s height changes for some other reason and the developer calls `onItemHeightChange(i)`. Perhaps you forgot to persist the item\'s "state" by calling `onItemStateChange(i, newState)` when it changed, and that "state" got lost when the item element was unmounted, which resulted in a different height when the item was shown again having its "state" reset.'); // Update the item's height as an attempt to fix things.
|
|
212
|
+
|
|
213
|
+
this._set(i, _height);
|
|
208
214
|
}
|
|
209
215
|
}
|
|
210
216
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../source/ItemHeights.js"],"names":["ItemHeights","container","getItemHeight","setItemHeight","_get","_set","reset","measuredItemsHeight","firstMeasuredItemIndex","undefined","lastMeasuredItemIndex","itemHeights","i","length","firstShownItemIndex","getNthRenderedItemHeight","lastShownItemIndex","nonPreviouslyMeasuredItemIndexes","previousFirstMeasuredItemIndex","previousLastMeasuredItemIndex","firstMeasuredItemIndexHasBeenUpdated","push","height","_measureItemHeight","previousHeight","count"],"mappings":"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","sourcesContent":["import log, { warn, isDebug, reportError } from './utility/debug'\r\n\r\nexport default class ItemHeights {\r\n\tconstructor(container, getItemHeight, setItemHeight) {\r\n\t\tthis.container = container\r\n\t\tthis._get = getItemHeight\r\n\t\tthis._set = setItemHeight\r\n\t\tthis.reset()\r\n\t}\r\n\r\n\treset() {\r\n\t\tthis.measuredItemsHeight = 0\r\n\t\t// \"First measured item index\" variable was introduced\r\n\t\t// because it's not always `0`: when `virtualScroller.setItems()`\r\n\t\t// is called, some items might get prepended, in which case\r\n\t\t// `this.lastMeasuredItemIndex` is updated. If there was no\r\n\t\t// `this.firstMeasuredItemIndex`, then the average item height\r\n\t\t// calculated in `.getAverage()` would be incorrect in the timeframe\r\n\t\t// between `.setItems()` is called and those changes have been rendered.\r\n\t\t// And in that timeframe, `.getAverage()` is used to calculate the \"layout\":\r\n\t\t// stuff like \"before/after items height\" and \"estimated items count on screen\".\r\n\t\tthis.firstMeasuredItemIndex = undefined\r\n\t\tthis.lastMeasuredItemIndex = undefined\r\n\t}\r\n\r\n\t/**\r\n\t * Is called after `.reset()`.\r\n\t * Initializes `this.measuredItemsHeight`, `this.firstMeasuredItemIndex`\r\n\t * and `this.lastMeasuredItemIndex` instance variables from `VirtualScroller` `state`.\r\n\t * These instance variables are used when calculating \"average\" item height:\r\n\t * the \"average\" item height is simply `this.measuredItemsHeight` divided by\r\n\t * `this.lastMeasuredItemIndex` minus `this.firstMeasuredItemIndex` plus 1.\r\n\t */\r\n\tinitialize(itemHeights) {\r\n\t\tlet i = 0\r\n\t\twhile (i < itemHeights.length) {\r\n\t\t\tif (itemHeights[i] === undefined) {\r\n\t\t\t\tif (this.firstMeasuredItemIndex !== undefined) {\r\n\t\t\t\t\tthis.lastMeasuredItemIndex = i - 1\r\n\t\t\t\t\tbreak\r\n\t\t\t\t}\r\n\t\t\t} else {\r\n\t\t\t\tif (this.firstMeasuredItemIndex === undefined) {\r\n\t\t\t\t\tthis.firstMeasuredItemIndex = i\r\n\t\t\t\t}\r\n\t\t\t\tthis.measuredItemsHeight += itemHeights[i]\r\n\t\t\t}\r\n\t\t\ti++\r\n\t\t}\r\n\t}\r\n\r\n\t// Seems to be no longer used.\r\n\t// getItemHeight(i, firstShownItemIndex) {\r\n\t// \tif (this._get(i)) {\r\n\t// \t\treturn this._get(i)\r\n\t// \t}\r\n\t// \tconst itemHeight = this._measureItemHeight(i, firstShownItemIndex)\r\n\t// \tif (itemHeight) {\r\n\t// \t\tthis._set(i, itemHeight)\r\n\t// \t\treturn itemHeight\r\n\t// \t}\r\n\t// \treturn this.getAverage()\r\n\t// }\r\n\r\n\t_measureItemHeight(i, firstShownItemIndex) {\r\n\t\treturn this.container.getNthRenderedItemHeight(i - firstShownItemIndex)\r\n\t}\r\n\r\n\t/**\r\n\t * Measures item heights:\r\n\t *\r\n\t * * For the items that haven't been previously measured,\r\n\t * measures them for the first time.\r\n\t *\r\n\t * * For the items that have been previoulsy measured,\r\n\t * validate that their previously measured height\r\n\t * is still equal to their current height.\r\n\t * The unequalness may not necessarily be caused by\r\n\t * incorrect use of `virtual-scroller`: there are\r\n\t * also some valid use cases when such unequalness\r\n\t * could happen (see the comments in the code).\r\n\t *\r\n\t * @param {number} firstShownItemIndex\r\n\t * @param {number} lastShownItemIndex\r\n\t * @return {number[]} The indexes of the items that have not previously been measured and have been measured now.\r\n\t */\r\n\tmeasureItemHeights(firstShownItemIndex, lastShownItemIndex) {\r\n\t\tlog('~ Measure item heights ~')\r\n\t\t// If no items are rendered, don't measure anything.\r\n\t\tif (firstShownItemIndex === undefined) {\r\n\t\t\treturn\r\n\t\t}\r\n\t\t// Reset `this.measuredItemsHeight` if it's not a \"continuous\" measured items list:\r\n\t\t// if a group of items has been measured previously, and now it has rendered a completely\r\n\t\t// different group of items, and there's a non-measured \"gap\" between those two groups,\r\n\t\t// then reset `this.measuredItemsHeight` and \"first measured\"/\"last measured\" item indexes.\r\n\t\t// For example, this could happen when `.setItems()` prepends a lot of new items.\r\n\t\tif (this.firstMeasuredItemIndex !== undefined) {\r\n\t\t\tif (\r\n\t\t\t\tfirstShownItemIndex > this.lastMeasuredItemIndex + 1 ||\r\n\t\t\t\tlastShownItemIndex < this.firstMeasuredItemIndex - 1\r\n\t\t\t) {\r\n\t\t\t\t// Reset.\r\n\t\t\t\tlog('Non-measured items gap detected. Reset first and last measured item indexes.')\r\n\t\t\t\tthis.reset()\r\n\t\t\t}\r\n\t\t}\r\n\t\tconst nonPreviouslyMeasuredItemIndexes = []\r\n\t\tconst previousFirstMeasuredItemIndex = this.firstMeasuredItemIndex\r\n\t\tconst previousLastMeasuredItemIndex = this.lastMeasuredItemIndex\r\n\t\tlet firstMeasuredItemIndexHasBeenUpdated = false\r\n\t\tlet i = firstShownItemIndex\r\n\t\twhile (i <= lastShownItemIndex) {\r\n\t\t\t// Don't re-measure item heights that have been measured previously.\r\n\t\t\t// The rationale is that developers are supposed to manually call\r\n\t\t\t// `.onItemHeightChange()` every time an item's height changes.\r\n\t\t\t// If developers aren't neglecting that rule, item heights won't\r\n\t\t\t// change unexpectedly.\r\n\t\t\t// // Re-measure all shown items' heights, because an item's height\r\n\t\t\t// // might have changed since it has been measured initially.\r\n\t\t\t// // For example, if an item is a long comment with a \"Show more\" button,\r\n\t\t\t// // then the user might have clicked that \"Show more\" button.\r\n\t\t\tif (this._get(i) === undefined) {\r\n\t\t\t\tnonPreviouslyMeasuredItemIndexes.push(i)\r\n\t\t\t\tconst height = this._measureItemHeight(i, firstShownItemIndex)\r\n\t\t\t\tlog('Item index', i, 'height', height)\r\n\t\t\t\tthis._set(i, height)\r\n\t\t\t\t// Update average item height calculation variables\r\n\t\t\t\t// related to the previously measured items\r\n\t\t\t\t// that're above the items currently being shown.\r\n\t\t\t\t// It is known to be a \"continuous\" measured items list,\r\n\t\t\t\t// because the code at the start of this function checks that.\r\n\t\t\t\tif (previousFirstMeasuredItemIndex === undefined || i < previousFirstMeasuredItemIndex) {\r\n\t\t\t\t\tthis.measuredItemsHeight += height\r\n\t\t\t\t\t// Update first measured item index.\r\n\t\t\t\t\tif (!firstMeasuredItemIndexHasBeenUpdated) {\r\n\t\t\t\t\t\t// log('Set first measured item index', i)\r\n\t\t\t\t\t\tthis.firstMeasuredItemIndex = i\r\n\t\t\t\t\t\tfirstMeasuredItemIndexHasBeenUpdated = true\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t\t// Update average item height calculation variables\r\n\t\t\t\t// related to the previously measured items\r\n\t\t\t\t// that're below the items currently being shown.\r\n\t\t\t\t// It is known to be a \"continuous\" measured items list,\r\n\t\t\t\t// because the code at the start of this function checks that.\r\n\t\t\t\tif (previousLastMeasuredItemIndex === undefined || i > previousLastMeasuredItemIndex) {\r\n\t\t\t\t\t// If `previousLastMeasuredItemIndex` is `undefined`\r\n\t\t\t\t\t// then `previousFirstMeasuredItemIndex` is also `undefined`\r\n\t\t\t\t\t// which means that the item's `height` has already been added\r\n\t\t\t\t\t// to `this.measuredItemsHeight` in the code above,\r\n\t\t\t\t\t// so this condition guards against counting the item's `height`\r\n\t\t\t\t\t// twice in `this.measuredItemsHeight`.\r\n\t\t\t\t\tif (previousLastMeasuredItemIndex !== undefined) {\r\n\t\t\t\t\t\t// Add newly shown item height.\r\n\t\t\t\t\t\tthis.measuredItemsHeight += height\r\n\t\t\t\t\t}\r\n\t\t\t\t\t// Update last measured item index.\r\n\t\t\t\t\tthis.lastMeasuredItemIndex = i\r\n\t\t\t\t}\r\n\t\t\t} else {\r\n\t\t\t\t// Validate the item's height right after showing it after being hidden,\r\n\t\t\t\t// because, if the stored item's state isn't applied properly, the item's\r\n\t\t\t\t// height might be incorrect when it's rendered with that state not applied,\r\n\t\t\t\t// and so a developer could know that there's a bug in their code.\r\n\t\t\t\tconst previousHeight = this._get(i)\r\n\t\t\t\tconst height = this._measureItemHeight(i, firstShownItemIndex)\r\n\t\t\t\tif (previousHeight !== height) {\r\n\t\t\t\t\twarn('Item index', i, 'height was', previousHeight, 'before it was hidden, but, after showing it again, its height is', height, '. Perhaps you forgot to persist the item\\'s state by calling `onItemStateChange(i, newState)` when it changed, and that state got lost when the item element was unmounted, which resulted in a different height when the item was shown again, but with the missing state.')\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\ti++\r\n\t\t}\r\n\t\t// // Update average item height.\r\n\t\t// this.updateAverageItemHeight()\r\n\t\treturn nonPreviouslyMeasuredItemIndexes\r\n\t}\r\n\r\n\t/**\r\n\t * Re-measures item height.\r\n\t * @param {number} i — Item index.\r\n\t * @param {number} firstShownItemIndex\r\n\t */\r\n\tremeasureItemHeight(i, firstShownItemIndex) {\r\n\t\tconst previousHeight = this._get(i)\r\n\t\tconst height = this._measureItemHeight(i, firstShownItemIndex)\r\n\t\t// // Because this function is called from `.onItemHeightChange()`,\r\n\t\t// // there're no guarantees in which circumstances a developer calls it,\r\n\t\t// // and for which item indexes.\r\n\t\t// // Therefore, to guard against cases of incorrect usage,\r\n\t\t// // this function won't crash anything if the item isn't rendered\r\n\t\t// // or hasn't been previously rendered.\r\n\t\t// if (height !== undefined) {\r\n\t\t// \treportError(`\"onItemHeightChange()\" has been called for item ${i}, but that item isn't rendered.`)\r\n\t\t// \treturn\r\n\t\t// }\r\n\t\t// if (previousHeight === undefined) {\r\n\t\t// \treportError(`\"onItemHeightChange()\" has been called for item ${i}, but that item hasn't been rendered before.`)\r\n\t\t// \treturn\r\n\t\t// }\r\n\t\tthis._set(i, height)\r\n\t\tthis.measuredItemsHeight += height - previousHeight\r\n\t\treturn height\r\n\t}\r\n\r\n\t// /**\r\n\t// * \"Average\" item height is stored as an instance variable.\r\n\t// * For example, for caching, so that it isn't calculated every time it's requested.\r\n\t// * But that would be negligible performance gain, not really worth the extra code.\r\n\t// * Another thing it's stored for as an instance variable is\r\n\t// * keeping \"previous\" \"average\" item height, because it can be more precise\r\n\t// * than the newly calculated \"average\" item height, provided it had\r\n\t// * more \"samples\" (measured items). The newly calculated average item height\r\n\t// * could get less samples in a scenario when the scroll somehow jumps\r\n\t// * from one position to some other distant position: in that case previous\r\n\t// * \"total measured items height\" is discarded and the new one is initialized.\r\n\t// * Could such situation happen in real life? I guess, it's unlikely.\r\n\t// * So I'm commenting out this code, but still keeping it just in case.\r\n\t// */\r\n\t// updateAverageItemHeight() {\r\n\t// \tthis.averageItemHeightSamplesCount = this.lastMeasuredItemIndex - this.firstMeasuredItemIndex + 1\r\n\t// \tthis.averageItemHeight = this.measuredItemsHeight / this.averageItemHeightSamplesCount\r\n\t// }\r\n\t//\r\n\t// /**\r\n\t// * Public API: is called by `VirtualScroller`.\r\n\t// * @return {number}\r\n\t// */\r\n\t// getAverage() {\r\n\t// \t// Previously measured average item height might still be\r\n\t// \t// more precise if it contains more measured items (\"samples\").\r\n\t// \tif (this.previousAverageItemHeight) {\r\n\t// \t\tif (this.previousAverageItemHeightSamplesCount > this.averageItemHeightSamplesCount) {\r\n\t// \t\t\treturn this.previousAverageItemHeight\r\n\t// \t\t}\r\n\t// \t}\r\n\t// \treturn this.averageItemHeight || 0\r\n\t// }\r\n\r\n\t/**\r\n\t * Public API: is called by `VirtualScroller`.\r\n\t * @return {number}\r\n\t */\r\n\tgetAverage() {\r\n\t\tif (this.lastMeasuredItemIndex === undefined) {\r\n\t\t\treturn 0\r\n\t\t}\r\n\t\treturn this.measuredItemsHeight / (this.lastMeasuredItemIndex - this.firstMeasuredItemIndex + 1)\r\n\t}\r\n\r\n\tonPrepend(count) {\r\n\t\tif (this.firstMeasuredItemIndex !== undefined) {\r\n\t\t\tthis.firstMeasuredItemIndex += count\r\n\t\t\tthis.lastMeasuredItemIndex += count\r\n\t\t}\r\n\t}\r\n}"],"file":"ItemHeights.js"}
|
|
1
|
+
{"version":3,"file":"ItemHeights.js","names":["ItemHeights","container","itemHeights","getItemHeight","setItemHeight","_get","_set","reset","measuredItemsHeight","firstMeasuredItemIndex","undefined","lastMeasuredItemIndex","i","length","firstShownItemIndex","getNthRenderedItemHeight","lastShownItemIndex","log","nonPreviouslyMeasuredItemIndexes","previousFirstMeasuredItemIndex","previousLastMeasuredItemIndex","firstMeasuredItemIndexHasBeenUpdated","push","height","_measureItemHeight","previousHeight","warn","count"],"sources":["../source/ItemHeights.js"],"sourcesContent":["import log, { warn, isDebug, reportError } from './utility/debug.js'\r\n\r\nexport default class ItemHeights {\r\n\tconstructor({\r\n\t\tcontainer,\r\n\t\titemHeights,\r\n\t\tgetItemHeight,\r\n\t\tsetItemHeight\r\n\t}) {\r\n\t\tthis.container = container\r\n\t\tthis._get = getItemHeight\r\n\t\tthis._set = setItemHeight\r\n\t\tthis.reset()\r\n\t}\r\n\r\n\treset() {\r\n\t\tthis.measuredItemsHeight = 0\r\n\t\t// \"First measured item index\" variable was introduced\r\n\t\t// because it's not always `0`: when `virtualScroller.setItems()`\r\n\t\t// is called, some items might get prepended, in which case\r\n\t\t// `this.lastMeasuredItemIndex` is updated. If there was no\r\n\t\t// `this.firstMeasuredItemIndex`, then the average item height\r\n\t\t// calculated in `.getAverage()` would be incorrect in the timeframe\r\n\t\t// between `.setItems()` is called and those changes have been rendered.\r\n\t\t// And in that timeframe, `.getAverage()` is used to calculate the \"layout\":\r\n\t\t// stuff like \"before/after items height\" and \"estimated items count on screen\".\r\n\t\tthis.firstMeasuredItemIndex = undefined\r\n\t\tthis.lastMeasuredItemIndex = undefined\r\n\t}\r\n\r\n\t/**\r\n\t * Can only be called after a `.reset()` (including new instance creation).\r\n\t * Initializes `this.measuredItemsHeight`, `this.firstMeasuredItemIndex`\r\n\t * and `this.lastMeasuredItemIndex` instance variables from `VirtualScroller` `state`.\r\n\t * These instance variables are used when calculating \"average\" item height:\r\n\t * the \"average\" item height is simply `this.measuredItemsHeight` divided by\r\n\t * `this.lastMeasuredItemIndex` minus `this.firstMeasuredItemIndex` plus 1.\r\n\t */\r\n\treadItemHeightsFromState({ itemHeights }) {\r\n\t\tlet i = 0\r\n\t\twhile (i < itemHeights.length) {\r\n\t\t\tif (itemHeights[i] === undefined) {\r\n\t\t\t\tif (this.firstMeasuredItemIndex !== undefined) {\r\n\t\t\t\t\tthis.lastMeasuredItemIndex = i - 1\r\n\t\t\t\t\tbreak\r\n\t\t\t\t}\r\n\t\t\t} else {\r\n\t\t\t\tif (this.firstMeasuredItemIndex === undefined) {\r\n\t\t\t\t\tthis.firstMeasuredItemIndex = i\r\n\t\t\t\t}\r\n\t\t\t\tthis.measuredItemsHeight += itemHeights[i]\r\n\t\t\t}\r\n\t\t\ti++\r\n\t\t}\r\n\t}\r\n\r\n\t// Seems to be no longer used.\r\n\t// getItemHeight(i, firstShownItemIndex) {\r\n\t// \tif (this._get(i)) {\r\n\t// \t\treturn this._get(i)\r\n\t// \t}\r\n\t// \tconst itemHeight = this._measureItemHeight(i, firstShownItemIndex)\r\n\t// \tif (itemHeight) {\r\n\t// \t\tthis._set(i, itemHeight)\r\n\t// \t\treturn itemHeight\r\n\t// \t}\r\n\t// \treturn this.getAverage()\r\n\t// }\r\n\r\n\t_measureItemHeight(i, firstShownItemIndex) {\r\n\t\treturn this.container.getNthRenderedItemHeight(i - firstShownItemIndex)\r\n\t}\r\n\r\n\t/**\r\n\t * Measures item heights:\r\n\t *\r\n\t * * For the items that haven't been previously measured,\r\n\t * measures them for the first time.\r\n\t *\r\n\t * * For the items that have been previoulsy measured,\r\n\t * validate that their previously measured height\r\n\t * is still equal to their current height.\r\n\t * The unequalness may not necessarily be caused by\r\n\t * incorrect use of `virtual-scroller`: there are\r\n\t * also some valid use cases when such unequalness\r\n\t * could happen (see the comments in the code).\r\n\t *\r\n\t * @param {number} firstShownItemIndex\r\n\t * @param {number} lastShownItemIndex\r\n\t * @return {number[]} The indexes of the items that have not previously been measured and have been measured now.\r\n\t */\r\n\tmeasureItemHeights(firstShownItemIndex, lastShownItemIndex) {\r\n\t\tlog('~ Measure item heights ~')\r\n\t\t// If no items are rendered, don't measure anything.\r\n\t\tif (firstShownItemIndex === undefined) {\r\n\t\t\treturn\r\n\t\t}\r\n\t\t// Reset `this.measuredItemsHeight` if it's not a \"continuous\" measured items list:\r\n\t\t// if a group of items has been measured previously, and now it has rendered a completely\r\n\t\t// different group of items, and there's a non-measured \"gap\" between those two groups,\r\n\t\t// then reset `this.measuredItemsHeight` and \"first measured\"/\"last measured\" item indexes.\r\n\t\t// For example, this could happen when `.setItems()` prepends a lot of new items.\r\n\t\tif (this.firstMeasuredItemIndex !== undefined) {\r\n\t\t\tif (\r\n\t\t\t\tfirstShownItemIndex > this.lastMeasuredItemIndex + 1 ||\r\n\t\t\t\tlastShownItemIndex < this.firstMeasuredItemIndex - 1\r\n\t\t\t) {\r\n\t\t\t\t// Reset.\r\n\t\t\t\tlog('Non-measured items gap detected. Reset first and last measured item indexes.')\r\n\t\t\t\tthis.reset()\r\n\t\t\t}\r\n\t\t}\r\n\t\tconst nonPreviouslyMeasuredItemIndexes = []\r\n\t\tconst previousFirstMeasuredItemIndex = this.firstMeasuredItemIndex\r\n\t\tconst previousLastMeasuredItemIndex = this.lastMeasuredItemIndex\r\n\t\tlet firstMeasuredItemIndexHasBeenUpdated = false\r\n\t\tlet i = firstShownItemIndex\r\n\t\twhile (i <= lastShownItemIndex) {\r\n\t\t\t// Measure item heights that haven't been measured previously.\r\n\t\t\t// Don't re-measure item heights that have been measured previously.\r\n\t\t\t// The rationale is that developers are supposed to manually call\r\n\t\t\t// `.onItemHeightChange()` every time an item's height changes.\r\n\t\t\t// If developers don't neglect that rule, item heights won't\r\n\t\t\t// change unexpectedly.\r\n\t\t\tif (this._get(i) === undefined) {\r\n\t\t\t\tnonPreviouslyMeasuredItemIndexes.push(i)\r\n\t\t\t\tconst height = this._measureItemHeight(i, firstShownItemIndex)\r\n\t\t\t\tlog('Item index', i, 'height', height)\r\n\t\t\t\tthis._set(i, height)\r\n\t\t\t\t// Update average item height calculation variables\r\n\t\t\t\t// related to the previously measured items\r\n\t\t\t\t// that're above the items currently being shown.\r\n\t\t\t\t// It is known to be a \"continuous\" measured items list,\r\n\t\t\t\t// because the code at the start of this function checks that.\r\n\t\t\t\tif (previousFirstMeasuredItemIndex === undefined || i < previousFirstMeasuredItemIndex) {\r\n\t\t\t\t\tthis.measuredItemsHeight += height\r\n\t\t\t\t\t// Update first measured item index.\r\n\t\t\t\t\tif (!firstMeasuredItemIndexHasBeenUpdated) {\r\n\t\t\t\t\t\t// log('Set first measured item index', i)\r\n\t\t\t\t\t\tthis.firstMeasuredItemIndex = i\r\n\t\t\t\t\t\tfirstMeasuredItemIndexHasBeenUpdated = true\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t\t// Update average item height calculation variables\r\n\t\t\t\t// related to the previously measured items\r\n\t\t\t\t// that're below the items currently being shown.\r\n\t\t\t\t// It is known to be a \"continuous\" measured items list,\r\n\t\t\t\t// because the code at the start of this function checks that.\r\n\t\t\t\tif (previousLastMeasuredItemIndex === undefined || i > previousLastMeasuredItemIndex) {\r\n\t\t\t\t\t// If `previousLastMeasuredItemIndex` is `undefined`\r\n\t\t\t\t\t// then `previousFirstMeasuredItemIndex` is also `undefined`\r\n\t\t\t\t\t// which means that the item's `height` has already been added\r\n\t\t\t\t\t// to `this.measuredItemsHeight` in the code above,\r\n\t\t\t\t\t// so this condition guards against counting the item's `height`\r\n\t\t\t\t\t// twice in `this.measuredItemsHeight`.\r\n\t\t\t\t\tif (previousLastMeasuredItemIndex !== undefined) {\r\n\t\t\t\t\t\t// Add newly shown item height.\r\n\t\t\t\t\t\tthis.measuredItemsHeight += height\r\n\t\t\t\t\t}\r\n\t\t\t\t\t// Update last measured item index.\r\n\t\t\t\t\tthis.lastMeasuredItemIndex = i\r\n\t\t\t\t}\r\n\t\t\t} else {\r\n\t\t\t\t// Validate that the item's height didn't change since it was last measured.\r\n\t\t\t\t// If it did, then display a warning and update the item's height\r\n\t\t\t\t// as an attempt to fix things.\r\n\t\t\t\t// If an item's height changes unexpectedly then it means that there'll\r\n\t\t\t\t// likely be \"content jumping\".\r\n\t\t\t\tconst previousHeight = this._get(i)\r\n\t\t\t\tconst height = this._measureItemHeight(i, firstShownItemIndex)\r\n\t\t\t\tif (previousHeight !== height) {\r\n\t\t\t\t\twarn('Item index', i, 'height changed unexpectedly: it was', previousHeight, 'before, but now it is', height, '. An item\\'s height is allowed to change only in two cases: when the item\\'s \"state\" changes and the developer calls `onItemStateChange(i, newState)`, or when the item\\'s height changes for some other reason and the developer calls `onItemHeightChange(i)`. Perhaps you forgot to persist the item\\'s \"state\" by calling `onItemStateChange(i, newState)` when it changed, and that \"state\" got lost when the item element was unmounted, which resulted in a different height when the item was shown again having its \"state\" reset.')\r\n\t\t\t\t\t// Update the item's height as an attempt to fix things.\r\n\t\t\t\t\tthis._set(i, height)\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\ti++\r\n\t\t}\r\n\t\t// // Update average item height.\r\n\t\t// this.updateAverageItemHeight()\r\n\t\treturn nonPreviouslyMeasuredItemIndexes\r\n\t}\r\n\r\n\t/**\r\n\t * Re-measures item height.\r\n\t * @param {number} i — Item index.\r\n\t * @param {number} firstShownItemIndex\r\n\t */\r\n\tremeasureItemHeight(i, firstShownItemIndex) {\r\n\t\tconst previousHeight = this._get(i)\r\n\t\tconst height = this._measureItemHeight(i, firstShownItemIndex)\r\n\t\t// // Because this function is called from `.onItemHeightChange()`,\r\n\t\t// // there're no guarantees in which circumstances a developer calls it,\r\n\t\t// // and for which item indexes.\r\n\t\t// // Therefore, to guard against cases of incorrect usage,\r\n\t\t// // this function won't crash anything if the item isn't rendered\r\n\t\t// // or hasn't been previously rendered.\r\n\t\t// if (height !== undefined) {\r\n\t\t// \treportError(`\"onItemHeightChange()\" has been called for item ${i}, but that item isn't rendered.`)\r\n\t\t// \treturn\r\n\t\t// }\r\n\t\t// if (previousHeight === undefined) {\r\n\t\t// \treportError(`\"onItemHeightChange()\" has been called for item ${i}, but that item hasn't been rendered before.`)\r\n\t\t// \treturn\r\n\t\t// }\r\n\t\tthis._set(i, height)\r\n\t\tthis.measuredItemsHeight += height - previousHeight\r\n\t\treturn height\r\n\t}\r\n\r\n\t// /**\r\n\t// * \"Average\" item height is stored as an instance variable.\r\n\t// * For example, for caching, so that it isn't calculated every time it's requested.\r\n\t// * But that would be negligible performance gain, not really worth the extra code.\r\n\t// * Another thing it's stored for as an instance variable is\r\n\t// * keeping \"previous\" \"average\" item height, because it can be more precise\r\n\t// * than the newly calculated \"average\" item height, provided it had\r\n\t// * more \"samples\" (measured items). The newly calculated average item height\r\n\t// * could get less samples in a scenario when the scroll somehow jumps\r\n\t// * from one position to some other distant position: in that case previous\r\n\t// * \"total measured items height\" is discarded and the new one is initialized.\r\n\t// * Could such situation happen in real life? I guess, it's unlikely.\r\n\t// * So I'm commenting out this code, but still keeping it just in case.\r\n\t// */\r\n\t// updateAverageItemHeight() {\r\n\t// \tthis.averageItemHeightSamplesCount = this.lastMeasuredItemIndex - this.firstMeasuredItemIndex + 1\r\n\t// \tthis.averageItemHeight = this.measuredItemsHeight / this.averageItemHeightSamplesCount\r\n\t// }\r\n\t//\r\n\t// /**\r\n\t// * Public API: is called by `VirtualScroller`.\r\n\t// * @return {number}\r\n\t// */\r\n\t// getAverage() {\r\n\t// \t// Previously measured average item height might still be\r\n\t// \t// more precise if it contains more measured items (\"samples\").\r\n\t// \tif (this.previousAverageItemHeight) {\r\n\t// \t\tif (this.previousAverageItemHeightSamplesCount > this.averageItemHeightSamplesCount) {\r\n\t// \t\t\treturn this.previousAverageItemHeight\r\n\t// \t\t}\r\n\t// \t}\r\n\t// \treturn this.averageItemHeight || 0\r\n\t// }\r\n\r\n\t/**\r\n\t * Public API: is called by `VirtualScroller`.\r\n\t * @return {number}\r\n\t */\r\n\tgetAverage() {\r\n\t\tif (this.lastMeasuredItemIndex === undefined) {\r\n\t\t\treturn 0\r\n\t\t}\r\n\t\treturn this.measuredItemsHeight / (this.lastMeasuredItemIndex - this.firstMeasuredItemIndex + 1)\r\n\t}\r\n\r\n\tonPrepend(count) {\r\n\t\tif (this.firstMeasuredItemIndex !== undefined) {\r\n\t\t\tthis.firstMeasuredItemIndex += count\r\n\t\t\tthis.lastMeasuredItemIndex += count\r\n\t\t}\r\n\t}\r\n}"],"mappings":"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"}
|
package/commonjs/Layout.js
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof";
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
4
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
8
|
exports["default"] = exports.LAYOUT_REASON = void 0;
|
|
9
9
|
|
|
10
|
-
var _debug = _interopRequireWildcard(require("./utility/debug"));
|
|
10
|
+
var _debug = _interopRequireWildcard(require("./utility/debug.js"));
|
|
11
11
|
|
|
12
12
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
13
13
|
|
|
14
14
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
15
15
|
|
|
16
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
|
16
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
17
17
|
|
|
18
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
18
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
19
19
|
|
|
20
20
|
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; }
|
|
21
21
|
|
|
@@ -23,7 +23,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
|
|
|
23
23
|
|
|
24
24
|
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); } }
|
|
25
25
|
|
|
26
|
-
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
|
26
|
+
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
27
27
|
|
|
28
28
|
var Layout = /*#__PURE__*/function () {
|
|
29
29
|
function Layout(_ref) {
|
|
@@ -149,7 +149,8 @@ var Layout = /*#__PURE__*/function () {
|
|
|
149
149
|
appendedItemsCount = _ref5.appendedItemsCount;
|
|
150
150
|
var itemsCount = _ref6.itemsCount,
|
|
151
151
|
columnsCount = _ref6.columnsCount,
|
|
152
|
-
shouldRestoreScrollPosition = _ref6.shouldRestoreScrollPosition
|
|
152
|
+
shouldRestoreScrollPosition = _ref6.shouldRestoreScrollPosition,
|
|
153
|
+
onResetGridLayout = _ref6.onResetGridLayout;
|
|
153
154
|
// const layoutUpdate = {}
|
|
154
155
|
// If the layout stays the same, then simply increase
|
|
155
156
|
// the top and bottom margins proportionally to the amount
|
|
@@ -222,8 +223,9 @@ var Layout = /*#__PURE__*/function () {
|
|
|
222
223
|
// row heights, but I don't want to write code for such an extremely rare
|
|
223
224
|
// use case. Instead, use the `getColumnsCount()` parameter function when
|
|
224
225
|
// fetching previous items.
|
|
226
|
+
onResetGridLayout();
|
|
225
227
|
(0, _debug.warn)('~ Prepended items count', prependedItemsCount, 'is not divisible by Columns Count', columnsCount, '~');
|
|
226
|
-
(0, _debug.warn)('
|
|
228
|
+
(0, _debug.warn)('Layout reset required');
|
|
227
229
|
var shownItemsCountBeforeItemsUpdate = lastShownItemIndex - firstShownItemIndex + 1;
|
|
228
230
|
firstShownItemIndex = 0;
|
|
229
231
|
beforeItemsHeight = 0;
|
|
@@ -256,20 +258,20 @@ var Layout = /*#__PURE__*/function () {
|
|
|
256
258
|
// The reason is that only this way subsequent `setItems()` calls
|
|
257
259
|
// will be truly "stateless" when a chain of `setItems()` calls
|
|
258
260
|
// could be replaced with just the last one in a scenario when
|
|
259
|
-
// `
|
|
261
|
+
// `updateState()` calls are "asynchronous" (delayed execution).
|
|
260
262
|
//
|
|
261
263
|
// So, for example, the user calls `setItems()` with one set of items.
|
|
262
|
-
// A `
|
|
264
|
+
// A `updateState()` call has been dispatched but the `state` hasn't been updated yet.
|
|
263
265
|
// Then the user calls `setItems()` with another set of items.
|
|
264
266
|
// If this function only returned a minimal set of properties that actually change,
|
|
265
267
|
// the other layout properties of the second `setItems()` call wouldn't overwrite the ones
|
|
266
268
|
// scheduled for update during the first `setItems()` call, resulting in an inconsistent `state`.
|
|
267
269
|
//
|
|
268
|
-
// For example, the first `setItems()` call does a `
|
|
270
|
+
// For example, the first `setItems()` call does a `updateState()` call where it updates
|
|
269
271
|
// `afterItemsHeight`, and then the second `setItems()` call only updates `beforeItemsHeight`
|
|
270
272
|
// and `firstShownItemIndex` and `lastShownItemIndex`. If the second `setItems()` call was to
|
|
271
273
|
// overwrite any effects of the pending-but-not-yet-applied first `setItems()` call, it would
|
|
272
|
-
// have to call `
|
|
274
|
+
// have to call `updateState()` with an `afterItemsHeight` property too, even though it hasn't change.
|
|
273
275
|
// That would be just to revert the change to `afterItemsHeight` state property already scheduled
|
|
274
276
|
// by the first `setItems()` call.
|
|
275
277
|
//
|
|
@@ -758,8 +760,8 @@ var LAYOUT_REASON = {
|
|
|
758
760
|
SCROLL: 'scroll',
|
|
759
761
|
STOPPED_SCROLLING: 'stopped scrolling',
|
|
760
762
|
MANUAL: 'manual',
|
|
761
|
-
|
|
762
|
-
|
|
763
|
+
STARTED: 'started',
|
|
764
|
+
NON_MEASURED_ITEMS_HAVE_BEEN_MEASURED: 'non-measured item heights have been measured',
|
|
763
765
|
VIEWPORT_WIDTH_CHANGED: 'viewport width changed',
|
|
764
766
|
VIEWPORT_HEIGHT_CHANGED: 'viewport height changed',
|
|
765
767
|
VIEWPORT_SIZE_UNCHANGED: 'viewport size unchanged',
|