virtual-scroller 1.7.6 → 1.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (153) hide show
  1. package/CHANGELOG.md +29 -1
  2. package/README.md +139 -33
  3. package/babel.config.js +25 -0
  4. package/babel.js +5 -0
  5. package/bundle/index-bypass.html +1 -1
  6. package/bundle/index-dom.html +1 -1
  7. package/bundle/index-grid.html +1 -2
  8. package/bundle/index-scrollableContainer.html +1 -1
  9. package/bundle/index-tbody-scrollableContainer.html +2 -0
  10. package/bundle/index-tbody.html +2 -0
  11. package/bundle/virtual-scroller-dom.js +1 -1
  12. package/bundle/virtual-scroller-dom.js.map +1 -1
  13. package/bundle/virtual-scroller-react.js +1 -1
  14. package/bundle/virtual-scroller-react.js.map +1 -1
  15. package/bundle/virtual-scroller.js +1 -1
  16. package/bundle/virtual-scroller.js.map +1 -1
  17. package/commonjs/BeforeResize.js +319 -0
  18. package/commonjs/BeforeResize.js.map +1 -0
  19. package/commonjs/DOM/Engine.js +46 -0
  20. package/commonjs/DOM/Engine.js.map +1 -0
  21. package/commonjs/DOM/ItemsContainer.js +78 -0
  22. package/commonjs/DOM/ItemsContainer.js.map +1 -0
  23. package/commonjs/DOM/{WaitForStylesToLoad.js → ListTopOffsetWatcher.js} +56 -35
  24. package/commonjs/DOM/ListTopOffsetWatcher.js.map +1 -0
  25. package/commonjs/DOM/ScrollableContainer.js +56 -81
  26. package/commonjs/DOM/ScrollableContainer.js.map +1 -1
  27. package/commonjs/DOM/VirtualScroller.js +20 -15
  28. package/commonjs/DOM/VirtualScroller.js.map +1 -1
  29. package/commonjs/DOM/tbody.js +2 -2
  30. package/commonjs/ItemHeights.js +13 -20
  31. package/commonjs/ItemHeights.js.map +1 -1
  32. package/commonjs/Layout.js +588 -215
  33. package/commonjs/Layout.js.map +1 -1
  34. package/commonjs/Layout.test.js +191 -0
  35. package/commonjs/Layout.test.js.map +1 -0
  36. package/commonjs/ListHeightChangeWatcher.js +126 -0
  37. package/commonjs/ListHeightChangeWatcher.js.map +1 -0
  38. package/commonjs/Resize.js +22 -21
  39. package/commonjs/Resize.js.map +1 -1
  40. package/commonjs/Scroll.js +148 -88
  41. package/commonjs/Scroll.js.map +1 -1
  42. package/commonjs/VirtualScroller.js +1269 -390
  43. package/commonjs/VirtualScroller.js.map +1 -1
  44. package/commonjs/getItemCoordinates.js.map +1 -1
  45. package/commonjs/getItemsDiff.js.map +1 -1
  46. package/commonjs/getVerticalSpacing.js +8 -8
  47. package/commonjs/getVerticalSpacing.js.map +1 -1
  48. package/commonjs/react/VirtualScroller.js +31 -37
  49. package/commonjs/react/VirtualScroller.js.map +1 -1
  50. package/commonjs/utility/debounce.js +26 -4
  51. package/commonjs/utility/debounce.js.map +1 -1
  52. package/commonjs/utility/debug.js +51 -12
  53. package/commonjs/utility/debug.js.map +1 -1
  54. package/commonjs/utility/getStateSnapshot.js +50 -0
  55. package/commonjs/utility/getStateSnapshot.js.map +1 -0
  56. package/commonjs/utility/px.js +1 -1
  57. package/commonjs/utility/px.js.map +1 -1
  58. package/commonjs/utility/px.test.js +14 -0
  59. package/commonjs/utility/px.test.js.map +1 -0
  60. package/commonjs/utility/shallowEqual.js +1 -1
  61. package/commonjs/utility/shallowEqual.js.map +1 -1
  62. package/commonjs/utility/throttle.js.map +1 -1
  63. package/dom/index.d.ts +23 -0
  64. package/index.d.ts +84 -0
  65. package/modules/BeforeResize.js +310 -0
  66. package/modules/BeforeResize.js.map +1 -0
  67. package/modules/DOM/Engine.js +27 -0
  68. package/modules/DOM/Engine.js.map +1 -0
  69. package/modules/DOM/ItemsContainer.js +71 -0
  70. package/modules/DOM/ItemsContainer.js.map +1 -0
  71. package/modules/DOM/{WaitForStylesToLoad.js → ListTopOffsetWatcher.js} +57 -35
  72. package/modules/DOM/ListTopOffsetWatcher.js.map +1 -0
  73. package/modules/DOM/ScrollableContainer.js +55 -80
  74. package/modules/DOM/ScrollableContainer.js.map +1 -1
  75. package/modules/DOM/VirtualScroller.js +15 -14
  76. package/modules/DOM/VirtualScroller.js.map +1 -1
  77. package/modules/ItemHeights.js +8 -19
  78. package/modules/ItemHeights.js.map +1 -1
  79. package/modules/Layout.js +582 -213
  80. package/modules/Layout.js.map +1 -1
  81. package/modules/Layout.test.js +185 -0
  82. package/modules/Layout.test.js.map +1 -0
  83. package/modules/ListHeightChangeWatcher.js +119 -0
  84. package/modules/ListHeightChangeWatcher.js.map +1 -0
  85. package/modules/Resize.js +21 -20
  86. package/modules/Resize.js.map +1 -1
  87. package/modules/Scroll.js +148 -87
  88. package/modules/Scroll.js.map +1 -1
  89. package/modules/VirtualScroller.js +1263 -390
  90. package/modules/VirtualScroller.js.map +1 -1
  91. package/modules/getItemCoordinates.js.map +1 -1
  92. package/modules/getItemsDiff.js.map +1 -1
  93. package/modules/getVerticalSpacing.js +8 -8
  94. package/modules/getVerticalSpacing.js.map +1 -1
  95. package/modules/react/VirtualScroller.js +31 -37
  96. package/modules/react/VirtualScroller.js.map +1 -1
  97. package/modules/utility/debounce.js +26 -4
  98. package/modules/utility/debounce.js.map +1 -1
  99. package/modules/utility/debug.js +47 -10
  100. package/modules/utility/debug.js.map +1 -1
  101. package/modules/utility/getStateSnapshot.js +43 -0
  102. package/modules/utility/getStateSnapshot.js.map +1 -0
  103. package/modules/utility/px.js +1 -1
  104. package/modules/utility/px.js.map +1 -1
  105. package/modules/utility/px.test.js +9 -0
  106. package/modules/utility/px.test.js.map +1 -0
  107. package/modules/utility/shallowEqual.js +1 -1
  108. package/modules/utility/shallowEqual.js.map +1 -1
  109. package/modules/utility/throttle.js.map +1 -1
  110. package/package.json +24 -22
  111. package/react/index.d.ts +27 -0
  112. package/source/BeforeResize.js +317 -0
  113. package/source/DOM/Engine.js +32 -0
  114. package/source/DOM/ItemsContainer.js +48 -0
  115. package/source/DOM/{WaitForStylesToLoad.js → ListTopOffsetWatcher.js} +48 -22
  116. package/source/DOM/ScrollableContainer.js +39 -56
  117. package/source/DOM/VirtualScroller.js +6 -7
  118. package/source/ItemHeights.js +10 -15
  119. package/source/Layout.js +626 -252
  120. package/source/Layout.test.js +171 -0
  121. package/source/ListHeightChangeWatcher.js +94 -0
  122. package/source/Resize.js +23 -15
  123. package/source/Scroll.js +139 -78
  124. package/source/VirtualScroller.js +1240 -286
  125. package/source/getVerticalSpacing.js +7 -7
  126. package/source/react/VirtualScroller.js +2 -18
  127. package/source/utility/debounce.js +20 -3
  128. package/source/utility/debug.js +34 -3
  129. package/source/utility/getStateSnapshot.js +36 -0
  130. package/source/utility/px.js +1 -1
  131. package/source/utility/px.test.js +9 -0
  132. package/website/index-bypass.html +195 -0
  133. package/website/index-grid.html +0 -1
  134. package/website/index-scrollableContainer.html +208 -0
  135. package/website/index-tbody-scrollableContainer.html +68 -0
  136. package/website/index-tbody.html +55 -0
  137. package/commonjs/DOM/RenderingEngine.js +0 -33
  138. package/commonjs/DOM/RenderingEngine.js.map +0 -1
  139. package/commonjs/DOM/Screen.js +0 -87
  140. package/commonjs/DOM/Screen.js.map +0 -1
  141. package/commonjs/DOM/WaitForStylesToLoad.js.map +0 -1
  142. package/commonjs/RestoreScroll.js +0 -118
  143. package/commonjs/RestoreScroll.js.map +0 -1
  144. package/modules/DOM/RenderingEngine.js +0 -19
  145. package/modules/DOM/RenderingEngine.js.map +0 -1
  146. package/modules/DOM/Screen.js +0 -80
  147. package/modules/DOM/Screen.js.map +0 -1
  148. package/modules/DOM/WaitForStylesToLoad.js.map +0 -1
  149. package/modules/RestoreScroll.js +0 -111
  150. package/modules/RestoreScroll.js.map +0 -1
  151. package/source/DOM/RenderingEngine.js +0 -22
  152. package/source/DOM/Screen.js +0 -51
  153. package/source/RestoreScroll.js +0 -86
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../source/RestoreScroll.js"],"names":["RestoreScroll","screen","getContainerElement","scrollBy","previousItems","newItems","prependedItemsCount","length","container","firstItemTopOffset","getChildElementTopOffset","restoreScrollAfterRenderValues","index","visibleAreaTop","undefined","newVisibleAreaTop"],"mappings":";;;;;;IAAqBA,a;;;AACpB,+BAIG;AAAA,QAHFC,MAGE,QAHFA,MAGE;AAAA,QAFFC,mBAEE,QAFFA,mBAEE;AAAA,QADFC,QACE,QADFA,QACE;;AAAA;;AACF,SAAKF,MAAL,GAAcA,MAAd;AACA,SAAKC,mBAAL,GAA2BA,mBAA3B;AACA,SAAKC,QAAL,GAAgBA,QAAhB;AACA;AAED;;;;;;;;;;yCAUG;AAAA,UAHFC,aAGE,SAHFA,aAGE;AAAA,UAFFC,QAEE,SAFFA,QAEE;AAAA,UADFC,mBACE,SADFA,mBACE;;AACF;AACA;AACA,UAAIF,aAAa,CAACG,MAAd,KAAyB,CAA7B,EAAgC;AAC/B;AACA,OALC,CAMF;;;AACA,UAAID,mBAAmB,KAAK,CAA5B,EAA+B;AAC9B;AACA;;AACD,UAAME,SAAS,GAAG,KAAKN,mBAAL,EAAlB;AACA,UAAMO,kBAAkB,GAAG,KAAKR,MAAL,CAAYS,wBAAZ,CAAqCF,SAArC,EAAgD,CAAhD,CAA3B,CAXE,CAYF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,UAAI,KAAKG,8BAAL,IACH,KAAKA,8BAAL,CAAoCP,aAApC,KAAsDA,aADnD,IAEH,KAAKO,8BAAL,CAAoCN,QAApC,KAAiDA,QAFlD,EAE4D;AAC3D;AACA;;AACD,WAAKM,8BAAL,GAAsC;AACrCP,QAAAA,aAAa,EAAbA,aADqC;AAErCC,QAAAA,QAAQ,EAARA,QAFqC;AAGrCO,QAAAA,KAAK,EAAEN,mBAH8B;AAIrCO,QAAAA,cAAc,EAAEJ;AAJqB,OAAtC;AAMA;;;yCAEoB;AACpB,aAAO,KAAKE,8BAAL,CAAoCC,KAA3C;AACA;;;qDAEgC;AAChC,aAAO,KAAKD,8BAAL,KAAwCG,SAA/C;AACA;;;0CAEqB;AAAA,kCACa,KAAKH,8BADlB;AAAA,UACbC,KADa,yBACbA,KADa;AAAA,UACNC,cADM,yBACNA,cADM;AAErB,WAAKF,8BAAL,GAAsCG,SAAtC,CAFqB,CAGrB;;AACA,UAAMC,iBAAiB,GAAG,KAAKd,MAAL,CAAYS,wBAAZ,CAAqC,KAAKR,mBAAL,EAArC,EAAiEU,KAAjE,CAA1B;AACA,aAAOG,iBAAiB,GAAGF,cAA3B;AACA;;;;;;SApFmBb,a","sourcesContent":["export default class RestoreScroll {\r\n\tconstructor({\r\n\t\tscreen,\r\n\t\tgetContainerElement,\r\n\t\tscrollBy\r\n\t}) {\r\n\t\tthis.screen = screen\r\n\t\tthis.getContainerElement = getContainerElement\r\n\t\tthis.scrollBy = scrollBy\r\n\t}\r\n\r\n\t/**\r\n\t * `<ReactVirtualScroller/>` calls this method.\r\n\t * @param {any[]} previousItems\r\n\t * @param {any[]} newItems\r\n\t * @param {number} prependedItemsCount\r\n\t */\r\n\tcaptureScroll({\r\n\t\tpreviousItems,\r\n\t\tnewItems,\r\n\t\tprependedItemsCount\r\n\t}) {\r\n\t\t// If there were no items in the list\r\n\t\t// then there's no point in restoring scroll position.\r\n\t\tif (previousItems.length === 0) {\r\n\t\t\treturn\r\n\t\t}\r\n\t\t// If no items were prepended then no need to restore scroll position.\r\n\t\tif (prependedItemsCount === 0) {\r\n\t\t\treturn\r\n\t\t}\r\n\t\tconst container = this.getContainerElement()\r\n\t\tconst firstItemTopOffset = this.screen.getChildElementTopOffset(container, 0)\r\n\t\t// The first item is supposed to be shown when the user clicks\r\n\t\t// \"Show previous items\" button. If it isn't shown though,\r\n\t\t// could still calculate the first item's top position using\r\n\t\t// the values from `itemHeights` and `verticalSpacing`.\r\n\t\t// But that would be a weird non-realistic scenario.\r\n\t\t// if (firstShownItemIndex > 0) {\r\n\t\t// \tlet i = firstShownItemIndex - 1\r\n\t\t// \twhile (i >= 0) {\r\n\t\t// \t\tfirstItemTopOffset += itemHeights[i] + verticalSpacing\r\n\t\t// \t\ti--\r\n\t\t// \t}\r\n\t\t// }\r\n\t\t// If the scroll position has already been captured for restoration,\r\n\t\t// then don't capture it the second time.\r\n\t\t// Capturing scroll position could happen when using `<ReactVirtualScroller/>`\r\n\t\t// because it calls `.captureScroll()` inside `ReactVirtualScroller.render()`\r\n\t\t// which is followed by `<VirtualScroller/>`'s `.componentDidUpdate()`\r\n\t\t// that also calls `.captureScroll()` with the same arguments,\r\n\t\t// so that second call to `.captureScroll()` is ignored.\r\n\t\t// Calling `.captureScroll()` inside `ReactVirtualScroller.render()`\r\n\t\t// is done to prevent scroll Y position from jumping\r\n\t\t// when showing the first page of the \"Previous items\".\r\n\t\t// See the long section of comments in `ReactVirtualScroller.render()`\r\n\t\t// method for more info on why is `.captureScroll()` called there.\r\n\t\tif (this.restoreScrollAfterRenderValues &&\r\n\t\t\tthis.restoreScrollAfterRenderValues.previousItems === previousItems &&\r\n\t\t\tthis.restoreScrollAfterRenderValues.newItems === newItems) {\r\n\t\t\treturn\r\n\t\t}\r\n\t\tthis.restoreScrollAfterRenderValues = {\r\n\t\t\tpreviousItems,\r\n\t\t\tnewItems,\r\n\t\t\tindex: prependedItemsCount,\r\n\t\t\tvisibleAreaTop: firstItemTopOffset\r\n\t\t}\r\n\t}\r\n\r\n\tgetAnchorItemIndex() {\r\n\t\treturn this.restoreScrollAfterRenderValues.index\r\n\t}\r\n\r\n\tshouldRestoreScrollAfterRender() {\r\n\t\treturn this.restoreScrollAfterRenderValues !== undefined\r\n\t}\r\n\r\n\tgetScrollDifference() {\r\n\t\tconst { index, visibleAreaTop } = this.restoreScrollAfterRenderValues\r\n\t\tthis.restoreScrollAfterRenderValues = undefined\r\n\t\t// `firstShownItemIndex` is supposed to be `0` here.\r\n\t\tconst newVisibleAreaTop = this.screen.getChildElementTopOffset(this.getContainerElement(), index)\r\n\t\treturn newVisibleAreaTop - visibleAreaTop\r\n\t}\r\n}"],"file":"RestoreScroll.js"}
@@ -1,22 +0,0 @@
1
- import Screen from './Screen'
2
-
3
- import ScrollableContainer, {
4
- ScrollableWindowContainer
5
- } from './ScrollableContainer'
6
-
7
- export default {
8
- name: 'DOM',
9
- createScreen() {
10
- return new Screen()
11
- },
12
- // Create `scrollableContainer`.
13
- // On client side, `scrollableContainer` is always created.
14
- // On server side, `scrollableContainer` is not created (and not used).
15
- createScrollableContainer(scrollableContainer) {
16
- if (scrollableContainer) {
17
- return new ScrollableContainer(scrollableContainer)
18
- } else if (typeof window !== 'undefined') {
19
- return new ScrollableWindowContainer()
20
- }
21
- }
22
- }
@@ -1,51 +0,0 @@
1
- export default class Screen {
2
- /**
3
- * Returns a child element's "top offset", relative to the `parentElement`'s top edge.
4
- * @param {Element} parentElement
5
- * @param {number} childElementIndex
6
- * @return {number}
7
- */
8
- getChildElementTopOffset(parentElement, childElementIndex) {
9
- return parentElement.childNodes[childElementIndex].getBoundingClientRect().top
10
- }
11
-
12
- /**
13
- * Returns a child element's height.
14
- * @param {Element} parentElement
15
- * @param {number} childElementIndex
16
- * @return {number}
17
- */
18
- getChildElementHeight(parentElement, childElementIndex) {
19
- return this.getElementHeight(parentElement.childNodes[childElementIndex])
20
- }
21
-
22
- /**
23
- * Returns the count of child elements of an element.
24
- * @param {Element} parentElement
25
- * @return {number}
26
- */
27
- getChildElementsCount(parentElement) {
28
- return parentElement.childNodes.length
29
- }
30
-
31
- /**
32
- * Removes all child elements of an element.
33
- * @param {Element} element
34
- */
35
- clearElement(element) {
36
- while (element.firstChild) {
37
- element.removeChild(element.firstChild)
38
- }
39
- }
40
-
41
- /**
42
- * Returns an element's height.
43
- * @param {Element} element
44
- * @return {number}
45
- */
46
- getElementHeight(element) {
47
- // `offsetHeight` is not precise enough (doesn't return fractional pixels).
48
- // return element.offsetHeight
49
- return element.getBoundingClientRect().height
50
- }
51
- }
@@ -1,86 +0,0 @@
1
- export default class RestoreScroll {
2
- constructor({
3
- screen,
4
- getContainerElement,
5
- scrollBy
6
- }) {
7
- this.screen = screen
8
- this.getContainerElement = getContainerElement
9
- this.scrollBy = scrollBy
10
- }
11
-
12
- /**
13
- * `<ReactVirtualScroller/>` calls this method.
14
- * @param {any[]} previousItems
15
- * @param {any[]} newItems
16
- * @param {number} prependedItemsCount
17
- */
18
- captureScroll({
19
- previousItems,
20
- newItems,
21
- prependedItemsCount
22
- }) {
23
- // If there were no items in the list
24
- // then there's no point in restoring scroll position.
25
- if (previousItems.length === 0) {
26
- return
27
- }
28
- // If no items were prepended then no need to restore scroll position.
29
- if (prependedItemsCount === 0) {
30
- return
31
- }
32
- const container = this.getContainerElement()
33
- const firstItemTopOffset = this.screen.getChildElementTopOffset(container, 0)
34
- // The first item is supposed to be shown when the user clicks
35
- // "Show previous items" button. If it isn't shown though,
36
- // could still calculate the first item's top position using
37
- // the values from `itemHeights` and `verticalSpacing`.
38
- // But that would be a weird non-realistic scenario.
39
- // if (firstShownItemIndex > 0) {
40
- // let i = firstShownItemIndex - 1
41
- // while (i >= 0) {
42
- // firstItemTopOffset += itemHeights[i] + verticalSpacing
43
- // i--
44
- // }
45
- // }
46
- // If the scroll position has already been captured for restoration,
47
- // then don't capture it the second time.
48
- // Capturing scroll position could happen when using `<ReactVirtualScroller/>`
49
- // because it calls `.captureScroll()` inside `ReactVirtualScroller.render()`
50
- // which is followed by `<VirtualScroller/>`'s `.componentDidUpdate()`
51
- // that also calls `.captureScroll()` with the same arguments,
52
- // so that second call to `.captureScroll()` is ignored.
53
- // Calling `.captureScroll()` inside `ReactVirtualScroller.render()`
54
- // is done to prevent scroll Y position from jumping
55
- // when showing the first page of the "Previous items".
56
- // See the long section of comments in `ReactVirtualScroller.render()`
57
- // method for more info on why is `.captureScroll()` called there.
58
- if (this.restoreScrollAfterRenderValues &&
59
- this.restoreScrollAfterRenderValues.previousItems === previousItems &&
60
- this.restoreScrollAfterRenderValues.newItems === newItems) {
61
- return
62
- }
63
- this.restoreScrollAfterRenderValues = {
64
- previousItems,
65
- newItems,
66
- index: prependedItemsCount,
67
- visibleAreaTop: firstItemTopOffset
68
- }
69
- }
70
-
71
- getAnchorItemIndex() {
72
- return this.restoreScrollAfterRenderValues.index
73
- }
74
-
75
- shouldRestoreScrollAfterRender() {
76
- return this.restoreScrollAfterRenderValues !== undefined
77
- }
78
-
79
- getScrollDifference() {
80
- const { index, visibleAreaTop } = this.restoreScrollAfterRenderValues
81
- this.restoreScrollAfterRenderValues = undefined
82
- // `firstShownItemIndex` is supposed to be `0` here.
83
- const newVisibleAreaTop = this.screen.getChildElementTopOffset(this.getContainerElement(), index)
84
- return newVisibleAreaTop - visibleAreaTop
85
- }
86
- }