virtual-scroller 1.7.9 → 1.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (283) hide show
  1. package/.gitlab-ci.yml +1 -1
  2. package/CHANGELOG.md +71 -1
  3. package/README.md +434 -151
  4. package/bundle/index-bypass.html +1 -1
  5. package/bundle/index-dom.html +1 -1
  6. package/bundle/index-grid.html +1 -2
  7. package/bundle/index-scrollableContainer.html +1 -1
  8. package/bundle/index-tbody-scrollableContainer.html +2 -0
  9. package/bundle/index-tbody.html +2 -0
  10. package/bundle/virtual-scroller-dom.js +1 -1
  11. package/bundle/virtual-scroller-dom.js.map +1 -1
  12. package/bundle/virtual-scroller-react.js +1 -1
  13. package/bundle/virtual-scroller-react.js.map +1 -1
  14. package/bundle/virtual-scroller.js +1 -1
  15. package/bundle/virtual-scroller.js.map +1 -1
  16. package/commonjs/BeforeResize.js +315 -0
  17. package/commonjs/BeforeResize.js.map +1 -0
  18. package/commonjs/DOM/Engine.js +46 -0
  19. package/commonjs/DOM/Engine.js.map +1 -0
  20. package/commonjs/DOM/ItemsContainer.js +78 -0
  21. package/commonjs/DOM/ItemsContainer.js.map +1 -0
  22. package/commonjs/DOM/{WaitForStylesToLoad.js → ListTopOffsetWatcher.js} +71 -44
  23. package/commonjs/DOM/ListTopOffsetWatcher.js.map +1 -0
  24. package/commonjs/DOM/ScrollableContainer.js +69 -101
  25. package/commonjs/DOM/ScrollableContainer.js.map +1 -1
  26. package/commonjs/DOM/VirtualScroller.js +37 -29
  27. package/commonjs/DOM/VirtualScroller.js.map +1 -1
  28. package/commonjs/DOM/tbody.js +17 -11
  29. package/commonjs/DOM/tbody.js.map +1 -1
  30. package/commonjs/ItemHeights.js +33 -34
  31. package/commonjs/ItemHeights.js.map +1 -1
  32. package/commonjs/Layout.js +591 -216
  33. package/commonjs/Layout.js.map +1 -1
  34. package/commonjs/Layout.test.js +196 -0
  35. package/commonjs/Layout.test.js.map +1 -0
  36. package/commonjs/ListHeightMeasurement.js +124 -0
  37. package/commonjs/ListHeightMeasurement.js.map +1 -0
  38. package/commonjs/Resize.js +50 -39
  39. package/commonjs/Resize.js.map +1 -1
  40. package/commonjs/Scroll.js +139 -95
  41. package/commonjs/Scroll.js.map +1 -1
  42. package/commonjs/VirtualScroller.columns.js +43 -0
  43. package/commonjs/VirtualScroller.columns.js.map +1 -0
  44. package/commonjs/VirtualScroller.constructor.js +408 -0
  45. package/commonjs/VirtualScroller.constructor.js.map +1 -0
  46. package/commonjs/VirtualScroller.items.js +305 -0
  47. package/commonjs/VirtualScroller.items.js.map +1 -0
  48. package/commonjs/VirtualScroller.js +160 -1021
  49. package/commonjs/VirtualScroller.js.map +1 -1
  50. package/commonjs/VirtualScroller.layout.js +562 -0
  51. package/commonjs/VirtualScroller.layout.js.map +1 -0
  52. package/commonjs/VirtualScroller.onRender.js +357 -0
  53. package/commonjs/VirtualScroller.onRender.js.map +1 -0
  54. package/commonjs/VirtualScroller.resize.js +186 -0
  55. package/commonjs/VirtualScroller.resize.js.map +1 -0
  56. package/commonjs/VirtualScroller.state.js +301 -0
  57. package/commonjs/VirtualScroller.state.js.map +1 -0
  58. package/commonjs/VirtualScroller.verticalSpacing.js +65 -0
  59. package/commonjs/VirtualScroller.verticalSpacing.js.map +1 -0
  60. package/commonjs/getItemCoordinates.js.map +1 -1
  61. package/commonjs/getItemsDiff.js.map +1 -1
  62. package/commonjs/getVerticalSpacing.js +8 -8
  63. package/commonjs/getVerticalSpacing.js.map +1 -1
  64. package/commonjs/package.json +5 -0
  65. package/commonjs/react/VirtualScroller.js +182 -628
  66. package/commonjs/react/VirtualScroller.js.map +1 -1
  67. package/commonjs/react/useClassName.js +26 -0
  68. package/commonjs/react/useClassName.js.map +1 -0
  69. package/commonjs/react/useHandleItemsChange.js +116 -0
  70. package/commonjs/react/useHandleItemsChange.js.map +1 -0
  71. package/commonjs/react/useInstanceMethods.js +37 -0
  72. package/commonjs/react/useInstanceMethods.js.map +1 -0
  73. package/commonjs/react/useItemKeys.js +60 -0
  74. package/commonjs/react/useItemKeys.js.map +1 -0
  75. package/commonjs/react/useOnItemHeightChange.js +32 -0
  76. package/commonjs/react/useOnItemHeightChange.js.map +1 -0
  77. package/commonjs/react/useOnItemStateChange.js +32 -0
  78. package/commonjs/react/useOnItemStateChange.js.map +1 -0
  79. package/commonjs/react/useState.js +140 -0
  80. package/commonjs/react/useState.js.map +1 -0
  81. package/commonjs/react/useStyle.js +29 -0
  82. package/commonjs/react/useStyle.js.map +1 -0
  83. package/commonjs/react/useVirtualScroller.js +62 -0
  84. package/commonjs/react/useVirtualScroller.js.map +1 -0
  85. package/commonjs/react/useVirtualScrollerStartStop.js +20 -0
  86. package/commonjs/react/useVirtualScrollerStartStop.js.map +1 -0
  87. package/commonjs/test/Engine.js +23 -0
  88. package/commonjs/test/Engine.js.map +1 -0
  89. package/commonjs/test/ItemsContainer.js +127 -0
  90. package/commonjs/test/ItemsContainer.js.map +1 -0
  91. package/commonjs/test/ScrollableContainer.js +130 -0
  92. package/commonjs/test/ScrollableContainer.js.map +1 -0
  93. package/commonjs/test/VirtualScroller.js +281 -0
  94. package/commonjs/test/VirtualScroller.js.map +1 -0
  95. package/commonjs/utility/debounce.js +28 -6
  96. package/commonjs/utility/debounce.js.map +1 -1
  97. package/commonjs/utility/debug.js +51 -12
  98. package/commonjs/utility/debug.js.map +1 -1
  99. package/commonjs/utility/getStateSnapshot.js +50 -0
  100. package/commonjs/utility/getStateSnapshot.js.map +1 -0
  101. package/commonjs/utility/px.js +1 -1
  102. package/commonjs/utility/px.js.map +1 -1
  103. package/commonjs/utility/px.test.js +14 -0
  104. package/commonjs/utility/px.test.js.map +1 -0
  105. package/commonjs/utility/shallowEqual.js +1 -1
  106. package/commonjs/utility/shallowEqual.js.map +1 -1
  107. package/commonjs/utility/throttle.js.map +1 -1
  108. package/dom/index.cjs +4 -0
  109. package/dom/index.cjs.js +9 -0
  110. package/dom/index.d.ts +25 -0
  111. package/dom/index.js +1 -1
  112. package/dom/package.json +10 -4
  113. package/index.cjs +4 -0
  114. package/index.cjs.js +9 -0
  115. package/index.d.ts +99 -0
  116. package/index.js +1 -1
  117. package/modules/BeforeResize.js +305 -0
  118. package/modules/BeforeResize.js.map +1 -0
  119. package/modules/DOM/Engine.js +27 -0
  120. package/modules/DOM/Engine.js.map +1 -0
  121. package/modules/DOM/ItemsContainer.js +71 -0
  122. package/modules/DOM/ItemsContainer.js.map +1 -0
  123. package/modules/DOM/{WaitForStylesToLoad.js → ListTopOffsetWatcher.js} +72 -44
  124. package/modules/DOM/ListTopOffsetWatcher.js.map +1 -0
  125. package/modules/DOM/ScrollableContainer.js +68 -100
  126. package/modules/DOM/ScrollableContainer.js.map +1 -1
  127. package/modules/DOM/VirtualScroller.js +32 -28
  128. package/modules/DOM/VirtualScroller.js.map +1 -1
  129. package/modules/DOM/tbody.js +11 -9
  130. package/modules/DOM/tbody.js.map +1 -1
  131. package/modules/ItemHeights.js +28 -33
  132. package/modules/ItemHeights.js.map +1 -1
  133. package/modules/Layout.js +585 -214
  134. package/modules/Layout.js.map +1 -1
  135. package/modules/Layout.test.js +190 -0
  136. package/modules/Layout.test.js.map +1 -0
  137. package/modules/ListHeightMeasurement.js +117 -0
  138. package/modules/ListHeightMeasurement.js.map +1 -0
  139. package/modules/Resize.js +50 -39
  140. package/modules/Resize.js.map +1 -1
  141. package/modules/Scroll.js +139 -94
  142. package/modules/Scroll.js.map +1 -1
  143. package/modules/VirtualScroller.columns.js +36 -0
  144. package/modules/VirtualScroller.columns.js.map +1 -0
  145. package/modules/VirtualScroller.constructor.js +371 -0
  146. package/modules/VirtualScroller.constructor.js.map +1 -0
  147. package/modules/VirtualScroller.items.js +288 -0
  148. package/modules/VirtualScroller.items.js.map +1 -0
  149. package/modules/VirtualScroller.js +159 -1014
  150. package/modules/VirtualScroller.js.map +1 -1
  151. package/modules/VirtualScroller.layout.js +549 -0
  152. package/modules/VirtualScroller.layout.js.map +1 -0
  153. package/modules/VirtualScroller.onRender.js +337 -0
  154. package/modules/VirtualScroller.onRender.js.map +1 -0
  155. package/modules/VirtualScroller.resize.js +176 -0
  156. package/modules/VirtualScroller.resize.js.map +1 -0
  157. package/modules/VirtualScroller.state.js +283 -0
  158. package/modules/VirtualScroller.state.js.map +1 -0
  159. package/modules/VirtualScroller.verticalSpacing.js +54 -0
  160. package/modules/VirtualScroller.verticalSpacing.js.map +1 -0
  161. package/modules/getItemCoordinates.js.map +1 -1
  162. package/modules/getItemsDiff.js.map +1 -1
  163. package/modules/getVerticalSpacing.js +8 -8
  164. package/modules/getVerticalSpacing.js.map +1 -1
  165. package/modules/react/VirtualScroller.js +179 -634
  166. package/modules/react/VirtualScroller.js.map +1 -1
  167. package/modules/react/useClassName.js +18 -0
  168. package/modules/react/useClassName.js.map +1 -0
  169. package/modules/react/useHandleItemsChange.js +108 -0
  170. package/modules/react/useHandleItemsChange.js.map +1 -0
  171. package/modules/react/useInstanceMethods.js +28 -0
  172. package/modules/react/useInstanceMethods.js.map +1 -0
  173. package/modules/react/useItemKeys.js +52 -0
  174. package/modules/react/useItemKeys.js.map +1 -0
  175. package/modules/react/useOnItemHeightChange.js +24 -0
  176. package/modules/react/useOnItemHeightChange.js.map +1 -0
  177. package/modules/react/useOnItemStateChange.js +24 -0
  178. package/modules/react/useOnItemStateChange.js.map +1 -0
  179. package/modules/react/useState.js +132 -0
  180. package/modules/react/useState.js.map +1 -0
  181. package/modules/react/useStyle.js +19 -0
  182. package/modules/react/useStyle.js.map +1 -0
  183. package/modules/react/useVirtualScroller.js +51 -0
  184. package/modules/react/useVirtualScroller.js.map +1 -0
  185. package/modules/react/useVirtualScrollerStartStop.js +12 -0
  186. package/modules/react/useVirtualScrollerStartStop.js.map +1 -0
  187. package/modules/test/Engine.js +11 -0
  188. package/modules/test/Engine.js.map +1 -0
  189. package/modules/test/ItemsContainer.js +120 -0
  190. package/modules/test/ItemsContainer.js.map +1 -0
  191. package/modules/test/ScrollableContainer.js +123 -0
  192. package/modules/test/ScrollableContainer.js.map +1 -0
  193. package/modules/test/VirtualScroller.js +270 -0
  194. package/modules/test/VirtualScroller.js.map +1 -0
  195. package/modules/utility/debounce.js +28 -6
  196. package/modules/utility/debounce.js.map +1 -1
  197. package/modules/utility/debug.js +47 -10
  198. package/modules/utility/debug.js.map +1 -1
  199. package/modules/utility/getStateSnapshot.js +43 -0
  200. package/modules/utility/getStateSnapshot.js.map +1 -0
  201. package/modules/utility/px.js +1 -1
  202. package/modules/utility/px.js.map +1 -1
  203. package/modules/utility/px.test.js +9 -0
  204. package/modules/utility/px.test.js.map +1 -0
  205. package/modules/utility/shallowEqual.js +1 -1
  206. package/modules/utility/shallowEqual.js.map +1 -1
  207. package/modules/utility/throttle.js.map +1 -1
  208. package/package.json +54 -29
  209. package/react/index.cjs +4 -0
  210. package/react/index.cjs.js +9 -0
  211. package/react/index.d.ts +28 -0
  212. package/react/index.js +1 -1
  213. package/react/package.json +10 -4
  214. package/rollup.config.mjs +62 -0
  215. package/runnable/create-commonjs-package-json.js +11 -0
  216. package/source/BeforeResize.js +312 -0
  217. package/source/DOM/Engine.js +30 -0
  218. package/source/DOM/ItemsContainer.js +48 -0
  219. package/source/DOM/{WaitForStylesToLoad.js → ListTopOffsetWatcher.js} +61 -30
  220. package/source/DOM/ScrollableContainer.js +51 -73
  221. package/source/DOM/VirtualScroller.js +33 -18
  222. package/source/DOM/tbody.js +30 -21
  223. package/source/ItemHeights.js +27 -27
  224. package/source/Layout.js +629 -252
  225. package/source/Layout.test.js +176 -0
  226. package/source/ListHeightMeasurement.js +95 -0
  227. package/source/Resize.js +56 -32
  228. package/source/Scroll.js +135 -82
  229. package/source/VirtualScroller.columns.js +26 -0
  230. package/source/VirtualScroller.constructor.js +336 -0
  231. package/source/VirtualScroller.items.js +302 -0
  232. package/source/VirtualScroller.js +162 -936
  233. package/source/VirtualScroller.layout.js +539 -0
  234. package/source/VirtualScroller.onRender.js +345 -0
  235. package/source/VirtualScroller.resize.js +189 -0
  236. package/source/VirtualScroller.state.js +284 -0
  237. package/source/VirtualScroller.verticalSpacing.js +51 -0
  238. package/source/getVerticalSpacing.js +7 -7
  239. package/source/react/VirtualScroller.js +243 -603
  240. package/source/react/useClassName.js +14 -0
  241. package/source/react/useHandleItemsChange.js +115 -0
  242. package/source/react/useInstanceMethods.js +25 -0
  243. package/source/react/useItemKeys.js +59 -0
  244. package/source/react/useOnItemHeightChange.js +28 -0
  245. package/source/react/useOnItemStateChange.js +28 -0
  246. package/source/react/useState.js +114 -0
  247. package/source/react/useStyle.js +20 -0
  248. package/source/react/useVirtualScroller.js +59 -0
  249. package/source/react/useVirtualScrollerStartStop.js +12 -0
  250. package/source/test/Engine.js +11 -0
  251. package/source/test/ItemsContainer.js +87 -0
  252. package/source/test/ScrollableContainer.js +88 -0
  253. package/source/test/VirtualScroller.js +232 -0
  254. package/source/utility/debounce.js +22 -5
  255. package/source/utility/debug.js +34 -3
  256. package/source/utility/getStateSnapshot.js +36 -0
  257. package/source/utility/px.js +1 -1
  258. package/source/utility/px.test.js +9 -0
  259. package/website/index-bypass.html +195 -0
  260. package/website/index-grid.html +0 -1
  261. package/website/index-scrollableContainer.html +208 -0
  262. package/website/index-tbody-scrollableContainer.html +68 -0
  263. package/website/index-tbody.html +55 -0
  264. package/commonjs/DOM/RenderingEngine.js +0 -33
  265. package/commonjs/DOM/RenderingEngine.js.map +0 -1
  266. package/commonjs/DOM/Screen.js +0 -87
  267. package/commonjs/DOM/Screen.js.map +0 -1
  268. package/commonjs/DOM/WaitForStylesToLoad.js.map +0 -1
  269. package/commonjs/RestoreScroll.js +0 -118
  270. package/commonjs/RestoreScroll.js.map +0 -1
  271. package/dom/index.commonjs.js +0 -4
  272. package/index.commonjs.js +0 -4
  273. package/modules/DOM/RenderingEngine.js +0 -19
  274. package/modules/DOM/RenderingEngine.js.map +0 -1
  275. package/modules/DOM/Screen.js +0 -80
  276. package/modules/DOM/Screen.js.map +0 -1
  277. package/modules/DOM/WaitForStylesToLoad.js.map +0 -1
  278. package/modules/RestoreScroll.js +0 -111
  279. package/modules/RestoreScroll.js.map +0 -1
  280. package/react/index.commonjs.js +0 -4
  281. package/source/DOM/RenderingEngine.js +0 -22
  282. package/source/DOM/Screen.js +0 -51
  283. package/source/RestoreScroll.js +0 -86
