virtual-scroller 1.15.0 → 1.15.2

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 (92) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/README.md +98 -8
  3. package/bundle/index-dom-bypass.html +3 -4
  4. package/bundle/index-dom-grid.html +3 -4
  5. package/bundle/index-dom-scrollableContainer.html +3 -4
  6. package/bundle/index-dom.html +3 -4
  7. package/bundle/index-react-bypass.html +56 -62
  8. package/bundle/index-react-grid.html +55 -61
  9. package/bundle/index-react-hook.html +209 -0
  10. package/bundle/index-react-scrollableContainer.html +56 -62
  11. package/bundle/index-react-strictMode.html +55 -61
  12. package/bundle/index-react-tbody-scrollableContainer.html +13 -15
  13. package/bundle/index-react-tbody.html +10 -12
  14. package/bundle/virtual-scroller-dom.js +1 -1
  15. package/bundle/virtual-scroller-dom.js.map +1 -1
  16. package/bundle/virtual-scroller-react.js +1 -1
  17. package/bundle/virtual-scroller-react.js.map +1 -1
  18. package/bundle/virtual-scroller.js +1 -1
  19. package/bundle/virtual-scroller.js.map +1 -1
  20. package/commonjs/VirtualScroller.constructor.js +3 -1
  21. package/commonjs/VirtualScroller.constructor.js.map +1 -1
  22. package/commonjs/VirtualScroller.items.js +19 -0
  23. package/commonjs/VirtualScroller.items.js.map +1 -1
  24. package/commonjs/react/VirtualScroller.js +69 -127
  25. package/commonjs/react/VirtualScroller.js.map +1 -1
  26. package/commonjs/react/useCreateVirtualScroller.js +64 -0
  27. package/commonjs/react/useCreateVirtualScroller.js.map +1 -0
  28. package/commonjs/react/useInstanceMethods.js +2 -2
  29. package/commonjs/react/useInstanceMethods.js.map +1 -1
  30. package/commonjs/react/useMergeRefs.js +52 -0
  31. package/commonjs/react/useMergeRefs.js.map +1 -0
  32. package/commonjs/react/{useVirtualScrollerStartStop.js → useStartStopVirtualScroller.js} +1 -1
  33. package/commonjs/react/{useVirtualScrollerStartStop.js.map → useStartStopVirtualScroller.js.map} +1 -1
  34. package/commonjs/react/useStyle.js +18 -0
  35. package/commonjs/react/useStyle.js.map +1 -1
  36. package/commonjs/react/useVirtualScroller.js +142 -43
  37. package/commonjs/react/useVirtualScroller.js.map +1 -1
  38. package/commonjs/test/VirtualScroller.js +17 -1
  39. package/commonjs/test/VirtualScroller.js.map +1 -1
  40. package/modules/VirtualScroller.constructor.js +3 -1
  41. package/modules/VirtualScroller.constructor.js.map +1 -1
  42. package/modules/VirtualScroller.items.js +19 -0
  43. package/modules/VirtualScroller.items.js.map +1 -1
  44. package/modules/react/VirtualScroller.js +68 -119
  45. package/modules/react/VirtualScroller.js.map +1 -1
  46. package/modules/react/useCreateVirtualScroller.js +53 -0
  47. package/modules/react/useCreateVirtualScroller.js.map +1 -0
  48. package/modules/react/useInstanceMethods.js +2 -2
  49. package/modules/react/useInstanceMethods.js.map +1 -1
  50. package/modules/react/useMergeRefs.js +44 -0
  51. package/modules/react/useMergeRefs.js.map +1 -0
  52. package/modules/react/{useVirtualScrollerStartStop.js → useStartStopVirtualScroller.js} +1 -1
  53. package/modules/react/{useVirtualScrollerStartStop.js.map → useStartStopVirtualScroller.js.map} +1 -1
  54. package/modules/react/useStyle.js +17 -0
  55. package/modules/react/useStyle.js.map +1 -1
  56. package/modules/react/useVirtualScroller.js +136 -43
  57. package/modules/react/useVirtualScroller.js.map +1 -1
  58. package/modules/test/VirtualScroller.js +17 -1
  59. package/modules/test/VirtualScroller.js.map +1 -1
  60. package/package.json +4 -1
  61. package/react/index.cjs +2 -1
  62. package/react/index.d.ts +51 -7
  63. package/react/index.js +1 -0
  64. package/rollup.config.mjs +15 -1
  65. package/source/VirtualScroller.constructor.js +3 -0
  66. package/source/VirtualScroller.items.js +14 -0
  67. package/source/react/VirtualScroller.js +66 -127
  68. package/source/react/useCreateVirtualScroller.js +65 -0
  69. package/source/react/useInstanceMethods.js +2 -2
  70. package/source/react/useMergeRefs.js +45 -0
  71. package/source/react/useStyle.js +15 -0
  72. package/source/react/useVirtualScroller.js +155 -48
  73. package/source/test/VirtualScroller.js +11 -1
  74. package/website/index-dom-bypass.html +3 -4
  75. package/website/index-dom-grid.html +3 -4
  76. package/website/index-dom-scrollableContainer.html +3 -4
  77. package/website/index-dom.html +3 -4
  78. package/website/index-react-bypass.html +56 -62
  79. package/website/index-react-grid.html +55 -61
  80. package/website/index-react-hook.html +209 -0
  81. package/website/index-react-scrollableContainer.html +56 -62
  82. package/website/index-react-strictMode.html +55 -61
  83. package/website/index-react-tbody-scrollableContainer.html +13 -15
  84. package/website/index-react-tbody.html +10 -12
  85. package/website/index-react.html +55 -61
  86. package/website/index.html +55 -61
  87. package/commonjs/react/useForwardedRef.js +0 -50
  88. package/commonjs/react/useForwardedRef.js.map +0 -1
  89. package/modules/react/useForwardedRef.js +0 -42
  90. package/modules/react/useForwardedRef.js.map +0 -1
  91. package/source/react/useForwardedRef.js +0 -39
  92. /package/source/react/{useVirtualScrollerStartStop.js → useStartStopVirtualScroller.js} +0 -0
