virtua 0.17.5 → 0.18.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 +66 -34
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib/index.mjs +1 -1
- package/lib/index.mjs.map +1 -1
- package/lib/react/VList.d.ts +2 -2
- package/lib/react/WVList.d.ts +1 -1
- package/lib/vue/ListItem.d.ts +1 -0
- package/lib/vue/VList.d.ts +120 -0
- package/lib/vue/index.d.ts +1 -0
- package/lib/vue/index.js +2 -0
- package/lib/vue/index.js.map +1 -0
- package/lib/vue/index.mjs +2 -0
- package/lib/vue/index.mjs.map +1 -0
- package/package.json +43 -19
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
   [](https://github.com/inokawa/virtua/actions/workflows/check.yml) [](https://github.com/inokawa/virtua/actions/workflows/demo.yml)
|
|
4
4
|
|
|
5
|
-
> A zero-config, fast and small (~3kB) virtual list (and grid) component for [React](https://github.com/facebook/react).
|
|
5
|
+
> A zero-config, fast and small (~3kB) virtual list (and grid) component for [React](https://github.com/facebook/react) and [Vue](https://vuejs.org/).
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
@@ -14,9 +14,9 @@ This project is a challenge to rethink virtualization. The goals are...
|
|
|
14
14
|
|
|
15
15
|
- **Zero-config virtualization:** This library is designed to give the best performance without configuration. It also handles common hard things in the real world (dynamic size measurement, scroll position adjustment while reverse scrolling and imperative scrolling, iOS support, etc).
|
|
16
16
|
- **Fast:** Natural virtual scrolling needs optimization in many aspects (eliminate frame drops by reducing CPU usage and GC and [layout recalculation](https://gist.github.com/paulirish/5d52fb081b3570c81e3a), reduce visual jumps on repaint, optimize with CSS, optimize for frameworks, etc). We are trying to combine the best of them.
|
|
17
|
-
- **Small:** Its bundle size should be small as much as possible to be friendly with modern web development. Currently each components are ~3kB gzipped
|
|
17
|
+
- **Small:** Its bundle size should be small as much as possible to be friendly with modern web development. Currently each components are ~3kB gzipped. The total is [~5kB gzipped](https://bundlephobia.com/package/virtua) and tree-shakeable.
|
|
18
18
|
- **Flexible:** Aiming to support many usecases - fixed size, dynamic size, horizontal scrolling, reverse scrolling, RTL, mobile, infinite scrolling, scroll restoration, DnD, keyboard navigation, sticky, placeholder and more. See [live demo](#demo).
|
|
19
|
-
- **Framework agnostic
|
|
19
|
+
- **Framework agnostic:** Currently [React](https://react.dev/) and [Vue](https://vuejs.org/) are supported. We could support [Svelte](https://svelte.dev/), [Solid](https://www.solidjs.com/), [Angular](https://angular.io/), [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) and more in the future.
|
|
20
20
|
|
|
21
21
|
## Demo
|
|
22
22
|
|
|
@@ -28,17 +28,17 @@ https://inokawa.github.io/virtua/
|
|
|
28
28
|
npm install virtua
|
|
29
29
|
```
|
|
30
30
|
|
|
31
|
-
|
|
31
|
+
If you use this lib in [legacy browsers which does not have ResizeObserver](https://caniuse.com/?search=resizeobserver), you should use [polyfill](https://github.com/juggle/resize-observer#switching-between-native-and-polyfilled-versions).
|
|
32
32
|
|
|
33
|
-
|
|
33
|
+
## Getting started
|
|
34
34
|
|
|
35
|
-
|
|
35
|
+
### React
|
|
36
36
|
|
|
37
|
-
|
|
37
|
+
`react >= 16.14` is required.
|
|
38
38
|
|
|
39
|
-
|
|
39
|
+
If you use ESM and webpack 5, use react >= 18 to avoid [Can't resolve `react/jsx-runtime` error](https://github.com/facebook/react/issues/20235).
|
|
40
40
|
|
|
41
|
-
|
|
41
|
+
#### Vertical scroll
|
|
42
42
|
|
|
43
43
|
```tsx
|
|
44
44
|
import { VList } from "virtua";
|
|
@@ -63,7 +63,7 @@ export const App = () => {
|
|
|
63
63
|
};
|
|
64
64
|
```
|
|
65
65
|
|
|
66
|
-
|
|
66
|
+
#### Horizontal scroll
|
|
67
67
|
|
|
68
68
|
```tsx
|
|
69
69
|
import { VList } from "virtua";
|
|
@@ -88,7 +88,7 @@ export const App = () => {
|
|
|
88
88
|
};
|
|
89
89
|
```
|
|
90
90
|
|
|
91
|
-
|
|
91
|
+
#### Window scroll
|
|
92
92
|
|
|
93
93
|
```tsx
|
|
94
94
|
import { WVList } from "virtua";
|
|
@@ -115,7 +115,7 @@ export const App = () => {
|
|
|
115
115
|
};
|
|
116
116
|
```
|
|
117
117
|
|
|
118
|
-
|
|
118
|
+
#### Vertical and horizontal scroll
|
|
119
119
|
|
|
120
120
|
```tsx
|
|
121
121
|
import { experimental_VGrid as VGrid } from "virtua";
|
|
@@ -139,7 +139,7 @@ export const App = () => {
|
|
|
139
139
|
};
|
|
140
140
|
```
|
|
141
141
|
|
|
142
|
-
|
|
142
|
+
#### React Server Components (RSC) support
|
|
143
143
|
|
|
144
144
|
This library is marked as a Client Component. You can render RSC as children of VList or WVList.
|
|
145
145
|
|
|
@@ -163,11 +163,43 @@ export default async () => {
|
|
|
163
163
|
};
|
|
164
164
|
```
|
|
165
165
|
|
|
166
|
-
|
|
166
|
+
### Vue
|
|
167
|
+
|
|
168
|
+
`vue >= 3.2` is required.
|
|
169
|
+
|
|
170
|
+
```vue
|
|
171
|
+
<script setup>
|
|
172
|
+
import { VList } from "virtua/vue";
|
|
173
|
+
|
|
174
|
+
const heights = [20, 40, 180, 77];
|
|
175
|
+
const data = Array.from({ length: 1000 }).map((_, i) => ({
|
|
176
|
+
id: i,
|
|
177
|
+
height: heights[i % 4] + "px",
|
|
178
|
+
}));
|
|
179
|
+
</script>
|
|
180
|
+
|
|
181
|
+
<template>
|
|
182
|
+
<VList :data="data">
|
|
183
|
+
<template #default="item">
|
|
184
|
+
<div
|
|
185
|
+
:key="item.id"
|
|
186
|
+
:style="{
|
|
187
|
+
height: item.height,
|
|
188
|
+
background: 'white',
|
|
189
|
+
borderBottom: 'solid 1px #ccc',
|
|
190
|
+
}"
|
|
191
|
+
>
|
|
192
|
+
{{ item.id }}
|
|
193
|
+
</div>
|
|
194
|
+
</template>
|
|
195
|
+
</VList>
|
|
196
|
+
</template>
|
|
197
|
+
```
|
|
167
198
|
|
|
168
199
|
## Documentation
|
|
169
200
|
|
|
170
201
|
- [API reference](./docs/API.md)
|
|
202
|
+
- [Examples](./stories) for more usages
|
|
171
203
|
|
|
172
204
|
### FAQs
|
|
173
205
|
|
|
@@ -217,26 +249,26 @@ It may be dispatched by ResizeObserver in this lib [as described in spec](https:
|
|
|
217
249
|
|
|
218
250
|
### Features
|
|
219
251
|
|
|
220
|
-
| | [virtua](https://github.com/inokawa/virtua) | [react-virtuoso](https://github.com/petyosi/react-virtuoso) | [react-window](https://github.com/bvaughn/react-window) | [react-virtualized](https://github.com/bvaughn/react-virtualized) | [@tanstack/react-virtual](https://github.com/TanStack/virtual)
|
|
221
|
-
| :------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
222
|
-
| Bundle size | [](https://bundlephobia.com/package/virtua) | [](https://bundlephobia.com/package/react-virtuoso) | [](https://bundlephobia.com/package/react-window) | [](https://bundlephobia.com/package/react-virtualized) | [
|
|
224
|
-
| Horizontal scroll | ✅ | ❌ | ✅ ([may be dropped in v2](https://github.com/bvaughn/react-window/issues/302)) | ✅ | 🟠 (needs customization)
|
|
225
|
-
| Horizontal scroll in RTL direction | ✅ | ❌ | ✅ ([may be dropped in v2](https://github.com/bvaughn/react-window/issues/302)) | ❌ | ❌
|
|
226
|
-
| Grid (Virtualization for two dimension) | 🟠 (experimental_VGrid) | ❌ | ✅ (FixedSizeGrid / VariableSizeGrid) | ✅ ([Grid](https://github.com/bvaughn/react-virtualized/blob/master/docs/Grid.md)) | 🟠 (needs customization)
|
|
227
|
-
| Table | 🟠 (needs customization) | ✅ (TableVirtuoso) | 🟠 (needs customization) | ✅ ([Table](https://github.com/bvaughn/react-virtualized/blob/master/docs/Table.md)) | 🟠 (needs customization)
|
|
228
|
-
| Window scroller | ✅ (WVList) | ✅ | ❌ | ✅ ([WindowScroller](https://github.com/bvaughn/react-virtualized/blob/master/docs/WindowScroller.md)) | ✅
|
|
229
|
-
| Dynamic list size | ✅ | ✅ | 🟠 (needs [AutoSizer](https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md)) | 🟠 (needs [AutoSizer](https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md)) | ✅
|
|
230
|
-
| Dynamic item size | ✅ | ✅ | 🟠 (needs additional codes and has wrong destination when scrolling to item imperatively) | 🟠 (needs [CellMeasurer](https://github.com/bvaughn/react-virtualized/blob/master/docs/CellMeasurer.md) and has wrong destination when scrolling to item imperatively) | 🟠 (has wrong destination when scrolling to item imperatively)
|
|
231
|
-
| Reverse scroll | ✅ | ✅ | ❌ | ❌ | ❌
|
|
232
|
-
| Reverse scroll in iOS Safari | ✅ | 🟠 ([has glitch with unknown sized items](https://github.com/petyosi/react-virtuoso/issues/945)) | ❌ | ❌ | ❌
|
|
233
|
-
| Infinite scroll | ✅ | ✅ | 🟠 (needs [react-window-infinite-loader](https://github.com/bvaughn/react-window-infinite-loader)) | 🟠 (needs [InfiniteLoader](https://github.com/bvaughn/react-virtualized/blob/master/docs/InfiniteLoader.md)) | ✅
|
|
234
|
-
| Reverse (bi-directional) infinite scroll | ✅ | ✅ | ❌ | ❌ | ❌
|
|
235
|
-
| Scroll restoration | ✅ | ✅ (getState) | ❌ | ❌ | ❌
|
|
236
|
-
| Smooth scroll | ✅ | ✅ | ❌ | ❌ | ✅
|
|
237
|
-
| SSR support | ✅ | ✅ | ✅ | ✅ | ✅
|
|
238
|
-
| Render React Server Components (RSC) as children | ✅ | ❌ | ❌ | ❌ | 🟠(needs customization)
|
|
239
|
-
| Display exceeding browser's max element size limit | ❌ | ❌ | ❌ | ✅ | ❌
|
|
252
|
+
| | [virtua](https://github.com/inokawa/virtua) | [react-virtuoso](https://github.com/petyosi/react-virtuoso) | [react-window](https://github.com/bvaughn/react-window) | [react-virtualized](https://github.com/bvaughn/react-virtualized) | [@tanstack/react-virtual](https://github.com/TanStack/virtual) | [react-tiny-virtual-list](https://github.com/clauderic/react-tiny-virtual-list) | [react-cool-virtual](https://github.com/wellyshen/react-cool-virtual) |
|
|
253
|
+
| :------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------- |
|
|
254
|
+
| Bundle size | [](https://bundlephobia.com/package/virtua) | [](https://bundlephobia.com/package/react-virtuoso) | [](https://bundlephobia.com/package/react-window) | [](https://bundlephobia.com/package/react-virtualized) | [](https://bundlephobia.com/package/@tanstack/react-virtual) | [](https://bundlephobia.com/package/react-tiny-virtual-list) | [](https://bundlephobia.com/package/react-cool-virtual) |
|
|
255
|
+
| Vertical scroll | ✅ | ✅ | ✅ | ✅ | 🟠 (needs customization) | ✅ | 🟠 (needs customization) |
|
|
256
|
+
| Horizontal scroll | ✅ | ❌ | ✅ ([may be dropped in v2](https://github.com/bvaughn/react-window/issues/302)) | ✅ | 🟠 (needs customization) | ✅ | 🟠 (needs customization) |
|
|
257
|
+
| Horizontal scroll in RTL direction | ✅ | ❌ | ✅ ([may be dropped in v2](https://github.com/bvaughn/react-window/issues/302)) | ❌ | ❌ | ❌ | ❌ |
|
|
258
|
+
| Grid (Virtualization for two dimension) | 🟠 (experimental_VGrid) | ❌ | ✅ (FixedSizeGrid / VariableSizeGrid) | ✅ ([Grid](https://github.com/bvaughn/react-virtualized/blob/master/docs/Grid.md)) | 🟠 (needs customization) | ❌ | 🟠 (needs customization) |
|
|
259
|
+
| Table | 🟠 (needs customization) | ✅ (TableVirtuoso) | 🟠 (needs customization) | ✅ ([Table](https://github.com/bvaughn/react-virtualized/blob/master/docs/Table.md)) | 🟠 (needs customization) | ❌ | 🟠 (needs customization) |
|
|
260
|
+
| Window scroller | ✅ (WVList) | ✅ | ❌ | ✅ ([WindowScroller](https://github.com/bvaughn/react-virtualized/blob/master/docs/WindowScroller.md)) | ✅ | ❌ | ❌ |
|
|
261
|
+
| Dynamic list size | ✅ | ✅ | 🟠 (needs [AutoSizer](https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md)) | 🟠 (needs [AutoSizer](https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md)) | ✅ | ❌ | ✅ |
|
|
262
|
+
| Dynamic item size | ✅ | ✅ | 🟠 (needs additional codes and has wrong destination when scrolling to item imperatively) | 🟠 (needs [CellMeasurer](https://github.com/bvaughn/react-virtualized/blob/master/docs/CellMeasurer.md) and has wrong destination when scrolling to item imperatively) | 🟠 (has wrong destination when scrolling to item imperatively) | ❌ | 🟠 (has wrong destination when scrolling to item imperatively) |
|
|
263
|
+
| Reverse scroll | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ |
|
|
264
|
+
| Reverse scroll in iOS Safari | ✅ | 🟠 ([has glitch with unknown sized items](https://github.com/petyosi/react-virtuoso/issues/945)) | ❌ | ❌ | ❌ | ❌ | ❌ |
|
|
265
|
+
| Infinite scroll | ✅ | ✅ | 🟠 (needs [react-window-infinite-loader](https://github.com/bvaughn/react-window-infinite-loader)) | 🟠 (needs [InfiniteLoader](https://github.com/bvaughn/react-virtualized/blob/master/docs/InfiniteLoader.md)) | ✅ | ❌ | ✅ |
|
|
266
|
+
| Reverse (bi-directional) infinite scroll | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | 🟠 (has startItem method but its scroll position can be inaccurate) |
|
|
267
|
+
| Scroll restoration | ✅ | ✅ (getState) | ❌ | ❌ | ❌ | ❌ | ❌ |
|
|
268
|
+
| Smooth scroll | ✅ | ✅ | ❌ | ❌ | ✅ | ❌ | ✅ |
|
|
269
|
+
| SSR support | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ |
|
|
270
|
+
| Render React Server Components (RSC) as children | ✅ | ❌ | ❌ | ❌ | 🟠(needs customization) | ❌ | 🟠 (needs customization) |
|
|
271
|
+
| Display exceeding browser's max element size limit | ❌ | ❌ | ❌ | ✅ | ❌ | ❌ | ❌ |
|
|
240
272
|
|
|
241
273
|
- ✅ - Built-in supported
|
|
242
274
|
- 🟠 - Supported but partial, limited or requires some user custom code
|
package/lib/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
var e=require("react/jsx-runtime"),t=require("react"),n=require("react-dom");const o=Math.min,r=Math.max,i=Math.abs,s=Date.now,l=Object.values,c=Array.isArray,u=setTimeout,a=(e,t,n)=>o(n,r(t,e)),h=e=>null!=e,d=(e,t)=>{let n;const o=()=>{h(n)&&clearTimeout(n)},r=()=>{o(),n=u((()=>{n=null,e()}),t)};return r.t=o,r},f=e=>{let t,n;return(...o)=>(t||(t=!0,n=e(...o)),n)},_=e=>getComputedStyle(e),w=e=>e?parseFloat(e):0,g=-1,p=(e,t)=>{const n=e.o[t];return n===g?e.i:n},v=(e,t)=>{if(!e.l)return 0;if(e.u>=t)return e.h[t];let n=e.u,o=e.h[n];for(;n<t;)o+=p(e,n),e.h[++n]=o;return e.u=t,o},m=(e,t,n)=>{let o=v(e,n);for(;n>=0&&n<e.l;)if(o<=t){const r=p(e,n);if(o+r>t)break;o+=r,n++}else o-=p(e,--n);return a(n,0,e.l-1)},b=(e,t,n,r)=>{const i=m(e,t,o(n,e.l-1));return[i,m(e,t+r,i)]},S=(e,t,n)=>{const o=n?"unshift":"push";for(let n=e.l;n<t;n++)e.o[o](g),e.h.push(0===n?0:g);e.l=t},z=(e,t,n)=>{const o=t-e.l,r=o<0;let i;return r?(i=(n?e.o.splice(0,-o):e.o.splice(o)).reduce(((t,n)=>t+(n===g?e.i:n)),0),e.h.splice(o)):(i=e.i*o,S(e,e.l+o,n)),e.u=n?0:a(t-1,0,e.u),e.l=t,[i,r]},y="undefined"!=typeof window,I=()=>document.documentElement,x=/*#__PURE__*/f((e=>{const t="scrollLeft",n=e[t];e[t]=1;const o=e[t]<1;return e[t]=n,o})),R=/*#__PURE__*/f((()=>!!y&&"rtl"===_(I()).direction)),k=/*#__PURE__*/f((()=>/iP(hone|od|ad)/.test(navigator.userAgent))),O=/*#__PURE__*/f((()=>"scrollBehavior"in I().style)),C=(e,t,n)=>t.reduce(((t,[o,r])=>{const i=r-p(e,o);return(!n||i>0)&&(t+=i),t}),0),T=(e,t=40,n=0,s=((e,t)=>{const n={i:t,l:0,u:0,o:[],h:[]};return S(n,e),n})(e,t),l,c)=>{let u=t*r(n-1,0),h=0,d=0,f=0,_=0,w=0,m=0,y=0,I=0,x=!1,R=!1,O=null,T=[0,n];const M=new Set,H=()=>(e=>e.l?v(e,e.l-1)+p(e,e.l-1):0)(s),J=()=>u-h-d,W=()=>H()-J(),B=e=>{k()&&0!==I?m+=e:(w+=e,_++)},L=e=>{const t=I;return I=e,I!==t};return{_:()=>JSON.parse(JSON.stringify(s)),g:()=>O?[o(T[0],O[0]),r(T[1],O[1])]:y?T:T=b(s,f+m+w,T[0],u),p:e=>s.o[e]===g,v:()=>!!O&&s.o.slice(r(0,O[0]-1),o(s.l-1,O[1]+1)+1).includes(g),m(e){const t=v(s,e)-m;return l?t+r(0,u-H()):t},S:e=>p(s,e),I:()=>s.l,R:()=>f,k:W,O:()=>I,C:()=>u,T:()=>h,M:()=>r(H(),J()),H,J:()=>_,W:()=>J()>H()?w=0:(y=w,w=0,y),B(e,t){const n=[e,t];return M.add(n),()=>{M.delete(n)}},L(e,t){let n,r,l=0;switch(e){case 1:{const e=t.filter((([e,t])=>s.o[e]!==t)),n=x;if(x=!1,!e.length)break;let i=0;if(0===f);else if(f>W()-1.5)i=C(s,e,!0);else if(n)i=C(s,e);else{const[t]=T;i=C(s,e.filter((([e])=>e<t)))}i&&B(i);let u=!1;e.forEach((([e,t])=>{((e,t,n)=>{const r=e.o[t]===g;return e.o[t]=n,e.u=o(t,e.u),r})(s,e,t)&&(u=!0)})),c&&u&&!f&&(e=>{const t=e.o.filter((e=>e!==g)),n=t[0];e.i=t.every((e=>e===n))?n:(e=>{const t=[...e].sort(((e,t)=>e-t)),n=e.length/2|0;return t.length%2==0?(t[n-1]+t[n])/2:t[n]})(t)})(s),l=2,r=!0;break}case 2:{const e=t[0]+t[1]+t[2];u!==e&&(u=e,h=t[1],d=t[2],l=2);break}case 3:if(t[1]){const e=W()-f,[n,r]=z(s,t[0],!0);B(r?-o(n,e):n),x=!r,l=1}else z(s,t[0]);break;case 4:{const e=a(t,0,W()),n=y;if(y=0,e===f)break;const o=e-f,s=i(o);n&&s<i(n)+1||R||L(o<0?2:1),r=s>u,f=e,l=5;break}case 5:L(0)&&(n=!0,l=1),R=!1,O=null;break;case 6:R=!0;break;case 7:O=b(s,t,T[0],u),l=1}l&&(n&&m&&(w+=m,m=0,_++),M.forEach((([e,t])=>{l&e&&t(r)})))}}},M=y?t.useLayoutEffect:t.useEffect,H=(e,t,n)=>(()=>{let o=s()-50;return(...r)=>{const i=s();o+50<i&&(o=i,(o=>{if(0!==e.O()&&!o.ctrlKey&&(t?o.deltaX:o.deltaY)){const t=e.R();t>0&&t<e.k()&&n()}})(...r))}})(),J=(e,t,n,o)=>x(e)||o?-n:t.k()-n,W=(e,t)=>{let n,o,r=!1;const i=t?"scrollLeft":"scrollTop",s=t?"overflowX":"overflowY",l=(o,r)=>t&&R()?J(n,e,o,r):o,c=async(r,s)=>{if(!n)return;o&&o();const c=()=>a(r(),0,e.k()),h=()=>{let t;return[new Promise(((e,n)=>{t=e,u(o=n,150)})),e.B(2,(()=>{t&&t()}))]};if(s&&O()){for(;e.L(7,c()),e.v();){const[e,t]=h();try{await e}catch(e){return}finally{t()}}n.scrollTo({[t?"left":"top"]:l(c()),behavior:"smooth"})}else for(;;){const[t,o]=h();try{n[i]=l(c()),e.L(6),await t}catch(e){return}finally{o()}}};return{$(o){n=o;let s=!1,c=!1;const u=d((()=>{s?u():(c=!1,e.L(5))}),150),a=()=>{c&&(r=!0),e.L(4,l(o[i])),u()},h=H(e,t,u),f=()=>{s=!0,c=r=!1},_=()=>{s=!1,k()&&(c=!0)};return o.addEventListener("scroll",a),o.addEventListener("wheel",h,{passive:!0}),o.addEventListener("touchstart",f,{passive:!0}),o.addEventListener("touchend",_,{passive:!0}),()=>{o.removeEventListener("scroll",a),o.removeEventListener("wheel",h),o.removeEventListener("touchstart",f),o.removeEventListener("touchend",_),u.t()}},q(e){c((()=>e))},A(t){t+=e.R(),c((()=>t))},X(t,{align:n,smooth:o}={}){if(t=a(t,0,e.I()-1),"nearest"===n){const o=e.m(t),r=e.R();if(o<r)n="start";else{if(!(o+e.S(t)>r+e.C()))return;n="end"}}c((()=>e.T()+("end"===n?e.m(t)+e.S(t)-e.C():"center"===n?e.m(t)+(e.S(t)-e.C())/2:e.m(t))),o)},Y:e=>{if(n){if(r){r=!1;const e=n.style,t=e[s];e[s]="hidden",u((()=>{e[s]=t}))}n[i]+=l(e,!0)}}}},B=(e,t)=>{let n;const o=t?"scrollX":"scrollY",r=t?"offsetLeft":"offsetTop",i=(o,r)=>t&&R()?J(n,e,o,r):o;return{$(s){n=s;const l=(e,n)=>{const o=n+(t&&R()?window.innerWidth-e[r]-e.offsetWidth:e[r]),i=e.offsetParent;return e!==document.body&&i?l(i,o):o},c=d((()=>{e.L(5)}),150),u=()=>{e.L(4,i(window[o])-l(s,0)),c()},a=H(e,t,c);return window.addEventListener("scroll",u),window.addEventListener("wheel",a,{passive:!0}),()=>{window.removeEventListener("scroll",u),window.removeEventListener("wheel",a),c.t()}},Y:e=>{window.scrollBy(t?i(e,!0):0,t?0:e)}}},L="current",$={},q=(e,t)=>{if(c(e))for(const n of e)q(n,t);else h(e)&&"boolean"!=typeof e&&t.push(e)},A=(e,t,n)=>r(e-(1===n?1:r(1,t)),0),X=(e,t,n,i)=>o(e+(2===n?1:r(1,t)),i-1),Y=e=>{const n=t.useRef();return n[L]||(n[L]=e())},j=e=>{const n=t.useRef(e);return M((()=>{n[L]=e}),[e]),n},D={box:"border-box"},N=(e,t)=>{let n;const o=t?"width":"height",r=new WeakMap,i=f((()=>new ResizeObserver((i=>{const s=[];for(const{target:l,contentRect:c}of i)if(l.offsetParent)if(l===n)e.L(2,[c[o],c[t?"left":"top"],w(_(n)[t?"paddingRight":"paddingBottom"])]);else{const e=r.get(l);h(e)&&s.push([e,c[o]])}s.length&&e.L(1,s)}))));return{j(e){n=e;const t=i();return t.observe(e,D),()=>{t.disconnect()}},D(e,t){const n=i();return r.set(e,t),n.observe(e),()=>{r.delete(e),n.unobserve(e)}}}},P=(e,t)=>{const n=t?"width":"height",o=t?"innerWidth":"innerHeight",r=new WeakMap,i=f((()=>new ResizeObserver((t=>{const o=[];for(const{target:e,contentRect:i}of t){if(!e.offsetParent)continue;const t=r.get(e);h(t)&&o.push([t,i[n]])}o.length&&e.L(1,o)}))));return{j(){const t=()=>{e.L(2,[window[o],0,0])};return window.addEventListener("resize",t),t(),()=>{window.removeEventListener("resize",t),i().disconnect()}},D(e,t){const n=i();return r.set(e,t),n.observe(e),()=>{r.delete(e),n.unobserve(e)}}}},U=(e,t)=>{let n;const o="height",i="width",s=new WeakMap,l=new Set,c=new Set,u=new Map,a=(e,t)=>`${e}-${t}`,h=f((()=>new ResizeObserver((h=>{const d=new Set,f=new Set;for(const{target:r,contentRect:l}of h)if(r.offsetParent)if(r===n){const r=_(n);e.L(2,[l[o],l.top,w(r.paddingBottom)]),t.L(2,[l[i],l.left,w(r.paddingRight)])}else{const e=s.get(r);if(e){const[t,n]=e,r=a(t,n),s=u.get(r),c=[l[o],l[i]];let h,_;s?(s[0]!==c[0]&&(h=!0),s[1]!==c[1]&&(_=!0)):h=_=!0,h&&d.add(t),_&&f.add(n),(h||_)&&u.set(r,c)}}if(d.size){const t=[];d.forEach((e=>{let n=0;c.forEach((t=>{const o=u.get(a(e,t));o&&(n=r(n,o[0]))})),n&&t.push([e,n])})),e.L(1,t)}if(f.size){const e=[];f.forEach((t=>{let n=0;l.forEach((e=>{const o=u.get(a(e,t));o&&(n=r(n,o[1]))})),n&&e.push([t,n])})),t.L(1,e)}}))));return{j(e){n=e;const t=h();return t.observe(e,D),()=>{t.disconnect()}},D(e,t,n){const o=h();return s.set(e,[t,n]),l.add(t),c.add(n),o.observe(e),()=>{s.delete(e),o.unobserve(e)}}}},E=t.forwardRef((({children:n,attrs:o,width:r,height:i,scrolling:s},l)=>e.jsx("div",{ref:l,...o,children:e.jsx("div",{style:t.useMemo((()=>({position:"relative",visibility:"hidden",width:null!=r?r:"100%",height:null!=i?i:"100%",pointerEvents:s?"none":"auto"})),[r,i,s]),children:n})}))),F=t.memo((({N:n,P:o,U:r,F:i,V:s,G:l,K:c})=>{const u=t.useRef(null);M((()=>o.D(u[L],r)),[r]);const a=t.useMemo((()=>{const e={margin:0,padding:0,position:"absolute",[c?"height":"width"]:"100%",[c?"top":"left"]:0,[c?R()?"right":"left":"top"]:i,visibility:s?"hidden":"visible"};return c&&(e.display="flex"),e}),[i,s]);return"string"==typeof l?e.jsx(l,{ref:u,style:a,children:n}):e.jsx(l,{ref:u,style:a,index:r,children:n})})),V=()=>[],G=()=>t.useReducer(V,void 0,V)[1],K=(e,n)=>t.useMemo((()=>{if("function"==typeof e)return[e,n||0];const t=(e=>{const t=[];return q(e,t),t})(e);return[e=>t[e],t.length]}),[e,n]),Q=t.forwardRef((({children:o,count:r,overscan:i=4,initialItemSize:s,initialItemCount:c,shift:u,horizontal:a,reverse:d,cache:f,components:{Root:_=E,Item:w="div"}=$,onScroll:g,onScrollStop:p,onRangeChange:v,...m},b)=>{const[S,z]=K(o,r),y=j(g),I=j(p),[x,R,k,O]=Y((()=>{const e=!!a,t=T(z,s,c,f,!!d,!s);return[t,N(t,e),W(t,e),e]}));z!==x.I()&&x.L(3,[z,u]);const C=G(),[H,J]=x.g(),B=x.O(),q=x.J(),D=x.M(),P=t.useRef(null),U=0!==B;M((()=>{const e=P[L],t=x.B(3,(e=>{e?n.flushSync(C):C()})),o=x.B(4,(()=>{y[L]&&y[L](x.R())})),r=R.j(e),i=k.$(e);return()=>{t(),o(),r(),i()}}),[]),M((()=>{const e=x.W();e&&k.Y(e)}),[q]),t.useEffect((()=>{U||I[L]&&I[L]()}),[U]),t.useEffect((()=>{v&&v(H,J)}),[H,J]),t.useImperativeHandle(b,(()=>({get cache(){return x._()},get scrollOffset(){return x.R()},get scrollSize(){return x.M()},get viewportSize(){return x.C()},scrollToIndex:k.X,scrollTo:k.q,scrollBy:k.A})),[]);const V=A(H,i,B),Q=X(J,i,B,z),Z=[];for(let t=V;t<=Q;t++){const n=S(t),o=n.key;Z.push(e.jsx(F,{P:R,U:t,F:x.m(t),V:x.p(t),G:w,N:n,K:O},h(o)?o:"_"+t))}return e.jsx(_,{ref:P,width:O?D:void 0,height:O?void 0:D,scrolling:U,attrs:t.useMemo((()=>({...m,style:{display:O?"inline-block":"block",[O?"overflowX":"overflowY"]:"auto",overflowAnchor:"none",contain:"strict",width:"100%",height:"100%",...m.style}})),l(m)),children:Z})})),Z=t.forwardRef((({children:o,count:r,overscan:i=4,initialItemSize:s,initialItemCount:c,shift:u,horizontal:a,cache:d,components:{Root:f=E,Item:_="div"}=$,onScrollStop:w,onRangeChange:g,...p},v)=>{const[m,b]=K(o,r),S=j(w),[z,y,I,x]=Y((()=>{const e=!!a,t=T(b,s,c,d,!1,!s);return[t,P(t,e),B(t,e),e]}));b!==z.I()&&z.L(3,[b,u]);const R=G(),[k,O]=z.g(),C=z.O(),H=z.J(),J=z.H(),W=t.useRef(null),q=0!==C;M((()=>{const e=W[L],t=z.B(3,(e=>{e?n.flushSync(R):R()})),o=y.j(e),r=I.$(e);return()=>{t(),o(),r()}}),[]),M((()=>{const e=z.W();e&&I.Y(e)}),[H]),t.useEffect((()=>{q||S[L]&&S[L]()}),[q]),t.useEffect((()=>{g&&g(k,O)}),[k,O]),t.useImperativeHandle(v,(()=>({get cache(){return z._()}})),[]);const D=A(k,i,C),N=X(O,i,C,b),U=[];for(let t=D;t<=N;t++){const n=m(t),o=n.key;U.push(e.jsx(F,{P:y,U:t,F:z.m(t),V:z.p(t),G:_,N:n,K:x},h(o)?o:"_"+t))}return e.jsx(f,{ref:W,width:x?J:void 0,height:x?void 0:J,scrolling:q,attrs:t.useMemo((()=>({...p,style:{display:x?"inline-block":"block",width:x?"auto":"100%",height:x?"100%":"auto",...p.style}})),l(p)),children:U})})),ee=(e,t)=>`${e}-${t}`,te=t.memo((({N:n,P:o,Z:r,ee:i,te:s,ne:l,oe:c,re:u,V:a,G:h})=>{const d=t.useRef(null);return M((()=>o.D(d[L],r,i)),[i,r]),e.jsx(h,{ref:d,style:t.useMemo((()=>({display:"grid",margin:0,padding:0,position:"absolute",top:s,[R()?"right":"left"]:l,visibility:a?"hidden":"visible",minHeight:c,minWidth:u})),[s,l,u,c,a]),children:n})})),ne=t.forwardRef((({children:o,row:r,col:i,cellHeight:s=40,cellWidth:c=100,overscan:u=2,initialRowCount:a,initialColCount:h,components:{Root:d=E,Cell:f="div"}=$,..._},w)=>{const[g,p,v,m,b]=Y((()=>{const e=T(r,s,a),t=T(i,c,h);return[e,t,U(e,t),W(e,!1),W(t,!0)]}));r!==g.I()&&g.L(3,[r]),i!==p.I()&&p.L(3,[i]);const S=G(),[z,y]=g.g(),[I,x]=p.g(),R=g.O(),k=p.O(),O=g.J(),C=p.J(),H=g.M(),J=p.M(),B=t.useRef(null),q=0!==R,j=0!==k;M((()=>{const e=B[L],t=e=>{e?n.flushSync(S):S()},o=g.B(3,t),r=p.B(3,t),i=v.j(e),s=m.$(e),l=b.$(e);return()=>{o(),r(),i(),s(),l()}}),[]),M((()=>{const e=g.W();e&&m.Y(e)}),[O]),M((()=>{const e=p.W();e&&b.Y(e)}),[C]),t.useImperativeHandle(w,(()=>({get scrollOffset(){return[p.R(),g.R()]},get scrollSize(){return[p.M(),g.M()]},get viewportSize(){return[p.C(),g.C()]},scrollToIndex(e,t){b.X(e),m.X(t)},scrollTo(e,t){b.q(e),m.q(t)},scrollBy(e,t){b.A(e),m.A(t)}})),[]);const D=t.useMemo((()=>{const e=new Map;return(t,n)=>{let r=e.get(ee(t,n));return r||e.set(ee(t,n),r=o({rowIndex:t,colIndex:n})),r}}),[o]),N=A(z,u,R),P=X(y,u,R,r),F=A(I,u,k),V=X(x,u,k,i),K=[];for(let t=N;t<=P;t++)for(let n=F;n<=V;n++)K.push(e.jsx(te,{P:v,Z:t,ee:n,te:g.m(t),ne:p.m(n),oe:g.S(t),re:p.S(n),V:g.p(t)||p.p(n),G:f,N:D(t,n)},ee(t,n)));return e.jsx(d,{ref:B,width:J,height:H,scrolling:q||j,attrs:t.useMemo((()=>({..._,style:{overflow:"auto",overflowAnchor:"none",contain:"strict",width:"100%",height:"100%",..._.style}})),l(_)),children:K})}));exports.VList=Q,exports.WVList=Z,exports.experimental_VGrid=ne;
|
|
2
|
+
var e=require("react/jsx-runtime"),t=require("react"),n=require("react-dom");const o=Math.min,r=Math.max,i=Math.abs,s=Date.now,l=Object.values,c=Array.isArray,a=setTimeout,u=(e,t,n)=>o(n,r(t,e)),h=e=>null!=e,d=(e,t)=>{let n;const o=()=>{h(n)&&clearTimeout(n)},r=()=>{o(),n=a((()=>{n=null,e()}),t)};return r.t=o,r},f=e=>{let t,n;return(...o)=>(t||(t=!0,n=e(...o)),n)},_=e=>getComputedStyle(e),w=e=>e?parseFloat(e):0,g=-1,p=(e,t)=>{const n=e.o[t];return n===g?e.i:n},v=(e,t)=>{if(!e.l)return 0;if(e.u>=t)return e.h[t];let n=e.u,o=e.h[n];for(;n<t;)o+=p(e,n),e.h[++n]=o;return e.u=t,o},m=(e,t,n)=>{let o=v(e,n);for(;n>=0&&n<e.l;)if(o<=t){const r=p(e,n);if(o+r>t)break;o+=r,n++}else o-=p(e,--n);return u(n,0,e.l-1)},b=(e,t,n,r)=>{const i=m(e,t,o(n,e.l-1));return[i,m(e,t+r,i)]},S=(e,t,n)=>{const o=n?"unshift":"push";for(let n=e.l;n<t;n++)e.o[o](g),e.h.push(0===n?0:g);e.l=t},z=(e,t,n)=>{const o=t-e.l,r=o<0;let i;return r?(i=(n?e.o.splice(0,-o):e.o.splice(o)).reduce(((t,n)=>t+(n===g?e.i:n)),0),e.h.splice(o)):(i=e.i*o,S(e,e.l+o,n)),e.u=n?0:u(t-1,0,e.u),e.l=t,[i,r]},y="undefined"!=typeof window,I=()=>document.documentElement,x=/*#__PURE__*/f((e=>{const t="scrollLeft",n=e[t];e[t]=1;const o=e[t]<1;return e[t]=n,o})),R=/*#__PURE__*/f((()=>!!y&&"rtl"===_(I()).direction)),k=/*#__PURE__*/f((()=>/iP(hone|od|ad)/.test(navigator.userAgent))),O=/*#__PURE__*/f((()=>"scrollBehavior"in I().style)),C=(e,t,n)=>r(e-(n===H?1:r(1,t)),0),T=(e,t,n,i)=>o(e+(n===J?1:r(1,t)),i-1),M=(e,t,n)=>t.reduce(((t,[o,r])=>{const i=r-p(e,o);return(!n||i>0)&&(t+=i),t}),0),H=1,J=2,W=(e,t=40,n=0,s=((e,t)=>{const n={i:t,l:0,u:0,o:[],h:[]};return S(n,e),n})(e,t),l)=>{let c=[],a=t*r(n-1,0),h=0,d=0,f=0,_=0,w=0,m=0,y=0,I=0,x=!1,R=!1,O=null,C=[0,n];const T=new Set,W=()=>(e=>e.l?v(e,e.l-1)+p(e,e.l-1):0)(s),B=()=>a-h-d,L=()=>W()-B(),$=e=>{k()&&0!==I?m+=e:(w+=e,_++)};return{_:()=>c,g:()=>JSON.parse(JSON.stringify(s)),p:()=>O?[o(C[0],O[0]),r(C[1],O[1])]:y?C:C=b(s,f+m+w,C[0],a),v:e=>s.o[e]===g,m:()=>!!O&&s.o.slice(r(0,O[0]-1),o(s.l-1,O[1]+1)+1).includes(g),S:e=>v(s,e)-m,I:e=>p(s,e),R:()=>s.l,k:()=>f,O:L,C:()=>I,T:()=>a,M:()=>h,H:()=>r(W(),B()),J:W,W:()=>_,B:()=>B()>W()?w=0:(y=w,w=0,y),L(e,t){const n=[e,t];return T.add(n),()=>{T.delete(n)}},$(e,t){let n,r,p=0;switch(e){case 1:{const e=t.filter((([e,t])=>s.o[e]!==t)),n=x;if(x=!1,!e.length)break;let i=0;if(0===f);else if(f>L()-1.5)i=M(s,e,!0);else if(n)i=M(s,e);else{const[t]=C;i=M(s,e.filter((([e])=>e<t)))}i&&$(i);let c=!1;e.forEach((([e,t])=>{((e,t,n)=>{const r=e.o[t]===g;return e.o[t]=n,e.u=o(t,e.u),r})(s,e,t)&&(c=!0)})),l&&c&&!f&&(e=>{const t=e.o.filter((e=>e!==g)),n=t[0];e.i=t.every((e=>e===n))?n:(e=>{const t=[...e].sort(((e,t)=>e-t)),n=e.length/2|0;return t.length%2==0?(t[n-1]+t[n])/2:t[n]})(t)})(s),p=2,r=!0;break}case 2:{const e=t[0]+t[1]+t[2];a!==e&&(a=e,h=t[1],d=t[2],p=2);break}case 3:if(t[1]){const e=L()-f,[n,r]=z(s,t[0],!0);$(r?-o(n,e):n),x=!r,p=1}else z(s,t[0]);break;case 4:{const e=u(t,0,L()),n=y;if(y=0,e===f)break;const o=e-f,s=i(o);n&&s<i(n)+1||R||(I=o<0?J:H),r=s>a,f=e,p=5;break}case 5:p=8,0!==I&&(n=!0,p+=1),I=0,R=!1,O=null;break;case 6:R=!0;break;case 7:O=b(s,t,C[0],a),p=1}p&&(c=[],n&&m&&(w+=m,m=0,_++),T.forEach((([e,t])=>{p&e&&t(r)})))}}},B=y?t.useLayoutEffect:t.useEffect,L=(e,t,n)=>(()=>{let o=s()-50;return(...r)=>{const i=s();o+50<i&&(o=i,(o=>{if(0!==e.C()&&!o.ctrlKey&&(t?o.deltaX:o.deltaY)){const t=e.k();t>0&&t<e.O()&&n()}})(...r))}})(),$=(e,t,n,o)=>x(e)||o?-n:t.O()-n,q=(e,t)=>{let n,o,r=!1;const i=t?"scrollLeft":"scrollTop",s=t?"overflowX":"overflowY",l=(o,r)=>t&&R()?$(n,e,o,r):o,c=async(r,s)=>{if(!n)return;o&&o();const c=()=>u(r(),0,e.O()),h=()=>{let t;return[new Promise(((e,n)=>{t=e,a(o=n,150)})),e.L(2,(()=>{t&&t()}))]};if(s&&O()){for(;e.$(7,c()),e.m();){const[e,t]=h();try{await e}catch(e){return}finally{t()}}n.scrollTo({[t?"left":"top"]:l(c()),behavior:"smooth"})}else for(;;){const[t,o]=h();try{n[i]=l(c()),e.$(6),await t}catch(e){return}finally{o()}}};return{q(o){n=o;let s=!1,c=!1;const a=d((()=>{s?a():(c=!1,e.$(5))}),150),u=()=>{c&&(r=!0),e.$(4,l(o[i])),a()},h=L(e,t,a),f=()=>{s=!0,c=r=!1},_=()=>{s=!1,k()&&(c=!0)};return o.addEventListener("scroll",u),o.addEventListener("wheel",h,{passive:!0}),o.addEventListener("touchstart",f,{passive:!0}),o.addEventListener("touchend",_,{passive:!0}),()=>{o.removeEventListener("scroll",u),o.removeEventListener("wheel",h),o.removeEventListener("touchstart",f),o.removeEventListener("touchend",_),a.t()}},A(e){c((()=>e))},X(t){t+=e.k(),c((()=>t))},Y(t,{align:n,smooth:o}={}){if(t=u(t,0,e.R()-1),"nearest"===n){const o=e.S(t),r=e.k();if(o<r)n="start";else{if(!(o+e.I(t)>r+e.T()))return;n="end"}}c((()=>e.M()+("end"===n?e.S(t)+e.I(t)-e.T():"center"===n?e.S(t)+(e.I(t)-e.T())/2:e.S(t))),o)},j:e=>{if(n){if(r){r=!1;const e=n.style,t=e[s];e[s]="hidden",a((()=>{e[s]=t}))}n[i]+=l(e,!0)}}}},A=(e,t)=>{let n;const o=t?"scrollX":"scrollY",r=t?"offsetLeft":"offsetTop",i=(o,r)=>t&&R()?$(n,e,o,r):o;return{q(s){n=s;const l=(e,n)=>{const o=n+(t&&R()?window.innerWidth-e[r]-e.offsetWidth:e[r]),i=e.offsetParent;return e!==document.body&&i?l(i,o):o},c=d((()=>{e.$(5)}),150),a=()=>{e.$(4,i(window[o])-l(s,0)),c()},u=L(e,t,c);return window.addEventListener("scroll",a),window.addEventListener("wheel",u,{passive:!0}),()=>{window.removeEventListener("scroll",a),window.removeEventListener("wheel",u),c.t()}},j:e=>{window.scrollBy(t?i(e,!0):0,t?0:e)}}},X="current",Y={},j=(e,t)=>{if(c(e))for(const n of e)j(n,t);else h(e)&&"boolean"!=typeof e&&t.push(e)},D=e=>{const n=t.useRef();return n[X]||(n[X]=e())},N=e=>{const n=t.useRef(e);return B((()=>{n[X]=e}),[e]),n},P={box:"border-box"},U=(e,t)=>{let n;const o=t?"width":"height",r=new WeakMap,i=f((()=>new ResizeObserver((i=>{const s=[];for(const{target:l,contentRect:c}of i)if(l.offsetParent)if(l===n)e.$(2,[c[o],c[t?"left":"top"],w(_(n)[t?"paddingRight":"paddingBottom"])]);else{const e=r.get(l);h(e)&&s.push([e,c[o]])}s.length&&e.$(1,s)}))));return{D(e){n=e;const t=i();return t.observe(e,P),()=>{t.disconnect()}},N(e,t){const n=i();return r.set(e,t),n.observe(e),()=>{r.delete(e),n.unobserve(e)}}}},V=(e,t)=>{const n=t?"width":"height",o=t?"innerWidth":"innerHeight",r=new WeakMap,i=f((()=>new ResizeObserver((t=>{const o=[];for(const{target:e,contentRect:i}of t){if(!e.offsetParent)continue;const t=r.get(e);h(t)&&o.push([t,i[n]])}o.length&&e.$(1,o)}))));return{D(){const t=()=>{e.$(2,[window[o],0,0])};return window.addEventListener("resize",t),t(),()=>{window.removeEventListener("resize",t),i().disconnect()}},N(e,t){const n=i();return r.set(e,t),n.observe(e),()=>{r.delete(e),n.unobserve(e)}}}},E=(e,t)=>{let n;const o="height",i="width",s=new WeakMap,l=new Set,c=new Set,a=new Map,u=(e,t)=>`${e}-${t}`,h=f((()=>new ResizeObserver((h=>{const d=new Set,f=new Set;for(const{target:r,contentRect:l}of h)if(r.offsetParent)if(r===n){const r=_(n);e.$(2,[l[o],l.top,w(r.paddingBottom)]),t.$(2,[l[i],l.left,w(r.paddingRight)])}else{const e=s.get(r);if(e){const[t,n]=e,r=u(t,n),s=a.get(r),c=[l[o],l[i]];let h,_;s?(s[0]!==c[0]&&(h=!0),s[1]!==c[1]&&(_=!0)):h=_=!0,h&&d.add(t),_&&f.add(n),(h||_)&&a.set(r,c)}}if(d.size){const t=[];d.forEach((e=>{let n=0;c.forEach((t=>{const o=a.get(u(e,t));o&&(n=r(n,o[0]))})),n&&t.push([e,n])})),e.$(1,t)}if(f.size){const e=[];f.forEach((t=>{let n=0;l.forEach((e=>{const o=a.get(u(e,t));o&&(n=r(n,o[1]))})),n&&e.push([t,n])})),t.$(1,e)}}))));return{D(e){n=e;const t=h();return t.observe(e,P),()=>{t.disconnect()}},N(e,t,n){const o=h();return s.set(e,[t,n]),l.add(t),c.add(n),o.observe(e),()=>{s.delete(e),o.unobserve(e)}}}},F=t.forwardRef((({children:n,attrs:o,width:r,height:i,scrolling:s},l)=>e.jsx("div",{ref:l,...o,children:e.jsx("div",{style:t.useMemo((()=>({position:"relative",visibility:"hidden",width:null!=r?r:"100%",height:null!=i?i:"100%",pointerEvents:s?"none":"auto"})),[r,i,s]),children:n})}))),G=t.memo((({P:n,U:o,V:r,F:i,G:s,K:l,Z:c})=>{const a=t.useRef(null);B((()=>o.N(a[X],r)),[r]);const u=t.useMemo((()=>{const e={margin:0,padding:0,position:"absolute",[c?"height":"width"]:"100%",[c?"top":"left"]:0,[c?R()?"right":"left":"top"]:i,visibility:s?"hidden":"visible"};return c&&(e.display="flex"),e}),[i,s]);return"string"==typeof l?e.jsx(l,{ref:a,style:u,children:n}):e.jsx(l,{ref:a,style:u,index:r,children:n})})),K=e=>t.useReducer(e._,void 0,e._)[1],Q=(e,n)=>t.useMemo((()=>{if("function"==typeof e)return[e,n||0];const t=(e=>{const t=[];return j(e,t),t})(e);return[e=>t[e],t.length]}),[e,n]),Z=t.forwardRef((({children:o,count:i,overscan:s=4,initialItemSize:c,initialItemCount:a,shift:u,horizontal:d,reverse:f,cache:_,components:{Root:w=F,Item:g="div"}=Y,onScroll:p,onScrollStop:v,onRangeChange:m,...b},S)=>{const[z,y]=Q(o,i),I=N(p),x=N(v),[R,k,O,M]=D((()=>{const e=!!d,t=W(y,c,a,_,!c);return[t,U(t,e),q(t,e),e]}));y!==R.R()&&R.$(3,[y,u]);const H=K(R),[J,L]=R.p(),$=R.C(),A=R.W(),j=R.H(),P=t.useRef(null);B((()=>{const e=P[X],t=R.L(3,(e=>{e?n.flushSync(H):H()})),o=R.L(4,(()=>{I[X]&&I[X](R.k())})),r=R.L(8,(()=>{x[X]&&x[X]()})),i=k.D(e),s=O.q(e);return()=>{t(),o(),r(),i(),s()}}),[]),B((()=>{const e=R.B();e&&O.j(e)}),[A]),t.useEffect((()=>{m&&m(J,L)}),[J,L]),t.useImperativeHandle(S,(()=>({get cache(){return R.g()},get scrollOffset(){return R.k()},get scrollSize(){return R.H()},get viewportSize(){return R.T()},scrollToIndex:O.Y,scrollTo:O.A,scrollBy:O.X})),[]);const V=C(J,s,$),E=T(L,s,$,y),Z=[];for(let t=V;t<=E;t++){const n=z(t),o=n.key;let i=R.S(t);f&&(i+=r(0,R.T()-R.J())),Z.push(e.jsx(G,{U:k,V:t,F:i,G:R.v(t),K:g,P:n,Z:M},h(o)?o:"_"+t))}return e.jsx(w,{ref:P,width:M?j:void 0,height:M?void 0:j,scrolling:0!==$,attrs:t.useMemo((()=>({...b,style:{display:M?"inline-block":"block",[M?"overflowX":"overflowY"]:"auto",overflowAnchor:"none",contain:"strict",width:"100%",height:"100%",...b.style}})),l(b)),children:Z})})),ee=t.forwardRef((({children:o,count:r,overscan:i=4,initialItemSize:s,initialItemCount:c,shift:a,horizontal:u,cache:d,components:{Root:f=F,Item:_="div"}=Y,onScrollStop:w,onRangeChange:g,...p},v)=>{const[m,b]=Q(o,r),S=N(w),[z,y,I,x]=D((()=>{const e=!!u,t=W(b,s,c,d,!s);return[t,V(t,e),A(t,e),e]}));b!==z.R()&&z.$(3,[b,a]);const R=K(z),[k,O]=z.p(),M=z.C(),H=z.W(),J=z.J(),L=t.useRef(null);B((()=>{const e=L[X],t=z.L(3,(e=>{e?n.flushSync(R):R()})),o=z.L(8,(()=>{S[X]&&S[X]()})),r=y.D(e),i=I.q(e);return()=>{t(),o(),r(),i()}}),[]),B((()=>{const e=z.B();e&&I.j(e)}),[H]),t.useEffect((()=>{g&&g(k,O)}),[k,O]),t.useImperativeHandle(v,(()=>({get cache(){return z.g()}})),[]);const $=C(k,i,M),q=T(O,i,M,b),j=[];for(let t=$;t<=q;t++){const n=m(t),o=n.key;j.push(e.jsx(G,{U:y,V:t,F:z.S(t),G:z.v(t),K:_,P:n,Z:x},h(o)?o:"_"+t))}return e.jsx(f,{ref:L,width:x?J:void 0,height:x?void 0:J,scrolling:0!==M,attrs:t.useMemo((()=>({...p,style:{display:x?"inline-block":"block",width:x?"auto":"100%",height:x?"100%":"auto",...p.style}})),l(p)),children:j})})),te=(e,t)=>`${e}-${t}`,ne=t.memo((({P:n,U:o,ee:r,te:i,ne:s,oe:l,re:c,ie:a,G:u,K:h})=>{const d=t.useRef(null);return B((()=>o.N(d[X],r,i)),[i,r]),e.jsx(h,{ref:d,style:t.useMemo((()=>({display:"grid",margin:0,padding:0,position:"absolute",top:s,[R()?"right":"left"]:l,visibility:u?"hidden":"visible",minHeight:c,minWidth:a})),[s,l,a,c,u]),children:n})})),oe=t.forwardRef((({children:o,row:r,col:i,cellHeight:s=40,cellWidth:c=100,overscan:a=2,initialRowCount:u,initialColCount:h,components:{Root:d=F,Cell:f="div"}=Y,..._},w)=>{const[g,p,v,m,b]=D((()=>{const e=W(r,s,u),t=W(i,c,h);return[e,t,E(e,t),q(e,!1),q(t,!0)]}));r!==g.R()&&g.$(3,[r]),i!==p.R()&&p.$(3,[i]);const S=K(g),z=K(p),[y,I]=g.p(),[x,R]=p.p(),k=g.C(),O=p.C(),M=g.W(),H=p.W(),J=g.H(),L=p.H(),$=t.useRef(null);B((()=>{const e=$[X],t=g.L(3,(e=>{e?n.flushSync(S):S()})),o=p.L(3,(e=>{e?n.flushSync(z):z()})),r=v.D(e),i=m.q(e),s=b.q(e);return()=>{t(),o(),r(),i(),s()}}),[]),B((()=>{const e=g.B();e&&m.j(e)}),[M]),B((()=>{const e=p.B();e&&b.j(e)}),[H]),t.useImperativeHandle(w,(()=>({get scrollOffset(){return[p.k(),g.k()]},get scrollSize(){return[p.H(),g.H()]},get viewportSize(){return[p.T(),g.T()]},scrollToIndex(e,t){b.Y(e),m.Y(t)},scrollTo(e,t){b.A(e),m.A(t)},scrollBy(e,t){b.X(e),m.X(t)}})),[]);const A=t.useMemo((()=>{const e=new Map;return(t,n)=>{let r=e.get(te(t,n));return r||e.set(te(t,n),r=o({rowIndex:t,colIndex:n})),r}}),[o]),j=C(y,a,k),N=T(I,a,k,r),P=C(x,a,O),U=T(R,a,O,i),V=[];for(let t=j;t<=N;t++)for(let n=P;n<=U;n++)V.push(e.jsx(ne,{U:v,ee:t,te:n,ne:g.S(t),oe:p.S(n),re:g.I(t),ie:p.I(n),G:g.v(t)||p.v(n),K:f,P:A(t,n)},te(t,n)));return e.jsx(d,{ref:$,width:L,height:J,scrolling:0!==k||0!==O,attrs:t.useMemo((()=>({..._,style:{overflow:"auto",overflowAnchor:"none",contain:"strict",width:"100%",height:"100%",..._.style}})),l(_)),children:V})}));exports.VList=Z,exports.WVList=ee,exports.experimental_VGrid=oe;
|
|
3
3
|
//# sourceMappingURL=index.js.map
|