package/website/index-scrollableContainer.html ADDED
@@ -0,0 +1,208 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <!-- Fix encoding. -->
5
+ <meta charset="utf-8">
6
+ <!-- Fix document width for mobile devices. -->
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+
9
+ <title>React VirtualScroller Demo (Scrollable Container)</title>
10
+
11
+ <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
12
+ <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
13
+ <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
14
+ <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
15
+
16
+ <script src="./virtual-scroller-react.js"></script>
17
+ <script src="./on-scroll-to-react.js"></script>
18
+ <script src="./messages.js"></script>
19
+
20
+ <link rel="stylesheet" href="./style.css"/>
21
+ </head>
22
+
23
+ <body>
24
+ <!-- http://tholman.com/github-corners/ -->
25
+ <a title="Go to GitHub repo" href="https://github.com/catamphetamine/virtual-scroller" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
26
+
27
+ <div id="root"></div>
28
+
29
+ <script>
30
+ // Enable debug output to console.
31
+ window.VirtualScrollerDebug = true
32
+ // Whether "dynamically loaded list" mode is enabled.
33
+ window.dynamic = new URL(window.location).searchParams.get('dynamic')
34
+ </script>
35
+
36
+ <script type="text/babel">
37
+ const BATCH_SIZE = 6
38
+
39
+ const SCROLLABLE_CONTAINER_STYLE = {
40
+ marginTop: '20vh',
41
+ maxHeight: '60vh',
42
+ overflow: 'auto'
43
+ }
44
+
45
+ class FeedMessages extends React.Component {
46
+ constructor(props) {
47
+ super(props)
48
+ const { messages } = this.props
49
+ if (window.dynamic) {
50
+ const fromIndex = Math.floor(messages.length / 2 - BATCH_SIZE / 2)
51
+ const toIndex = fromIndex + BATCH_SIZE - 1
52
+ this.state = {
53
+ fromIndex,
54
+ toIndex,
55
+ messages: messages.slice(fromIndex, toIndex + 1)
56
+ }
57
+ } else {
58
+ this.state = {
59
+ fromIndex: 0,
60
+ toIndex: messages.length,
61
+ messages
62
+ }
63
+ }
64
+ }
65
+
66
+ onShowPrevious = () => {
67
+ const { messages } = this.props
68
+ let { fromIndex } = this.state
69
+ const { toIndex } = this.state
70
+ fromIndex = Math.max(fromIndex - BATCH_SIZE, 0)
71
+ this.setState({
72
+ fromIndex,
73
+ messages: messages.slice(fromIndex, toIndex + 1)
74
+ })
75
+ }
76
+
77
+ onShowNext = () => {
78
+ const { messages } = this.props
79
+ const { fromIndex } = this.state
80
+ let { toIndex } = this.state
81
+ toIndex = Math.min(toIndex + BATCH_SIZE, messages.length - 1)
82
+ this.setState({
83
+ toIndex,
84
+ messages: messages.slice(fromIndex, toIndex + 1)
85
+ })
86
+ }
87
+
88
+ getScrollableContainer = () => {
89
+ return this.scrollableContainer
90
+ }
91
+
92
+ setScrollableContainer = (node) => {
93
+ this.scrollableContainer = node
94
+ }
95
+
96
+ componentDidMount() {
97
+ this.setState({ isMounted: true })
98
+ }
99
+
100
+ render() {
101
+ const {
102
+ fromIndex,
103
+ toIndex,
104
+ messages,
105
+ isMounted
106
+ } = this.state
107
+ return (
108
+ <div
109
+ ref={this.setScrollableContainer}
110
+ style={SCROLLABLE_CONTAINER_STYLE}>
111
+ {window.dynamic && fromIndex > 0 &&
112
+ <button
113
+ type="button"
114
+ onClick={this.onShowPrevious}
115
+ className="load-items-button">
116
+ Show previous
117
+ </button>
118
+ }
119
+ {isMounted &&
120
+ <VirtualScroller
121
+ id="messages"
122
+ items={messages}
123
+ itemComponent={Message}
124
+ preserveScrollPosition
125
+ scrollableContainer={this.scrollableContainer}/>
126
+ }
127
+ {window.dynamic && toIndex < this.props.messages.length - 1 &&
128
+ <button
129
+ type="button"
130
+ onClick={this.onShowNext}
131
+ className="load-items-button">
132
+ Show next
133
+ </button>
134
+ }
135
+ </div>
136
+ )
137
+ }
138
+ }
139
+
140
+ const message = PropTypes.shape({
141
+ username: PropTypes.string.isRequired,
142
+ date: PropTypes.instanceOf(Date).isRequired,
143
+ text: PropTypes.string.isRequired
144
+ })
145
+
146
+ FeedMessages.propTypes = {
147
+ messages: PropTypes.arrayOf(message).isRequired
148
+ }
149
+
150
+ function Message(props) {
151
+ const { children: message } = props
152
+ const {
153
+ username,
154
+ date,
155
+ text
156
+ } = message
157
+ return (
158
+ <article className="feed-message">
159
+ <a target="_blank" href={`https://twitter.com/${username}`}>
160
+ @{username}
161
+ </a>
162
+ <time dateTime={date.toISOString()}>
163
+ {date.getMonth() + 1}/{date.getDate()}/{date.getFullYear()}
164
+ </time>
165
+ <p>
166
+ {text}
167
+ </p>
168
+ </article>
169
+ )
170
+ }
171
+
172
+ Message.propTypes = {
173
+ children: message.isRequired
174
+ }
175
+
176
+ class Feed extends React.Component {
177
+ render() {
178
+ return (
179
+ <section className="container">
180
+ <h1>
181
+ <TwitterLogo/>
182
+ Latest Tweets on #politics
183
+ </h1>
184
+ <FeedMessages
185
+ messages={messages}/>
186
+ <footer>
187
+ © Twitter Inc., 2019
188
+ </footer>
189
+ </section>
190
+ )
191
+ }
192
+ }
193
+
194
+ function TwitterLogo() {
195
+ return (
196
+ <svg className="twitter-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
197
+ <path fill="#00AAEC" fillRule="evenodd" d="M128 23.294a51.28 51.28 0 0 1-15.079 4.237c5.424-3.328 9.587-8.606 11.548-14.892a51.718 51.718 0 0 1-16.687 6.526c-4.778-5.231-11.608-8.498-19.166-8.498-14.493 0-26.251 12.057-26.251 26.927 0 2.111.225 4.16.676 6.133-21.824-1.126-41.17-11.835-54.131-28.145a27.422 27.422 0 0 0-3.554 13.552c0 9.338 4.636 17.581 11.683 22.412-4.297-.131-8.355-1.356-11.901-3.359v.331c0 13.051 9.053 23.937 21.074 26.403-2.201.632-4.523.948-6.92.948-1.69 0-3.343-.162-4.944-.478 3.343 10.694 13.035 18.483 24.53 18.691-8.986 7.227-20.315 11.533-32.614 11.533-2.119 0-4.215-.123-6.266-.37 11.623 7.627 25.432 12.088 40.255 12.088 48.309 0 74.717-41.026 74.717-76.612a89.39 89.39 0 0 0-.068-3.49A53.862 53.862 0 0 0 128 23.294" clipRule="evenodd"/>
198
+ </svg>
199
+ )
200
+ }
201
+
202
+ ReactDOM.render(
203
+ <Feed/>,
204
+ document.getElementById('root')
205
+ )
206
+ </script>
207
+ </body>
208
+ </html>
package/website/index-tbody-scrollableContainer.html ADDED
@@ -0,0 +1,68 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>
6
+ VirtualScroller scrollable container test
7
+ </title>
8
+ <style>
9
+ tr {
10
+ background: #fff
11
+ }
12
+
13
+ th, td {
14
+ padding-left: 1em;
15
+ padding-right: 1em;
16
+ padding-top: 0.2em;
17
+ padding-bottom: 0.2em;
18
+ }
19
+
20
+ table {
21
+ width: 100%;
22
+ }
23
+
24
+ #scrollableContainer {
25
+ margin-top: 20vh;
26
+ max-height: 60vh;
27
+ overflow: auto;
28
+ }
29
+ </style>
30
+ <script src="./virtual-scroller-dom.js"></script>
31
+ <link rel="stylesheet" href="./style.css"/>
32
+ </head>
33
+ <body>
34
+ <div id="scrollableContainer">
35
+ <table>
36
+ <tbody id="container">
37
+ </tbody>
38
+ </table>
39
+ </div>
40
+ <script>
41
+ window.VirtualScrollerDebug = true
42
+
43
+ const rows = [];
44
+ for (var i = 1; i <= 10000; i++) {
45
+ rows.push(i);
46
+ }
47
+
48
+ function renderRow(i) {
49
+ var tr = document.createElement('tr');
50
+ var td = document.createElement('td')
51
+ td.innerText = i
52
+ tr.appendChild(td)
53
+ return tr
54
+ }
55
+
56
+ new VirtualScroller(
57
+ document.getElementById('container'),
58
+ rows,
59
+ renderRow,
60
+ {
61
+ getScrollableContainer() {
62
+ return document.getElementById('scrollableContainer')
63
+ }
64
+ }
65
+ )
66
+ </script>
67
+ </body>
68
+ </html>
package/website/index-tbody.html ADDED
@@ -0,0 +1,55 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>
6
+ VirtualScroller scrollable container test
7
+ </title>
8
+ <style>
9
+ tr {
10
+ background: #fff
11
+ }
12
+
13
+ th, td {
14
+ padding-left: 1em;
15
+ padding-right: 1em;
16
+ padding-top: 0.2em;
17
+ padding-bottom: 0.2em;
18
+ }
19
+
20
+ table {
21
+ width: 100%;
22
+ }
23
+ </style>
24
+ <script src="./virtual-scroller-dom.js"></script>
25
+ <link rel="stylesheet" href="./style.css"/>
26
+ </head>
27
+ <body>
28
+ <table>
29
+ <tbody id="container">
30
+ </tbody>
31
+ </table>
32
+ <script>
33
+ window.VirtualScrollerDebug = true
34
+
35
+ const rows = [];
36
+ for (var i = 1; i <= 10000; i++) {
37
+ rows.push(i);
38
+ }
39
+
40
+ function renderRow(i) {
41
+ var tr = document.createElement('tr');
42
+ var td = document.createElement('td')
43
+ td.innerText = i
44
+ tr.appendChild(td)
45
+ return tr
46
+ }
47
+
48
+ new VirtualScroller(
49
+ document.getElementById('container'),
50
+ rows,
51
+ renderRow
52
+ )
53
+ </script>
54
+ </body>
55
+ </html>
package/commonjs/DOM/RenderingEngine.js DELETED
@@ -1,33 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports["default"] = void 0;
7
-
8
- var _Screen = _interopRequireDefault(require("./Screen"));
9
-
10
- var _ScrollableContainer = _interopRequireWildcard(require("./ScrollableContainer"));
11
-
12
- function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
13
-
14
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
15
-
16
- var _default = {
17
- name: 'DOM',
18
- createScreen: function createScreen() {
19
- return new _Screen["default"]();
20
- },
21
- // Create `scrollableContainer`.
22
- // On client side, `scrollableContainer` is always created.
23
- // On server side, `scrollableContainer` is not created (and not used).
24
- createScrollableContainer: function createScrollableContainer(scrollableContainer) {
25
- if (scrollableContainer) {
26
- return new _ScrollableContainer["default"](scrollableContainer);
27
- } else if (typeof window !== 'undefined') {
28
- return new _ScrollableContainer.ScrollableWindowContainer();
29
- }
30
- }
31
- };
32
- exports["default"] = _default;
33
- //# sourceMappingURL=RenderingEngine.js.map
package/commonjs/DOM/RenderingEngine.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../source/DOM/RenderingEngine.js"],"names":["name","createScreen","Screen","createScrollableContainer","scrollableContainer","ScrollableContainer","window","ScrollableWindowContainer"],"mappings":";;;;;;;AAAA;;AAEA;;;;;;eAIe;AACdA,EAAAA,IAAI,EAAE,KADQ;AAEdC,EAAAA,YAFc,0BAEC;AACd,WAAO,IAAIC,kBAAJ,EAAP;AACA,GAJa;AAKd;AACA;AACA;AACAC,EAAAA,yBARc,qCAQYC,mBARZ,EAQiC;AAC9C,QAAIA,mBAAJ,EAAyB;AACxB,aAAO,IAAIC,+BAAJ,CAAwBD,mBAAxB,CAAP;AACA,KAFD,MAEO,IAAI,OAAOE,MAAP,KAAkB,WAAtB,EAAmC;AACzC,aAAO,IAAIC,8CAAJ,EAAP;AACA;AACD;AAda,C","sourcesContent":["import Screen from './Screen'\r\n\r\nimport ScrollableContainer, {\r\n\tScrollableWindowContainer\r\n} from './ScrollableContainer'\r\n\r\nexport default {\r\n\tname: 'DOM',\r\n\tcreateScreen() {\r\n\t\treturn new Screen()\r\n\t},\r\n\t// Create `scrollableContainer`.\r\n\t// On client side, `scrollableContainer` is always created.\r\n\t// On server side, `scrollableContainer` is not created (and not used).\r\n\tcreateScrollableContainer(scrollableContainer) {\r\n\t\tif (scrollableContainer) {\r\n\t\t\treturn new ScrollableContainer(scrollableContainer)\r\n\t\t} else if (typeof window !== 'undefined') {\r\n\t\t\treturn new ScrollableWindowContainer()\r\n\t\t}\r\n\t}\r\n}"],"file":"RenderingEngine.js"}
package/commonjs/DOM/Screen.js DELETED
@@ -1,87 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports["default"] = void 0;
7
-
8
- function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
9
-
10
- 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); } }
11
-
12
- function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
13
-
14
- var Screen =
15
- /*#__PURE__*/
16
- function () {
17
- function Screen() {
18
- _classCallCheck(this, Screen);
19
- }
20
-
21
- _createClass(Screen, [{
22
- key: "getChildElementTopOffset",
23
-
24
- /**
25
- * Returns a child element's "top offset", relative to the `parentElement`'s top edge.
26
- * @param {Element} parentElement
27
- * @param {number} childElementIndex
28
- * @return {number}
29
- */
30
- value: function getChildElementTopOffset(parentElement, childElementIndex) {
31
- return parentElement.childNodes[childElementIndex].getBoundingClientRect().top;
32
- }
33
- /**
34
- * Returns a child element's height.
35
- * @param {Element} parentElement
36
- * @param {number} childElementIndex
37
- * @return {number}
38
- */
39
-
40
- }, {
41
- key: "getChildElementHeight",
42
- value: function getChildElementHeight(parentElement, childElementIndex) {
43
- return this.getElementHeight(parentElement.childNodes[childElementIndex]);
44
- }
45
- /**
46
- * Returns the count of child elements of an element.
47
- * @param {Element} parentElement
48
- * @return {number}
49
- */
50
-
51
- }, {
52
- key: "getChildElementsCount",
53
- value: function getChildElementsCount(parentElement) {
54
- return parentElement.childNodes.length;
55
- }
56
- /**
57
- * Removes all child elements of an element.
58
- * @param {Element} element
59
- */
60
-
61
- }, {
62
- key: "clearElement",
63
- value: function clearElement(element) {
64
- while (element.firstChild) {
65
- element.removeChild(element.firstChild);
66
- }
67
- }
68
- /**
69
- * Returns an element's height.
70
- * @param {Element} element
71
- * @return {number}
72
- */
73
-
74
- }, {
75
- key: "getElementHeight",
76
- value: function getElementHeight(element) {
77
- // `offsetHeight` is not precise enough (doesn't return fractional pixels).
78
- // return element.offsetHeight
79
- return element.getBoundingClientRect().height;
80
- }
81
- }]);
82
-
83
- return Screen;
84
- }();
85
-
86
- exports["default"] = Screen;
87
- //# sourceMappingURL=Screen.js.map
package/commonjs/DOM/Screen.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../source/DOM/Screen.js"],"names":["Screen","parentElement","childElementIndex","childNodes","getBoundingClientRect","top","getElementHeight","length","element","firstChild","removeChild","height"],"mappings":";;;;;;;;;;;;;IAAqBA,M;;;;;;;;;;AACpB;;;;;;6CAMyBC,a,EAAeC,iB,EAAmB;AAC1D,aAAOD,aAAa,CAACE,UAAd,CAAyBD,iBAAzB,EAA4CE,qBAA5C,GAAoEC,GAA3E;AACA;AAED;;;;;;;;;0CAMsBJ,a,EAAeC,iB,EAAmB;AACvD,aAAO,KAAKI,gBAAL,CAAsBL,aAAa,CAACE,UAAd,CAAyBD,iBAAzB,CAAtB,CAAP;AACA;AAED;;;;;;;;0CAKsBD,a,EAAe;AACpC,aAAOA,aAAa,CAACE,UAAd,CAAyBI,MAAhC;AACA;AAED;;;;;;;iCAIaC,O,EAAS;AACrB,aAAOA,OAAO,CAACC,UAAf,EAA2B;AAC1BD,QAAAA,OAAO,CAACE,WAAR,CAAoBF,OAAO,CAACC,UAA5B;AACA;AACD;AAED;;;;;;;;qCAKiBD,O,EAAS;AACzB;AACA;AACA,aAAOA,OAAO,CAACJ,qBAAR,GAAgCO,MAAvC;AACA","sourcesContent":["export default class Screen {\r\n\t/**\r\n\t * Returns a child element's \"top offset\", relative to the `parentElement`'s top edge.\r\n\t * @param {Element} parentElement\r\n\t * @param {number} childElementIndex\r\n\t * @return {number}\r\n\t */\r\n\tgetChildElementTopOffset(parentElement, childElementIndex) {\r\n\t\treturn parentElement.childNodes[childElementIndex].getBoundingClientRect().top\r\n\t}\r\n\r\n\t/**\r\n\t * Returns a child element's height.\r\n\t * @param {Element} parentElement\r\n\t * @param {number} childElementIndex\r\n\t * @return {number}\r\n\t */\r\n\tgetChildElementHeight(parentElement, childElementIndex) {\r\n\t\treturn this.getElementHeight(parentElement.childNodes[childElementIndex])\r\n\t}\r\n\r\n\t/**\r\n\t * Returns the count of child elements of an element.\r\n\t * @param {Element} parentElement\r\n\t * @return {number}\r\n\t */\r\n\tgetChildElementsCount(parentElement) {\r\n\t\treturn parentElement.childNodes.length\r\n\t}\r\n\r\n\t/**\r\n\t * Removes all child elements of an element.\r\n\t * @param {Element} element\r\n\t */\r\n\tclearElement(element) {\r\n\t\twhile (element.firstChild) {\r\n\t\t\telement.removeChild(element.firstChild)\r\n\t\t}\r\n\t}\r\n\r\n\t/**\r\n\t * Returns an element's height.\r\n\t * @param {Element} element\r\n\t * @return {number}\r\n\t */\r\n\tgetElementHeight(element) {\r\n\t\t// `offsetHeight` is not precise enough (doesn't return fractional pixels).\r\n\t\t// return element.offsetHeight\r\n\t\treturn element.getBoundingClientRect().height\r\n\t}\r\n}"],"file":"Screen.js"}
package/commonjs/DOM/WaitForStylesToLoad.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../source/DOM/WaitForStylesToLoad.js"],"names":["WaitForStylesToLoad","updateLayout","getListTopOffsetInsideScrollableContainer","listTopOffset","listTopOffsetInsideScrollableContainer","undefined","start","isRendered","watchListTopOffset","watchListTopOffsetTimer","startedAt","Date","now","check","reason","LAYOUT_REASON","TOP_OFFSET_CHANGED","WATCH_LIST_TOP_OFFSET_MAX_DURATION","WATCH_LIST_TOP_OFFSET_INTERVAL"],"mappings":";;;;;;;AAIA;;AAEA;;;;;;;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;IACqBA,mB;;;AACpB,qCAGG;AAAA,QAFFC,YAEE,QAFFA,YAEE;AAAA,QADFC,yCACE,QADFA,yCACE;;AAAA;;AACF,SAAKD,YAAL,GAAoBA,YAApB;AACA,SAAKC,yCAAL,GAAiDA,yCAAjD;AACA;;;;uCAEkBC,a,EAAe;AACjC,UAAI,KAAKC,sCAAL,KAAgDC,SAApD,EAA+D;AAC9D;AACA;AACA;AACA;AACA,aAAKC,KAAL;AACA;;AACD,WAAKF,sCAAL,GAA8CD,aAA9C;AACA;;;4BAEO;AACP,WAAKI,UAAL,GAAkB,IAAlB;AACA,WAAKC,kBAAL;AACA;;;2BAEM;AACN,WAAKD,UAAL,GAAkB,KAAlB;AACA,sDAAa,KAAKE,uBAAlB;AACA;;;yCAEoB;AAAA;;AACpB,UAAMC,SAAS,GAAGC,IAAI,CAACC,GAAL,EAAlB;;AACA,UAAMC,KAAK,GAAG,SAARA,KAAQ,GAAM;AACnB;AACA;AACA,YAAI,CAAC,KAAI,CAACN,UAAV,EAAsB;AACrB;AACA,SALkB,CAMnB;AACA;;;AACA,YAAI,KAAI,CAACH,sCAAL,KAAgDC,SAApD,EAA+D;AAC9D;AACA;AACA;AACA,cAAI,KAAI,CAACH,yCAAL,OAAqD,KAAI,CAACE,sCAA9D,EAAsG;AACrG,YAAA,KAAI,CAACH,YAAL,CAAkB;AAAEa,cAAAA,MAAM,EAAEC,sBAAcC;AAAxB,aAAlB;AACA;AACD,SAfkB,CAgBnB;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,YAAIL,IAAI,CAACC,GAAL,KAAaF,SAAb,GAAyBO,kCAA7B,EAAiE;AAChE,UAAA,KAAI,CAACR,uBAAL,GAA+B,8CAAWI,KAAX,EAAkBK,8BAAlB,CAA/B;AACA;AACD,OA1BD,CAFoB,CA6BpB;;;AACAL,MAAAA,KAAK;AACL;;;;;;;AAGF,IAAMK,8BAA8B,GAAG,GAAvC;AACA,IAAMD,kCAAkC,GAAG,IAA3C","sourcesContent":["// For some weird reason, in Chrome, `setTimeout()` would lag up to a second (or more) behind.\r\n// Turns out, Chrome developers have deprecated `setTimeout()` API entirely without asking anyone.\r\n// Replacing `setTimeout()` with `requestAnimationFrame()` can work around that Chrome bug.\r\n// https://github.com/bvaughn/react-virtualized/issues/722\r\nimport { setTimeout, clearTimeout } from 'request-animation-frame-timeout'\r\n\r\nimport { LAYOUT_REASON } from '../Layout'\r\n\r\n// `VirtualScroller` calls `this.layout.layOut()` on mount,\r\n// but if the page styles are applied after `VirtualScroller` mounts\r\n// (for example, if styles are applied via javascript, like Webpack does)\r\n// then the list might not render correctly and will only show the first item.\r\n// The reason for that would be that calling `.getListTopOffsetInsideScrollableContainer()`\r\n// on mount returns \"incorrect\" `top` position because the styles haven't been applied yet.\r\n// For example, consider a page:\r\n// <div class=\"page\">\r\n// <nav class=\"sidebar\">...</nav>\r\n// <main>...</main>\r\n// </div>\r\n// The sidebar is styled as `position: fixed`, but until\r\n// the page styles have been applied it's gonna be a regular `<div/>`\r\n// meaning that `<main/>` will be rendered below the sidebar\r\n// and will appear offscreen and so it will only render the first item.\r\n// Then, the page styles are loaded and applied and the sidebar\r\n// is now `position: fixed` so `<main/>` is now rendered at the top of the page\r\n// but `VirtualScroller`'s `.render()` has already been called\r\n// and it won't re-render until the user scrolls or the window is resized.\r\n// This type of a bug doesn't occur in production, but it can appear\r\n// in development mode when using Webpack. The workaround `VirtualScroller`\r\n// implements for such cases is calling `.getListTopOffsetInsideScrollableContainer()`\r\n// on the list container DOM element periodically (every second) to check\r\n// if the `top` coordinate has changed as a result of CSS being applied:\r\n// if it has then it recalculates the shown item indexes.\r\nexport default class WaitForStylesToLoad {\r\n\tconstructor({\r\n\t\tupdateLayout,\r\n\t\tgetListTopOffsetInsideScrollableContainer\r\n\t}) {\r\n\t\tthis.updateLayout = updateLayout\r\n\t\tthis.getListTopOffsetInsideScrollableContainer = getListTopOffsetInsideScrollableContainer\r\n\t}\r\n\r\n\tonGotListTopOffset(listTopOffset) {\r\n\t\tif (this.listTopOffsetInsideScrollableContainer === undefined) {\r\n\t\t\t// Start periodical checks of the list's top offset\r\n\t\t\t// in order to perform a re-layout in case it changes.\r\n\t\t\t// See the comments in `WaitForStylesToLoad.js` file\r\n\t\t\t// on why can the list's top offset change, and in which circumstances.\r\n\t\t\tthis.start()\r\n\t\t}\r\n\t\tthis.listTopOffsetInsideScrollableContainer = listTopOffset\r\n\t}\r\n\r\n\tstart() {\r\n\t\tthis.isRendered = true\r\n\t\tthis.watchListTopOffset()\r\n\t}\r\n\r\n\tstop() {\r\n\t\tthis.isRendered = false\r\n\t\tclearTimeout(this.watchListTopOffsetTimer)\r\n\t}\r\n\r\n\twatchListTopOffset() {\r\n\t\tconst startedAt = Date.now()\r\n\t\tconst check = () => {\r\n\t\t\t// If `VirtualScroller` has been unmounted\r\n\t\t\t// while `setTimeout()` was waiting, then exit.\r\n\t\t\tif (!this.isRendered) {\r\n\t\t\t\treturn\r\n\t\t\t}\r\n\t\t\t// Skip comparing `top` coordinate of the list\r\n\t\t\t// when this function is called for the first time.\r\n\t\t\tif (this.listTopOffsetInsideScrollableContainer !== undefined) {\r\n\t\t\t\t// Calling `this.getListTopOffsetInsideScrollableContainer()`\r\n\t\t\t\t// on an element is about 0.003 milliseconds on a modern desktop CPU,\r\n\t\t\t\t// so I guess it's fine calling it twice a second.\r\n\t\t\t\tif (this.getListTopOffsetInsideScrollableContainer() !== this.listTopOffsetInsideScrollableContainer) {\r\n\t\t\t\t\tthis.updateLayout({ reason: LAYOUT_REASON.TOP_OFFSET_CHANGED })\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\t// Compare `top` coordinate of the list twice a second\r\n\t\t\t// to find out if it has changed as a result of loading CSS styles.\r\n\t\t\t// The total duration of 3 seconds would be enough for any styles to load, I guess.\r\n\t\t\t// There could be other cases changing the `top` coordinate\r\n\t\t\t// of the list (like collapsing an \"accordeon\" panel above the list\r\n\t\t\t// without scrolling the page), but those cases should be handled\r\n\t\t\t// by manually calling `.updateLayout()` instance method on `VirtualScroller` instance.\r\n\t\t\tif (Date.now() - startedAt < WATCH_LIST_TOP_OFFSET_MAX_DURATION) {\r\n\t\t\t\tthis.watchListTopOffsetTimer = setTimeout(check, WATCH_LIST_TOP_OFFSET_INTERVAL)\r\n\t\t\t}\r\n\t\t}\r\n\t\t// Run the cycle.\r\n\t\tcheck()\r\n\t}\r\n}\r\n\r\nconst WATCH_LIST_TOP_OFFSET_INTERVAL = 500\r\nconst WATCH_LIST_TOP_OFFSET_MAX_DURATION = 3000"],"file":"WaitForStylesToLoad.js"}
package/commonjs/RestoreScroll.js DELETED
@@ -1,118 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports["default"] = void 0;
7
-
8
- function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
9
-
10
- 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); } }
11
-
12
- function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
13
-
14
- var RestoreScroll =
15
- /*#__PURE__*/
16
- function () {
17
- function RestoreScroll(_ref) {
18
- var screen = _ref.screen,
19
- getContainerElement = _ref.getContainerElement,
20
- scrollBy = _ref.scrollBy;
21
-
22
- _classCallCheck(this, RestoreScroll);
23
-
24
- this.screen = screen;
25
- this.getContainerElement = getContainerElement;
26
- this.scrollBy = scrollBy;
27
- }
28
- /**
29
- * `<ReactVirtualScroller/>` calls this method.
30
- * @param {any[]} previousItems
31
- * @param {any[]} newItems
32
- * @param {number} prependedItemsCount
33
- */
34
-
35
-
36
- _createClass(RestoreScroll, [{
37
- key: "captureScroll",
38
- value: function captureScroll(_ref2) {
39
- var previousItems = _ref2.previousItems,
40
- newItems = _ref2.newItems,
41
- prependedItemsCount = _ref2.prependedItemsCount;
42
-
43
- // If there were no items in the list
44
- // then there's no point in restoring scroll position.
45
- if (previousItems.length === 0) {
46
- return;
47
- } // If no items were prepended then no need to restore scroll position.
48
-
49
-
50
- if (prependedItemsCount === 0) {
51
- return;
52
- }
53
-
54
- var container = this.getContainerElement();
55
- var firstItemTopOffset = this.screen.getChildElementTopOffset(container, 0); // The first item is supposed to be shown when the user clicks
56
- // "Show previous items" button. If it isn't shown though,
57
- // could still calculate the first item's top position using
58
- // the values from `itemHeights` and `verticalSpacing`.
59
- // But that would be a weird non-realistic scenario.
60
- // if (firstShownItemIndex > 0) {
61
- // let i = firstShownItemIndex - 1
62
- // while (i >= 0) {
63
- // firstItemTopOffset += itemHeights[i] + verticalSpacing
64
- // i--
65
- // }
66
- // }
67
- // If the scroll position has already been captured for restoration,
68
- // then don't capture it the second time.
69
- // Capturing scroll position could happen when using `<ReactVirtualScroller/>`
70
- // because it calls `.captureScroll()` inside `ReactVirtualScroller.render()`
71
- // which is followed by `<VirtualScroller/>`'s `.componentDidUpdate()`
72
- // that also calls `.captureScroll()` with the same arguments,
73
- // so that second call to `.captureScroll()` is ignored.
74
- // Calling `.captureScroll()` inside `ReactVirtualScroller.render()`
75
- // is done to prevent scroll Y position from jumping
76
- // when showing the first page of the "Previous items".
77
- // See the long section of comments in `ReactVirtualScroller.render()`
78
- // method for more info on why is `.captureScroll()` called there.
79
-
80
- if (this.restoreScrollAfterRenderValues && this.restoreScrollAfterRenderValues.previousItems === previousItems && this.restoreScrollAfterRenderValues.newItems === newItems) {
81
- return;
82
- }
83
-
84
- this.restoreScrollAfterRenderValues = {
85
- previousItems: previousItems,
86
- newItems: newItems,
87
- index: prependedItemsCount,
88
- visibleAreaTop: firstItemTopOffset
89
- };
90
- }
91
- }, {
92
- key: "getAnchorItemIndex",
93
- value: function getAnchorItemIndex() {
94
- return this.restoreScrollAfterRenderValues.index;
95
- }
96
- }, {
97
- key: "shouldRestoreScrollAfterRender",
98
- value: function shouldRestoreScrollAfterRender() {
99
- return this.restoreScrollAfterRenderValues !== undefined;
100
- }
101
- }, {
102
- key: "getScrollDifference",
103
- value: function getScrollDifference() {
104
- var _this$restoreScrollAf = this.restoreScrollAfterRenderValues,
105
- index = _this$restoreScrollAf.index,
106
- visibleAreaTop = _this$restoreScrollAf.visibleAreaTop;
107
- this.restoreScrollAfterRenderValues = undefined; // `firstShownItemIndex` is supposed to be `0` here.
108
-
109
- var newVisibleAreaTop = this.screen.getChildElementTopOffset(this.getContainerElement(), index);
110
- return newVisibleAreaTop - visibleAreaTop;
111
- }
112
- }]);
113
-
114
- return RestoreScroll;
115
- }();
116
-
117
- exports["default"] = RestoreScroll;
118
- //# sourceMappingURL=RestoreScroll.js.map
package/commonjs/RestoreScroll.js.map DELETED
@@ -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","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"}
package/dom/index.commonjs.js DELETED
@@ -1,4 +0,0 @@
1
- 'use strict'
2
-
3
- exports = module.exports = require('../commonjs/DOM/VirtualScroller').default
4
- exports['default'] = require('../commonjs/DOM/VirtualScroller').default
package/index.commonjs.js DELETED
@@ -1,4 +0,0 @@
1
- 'use strict'
2
-
3
- exports = module.exports = require('./commonjs/VirtualScroller').default
4
- exports['default'] = require('./commonjs/VirtualScroller').default
package/modules/DOM/RenderingEngine.js DELETED
@@ -1,19 +0,0 @@
1
- import Screen from './Screen';
2
- import ScrollableContainer, { ScrollableWindowContainer } from './ScrollableContainer';
3
- export default {
4
- name: 'DOM',
5
- createScreen: function createScreen() {
6
- return new Screen();
7
- },
8
- // Create `scrollableContainer`.
9
- // On client side, `scrollableContainer` is always created.
10
- // On server side, `scrollableContainer` is not created (and not used).
11
- createScrollableContainer: function createScrollableContainer(scrollableContainer) {
12
- if (scrollableContainer) {
13
- return new ScrollableContainer(scrollableContainer);
14
- } else if (typeof window !== 'undefined') {
15
- return new ScrollableWindowContainer();
16
- }
17
- }
18
- };
19
- //# sourceMappingURL=RenderingEngine.js.map
package/modules/DOM/RenderingEngine.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../source/DOM/RenderingEngine.js"],"names":["Screen","ScrollableContainer","ScrollableWindowContainer","name","createScreen","createScrollableContainer","scrollableContainer","window"],"mappings":"AAAA,OAAOA,MAAP,MAAmB,UAAnB;AAEA,OAAOC,mBAAP,IACCC,yBADD,QAEO,uBAFP;AAIA,eAAe;AACdC,EAAAA,IAAI,EAAE,KADQ;AAEdC,EAAAA,YAFc,0BAEC;AACd,WAAO,IAAIJ,MAAJ,EAAP;AACA,GAJa;AAKd;AACA;AACA;AACAK,EAAAA,yBARc,qCAQYC,mBARZ,EAQiC;AAC9C,QAAIA,mBAAJ,EAAyB;AACxB,aAAO,IAAIL,mBAAJ,CAAwBK,mBAAxB,CAAP;AACA,KAFD,MAEO,IAAI,OAAOC,MAAP,KAAkB,WAAtB,EAAmC;AACzC,aAAO,IAAIL,yBAAJ,EAAP;AACA;AACD;AAda,CAAf","sourcesContent":["import Screen from './Screen'\r\n\r\nimport ScrollableContainer, {\r\n\tScrollableWindowContainer\r\n} from './ScrollableContainer'\r\n\r\nexport default {\r\n\tname: 'DOM',\r\n\tcreateScreen() {\r\n\t\treturn new Screen()\r\n\t},\r\n\t// Create `scrollableContainer`.\r\n\t// On client side, `scrollableContainer` is always created.\r\n\t// On server side, `scrollableContainer` is not created (and not used).\r\n\tcreateScrollableContainer(scrollableContainer) {\r\n\t\tif (scrollableContainer) {\r\n\t\t\treturn new ScrollableContainer(scrollableContainer)\r\n\t\t} else if (typeof window !== 'undefined') {\r\n\t\t\treturn new ScrollableWindowContainer()\r\n\t\t}\r\n\t}\r\n}"],"file":"RenderingEngine.js"}