package/bundle/index-react-hook.html ADDED
@@ -0,0 +1,209 @@
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>VirtualScroller (React) (hook)</title>
10
+
11
+ <script src="./lib/react.development.js"></script>
12
+ <script src="./lib/react-dom.development.js"></script>
13
+ <script src="./lib/prop-types.min.js"></script>
14
+ <script src="./lib/babel.min.js"></script>
15
+
16
+ <script src="./virtual-scroller-react.js"></script>
17
+ <script src="./items.js"></script>
18
+
19
+ <link rel="stylesheet" href="./style.base.css"/>
20
+ <link rel="stylesheet" href="./style.list.css"/>
21
+ </head>
22
+
23
+ <body>
24
+ <!-- http://tholman.com/github-corners/ -->
25
+ <a title="Go to GitHub repo" href="https://gitlab.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
+ // Pass `?pagination=✓` URL query parameter to enable pagination.
33
+ window.PAGINATION = Boolean(new URL(window.location).searchParams.get('pagination'))
34
+ </script>
35
+
36
+ <script type="text/babel">
37
+ const BATCH_SIZE = 6
38
+ const COLUMNS_COUNT = 1
39
+
40
+ function getColumnsCount(container) {
41
+ return 1
42
+ }
43
+
44
+ function getInitialState(items) {
45
+ if (window.PAGINATION) {
46
+ const fromIndex = Math.floor((items.length - BATCH_SIZE) / 2 / COLUMNS_COUNT) * COLUMNS_COUNT
47
+ const toIndex = fromIndex + BATCH_SIZE - 1
48
+ return {
49
+ fromIndex,
50
+ toIndex,
51
+ items: items.slice(fromIndex, toIndex + 1)
52
+ }
53
+ } else {
54
+ return {
55
+ fromIndex: 0,
56
+ toIndex: items.length,
57
+ items: items
58
+ }
59
+ }
60
+ }
61
+
62
+ function onShowPrevious(items, getState, setState) {
63
+ let { fromIndex } = getState()
64
+ const { toIndex } = getState()
65
+ fromIndex = Math.max(fromIndex - BATCH_SIZE, 0)
66
+ setState({
67
+ ...getState(),
68
+ fromIndex,
69
+ items: items.slice(fromIndex, toIndex + 1)
70
+ })
71
+ }
72
+
73
+ function onShowNext(items, getState, setState) {
74
+ const { fromIndex } = getState()
75
+ let { toIndex } = getState()
76
+ toIndex = Math.min(toIndex + BATCH_SIZE, items.length - 1)
77
+ setState({
78
+ ...getState(),
79
+ toIndex,
80
+ items: items.slice(fromIndex, toIndex + 1)
81
+ })
82
+ }
83
+
84
+ function VirtualScrollerDemo() {
85
+ const [state, setState] = React.useState(getInitialState(ITEMS))
86
+
87
+ const getState = () => state
88
+
89
+ const onShowPrevious_ = () => {
90
+ onShowPrevious(ITEMS, getState, setState)
91
+ }
92
+
93
+ const onShowNext_ = () => {
94
+ onShowNext(ITEMS, getState, setState)
95
+ }
96
+
97
+ const {
98
+ fromIndex,
99
+ toIndex,
100
+ items
101
+ } = state
102
+
103
+ const {
104
+ state: {
105
+ items: itemsToRender,
106
+ firstShownItemIndex,
107
+ lastShownItemIndex
108
+ },
109
+ style,
110
+ className,
111
+ itemsContainerRef
112
+ } = VirtualScroller.useVirtualScroller({
113
+ items,
114
+ preserveScrollPositionOnPrependItems: true,
115
+ getColumnsCount
116
+ })
117
+
118
+ return (
119
+ <React.Fragment>
120
+ {window.PAGINATION && fromIndex > 0 &&
121
+ <button
122
+ type="button"
123
+ onClick={onShowPrevious_}
124
+ className="load-items-button">
125
+ Show previous
126
+ </button>
127
+ }
128
+ <div id="list" ref={itemsContainerRef} style={style} className={className}>
129
+ {itemsToRender.map((item, i) => {
130
+ if (i >= firstShownItemIndex && i <= lastShownItemIndex) {
131
+ return (
132
+ <Item key={i} item={item}/>
133
+ )
134
+ }
135
+ return null
136
+ })}
137
+ </div>
138
+ {window.PAGINATION && toIndex < ITEMS.length - 1 &&
139
+ <button
140
+ type="button"
141
+ onClick={onShowNext_}
142
+ className="load-items-button">
143
+ Show next
144
+ </button>
145
+ }
146
+ </React.Fragment>
147
+ )
148
+ }
149
+
150
+ const item = PropTypes.shape({
151
+ username: PropTypes.string.isRequired,
152
+ date: PropTypes.instanceOf(Date).isRequired,
153
+ text: PropTypes.string.isRequired
154
+ })
155
+
156
+ function Item({ item }) {
157
+ const {
158
+ username,
159
+ date,
160
+ text
161
+ } = item
162
+
163
+ return (
164
+ <article className="list-item">
165
+ <a target="_blank" href={`https://twitter.com/${username}`}>
166
+ @{username}
167
+ </a>
168
+ <time dateTime={date.toISOString()}>
169
+ {date.getMonth() + 1}/{date.getDate()}/{date.getFullYear()}
170
+ </time>
171
+ <p>
172
+ {text}
173
+ </p>
174
+ </article>
175
+ )
176
+ }
177
+
178
+ Item.propTypes = {
179
+ children: item.isRequired
180
+ }
181
+
182
+ function Demo() {
183
+ return (
184
+ <section className="container">
185
+ <h1>
186
+ <TwitterLogo/>
187
+ Latest Tweets on #politics
188
+ </h1>
189
+ <VirtualScrollerDemo/>
190
+ <footer>
191
+ © Twitter Inc., 2019
192
+ </footer>
193
+ </section>
194
+ )
195
+ }
196
+
197
+ function TwitterLogo() {
198
+ return (
199
+ <svg className="twitter-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
200
+ <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"/>
201
+ </svg>
202
+ )
203
+ }
204
+
205
+ const root = ReactDOM.createRoot(document.getElementById('root'))
206
+ root.render(<Demo/>)
207
+ </script>
208
+ </body>
209
+ </html>
package/bundle/index-react-scrollableContainer.html CHANGED
@@ -73,6 +73,7 @@
73
73
  const { toIndex } = getState()
