react-window 2.2.1-alpha.0 → 2.2.2-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +272 -4
- package/dist/react-window.cjs +1 -1
- package/dist/react-window.cjs.map +1 -1
- package/dist/react-window.d.ts +37 -2246
- package/dist/react-window.js +1 -1
- package/dist/react-window.js.map +1 -1
- package/package.json +4 -3
package/README.md
CHANGED
|
@@ -24,12 +24,280 @@ Begin by installing the library from NPM:
|
|
|
24
24
|
npm install react-window
|
|
25
25
|
```
|
|
26
26
|
|
|
27
|
+
## TypeScript types
|
|
28
|
+
|
|
29
|
+
TypeScript definitions are included within the published `dist` folder
|
|
30
|
+
|
|
27
31
|
## Documentation
|
|
28
32
|
|
|
29
|
-
Documentation for this project is available at [react-window.vercel.app](https://react-window.vercel.app/).
|
|
33
|
+
Documentation for this project is available at [react-window.vercel.app](https://react-window.vercel.app/); version 1.x documentation can be found at [react-window-v1.vercel.app](https://react-window-v1.vercel.app/).
|
|
30
34
|
|
|
31
|
-
|
|
35
|
+
### List
|
|
32
36
|
|
|
33
|
-
|
|
37
|
+
#### Required props
|
|
34
38
|
|
|
35
|
-
|
|
39
|
+
<!-- List:required:begin -->
|
|
40
|
+
|
|
41
|
+
<table>
|
|
42
|
+
<thead>
|
|
43
|
+
<tr>
|
|
44
|
+
<th>Name</th>
|
|
45
|
+
<th>Description</th>
|
|
46
|
+
</tr>
|
|
47
|
+
</thead>
|
|
48
|
+
<tbody>
|
|
49
|
+
<tr>
|
|
50
|
+
<td>rowComponent</td>
|
|
51
|
+
<td><p>React component responsible for rendering a row.</p>
|
|
52
|
+
<p>This component will receive an <code>index</code> and <code>style</code> prop by default.
|
|
53
|
+
Additionally it will receive prop values passed to <code>rowProps</code>.</p>
|
|
54
|
+
<p>ℹ️ The prop types for this component are exported as <code>RowComponentProps</code></p>
|
|
55
|
+
</td>
|
|
56
|
+
</tr>
|
|
57
|
+
<tr>
|
|
58
|
+
<td>rowCount</td>
|
|
59
|
+
<td><p>Number of items to be rendered in the list.</p>
|
|
60
|
+
</td>
|
|
61
|
+
</tr>
|
|
62
|
+
<tr>
|
|
63
|
+
<td>rowHeight</td>
|
|
64
|
+
<td><p>Row height; the following formats are supported:</p>
|
|
65
|
+
<ul>
|
|
66
|
+
<li>number of pixels (number)</li>
|
|
67
|
+
<li>percentage of the grid's current height (string)</li>
|
|
68
|
+
<li>function that returns the row height (in pixels) given an index and <code>cellProps</code></li>
|
|
69
|
+
<li>dynamic row height cache returned by the <code>useDynamicRowHeight</code> hook</li>
|
|
70
|
+
</ul>
|
|
71
|
+
<p>⚠️ Dynamic row heights are not as efficient as predetermined sizes.
|
|
72
|
+
It's recommended to provide your own height values if they can be determined ahead of time.</p>
|
|
73
|
+
</td>
|
|
74
|
+
</tr>
|
|
75
|
+
<tr>
|
|
76
|
+
<td>rowProps</td>
|
|
77
|
+
<td><p>Additional props to be passed to the row-rendering component.
|
|
78
|
+
List will automatically re-render rows when values in this object change.</p>
|
|
79
|
+
<p>⚠️ This object must not contain <code>ariaAttributes</code>, <code>index</code>, or <code>style</code> props.</p>
|
|
80
|
+
</td>
|
|
81
|
+
</tr>
|
|
82
|
+
</tbody>
|
|
83
|
+
</table>
|
|
84
|
+
|
|
85
|
+
<!-- List:required:end -->
|
|
86
|
+
|
|
87
|
+
#### Optional props
|
|
88
|
+
|
|
89
|
+
<!-- List:optional:begin -->
|
|
90
|
+
|
|
91
|
+
<table>
|
|
92
|
+
<thead>
|
|
93
|
+
<tr>
|
|
94
|
+
<th>Name</th>
|
|
95
|
+
<th>Description</th>
|
|
96
|
+
</tr>
|
|
97
|
+
</thead>
|
|
98
|
+
<tbody>
|
|
99
|
+
<tr>
|
|
100
|
+
<td>className</td>
|
|
101
|
+
<td><p>CSS class name.</p>
|
|
102
|
+
</td>
|
|
103
|
+
</tr>
|
|
104
|
+
<tr>
|
|
105
|
+
<td>style</td>
|
|
106
|
+
<td><p>Optional CSS properties.
|
|
107
|
+
The list of rows will fill the height defined by this style.</p>
|
|
108
|
+
</td>
|
|
109
|
+
</tr>
|
|
110
|
+
<tr>
|
|
111
|
+
<td>children</td>
|
|
112
|
+
<td><p>Additional content to be rendered within the list (above cells).
|
|
113
|
+
This property can be used to render things like overlays or tooltips.</p>
|
|
114
|
+
</td>
|
|
115
|
+
</tr>
|
|
116
|
+
<tr>
|
|
117
|
+
<td>defaultHeight</td>
|
|
118
|
+
<td><p>Default height of list for initial render.
|
|
119
|
+
This value is important for server rendering.</p>
|
|
120
|
+
</td>
|
|
121
|
+
</tr>
|
|
122
|
+
<tr>
|
|
123
|
+
<td>listRef</td>
|
|
124
|
+
<td><p>Ref used to interact with this component's imperative API.</p>
|
|
125
|
+
<p>This API has imperative methods for scrolling and a getter for the outermost DOM element.</p>
|
|
126
|
+
<p>ℹ️ The <code>useListRef</code> and <code>useListCallbackRef</code> hooks are exported for convenience use in TypeScript projects.</p>
|
|
127
|
+
</td>
|
|
128
|
+
</tr>
|
|
129
|
+
<tr>
|
|
130
|
+
<td>onResize</td>
|
|
131
|
+
<td><p>Callback notified when the List's outermost HTMLElement resizes.
|
|
132
|
+
This may be used to (re)scroll a row into view.</p>
|
|
133
|
+
</td>
|
|
134
|
+
</tr>
|
|
135
|
+
<tr>
|
|
136
|
+
<td>onRowsRendered</td>
|
|
137
|
+
<td><p>Callback notified when the range of visible rows changes.</p>
|
|
138
|
+
</td>
|
|
139
|
+
</tr>
|
|
140
|
+
<tr>
|
|
141
|
+
<td>overscanCount</td>
|
|
142
|
+
<td><p>How many additional rows to render outside of the visible area.
|
|
143
|
+
This can reduce visual flickering near the edges of a list when scrolling.</p>
|
|
144
|
+
</td>
|
|
145
|
+
</tr>
|
|
146
|
+
<tr>
|
|
147
|
+
<td>tagName</td>
|
|
148
|
+
<td><p>Can be used to override the root HTML element rendered by the List component.
|
|
149
|
+
The default value is "div", meaning that List renders an HTMLDivElement as its root.</p>
|
|
150
|
+
<p>⚠️ In most use cases the default ARIA roles are sufficient and this prop is not needed.</p>
|
|
151
|
+
</td>
|
|
152
|
+
</tr>
|
|
153
|
+
</tbody>
|
|
154
|
+
</table>
|
|
155
|
+
|
|
156
|
+
<!-- List:optional:end -->
|
|
157
|
+
|
|
158
|
+
### Grid
|
|
159
|
+
|
|
160
|
+
#### Required props
|
|
161
|
+
|
|
162
|
+
<!-- Grid:required:begin -->
|
|
163
|
+
|
|
164
|
+
<table>
|
|
165
|
+
<thead>
|
|
166
|
+
<tr>
|
|
167
|
+
<th>Name</th>
|
|
168
|
+
<th>Description</th>
|
|
169
|
+
</tr>
|
|
170
|
+
</thead>
|
|
171
|
+
<tbody>
|
|
172
|
+
<tr>
|
|
173
|
+
<td>cellComponent</td>
|
|
174
|
+
<td><p>React component responsible for rendering a cell.</p>
|
|
175
|
+
<p>This component will receive an <code>index</code> and <code>style</code> prop by default.
|
|
176
|
+
Additionally it will receive prop values passed to <code>cellProps</code>.</p>
|
|
177
|
+
<p>ℹ️ The prop types for this component are exported as <code>CellComponentProps</code></p>
|
|
178
|
+
</td>
|
|
179
|
+
</tr>
|
|
180
|
+
<tr>
|
|
181
|
+
<td>cellProps</td>
|
|
182
|
+
<td><p>Additional props to be passed to the cell-rendering component.
|
|
183
|
+
Grid will automatically re-render cells when values in this object change.</p>
|
|
184
|
+
<p>⚠️ This object must not contain <code>ariaAttributes</code>, <code>columnIndex</code>, <code>rowIndex</code>, or <code>style</code> props.</p>
|
|
185
|
+
</td>
|
|
186
|
+
</tr>
|
|
187
|
+
<tr>
|
|
188
|
+
<td>columnCount</td>
|
|
189
|
+
<td><p>Number of columns to be rendered in the grid.</p>
|
|
190
|
+
</td>
|
|
191
|
+
</tr>
|
|
192
|
+
<tr>
|
|
193
|
+
<td>columnWidth</td>
|
|
194
|
+
<td><p>Column width; the following formats are supported:</p>
|
|
195
|
+
<ul>
|
|
196
|
+
<li>number of pixels (number)</li>
|
|
197
|
+
<li>percentage of the grid's current width (string)</li>
|
|
198
|
+
<li>function that returns the row width (in pixels) given an index and <code>cellProps</code></li>
|
|
199
|
+
</ul>
|
|
200
|
+
</td>
|
|
201
|
+
</tr>
|
|
202
|
+
<tr>
|
|
203
|
+
<td>rowCount</td>
|
|
204
|
+
<td><p>Number of rows to be rendered in the grid.</p>
|
|
205
|
+
</td>
|
|
206
|
+
</tr>
|
|
207
|
+
<tr>
|
|
208
|
+
<td>rowHeight</td>
|
|
209
|
+
<td><p>Row height; the following formats are supported:</p>
|
|
210
|
+
<ul>
|
|
211
|
+
<li>number of pixels (number)</li>
|
|
212
|
+
<li>percentage of the grid's current height (string)</li>
|
|
213
|
+
<li>function that returns the row height (in pixels) given an index and <code>cellProps</code></li>
|
|
214
|
+
</ul>
|
|
215
|
+
</td>
|
|
216
|
+
</tr>
|
|
217
|
+
</tbody>
|
|
218
|
+
</table>
|
|
219
|
+
|
|
220
|
+
<!-- Grid:required:end -->
|
|
221
|
+
|
|
222
|
+
#### Optional props
|
|
223
|
+
|
|
224
|
+
<!-- Grid:optional:begin -->
|
|
225
|
+
|
|
226
|
+
<table>
|
|
227
|
+
<thead>
|
|
228
|
+
<tr>
|
|
229
|
+
<th>Name</th>
|
|
230
|
+
<th>Description</th>
|
|
231
|
+
</tr>
|
|
232
|
+
</thead>
|
|
233
|
+
<tbody>
|
|
234
|
+
<tr>
|
|
235
|
+
<td>className</td>
|
|
236
|
+
<td><p>CSS class name.</p>
|
|
237
|
+
</td>
|
|
238
|
+
</tr>
|
|
239
|
+
<tr>
|
|
240
|
+
<td>dir</td>
|
|
241
|
+
<td><p>Corresponds to the HTML dir attribute:
|
|
242
|
+
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/dir">https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/dir</a></p>
|
|
243
|
+
</td>
|
|
244
|
+
</tr>
|
|
245
|
+
<tr>
|
|
246
|
+
<td>style</td>
|
|
247
|
+
<td><p>Optional CSS properties.
|
|
248
|
+
The grid of cells will fill the height and width defined by this style.</p>
|
|
249
|
+
</td>
|
|
250
|
+
</tr>
|
|
251
|
+
<tr>
|
|
252
|
+
<td>children</td>
|
|
253
|
+
<td><p>Additional content to be rendered within the grid (above cells).
|
|
254
|
+
This property can be used to render things like overlays or tooltips.</p>
|
|
255
|
+
</td>
|
|
256
|
+
</tr>
|
|
257
|
+
<tr>
|
|
258
|
+
<td>defaultHeight</td>
|
|
259
|
+
<td><p>Default height of grid for initial render.
|
|
260
|
+
This value is important for server rendering.</p>
|
|
261
|
+
</td>
|
|
262
|
+
</tr>
|
|
263
|
+
<tr>
|
|
264
|
+
<td>defaultWidth</td>
|
|
265
|
+
<td><p>Default width of grid for initial render.
|
|
266
|
+
This value is important for server rendering.</p>
|
|
267
|
+
</td>
|
|
268
|
+
</tr>
|
|
269
|
+
<tr>
|
|
270
|
+
<td>gridRef</td>
|
|
271
|
+
<td><p>Ref used to interact with this component's imperative API.</p>
|
|
272
|
+
<p>This API has imperative methods for scrolling and a getter for the outermost DOM element.</p>
|
|
273
|
+
<p>ℹ️ The <code>useGridRef</code> and <code>useGridCallbackRef</code> hooks are exported for convenience use in TypeScript projects.</p>
|
|
274
|
+
</td>
|
|
275
|
+
</tr>
|
|
276
|
+
<tr>
|
|
277
|
+
<td>onCellsRendered</td>
|
|
278
|
+
<td><p>Callback notified when the range of rendered cells changes.</p>
|
|
279
|
+
</td>
|
|
280
|
+
</tr>
|
|
281
|
+
<tr>
|
|
282
|
+
<td>onResize</td>
|
|
283
|
+
<td><p>Callback notified when the Grid's outermost HTMLElement resizes.
|
|
284
|
+
This may be used to (re)scroll a cell into view.</p>
|
|
285
|
+
</td>
|
|
286
|
+
</tr>
|
|
287
|
+
<tr>
|
|
288
|
+
<td>overscanCount</td>
|
|
289
|
+
<td><p>How many additional rows/columns to render outside of the visible area.
|
|
290
|
+
This can reduce visual flickering near the edges of a grid when scrolling.</p>
|
|
291
|
+
</td>
|
|
292
|
+
</tr>
|
|
293
|
+
<tr>
|
|
294
|
+
<td>tagName</td>
|
|
295
|
+
<td><p>Can be used to override the root HTML element rendered by the List component.
|
|
296
|
+
The default value is "div", meaning that List renders an HTMLDivElement as its root.</p>
|
|
297
|
+
<p>⚠️ In most use cases the default ARIA roles are sufficient and this prop is not needed.</p>
|
|
298
|
+
</td>
|
|
299
|
+
</tr>
|
|
300
|
+
</tbody>
|
|
301
|
+
</table>
|
|
302
|
+
|
|
303
|
+
<!-- Grid:optional:end -->
|
package/dist/react-window.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const X=require("react/jsx-runtime"),o=require("react");function ce(e){let t=e;for(;t;){if(t.dir)return t.dir==="rtl";t=t.parentElement}return!1}function ae(e,t){const[s,r]=o.useState(t==="rtl");return o.useLayoutEffect(()=>{e&&(t||r(ce(e)))},[t,e]),s}const F=typeof window<"u"?o.useLayoutEffect:o.useEffect;function P(e){if(e!==void 0)switch(typeof e){case"number":return e;case"string":{if(e.endsWith("px"))return parseFloat(e);break}}}function ue({box:e,defaultHeight:t,defaultWidth:s,disabled:r,element:n,mode:i,style:l}){const{styleHeight:f,styleWidth:c}=o.useMemo(()=>({styleHeight:P(l?.height),styleWidth:P(l?.width)}),[l?.height,l?.width]),[a,d]=o.useState({height:t,width:s}),u=r||i==="only-height"&&f!==void 0||i==="only-width"&&c!==void 0||f!==void 0&&c!==void 0;return F(()=>{if(n===null||u)return;const h=new ResizeObserver(v=>{for(const y of v){const{contentRect:I,target:x}=y;n===x&&d(w=>w.height===I.height&&w.width===I.width?w:{height:I.height,width:I.width})}});return h.observe(n,{box:e}),()=>{h?.unobserve(n)}},[e,u,n,f,c]),o.useMemo(()=>({height:f??a.height,width:c??a.width}),[a,f,c])}function te(e){const t=o.useRef(()=>{throw new Error("Cannot call during render.")});return F(()=>{t.current=e},[e]),o.useCallback(s=>t.current?.(s),[t])}let G=null;function fe(e=!1){if(G===null||e){const t=document.createElement("div"),s=t.style;s.width="50px",s.height="50px",s.overflow="scroll",s.direction="rtl";const r=document.createElement("div"),n=r.style;return n.width="100px",n.height="100px",t.appendChild(r),document.body.appendChild(t),t.scrollLeft>0?G="positive-descending":(t.scrollLeft=1,t.scrollLeft===0?G="negative":G="positive-ascending"),document.body.removeChild(t),G}return G}function N({containerElement:e,direction:t,isRtl:s,scrollOffset:r}){if(t==="horizontal"&&s)switch(fe()){case"negative":return-r;case"positive-descending":{if(e){const{clientWidth:n,scrollLeft:i,scrollWidth:l}=e;return l-n-i}break}}return r}function H(e,t="Assertion error"){if(!e)throw console.error(t),Error(t)}function q(e,t){if(e===t)return!0;if(!!e!=!!t||(H(e!==void 0),H(t!==void 0),Object.keys(e).length!==Object.keys(t).length))return!1;for(const s in e)if(!Object.is(t[s],e[s]))return!1;return!0}function se({cachedBounds:e,itemCount:t,itemSize:s}){if(t===0)return 0;if(typeof s=="number")return t*s;{const r=e.get(e.size===0?0:e.size-1);H(r!==void 0,"Unexpected bounds cache miss");const n=(r.scrollOffset+r.size)/e.size;return t*n}}function de({align:e,cachedBounds:t,index:s,itemCount:r,itemSize:n,containerScrollOffset:i,containerSize:l}){const f=se({cachedBounds:t,itemCount:r,itemSize:n}),c=t.get(s),a=Math.max(0,Math.min(f-l,c.scrollOffset)),d=Math.max(0,c.scrollOffset-l+c.size);switch(e==="smart"&&(i>=d&&i<=a?e="auto":e="center"),e){case"start":return a;case"end":return d;case"center":return c.scrollOffset<=l/2?0:c.scrollOffset+c.size/2>=f-l/2?f-l:c.scrollOffset+c.size/2-l/2;case"auto":default:return i>=d&&i<=a?i:i<d?d:a}}function ee({cachedBounds:e,containerScrollOffset:t,containerSize:s,itemCount:r,overscanCount:n}){const i=r-1;let l=0,f=-1,c=0,a=-1,d=0;for(;d<i;){const u=e.get(d);if(u.scrollOffset+u.size>t)break;d++}for(l=d,c=Math.max(0,l-n);d<i;){const u=e.get(d);if(u.scrollOffset+u.size>=t+s)break;d++}return f=Math.min(i,d),a=Math.min(r-1,f+n),l<0&&(l=0,f=-1,c=0,a=-1),{startIndexVisible:l,stopIndexVisible:f,startIndexOverscan:c,stopIndexOverscan:a}}function he({itemCount:e,itemProps:t,itemSize:s}){const r=new Map;return{get(n){for(H(n<e,`Invalid index ${n}`);r.size-1<n;){const l=r.size;let f;switch(typeof s){case"function":{f=s(l,t);break}case"number":{f=s;break}}if(l===0)r.set(l,{size:f,scrollOffset:0});else{const c=r.get(l-1);H(c!==void 0,`Unexpected bounds cache miss for index ${n}`),r.set(l,{scrollOffset:c.scrollOffset+c.size,size:f})}}const i=r.get(n);return H(i!==void 0,`Unexpected bounds cache miss for index ${n}`),i},set(n,i){r.set(n,i)},get size(){return r.size}}}function ge({itemCount:e,itemProps:t,itemSize:s}){return o.useMemo(()=>he({itemCount:e,itemProps:t,itemSize:s}),[e,t,s])}function pe({containerSize:e,itemSize:t}){let s;switch(typeof t){case"string":{H(t.endsWith("%"),`Invalid item size: "${t}"; string values must be percentages (e.g. "100%")`),H(e!==void 0,"Container size must be defined if a percentage item size is specified"),s=e*parseInt(t)/100;break}default:{s=t;break}}return s}function J({containerElement:e,containerStyle:t,defaultContainerSize:s=0,direction:r,isRtl:n=!1,itemCount:i,itemProps:l,itemSize:f,onResize:c,overscanCount:a}){const[d,u]=o.useState({startIndexVisible:0,startIndexOverscan:0,stopIndexVisible:-1,stopIndexOverscan:-1}),{startIndexVisible:h,startIndexOverscan:v,stopIndexVisible:y,stopIndexOverscan:I}={startIndexVisible:Math.min(i-1,d.startIndexVisible),startIndexOverscan:Math.min(i-1,d.startIndexOverscan),stopIndexVisible:Math.min(i-1,d.stopIndexVisible),stopIndexOverscan:Math.min(i-1,d.stopIndexOverscan)},{height:x=s,width:w=s}=ue({defaultHeight:r==="vertical"?s:void 0,defaultWidth:r==="horizontal"?s:void 0,element:e,mode:r==="vertical"?"only-height":"only-width",style:t}),S=o.useRef({height:0,width:0}),M=r==="vertical"?x:w,g=pe({containerSize:M,itemSize:f});o.useLayoutEffect(()=>{if(typeof c=="function"){const p=S.current;(p.height!==x||p.width!==w)&&(c({height:x,width:w},{...p}),p.height=x,p.width=w)}},[x,c,w]);const z=ge({itemCount:i,itemProps:l,itemSize:g}),V=o.useCallback(p=>z.get(p),[z]),T=o.useCallback(()=>se({cachedBounds:z,itemCount:i,itemSize:g}),[z,i,g]),$=o.useCallback(p=>{const E=N({containerElement:e,direction:r,isRtl:n,scrollOffset:p});return ee({cachedBounds:z,containerScrollOffset:E,containerSize:M,itemCount:i,overscanCount:a})},[z,e,M,r,n,i,a]);F(()=>{const p=(r==="vertical"?e?.scrollTop:e?.scrollLeft)??0;u($(p))},[e,r,$]),F(()=>{if(!e)return;const p=()=>{u(E=>{const{scrollLeft:k,scrollTop:m}=e,b=N({containerElement:e,direction:r,isRtl:n,scrollOffset:r==="vertical"?m:k}),L=ee({cachedBounds:z,containerScrollOffset:b,containerSize:M,itemCount:i,overscanCount:a});return q(L,E)?E:L})};return e.addEventListener("scroll",p),()=>{e.removeEventListener("scroll",p)}},[z,e,M,r,i,a]);const O=te(({align:p="auto",containerScrollOffset:E,index:k})=>{let m=de({align:p,cachedBounds:z,containerScrollOffset:E,containerSize:M,index:k,itemCount:i,itemSize:g});if(e){if(m=N({containerElement:e,direction:r,isRtl:n,scrollOffset:m}),typeof e.scrollTo!="function"){const b=$(m);q(d,b)||u(b)}return m}});return{getCellBounds:V,getEstimatedSize:T,scrollToIndex:O,startIndexOverscan:v,startIndexVisible:h,stopIndexOverscan:I,stopIndexVisible:y}}function re(e){return o.useMemo(()=>e,Object.values(e))}function ne(e,t){const{ariaAttributes:s,style:r,...n}=e,{ariaAttributes:i,style:l,...f}=t;return q(s,i)&&q(r,l)&&q(n,f)}function xe({cellComponent:e,cellProps:t,children:s,className:r,columnCount:n,columnWidth:i,defaultHeight:l=0,defaultWidth:f=0,dir:c,gridRef:a,onCellsRendered:d,onResize:u,overscanCount:h=3,rowCount:v,rowHeight:y,style:I,tagName:x="div",...w}){const S=re(t),M=o.useMemo(()=>o.memo(e,ne),[e]),[g,z]=o.useState(null),V=ae(g,c),{getCellBounds:T,getEstimatedSize:$,startIndexOverscan:O,startIndexVisible:p,scrollToIndex:E,stopIndexOverscan:k,stopIndexVisible:m}=J({containerElement:g,containerStyle:I,defaultContainerSize:f,direction:"horizontal",isRtl:V,itemCount:n,itemProps:S,itemSize:i,onResize:u,overscanCount:h}),{getCellBounds:b,getEstimatedSize:L,startIndexOverscan:A,startIndexVisible:Q,scrollToIndex:_,stopIndexOverscan:C,stopIndexVisible:Z}=J({containerElement:g,containerStyle:I,defaultContainerSize:l,direction:"vertical",itemCount:v,itemProps:S,itemSize:y,onResize:u,overscanCount:h});o.useImperativeHandle(a,()=>({get element(){return g},scrollToCell({behavior:j="auto",columnAlign:R="auto",columnIndex:W,rowAlign:B="auto",rowIndex:D}){const U=E({align:R,containerScrollOffset:g?.scrollLeft??0,index:W}),le=_({align:B,containerScrollOffset:g?.scrollTop??0,index:D});typeof g?.scrollTo=="function"&&g.scrollTo({behavior:j,left:U,top:le})},scrollToColumn({align:j="auto",behavior:R="auto",index:W}){const B=E({align:j,containerScrollOffset:g?.scrollLeft??0,index:W});typeof g?.scrollTo=="function"&&g.scrollTo({behavior:R,left:B})},scrollToRow({align:j="auto",behavior:R="auto",index:W}){const B=_({align:j,containerScrollOffset:g?.scrollTop??0,index:W});typeof g?.scrollTo=="function"&&g.scrollTo({behavior:R,top:B})}}),[g,E,_]),o.useEffect(()=>{O>=0&&k>=0&&A>=0&&C>=0&&d&&d({columnStartIndex:p,columnStopIndex:m,rowStartIndex:Q,rowStopIndex:Z},{columnStartIndex:O,columnStopIndex:k,rowStartIndex:A,rowStopIndex:C})},[d,O,p,k,m,A,Q,C,Z]);const oe=o.useMemo(()=>{const j=[];if(n>0&&v>0)for(let R=A;R<=C;R++){const W=b(R),B=[];for(let D=O;D<=k;D++){const U=T(D);B.push(o.createElement(M,{...S,ariaAttributes:{"aria-colindex":D+1,role:"gridcell"},columnIndex:D,key:D,rowIndex:R,style:{position:"absolute",left:V?void 0:0,right:V?0:void 0,transform:`translate(${V?-U.scrollOffset:U.scrollOffset}px, ${W.scrollOffset}px)`,height:W.size,width:U.size}}))}j.push(X.jsx("div",{role:"row","aria-rowindex":R+1,children:B},R))}return j},[M,S,n,O,k,T,b,V,v,A,C]),ie=X.jsx("div",{"aria-hidden":!0,style:{height:L(),width:$(),zIndex:-1}});return o.createElement(x,{"aria-colcount":n,"aria-rowcount":v,role:"grid",...w,className:r,dir:c,ref:z,style:{position:"relative",width:"100%",height:"100%",maxHeight:"100%",maxWidth:"100%",flexGrow:1,overflow:"auto",...I}},oe,s,ie)}const be=o.useState,me=o.useRef;function ve(e){return e!=null&&typeof e=="object"&&"getAverageRowHeight"in e&&typeof e.getAverageRowHeight=="function"}const K="data-react-window-index";function Ie({children:e,className:t,defaultHeight:s=0,listRef:r,onResize:n,onRowsRendered:i,overscanCount:l=3,rowComponent:f,rowCount:c,rowHeight:a,rowProps:d,tagName:u="div",style:h,...v}){const y=re(d),I=o.useMemo(()=>o.memo(f,ne),[f]),[x,w]=o.useState(null),S=ve(a),M=o.useMemo(()=>S?m=>a.getRowHeight(m)??a.getAverageRowHeight():a,[S,a]),{getCellBounds:g,getEstimatedSize:z,scrollToIndex:V,startIndexOverscan:T,startIndexVisible:$,stopIndexOverscan:O,stopIndexVisible:p}=J({containerElement:x,containerStyle:h,defaultContainerSize:s,direction:"vertical",itemCount:c,itemProps:y,itemSize:M,onResize:n,overscanCount:l});o.useImperativeHandle(r,()=>({get element(){return x},scrollToRow({align:m="auto",behavior:b="auto",index:L}){const A=V({align:m,containerScrollOffset:x?.scrollTop??0,index:L});typeof x?.scrollTo=="function"&&x.scrollTo({behavior:b,top:A})}}),[x,V]),F(()=>{if(!x)return;const m=Array.from(x.children).filter((b,L)=>{if(b.hasAttribute("aria-hidden"))return!1;const A=`${T+L}`;return b.setAttribute(K,A),!0});if(S)return a.observeRowElements(m)},[x,S,a,T,O]),o.useEffect(()=>{T>=0&&O>=0&&i&&i({startIndex:$,stopIndex:p},{startIndex:T,stopIndex:O})},[i,T,$,O,p]);const E=o.useMemo(()=>{const m=[];if(c>0)for(let b=T;b<=O;b++){const L=g(b);m.push(o.createElement(I,{...y,ariaAttributes:{"aria-posinset":b+1,"aria-setsize":c,role:"listitem"},key:b,index:b,style:{position:"absolute",left:0,transform:`translateY(${L.scrollOffset}px)`,height:S?void 0:L.size,width:"100%"}}))}return m},[I,g,S,c,y,T,O]),k=X.jsx("div",{"aria-hidden":!0,style:{height:z(),width:"100%",zIndex:-1}});return o.createElement(u,{role:"list",...v,className:t,ref:w,style:{position:"relative",maxHeight:"100%",flexGrow:1,overflowY:"auto",...h}},E,e,k)}function we({defaultRowHeight:e,key:t}){const[s,r]=o.useState({key:t,map:new Map});s.key!==t&&r({key:t,map:new Map});const{map:n}=s,i=o.useCallback(()=>{let u=0;return n.forEach(h=>{u+=h}),u===0?e:Math.round(u/n.size)},[e,n]),l=o.useCallback(u=>{const h=n.get(u);return h!==void 0?h:(n.set(u,e),e)},[e,n]),f=o.useCallback((u,h)=>{r(v=>{if(v.map.get(u)===h)return v;const y=new Map(v.map);return y.set(u,h),{...v,map:y}})},[]),c=te(u=>{u.length!==0&&u.forEach(h=>{const{borderBoxSize:v,target:y}=h,I=y.getAttribute(K);H(I!==null,`Invalid ${K} attribute value`);const x=parseInt(I),{blockSize:w}=v[0];w&&f(x,w)})}),[a]=o.useState(()=>new ResizeObserver(c));o.useEffect(()=>()=>{a.disconnect()},[a]);const d=o.useCallback(u=>(u.forEach(h=>a.observe(h)),()=>{u.forEach(h=>a.unobserve(h))}),[a]);return o.useMemo(()=>({getAverageRowHeight:i,getRowHeight:l,setRowHeight:f,observeRowElements:d}),[i,l,f,d])}const ye=o.useState,Oe=o.useRef;let Y=-1;function Se(e=!1){if(Y===-1||e){const t=document.createElement("div"),s=t.style;s.width="50px",s.height="50px",s.overflow="scroll",document.body.appendChild(t),Y=t.offsetWidth-t.clientWidth,document.body.removeChild(t)}return Y}exports.Grid=xe;exports.List=Ie;exports.getScrollbarSize=Se;exports.useDynamicRowHeight=we;exports.useGridCallbackRef=be;exports.useGridRef=me;exports.useListCallbackRef=ye;exports.useListRef=Oe;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const X=require("react/jsx-runtime"),o=require("react");function ce(e){let t=e;for(;t;){if(t.dir)return t.dir==="rtl";t=t.parentElement}return!1}function ae(e,t){const[s,r]=o.useState(t==="rtl");return o.useLayoutEffect(()=>{e&&(t||r(ce(e)))},[t,e]),s}const F=typeof window<"u"?o.useLayoutEffect:o.useEffect;function P(e){if(e!==void 0)switch(typeof e){case"number":return e;case"string":{if(e.endsWith("px"))return parseFloat(e);break}}}function ue({box:e,defaultHeight:t,defaultWidth:s,disabled:r,element:n,mode:i,style:l}){const{styleHeight:f,styleWidth:c}=o.useMemo(()=>({styleHeight:P(l?.height),styleWidth:P(l?.width)}),[l?.height,l?.width]),[a,d]=o.useState({height:t,width:s}),u=r||i==="only-height"&&f!==void 0||i==="only-width"&&c!==void 0||f!==void 0&&c!==void 0;return F(()=>{if(n===null||u)return;const h=new ResizeObserver(v=>{for(const y of v){const{contentRect:I,target:x}=y;n===x&&d(w=>w.height===I.height&&w.width===I.width?w:{height:I.height,width:I.width})}});return h.observe(n,{box:e}),()=>{h?.unobserve(n)}},[e,u,n,f,c]),o.useMemo(()=>({height:f??a.height,width:c??a.width}),[a,f,c])}function te(e){const t=o.useRef(()=>{throw new Error("Cannot call during render.")});return F(()=>{t.current=e},[e]),o.useCallback(s=>t.current?.(s),[t])}let G=null;function fe(e=!1){if(G===null||e){const t=document.createElement("div"),s=t.style;s.width="50px",s.height="50px",s.overflow="scroll",s.direction="rtl";const r=document.createElement("div"),n=r.style;return n.width="100px",n.height="100px",t.appendChild(r),document.body.appendChild(t),t.scrollLeft>0?G="positive-descending":(t.scrollLeft=1,t.scrollLeft===0?G="negative":G="positive-ascending"),document.body.removeChild(t),G}return G}function N({containerElement:e,direction:t,isRtl:s,scrollOffset:r}){if(t==="horizontal"&&s)switch(fe()){case"negative":return-r;case"positive-descending":{if(e){const{clientWidth:n,scrollLeft:i,scrollWidth:l}=e;return l-n-i}break}}return r}function H(e,t="Assertion error"){if(!e)throw console.error(t),Error(t)}function q(e,t){if(e===t)return!0;if(!!e!=!!t||(H(e!==void 0),H(t!==void 0),Object.keys(e).length!==Object.keys(t).length))return!1;for(const s in e)if(!Object.is(t[s],e[s]))return!1;return!0}function se({cachedBounds:e,itemCount:t,itemSize:s}){if(t===0)return 0;if(typeof s=="number")return t*s;{const r=e.get(e.size===0?0:e.size-1);H(r!==void 0,"Unexpected bounds cache miss");const n=(r.scrollOffset+r.size)/e.size;return t*n}}function de({align:e,cachedBounds:t,index:s,itemCount:r,itemSize:n,containerScrollOffset:i,containerSize:l}){const f=se({cachedBounds:t,itemCount:r,itemSize:n}),c=t.get(s),a=Math.max(0,Math.min(f-l,c.scrollOffset)),d=Math.max(0,c.scrollOffset-l+c.size);switch(e==="smart"&&(i>=d&&i<=a?e="auto":e="center"),e){case"start":return a;case"end":return d;case"center":return c.scrollOffset<=l/2?0:c.scrollOffset+c.size/2>=f-l/2?f-l:c.scrollOffset+c.size/2-l/2;case"auto":default:return i>=d&&i<=a?i:i<d?d:a}}function ee({cachedBounds:e,containerScrollOffset:t,containerSize:s,itemCount:r,overscanCount:n}){const i=r-1;let l=0,f=-1,c=0,a=-1,d=0;for(;d<i;){const u=e.get(d);if(u.scrollOffset+u.size>t)break;d++}for(l=d,c=Math.max(0,l-n);d<i;){const u=e.get(d);if(u.scrollOffset+u.size>=t+s)break;d++}return f=Math.min(i,d),a=Math.min(r-1,f+n),l<0&&(l=0,f=-1,c=0,a=-1),{startIndexVisible:l,stopIndexVisible:f,startIndexOverscan:c,stopIndexOverscan:a}}function he({itemCount:e,itemProps:t,itemSize:s}){const r=new Map;return{get(n){for(H(n<e,`Invalid index ${n}`);r.size-1<n;){const l=r.size;let f;switch(typeof s){case"function":{f=s(l,t);break}case"number":{f=s;break}}if(l===0)r.set(l,{size:f,scrollOffset:0});else{const c=r.get(l-1);H(c!==void 0,`Unexpected bounds cache miss for index ${n}`),r.set(l,{scrollOffset:c.scrollOffset+c.size,size:f})}}const i=r.get(n);return H(i!==void 0,`Unexpected bounds cache miss for index ${n}`),i},set(n,i){r.set(n,i)},get size(){return r.size}}}function ge({itemCount:e,itemProps:t,itemSize:s}){return o.useMemo(()=>he({itemCount:e,itemProps:t,itemSize:s}),[e,t,s])}function pe({containerSize:e,itemSize:t}){let s;switch(typeof t){case"string":{H(t.endsWith("%"),`Invalid item size: "${t}"; string values must be percentages (e.g. "100%")`),H(e!==void 0,"Container size must be defined if a percentage item size is specified"),s=e*parseInt(t)/100;break}default:{s=t;break}}return s}function J({containerElement:e,containerStyle:t,defaultContainerSize:s=0,direction:r,isRtl:n=!1,itemCount:i,itemProps:l,itemSize:f,onResize:c,overscanCount:a}){const[d,u]=o.useState({startIndexVisible:0,startIndexOverscan:0,stopIndexVisible:-1,stopIndexOverscan:-1}),{startIndexVisible:h,startIndexOverscan:v,stopIndexVisible:y,stopIndexOverscan:I}={startIndexVisible:Math.min(i-1,d.startIndexVisible),startIndexOverscan:Math.min(i-1,d.startIndexOverscan),stopIndexVisible:Math.min(i-1,d.stopIndexVisible),stopIndexOverscan:Math.min(i-1,d.stopIndexOverscan)},{height:x=s,width:w=s}=ue({defaultHeight:r==="vertical"?s:void 0,defaultWidth:r==="horizontal"?s:void 0,element:e,mode:r==="vertical"?"only-height":"only-width",style:t}),S=o.useRef({height:0,width:0}),k=r==="vertical"?x:w,g=pe({containerSize:k,itemSize:f});o.useLayoutEffect(()=>{if(typeof c=="function"){const p=S.current;(p.height!==x||p.width!==w)&&(c({height:x,width:w},{...p}),p.height=x,p.width=w)}},[x,c,w]);const z=ge({itemCount:i,itemProps:l,itemSize:g}),V=o.useCallback(p=>z.get(p),[z]),T=o.useCallback(()=>se({cachedBounds:z,itemCount:i,itemSize:g}),[z,i,g]),$=o.useCallback(p=>{const E=N({containerElement:e,direction:r,isRtl:n,scrollOffset:p});return ee({cachedBounds:z,containerScrollOffset:E,containerSize:k,itemCount:i,overscanCount:a})},[z,e,k,r,n,i,a]);F(()=>{const p=(r==="vertical"?e?.scrollTop:e?.scrollLeft)??0;u($(p))},[e,r,$]),F(()=>{if(!e)return;const p=()=>{u(E=>{const{scrollLeft:M,scrollTop:m}=e,b=N({containerElement:e,direction:r,isRtl:n,scrollOffset:r==="vertical"?m:M}),L=ee({cachedBounds:z,containerScrollOffset:b,containerSize:k,itemCount:i,overscanCount:a});return q(L,E)?E:L})};return e.addEventListener("scroll",p),()=>{e.removeEventListener("scroll",p)}},[z,e,k,r,i,a]);const O=te(({align:p="auto",containerScrollOffset:E,index:M})=>{let m=de({align:p,cachedBounds:z,containerScrollOffset:E,containerSize:k,index:M,itemCount:i,itemSize:g});if(e){if(m=N({containerElement:e,direction:r,isRtl:n,scrollOffset:m}),typeof e.scrollTo!="function"){const b=$(m);q(d,b)||u(b)}return m}});return{getCellBounds:V,getEstimatedSize:T,scrollToIndex:O,startIndexOverscan:v,startIndexVisible:h,stopIndexOverscan:I,stopIndexVisible:y}}function re(e){return o.useMemo(()=>e,Object.values(e))}function ne(e,t){const{ariaAttributes:s,style:r,...n}=e,{ariaAttributes:i,style:l,...f}=t;return q(s,i)&&q(r,l)&&q(n,f)}function xe({cellComponent:e,cellProps:t,children:s,className:r,columnCount:n,columnWidth:i,defaultHeight:l=0,defaultWidth:f=0,dir:c,gridRef:a,onCellsRendered:d,onResize:u,overscanCount:h=3,rowCount:v,rowHeight:y,style:I,tagName:x="div",...w}){const S=re(t),k=o.useMemo(()=>o.memo(e,ne),[e]),[g,z]=o.useState(null),V=ae(g,c),{getCellBounds:T,getEstimatedSize:$,startIndexOverscan:O,startIndexVisible:p,scrollToIndex:E,stopIndexOverscan:M,stopIndexVisible:m}=J({containerElement:g,containerStyle:I,defaultContainerSize:f,direction:"horizontal",isRtl:V,itemCount:n,itemProps:S,itemSize:i,onResize:u,overscanCount:h}),{getCellBounds:b,getEstimatedSize:L,startIndexOverscan:A,startIndexVisible:Q,scrollToIndex:_,stopIndexOverscan:C,stopIndexVisible:Z}=J({containerElement:g,containerStyle:I,defaultContainerSize:l,direction:"vertical",itemCount:v,itemProps:S,itemSize:y,onResize:u,overscanCount:h});o.useImperativeHandle(a,()=>({get element(){return g},scrollToCell({behavior:j="auto",columnAlign:R="auto",columnIndex:W,rowAlign:B="auto",rowIndex:D}){const U=E({align:R,containerScrollOffset:g?.scrollLeft??0,index:W}),le=_({align:B,containerScrollOffset:g?.scrollTop??0,index:D});typeof g?.scrollTo=="function"&&g.scrollTo({behavior:j,left:U,top:le})},scrollToColumn({align:j="auto",behavior:R="auto",index:W}){const B=E({align:j,containerScrollOffset:g?.scrollLeft??0,index:W});typeof g?.scrollTo=="function"&&g.scrollTo({behavior:R,left:B})},scrollToRow({align:j="auto",behavior:R="auto",index:W}){const B=_({align:j,containerScrollOffset:g?.scrollTop??0,index:W});typeof g?.scrollTo=="function"&&g.scrollTo({behavior:R,top:B})}}),[g,E,_]),o.useEffect(()=>{O>=0&&M>=0&&A>=0&&C>=0&&d&&d({columnStartIndex:p,columnStopIndex:m,rowStartIndex:Q,rowStopIndex:Z},{columnStartIndex:O,columnStopIndex:M,rowStartIndex:A,rowStopIndex:C})},[d,O,p,M,m,A,Q,C,Z]);const oe=o.useMemo(()=>{const j=[];if(n>0&&v>0)for(let R=A;R<=C;R++){const W=b(R),B=[];for(let D=O;D<=M;D++){const U=T(D);B.push(o.createElement(k,{...S,ariaAttributes:{"aria-colindex":D+1,role:"gridcell"},columnIndex:D,key:D,rowIndex:R,style:{position:"absolute",left:V?void 0:0,right:V?0:void 0,transform:`translate(${V?-U.scrollOffset:U.scrollOffset}px, ${W.scrollOffset}px)`,height:W.size,width:U.size}}))}j.push(X.jsx("div",{role:"row","aria-rowindex":R+1,children:B},R))}return j},[k,S,n,O,M,T,b,V,v,A,C]),ie=X.jsx("div",{"aria-hidden":!0,style:{height:L(),width:$(),zIndex:-1}});return o.createElement(x,{"aria-colcount":n,"aria-rowcount":v,role:"grid",...w,className:r,dir:c,ref:z,style:{position:"relative",width:"100%",height:"100%",maxHeight:"100%",maxWidth:"100%",flexGrow:1,overflow:"auto",...I}},oe,s,ie)}const be=o.useState,me=o.useRef;function ve(e){return e!=null&&typeof e=="object"&&"getAverageRowHeight"in e&&typeof e.getAverageRowHeight=="function"}const K="data-react-window-index";function Ie({children:e,className:t,defaultHeight:s=0,listRef:r,onResize:n,onRowsRendered:i,overscanCount:l=3,rowComponent:f,rowCount:c,rowHeight:a,rowProps:d,tagName:u="div",style:h,...v}){const y=re(d),I=o.useMemo(()=>o.memo(f,ne),[f]),[x,w]=o.useState(null),S=ve(a),k=o.useMemo(()=>S?m=>a.getRowHeight(m)??a.getAverageRowHeight():a,[S,a]),{getCellBounds:g,getEstimatedSize:z,scrollToIndex:V,startIndexOverscan:T,startIndexVisible:$,stopIndexOverscan:O,stopIndexVisible:p}=J({containerElement:x,containerStyle:h,defaultContainerSize:s,direction:"vertical",itemCount:c,itemProps:y,itemSize:k,onResize:n,overscanCount:l});o.useImperativeHandle(r,()=>({get element(){return x},scrollToRow({align:m="auto",behavior:b="auto",index:L}){const A=V({align:m,containerScrollOffset:x?.scrollTop??0,index:L});typeof x?.scrollTo=="function"&&x.scrollTo({behavior:b,top:A})}}),[x,V]),F(()=>{if(!x)return;const m=Array.from(x.children).filter((b,L)=>{if(b.hasAttribute("aria-hidden"))return!1;const A=`${T+L}`;return b.setAttribute(K,A),!0});if(S)return a.observeRowElements(m)},[x,S,a,T,O]),o.useEffect(()=>{T>=0&&O>=0&&i&&i({startIndex:$,stopIndex:p},{startIndex:T,stopIndex:O})},[i,T,$,O,p]);const E=o.useMemo(()=>{const m=[];if(c>0)for(let b=T;b<=O;b++){const L=g(b);m.push(o.createElement(I,{...y,ariaAttributes:{"aria-posinset":b+1,"aria-setsize":c,role:"listitem"},key:b,index:b,style:{position:"absolute",left:0,transform:`translateY(${L.scrollOffset}px)`,height:S?void 0:L.size,width:"100%"}}))}return m},[I,g,S,c,y,T,O]),M=X.jsx("div",{"aria-hidden":!0,style:{height:z(),width:"100%",zIndex:-1}});return o.createElement(u,{role:"list",...v,className:t,ref:w,style:{position:"relative",maxHeight:"100%",flexGrow:1,overflowY:"auto",...h}},E,e,M)}function we({defaultRowHeight:e,key:t}){const[s,r]=o.useState({key:t,map:new Map});s.key!==t&&r({key:t,map:new Map});const{map:n}=s,i=o.useCallback(()=>{let u=0;return n.forEach(h=>{u+=h}),u===0?e:u/n.size},[e,n]),l=o.useCallback(u=>{const h=n.get(u);return h!==void 0?h:(n.set(u,e),e)},[e,n]),f=o.useCallback((u,h)=>{r(v=>{if(v.map.get(u)===h)return v;const y=new Map(v.map);return y.set(u,h),{...v,map:y}})},[]),c=te(u=>{u.length!==0&&u.forEach(h=>{const{borderBoxSize:v,target:y}=h,I=y.getAttribute(K);H(I!==null,`Invalid ${K} attribute value`);const x=parseInt(I),{blockSize:w}=v[0];w&&f(x,w)})}),[a]=o.useState(()=>new ResizeObserver(c));o.useEffect(()=>()=>{a.disconnect()},[a]);const d=o.useCallback(u=>(u.forEach(h=>a.observe(h)),()=>{u.forEach(h=>a.unobserve(h))}),[a]);return o.useMemo(()=>({getAverageRowHeight:i,getRowHeight:l,setRowHeight:f,observeRowElements:d}),[i,l,f,d])}const ye=o.useState,Oe=o.useRef;let Y=-1;function Se(e=!1){if(Y===-1||e){const t=document.createElement("div"),s=t.style;s.width="50px",s.height="50px",s.overflow="scroll",document.body.appendChild(t),Y=t.offsetWidth-t.clientWidth,document.body.removeChild(t)}return Y}exports.Grid=xe;exports.List=Ie;exports.getScrollbarSize=Se;exports.useDynamicRowHeight=we;exports.useGridCallbackRef=be;exports.useGridRef=me;exports.useListCallbackRef=ye;exports.useListRef=Oe;
|
|
2
2
|
//# sourceMappingURL=react-window.cjs.map
|