74
74
  fromIndex = Math.max(fromIndex - BATCH_SIZE, 0)
75
75
  setState({
76
+ ...getState(),
76
77
  fromIndex,
77
78
  items: items.slice(fromIndex, toIndex + 1)
78
79
  })
@@ -83,6 +84,7 @@
83
84
  let { toIndex } = getState()
84
85
  toIndex = Math.min(toIndex + BATCH_SIZE, items.length - 1)
85
86
  setState({
87
+ ...getState(),
86
88
  toIndex,
87
89
  items: items.slice(fromIndex, toIndex + 1)
88
90
  })
@@ -92,59 +94,53 @@
92
94
  return document.getElementById('scrollable-container')
93
95
  }
94
96
 
95
- class VirtualScrollerDemo extends React.Component {
96
- constructor(props) {
97
- super(props)
97
+ function VirtualScrollerDemo() {
98
+ const [state, setState] = React.useState(getInitialState(ITEMS))
98
99
 
99
- this.state = getInitialState(ITEMS)
100
- }
101
-
102
- getState = () => this.state
100
+ const getState = () => state
103
101
 
104
- onShowPrevious = () => {
105
- onShowPrevious(ITEMS, this.getState, this.setState.bind(this))
102
+ const onShowPrevious_ = () => {
103
+ onShowPrevious(ITEMS, getState, setState)
106
104
  }
107
105
 
108
- onShowNext = () => {
109
- onShowNext(ITEMS, this.getState, this.setState.bind(this))
106
+ const onShowNext_ = () => {
107
+ onShowNext(ITEMS, getState, setState)
110
108
  }
111
109
 
112
- render() {
113
- const {
114
- fromIndex,
115
- toIndex,
116
- items
117
- } = this.state
118
-
119
- return (
120
- <div id="scrollable-container">
121
- {window.PAGINATION && fromIndex > 0 &&
122
- <button
123
- type="button"
124
- onClick={this.onShowPrevious}
125
- className="load-items-button">
126
- Show previous
127
- </button>
128
- }
129
- <VirtualScroller
130
- id="list"
131
- items={items}
132
- itemComponent={Item}
133
- preserveScrollPositionOnPrependItems
134
- getColumnsCount={getColumnsCount}
135
- getScrollableContainer={getScrollableContainer}
136
- />
137
- {window.PAGINATION && toIndex < ITEMS.length - 1 &&
138
- <button
139
- type="button"
140
- onClick={this.onShowNext}
141
- className="load-items-button">
142
- Show next
143
- </button>
144
- }
145
- </div>
146
- )
147
- }
110
+ const {
111
+ fromIndex,
112
+ toIndex,
113
+ items
114
+ } = state
115
+
116
+ return (
117
+ <div id="scrollable-container">
118
+ {window.PAGINATION && fromIndex > 0 &&
119
+ <button
120
+ type="button"
121
+ onClick={onShowPrevious_}
122
+ className="load-items-button">
123
+ Show previous
124
+ </button>
125
+ }
126
+ <VirtualScroller
127
+ id="list"
128
+ items={items}
129
+ itemComponent={Item}
130
+ preserveScrollPositionOnPrependItems
131
+ getColumnsCount={getColumnsCount}
132
+ getScrollableContainer={getScrollableContainer}
133
+ />
134
+ {window.PAGINATION && toIndex < ITEMS.length - 1 &&
135
+ <button
136
+ type="button"
137
+ onClick={onShowNext_}
138
+ className="load-items-button">
139
+ Show next
140
+ </button>
141
+ }
142
+ </div>
143
+ )
148
144
  }
149
145
 
150
146
  const item = PropTypes.shape({
@@ -181,21 +177,19 @@
181
177
  children: item.isRequired
182
178
  }
183
179
 
184
- class Demo extends React.Component {
185
- render() {
186
- return (
187
- <section className="container">
188
- <h1>
189
- <TwitterLogo/>
190
- Latest Tweets on #politics
191
- </h1>
192
- <VirtualScrollerDemo/>
193
- <footer>
194
- © Twitter Inc., 2019
195
- </footer>
196
- </section>
197
- )
198
- }
180
+ function Demo() {
181
+ return (
182
+ <section className="container">
183
+ <h1>
184
+ <TwitterLogo/>
185
+ Latest Tweets on #politics
186
+ </h1>
187
+ <VirtualScrollerDemo/>
188
+ <footer>
189
+ © Twitter Inc., 2019
190
+ </footer>
191
+ </section>
192
+ )
199
193
  }
200
194
 
201
195
  function TwitterLogo() {
package/bundle/index-react-strictMode.html CHANGED
@@ -64,6 +64,7 @@
64
64
  const { toIndex } = getState()
65
65
  fromIndex = Math.max(fromIndex - BATCH_SIZE, 0)
66
66
  setState({
67
+ ...getState(),
67
68
  fromIndex,
68
69
  items: items.slice(fromIndex, toIndex + 1)
69
70
  })
@@ -74,63 +75,58 @@
74
75
  let { toIndex } = getState()
75
76
  toIndex = Math.min(toIndex + BATCH_SIZE, items.length - 1)
76
77
  setState({
78
+ ...getState(),
77
79
  toIndex,
78
80
  items: items.slice(fromIndex, toIndex + 1)
79
81
  })
80
82
  }
81
83
 
82
- class VirtualScrollerDemo extends React.Component {
83
- constructor(props) {
84
- super(props)
84
+ function VirtualScrollerDemo() {
85
+ const [state, setState] = React.useState(getInitialState(ITEMS))
85
86
 
86
- this.state = getInitialState(ITEMS)
87
- }
88
-
89
- getState = () => this.state
87
+ const getState = () => state
90
88
 
91
- onShowPrevious = () => {
92
- onShowPrevious(ITEMS, this.getState, this.setState.bind(this))
89
+ const onShowPrevious_ = () => {
90
+ onShowPrevious(ITEMS, getState, setState)
93
91
  }
94
92
 
95
- onShowNext = () => {
96
- onShowNext(ITEMS, this.getState, this.setState.bind(this))
93
+ const onShowNext_ = () => {
94
+ onShowNext(ITEMS, getState, setState)
97
95
  }
98
96
 
99
- render() {
100
- const {
101
- fromIndex,
102
- toIndex,
103
- items
104
- } = this.state
105
-
106
- return (
107
- <React.Fragment>
108
- {window.PAGINATION && fromIndex > 0 &&
109
- <button
110
- type="button"
111
- onClick={this.onShowPrevious}
112
- className="load-items-button">
113
- Show previous
114
- </button>
115
- }
116
- <VirtualScroller
117
- id="list"
118
- items={items}
119
- itemComponent={Item}
120
- preserveScrollPositionOnPrependItems
121
- getColumnsCount={getColumnsCount}
122
- />
123
- {window.PAGINATION && toIndex < ITEMS.length - 1 &&
124
- <button
125
- type="button"
126
- onClick={this.onShowNext}
127
- className="load-items-button">
128
- Show next
129
- </button>
130
- }
131
- </React.Fragment>
132
- )
133
- }
97
+ const {
98
+ fromIndex,
99
+ toIndex,
100
+ items
101
+ } = state
102
+
103
+ return (
104
+ <React.Fragment>
105
+ {window.PAGINATION && fromIndex > 0 &&
106
+ <button
107
+ type="button"
108
+ onClick={onShowPrevious_}
109
+ className="load-items-button">
110
+ Show previous
111
+ </button>
112
+ }
113
+ <VirtualScroller
114
+ id="list"
115
+ items={items}
116
+ itemComponent={Item}
117
+ preserveScrollPositionOnPrependItems
118
+ getColumnsCount={getColumnsCount}
119
+ />
120
+ {window.PAGINATION && toIndex < ITEMS.length - 1 &&
121
+ <button
122
+ type="button"
123
+ onClick={onShowNext_}
124
+ className="load-items-button">
125
+ Show next
126
+ </button>
127
+ }
128
+ </React.Fragment>
129
+ )
134
130
  }
135
131
 
136
132
  const item = PropTypes.shape({
@@ -167,21 +163,19 @@
167
163
  children: item.isRequired
168
164
  }
169
165
 
170
- class Demo extends React.Component {
171
- render() {
172
- return (
173
- <section className="container">
174
- <h1>
175
- <TwitterLogo/>
176
- Latest Tweets on #politics
177
- </h1>
178
- <VirtualScrollerDemo/>
179
- <footer>
180
- © Twitter Inc., 2019
181
- </footer>
182
- </section>
183
- )
184
- }
166
+ function Demo() {
167
+ return (
168
+ <section className="container">
169
+ <h1>
170
+ <TwitterLogo/>
171
+ Latest Tweets on #politics
172
+ </h1>
173
+ <VirtualScrollerDemo/>
174
+ <footer>
175
+ © Twitter Inc., 2019
176
+ </footer>
177
+ </section>
178
+ )
185
179
  }
186
180
 
187
181
  function TwitterLogo() {
package/bundle/index-react-tbody-scrollableContainer.html CHANGED
@@ -72,21 +72,19 @@
72
72
  return document.getElementById('scrollable-container')
73
73
  }
74
74
 
75
- class Demo extends React.Component {
76
- render() {
77
- return (
78
- <div id="scrollable-container">
79
- <table>
80
- <VirtualScroller
81
- items={rows}
82
- itemComponent={Item}
83
- as="tbody"
84
- getScrollableContainer={getScrollableContainer}
85
- />
86
- </table>
87
- </div>
88
- )
89
- }
75
+ function Demo() {
76
+ return (
77
+ <div id="scrollable-container">
78
+ <table>
79
+ <VirtualScroller
80
+ items={rows}
81
+ itemComponent={Item}
82
+ as="tbody"
83
+ getScrollableContainer={getScrollableContainer}
84
+ />
85
+ </table>
86
+ </div>
87
+ )
90
88
  }
91
89
 
92
90
  const root = ReactDOM.createRoot(document.getElementById('root'))
package/bundle/index-react-tbody.html CHANGED
@@ -59,18 +59,16 @@
59
59
  )
60
60
  }
61
61
 
62
- class Demo extends React.Component {
63
- render() {
64
- return (
65
- <table>
66
- <VirtualScroller
67
- items={rows}
68
- itemComponent={Item}
69
- as="tbody"
70
- />
71
- </table>
72
- )
73
- }
62
+ function Demo() {
63
+ return (
64
+ <table>
65
+ <VirtualScroller
66
+ items={rows}
67
+ itemComponent={Item}
68
+ as="tbody"
69
+ />
70
+ </table>
71
+ )
74
72
  }
75
73
 
76
74
  const root = ReactDOM.createRoot(document.getElementById('root'))