virtua 0.7.1 → 0.8.1
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 +4 -2
- package/lib/core/cache.d.ts +1 -1
- package/lib/core/store.d.ts +10 -7
- 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 +4 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,9 @@
|
|
|
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).
|
|
6
|
+
|
|
7
|
+
|
|
6
8
|
|
|
7
9
|
If you want to check the difference with the alternatives right away, [see comparison section](#comparison).
|
|
8
10
|
|
|
@@ -184,7 +186,7 @@ And see [examples](./stories) for more usages.
|
|
|
184
186
|
| Reverse scroll | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ |
|
|
185
187
|
| Reverse scroll in iOS Safari | ❌ | ✅ | ❌ | ❌ | ❌ | ❌ |
|
|
186
188
|
| 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)) | ✅ | ✅ |
|
|
187
|
-
|
|
|
189
|
+
| Reverse (bi-directional) infinite scroll | ✅ | ✅ | ❌ | ❌ | ❌ | 🟠 (has startItem method but its scroll position can be inaccurate) |
|
|
188
190
|
| Scroll restoration | ✅ | ✅ (getState) | ❌ | ❌ | ❌ | ❌ |
|
|
189
191
|
| Smooth scroll | ❌ | ✅ | ❌ | ❌ | ✅ | ✅ |
|
|
190
192
|
| RTL direction | ✅ | ❌ | ✅ | ❌ | ❌ | ❌ |
|
package/lib/core/cache.d.ts
CHANGED
|
@@ -16,4 +16,4 @@ export declare const findStartIndexWithOffset: (cache: Writeable<Cache>, offset:
|
|
|
16
16
|
export declare const hasUnmeasuredItemsInRange: (cache: Cache, startIndex: number, endIndex: number) => boolean;
|
|
17
17
|
export declare const estimateDefaultItemSize: (cache: Writeable<Cache>) => void;
|
|
18
18
|
export declare const initCache: (length: number, itemSize: number) => Cache;
|
|
19
|
-
export declare const
|
|
19
|
+
export declare const updateCacheLength: (cache: Writeable<Cache>, length: number, isShift?: boolean) => [number, boolean];
|
package/lib/core/store.d.ts
CHANGED
|
@@ -8,11 +8,15 @@ export declare const SCROLL_DOWN = 1;
|
|
|
8
8
|
export declare const SCROLL_UP = 2;
|
|
9
9
|
export declare const ACTION_ITEM_RESIZE = 1;
|
|
10
10
|
export declare const ACTION_VIEWPORT_RESIZE = 2;
|
|
11
|
-
export declare const
|
|
12
|
-
export declare const
|
|
13
|
-
export declare const
|
|
14
|
-
export declare const
|
|
15
|
-
|
|
11
|
+
export declare const ACTION_ITEMS_LENGTH_CHANGE = 3;
|
|
12
|
+
export declare const ACTION_SCROLL = 4;
|
|
13
|
+
export declare const ACTION_BEFORE_MANUAL_SCROLL = 5;
|
|
14
|
+
export declare const ACTION_SCROLL_END = 6;
|
|
15
|
+
export declare const ACTION_MANUAL_SCROLL = 7;
|
|
16
|
+
type Actions = [type: typeof ACTION_ITEM_RESIZE, entries: ItemResize[]] | [type: typeof ACTION_VIEWPORT_RESIZE, size: number] | [
|
|
17
|
+
type: typeof ACTION_ITEMS_LENGTH_CHANGE,
|
|
18
|
+
arg: [length: number, isShift?: boolean | undefined]
|
|
19
|
+
] | [type: typeof ACTION_SCROLL, offset: number] | [type: typeof ACTION_BEFORE_MANUAL_SCROLL, offset: number] | [type: typeof ACTION_SCROLL_END, dummy?: void] | [type: typeof ACTION_MANUAL_SCROLL, dummy?: void];
|
|
16
20
|
type Subscriber = (sync?: boolean) => void;
|
|
17
21
|
export declare const UPDATE_SCROLL = 1;
|
|
18
22
|
export declare const UPDATE_SIZE = 2;
|
|
@@ -26,7 +30,7 @@ export type VirtualStore = {
|
|
|
26
30
|
_hasUnmeasuredItemsInTargetViewport(offset: number): boolean;
|
|
27
31
|
_getItemOffset(index: number): number;
|
|
28
32
|
_getItemSize(index: number): number;
|
|
29
|
-
|
|
33
|
+
_getItemsLength(): number;
|
|
30
34
|
_getScrollOffset(): number;
|
|
31
35
|
_getScrollOffsetMax(): number;
|
|
32
36
|
_getIsScrolling(): boolean;
|
|
@@ -36,7 +40,6 @@ export type VirtualStore = {
|
|
|
36
40
|
_flushJump(): ScrollJump;
|
|
37
41
|
_subscribe(target: number, cb: Subscriber): () => void;
|
|
38
42
|
_update(...action: Actions): void;
|
|
39
|
-
_updateCacheLength(length: number): void;
|
|
40
43
|
};
|
|
41
44
|
export declare const createVirtualStore: (elementsCount: number, itemSize?: number, initialItemCount?: number, cache?: Cache, isReverse?: boolean, shouldAutoEstimateItemSize?: boolean) => VirtualStore;
|
|
42
45
|
export {};
|
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 r=Math.min,o=Math.max,i=Math.abs,s=Date.now,l=Object.values,c=setTimeout,u=(e,t,n)=>r(n,o(t,e)),a=e=>null!=e,d=(e,t)=>{let n;const r=()=>{a(n)&&clearTimeout(n)},o=()=>{r(),n=c((()=>{n=null,e()}),t)};return o.t=r,o},h=e=>{let t,n;return(...r)=>(t||(t=!0,n=e(...r)),n)},f=-1,_=(e,t)=>{const n=e.o[t];return n===f?e.i:n},g=(e,t)=>{if(!e.l)return 0;if(e.u>=t)return e.h[t];let n=e.u,r=e.h[n];for(;n<t;)r+=_(e,n),e.h[++n]=r;return e.u=t,r},w=(e,t,n)=>{let r=0;if(n>=0)for(;t<e.l-1;){const o=_(e,t++);if((r+=o)>=n){r-o/2>=n&&t--;break}}else for(;t>0;){const o=_(e,--t);if((r-=o)<=n){r+o/2<n&&t++;break}}return u(t,0,e.l-1)},m=(e,t,n)=>w(e,n,t-g(e,n)),p=(e,t)=>{for(let n=e.l;n<t;n++)e.o.push(f),e.h.push(0===n?0:f);e.l=t},v=(e,t)=>t.reduce(((t,[n,r])=>t+(r-_(e,n))),0),b=(e,t=40,n=0,s=((e,t)=>{const n={i:t,l:0,u:0,o:[],h:[]};return p(n,e),n})(e,t),l,c)=>{let a=t*o(n-1,0),d=0,h=0,b=0,S=0,I=!1,z=!1,R=[0,n];const x=new Set,y=()=>(e=>e.l?g(e,e.l-1)+_(e,e.l-1):0)(s),k=()=>y()-a,O=e=>{const t=S;return S=e,S!==t&&(0===S||0===t)};return{_:()=>JSON.parse(JSON.stringify(s)),g(){const[e,t]=R,n=m(s,d,e),r=w(s,n,a);return e===n&&t===r?R:R=[n,r]},m:e=>s.o[e]===f,p(e){const t=m(s,e,R[0]);return((e,t,n)=>e.o.slice(t,n+1).includes(f))(s,o(0,t-1),r(s.l-1,w(s,t,a)+1))},v(e){const t=g(s,e);return l?t+o(0,a-y()):t},S:e=>_(s,e),I:()=>s.l,R:()=>d,k,O:()=>0!==S,C:()=>a,T:()=>o(y(),a),M:()=>h,H(){const e=b;return b=0,e},J(e,t){const n=[e,t];return x.add(n),()=>{x.delete(n)}},W(e,t){let n,o=0;switch(e){case 1:{const e=t.filter((([e,t])=>s.o[e]!==t));if(!e.length)break;let i=0;if(2===S)i=v(s,e);else if(I){const[t]=R;0===d||(i=d>k()-1.5?v(s,e):v(s,e.filter((([e])=>e<t))))}i&&(b=i,h++,o+=4);let l=!1;e.forEach((([e,t])=>{((e,t,n)=>{const o=e.o[t]===f;return e.o[t]=n,e.u=r(t,e.u),o})(s,e,t)&&(l=!0)})),c&&l&&!d&&(e=>{const t=e.o.filter((e=>e!==f)),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),o+=2,z=n=!0;break}case 2:a!==t&&(a=t,o=2);break;case 3:case 4:if(d===t)break;if(3===e){const e=z;z=!1,0!==S&&e||I||O(d>t?2:1)&&(o+=8),n=i(d-t)>a,o+=16}d=u(t,0,k()),o+=1;break;case 5:O(0)&&(o=8),I=!1;break;case 6:I=!0}o&&x.forEach((([e,t])=>{o&e&&t(n)}))},L(e){s.l!==e&&((e,t)=>{const n=t-e.l;if(n>0)p(e,t);else{for(let t=n;t<0;t++)e.o.pop(),e.h.pop();e.l=t,e.u=u(t-1,0,e.u)}})(s,e)}}},S="undefined"!=typeof window?t.useLayoutEffect:t.useEffect,I="current",z={},R=(e,t)=>{if(Array.isArray(e))for(const n of e)R(n,t);else a(e)&&"boolean"!=typeof e&&t.push(e)},x=e=>{const t=[];return R(e,t),t},y=e=>{const n=t.useRef(e);return S((()=>{n[I]=e}),[e]),n},k=(e,r,o,i)=>{const[s,l]=t.useState(r),c=y(r);if(t.useLayoutEffect((()=>{const t=()=>{l((()=>c[I]()))};return e.J(o,(e=>{e?n.flushSync(t):t()}))}),[]),i){const e=r();s!==e&&l(e)}return s},O=/*#__PURE__*/h((e=>{const t="scrollLeft",n=e[t];e[t]=1;const r=e[t]<1;return e[t]=n,r})),C=(e,t,n)=>(()=>{let r=s()-50;return(...o)=>{const i=s();r+50<i&&(r=i,(r=>{if(e.O()&&!r.ctrlKey&&(t?r.deltaX:r.deltaY)){const t=e.R();t>0&&t<e.k()&&n()}})(...o))}})(),T=(e,t,n)=>{let r,o;const i=t?"scrollLeft":"scrollTop",s=()=>r?t?r.scrollWidth:r.scrollHeight:0,l=(o,i)=>t&&n?O(r)||i?-o:e.k()-o:o,a=async t=>{if(!r)return;const n=()=>u(t(),0,s()-e.C());for(;;){const t=n();if(e.W(4,t),!e.p(t))break;o&&o[1]();const r=e.J(2,(()=>{o&&o[0]()}));try{await new Promise(((e,t)=>{let n=!1;const r=()=>{n||(n=!0,e(),o=void 0)};o=[r,t],c(r,250)}))}catch(e){return}finally{r()}}r[i]=l(n()),e.W(6)};return{$(n){r=n;const o=()=>{e.W(3,l(n[i]))},s=d((()=>{o(),e.W(5)}),150),c=()=>{o(),s()},u=C(e,t,s);return n.addEventListener("scroll",c),n.addEventListener("wheel",u,{passive:!0}),()=>{n.removeEventListener("scroll",c),n.removeEventListener("wheel",u),s.t()}},q:s,B(e){a((()=>e))},j(t){t+=e.R(),a((()=>t))},A(t,n){t=u(t,0,e.I()-1),a("end"===n?()=>e.v(t)+e.S(t)-e.C():()=>e.v(t))},N:e=>{r&&(r[i]+=l(e,!0))}}},M=(e,t)=>{const n=t?"scrollX":"scrollY",r=t?"offsetLeft":"offsetTop";return{$(o){let i=!1;const s=(e,t)=>{const n=t+e[r],o=e.offsetParent;return e!==document.body&&o?s(o,n):n},l=()=>{i&&e.W(3,window[n]-s(o,0))},c=d((()=>{l(),e.W(5)}),150),u=()=>{l(),c()},a=C(e,t,c),h=new IntersectionObserver((([e])=>{i=e.isIntersecting}));return h.observe(o),window.addEventListener("scroll",u),window.addEventListener("wheel",a,{passive:!0}),()=>{h.disconnect(),window.removeEventListener("scroll",u),window.removeEventListener("wheel",a),c.t()}},N:e=>{window.scrollBy(t?e:0,t?0:e)}}},H=e=>{const n=t.useRef();return n[I]||(n[I]=e())},J=(e,t)=>{let n;const r=t?"width":"height",o=new WeakMap,i=h((()=>new ResizeObserver((t=>{const i=[];for(const{target:s,contentRect:l}of t)if(s===n)e.W(2,l[r]);else{const e=o.get(s);a(e)&&i.push([e,l[r]])}i.length&&e.W(1,i)}))));return{U(e){n=e;const t=i();return t.observe(e),()=>{t.disconnect()}},V(e,t){const n=i();return o.set(e,t),n.observe(e),()=>{o.delete(e),n.unobserve(e)}}}},W=(e,t)=>{const n=t?"width":"height",r=t?"innerWidth":"innerHeight",o=new WeakMap,i=h((()=>new ResizeObserver((t=>{const r=[];for(const{target:e,contentRect:i}of t){const t=o.get(e);a(t)&&r.push([t,i[n]])}r.length&&e.W(1,r)}))));return{U(){const t=()=>{e.W(2,window[r])};return window.addEventListener("resize",t),t(),()=>{window.removeEventListener("resize",t),i().disconnect()}},V(e,t){const n=i();return o.set(e,t),n.observe(e),()=>{o.delete(e),n.unobserve(e)}}}},L=(e,t)=>{let n;const r="height",i="width",s=new WeakMap,l=new Set,c=new Set,u=new Map,a=(e,t)=>`${e}-${t}`,d=h((()=>new ResizeObserver((d=>{const h=new Set,f=new Set;for(const{target:o,contentRect:l}of d)if(o===n)e.W(2,l[r]),t.W(2,l[i]);else{const e=s.get(o);if(e){const[t,n]=e,o=a(t,n),s=u.get(o),c=[l[r],l[i]];let d,_;s?(s[0]!==c[0]&&(d=!0),s[1]!==c[1]&&(_=!0)):d=_=!0,d&&h.add(t),_&&f.add(n),(d||_)&&u.set(o,c)}}if(h.size){const t=[];h.forEach((e=>{let n=0;c.forEach((t=>{const r=u.get(a(e,t));r&&(n=o(n,r[0]))})),n&&t.push([e,n])})),e.W(1,t)}if(f.size){const e=[];f.forEach((t=>{let n=0;l.forEach((e=>{const r=u.get(a(e,t));r&&(n=o(n,r[1]))})),n&&e.push([t,n])})),t.W(1,e)}}))));return{U(e){n=e;const t=d();return t.observe(e),()=>{t.disconnect()}},V(e,t,n){const r=d();return s.set(e,[t,n]),l.add(t),c.add(n),r.observe(e),()=>{s.delete(e),r.unobserve(e)}}}},$=t.forwardRef((({children:n,attrs:r,width:o,height:i,scrolling:s},l)=>e.jsx("div",{ref:l,...r,children:e.jsx("div",{style:t.useMemo((()=>({position:"relative",visibility:"hidden",width:null!=o?o:"100%",height:null!=i?i:"100%",pointerEvents:s?"none":"auto"})),[o,i,s]),children:n})}))),q=t.memo((({D:n,P:r,X:o,Y:i,F:s,G:l,K:c})=>{const u=t.useRef(null),a=k(o,(()=>o.v(i)),2,!0),d=k(o,(()=>o.m(i)),2,!0);return S((()=>r.V(u[I],i)),[i]),e.jsx(s,{ref:u,style:t.useMemo((()=>{const e=c?"right":"left",t={margin:0,padding:0,position:"absolute",[l?"height":"width"]:"100%",[l?"top":e]:0,[l?e:"top"]:a,visibility:d?"hidden":"visible"};return l&&(t.display="flex"),t}),[a,d]),children:n})})),B=t.forwardRef((({children:n,overscan:i=4,initialItemSize:s,initialItemCount:c,horizontal:u,mode:d,cache:h,components:{Root:f=$,Item:_="div"}=z,onScroll:g,onScrollStop:w,onRangeChange:m,...p},v)=>{const R=t.useMemo((()=>x(n)),[n]),O=R.length,C=y(g),M=y(w),[W,L,B,j,A]=H((()=>{const e=!!u,t="rtl"===d,n=b(O,s,c,h,"reverse"===d,!s);return[n,J(n,e),T(n,e,t),e,t]}));W.L(O);const[N,U]=k(W,W.g,3),V=k(W,W.O,8),D=k(W,W.M,4),E=k(W,W.T,2,!0),P=t.useRef(null);S((()=>{const e=P[I],t=L.U(e),n=B.$(e),r=W.J(16,(()=>{C[I]&&C[I](W.R())}));return()=>{t(),n(),r()}}),[]),S((()=>{const e=W.H();e&&B.N(e)}),[D]),t.useEffect((()=>{V||M[I]&&M[I]()}),[V]),t.useEffect((()=>{m&&m(N,U)}),[N,U]),t.useImperativeHandle(v,(()=>({get cache(){return W._()},get scrollOffset(){return W.R()},get scrollSize(){return B.q()},get viewportSize(){return W.C()},scrollToIndex:B.A,scrollTo:B.B,scrollBy:B.j})),[]);const X=o(N-i,0),Y=r(U+i,O-1),F=t.useMemo((()=>{const t=[];for(let n=X;n<=Y;n++){const r=R[n],o=r.key;t.push(e.jsx(q,{P:L,X:W,Y:n,F:_,D:r,G:j,K:A},a(o)?o:"_"+n))}return t}),[R,X,Y]);return e.jsx(f,{ref:P,width:j?E:void 0,height:j?void 0:E,scrolling:V,attrs:t.useMemo((()=>({...p,style:{overflow:j?"auto hidden":"hidden auto",display:j?"inline-block":"block",contain:"strict",width:"100%",height:"100%",padding:0,margin:0,...p.style}})),l(p)),children:F})})),j=(e,t)=>`${e}-${t}`,A=t.memo((({D:n,P:r,Z:o,ee:i,te:s,ne:l,F:c,K:u})=>{const a=t.useRef(null),d=k(o,(()=>o.v(s)),2,!0),h=k(i,(()=>i.v(l)),2,!0),f=k(o,(()=>o.m(s)),2,!0),_=k(i,(()=>i.m(l)),2,!0),g=k(o,(()=>o.S(s)),2,!0),w=k(i,(()=>i.S(l)),2,!0);return S((()=>r.V(a[I],s,l)),[l,s]),e.jsx(c,{ref:a,style:t.useMemo((()=>({display:"grid",margin:0,padding:0,position:"absolute",top:d,[u?"right":"left"]:h,visibility:f||_?"hidden":"visible",minHeight:g,minWidth:w})),[d,h,w,g,f,_]),children:n})})),N=t.forwardRef((({children:n,row:i,col:s,cellHeight:c=40,cellWidth:u=100,overscan:a=2,initialRowCount:d,initialColCount:h,rtl:f,components:{Root:_=$,Cell:g="div"}=z,...w},m)=>{const[p,v,R,x,y,O]=H((()=>{const e=!!f,t=b(i,c,d),n=b(s,u,h);return[t,n,L(t,n),T(t,!1,e),T(n,!0,e),e]}));p.L(i),v.L(s);const[C,M]=k(p,p.g,3),[J,W]=k(v,v.g,3),q=k(p,p.O,8),B=k(v,v.O,8),N=k(p,p.M,4),U=k(v,v.M,4),V=k(p,p.T,2,!0),D=k(v,v.T,2,!0),E=t.useRef(null);S((()=>{const e=E[I],t=R.U(e),n=x.$(e),r=y.$(e);return()=>{t(),n(),r()}}),[]),S((()=>{const e=p.H();e&&x.N(e)}),[N]),S((()=>{const e=v.H();e&&y.N(e)}),[U]),t.useImperativeHandle(m,(()=>({get scrollOffset(){return[v.R(),p.R()]},get scrollSize(){return[y.q(),x.q()]},get viewportSize(){return[v.C(),p.C()]},scrollToIndex(e,t){y.A(e),x.A(t)},scrollTo(e,t){y.B(e),x.B(t)},scrollBy(e,t){y.j(e),x.j(t)}})),[]);const P=t.useMemo((()=>{const e=new Map;return(t,r)=>{let o=e.get(j(t,r));return o||e.set(j(t,r),o=n({rowIndex:t,colIndex:r})),o}}),[n]),X=o(C-a,0),Y=r(M+a,i-1),F=o(J-a,0),G=r(W+a,s-1),K=t.useMemo((()=>{const t=[];for(let n=X;n<=Y;n++)for(let r=F;r<=G;r++)t.push(e.jsx(A,{P:R,Z:p,ee:v,te:n,ne:r,F:g,D:P(n,r),K:O},j(n,r)));return t}),[P,X,Y,F,G]);return e.jsx(_,{ref:E,width:D,height:V,scrolling:q||B,attrs:t.useMemo((()=>({...w,style:{overflow:"auto",contain:"strict",width:"100%",height:"100%",padding:0,margin:0,...w.style}})),l(w)),children:K})})),U=t.forwardRef((({children:n,overscan:i=4,initialItemSize:s,initialItemCount:c,horizontal:u,cache:d,components:{Root:h=$,Item:f="div"}=z,onScrollStop:_,onRangeChange:g,...w},m)=>{const p=t.useMemo((()=>x(n)),[n]),v=p.length,R=y(_),[O,C,T,J]=H((()=>{const e=!!u,t=b(v,s,c,d,!1,!s);return[t,W(t,e),M(t,e),e]}));O.L(v);const[L,B]=k(O,O.g,3),j=k(O,O.O,8),A=k(O,O.M,4),N=k(O,O.T,2,!0),U=t.useRef(null);S((()=>{const e=U[I],t=C.U(e),n=T.$(e);return()=>{t(),n()}}),[]),S((()=>{const e=O.H();e&&T.N(e)}),[A]),t.useEffect((()=>{j||R[I]&&R[I]()}),[j]),t.useEffect((()=>{g&&g(L,B)}),[L,B]),t.useImperativeHandle(m,(()=>({get cache(){return O._()}})),[]);const V=o(L-i,0),D=r(B+i,v-1),E=t.useMemo((()=>{const t=[];for(let n=V;n<=D;n++){const r=p[n],o=r.key;t.push(e.jsx(q,{P:C,X:O,Y:n,F:f,D:r,G:J,K:!1},a(o)?o:"_"+n))}return t}),[p,V,D]);return e.jsx(h,{ref:U,width:J?N:void 0,height:J?void 0:N,scrolling:j,attrs:t.useMemo((()=>({...w,style:{overflow:"visible",display:J?"inline-block":"block",width:J?"auto":"100%",height:J?"100%":"auto",padding:0,margin:0,...w.style}})),l(w)),children:E})}));exports.VGrid=N,exports.VList=B,exports.WVList=U;
|
|
2
|
+
var e=require("react/jsx-runtime"),t=require("react"),n=require("react-dom");const r=Math.min,o=Math.max,s=Math.abs,i=Date.now,l=Object.values,c=setTimeout,u=(e,t,n)=>r(n,o(t,e)),a=e=>null!=e,d=(e,t)=>{let n;const r=()=>{a(n)&&clearTimeout(n)},o=()=>{r(),n=c((()=>{n=null,e()}),t)};return o.t=r,o},h=e=>{let t,n;return(...r)=>(t||(t=!0,n=e(...r)),n)},f=-1,_=(e,t)=>{const n=e.o[t];return n===f?e.i:n},w=(e,t)=>{if(!e.l)return 0;if(e.u>=t)return e.h[t];let n=e.u,r=e.h[n];for(;n<t;)r+=_(e,n),e.h[++n]=r;return e.u=t,r},g=(e,t,n)=>{let r=0;if(n>=0)for(;t<e.l-1;){const o=_(e,t++);if((r+=o)>=n){r-o/2>=n&&t--;break}}else for(;t>0;){const o=_(e,--t);if((r-=o)<=n){r+o/2<n&&t++;break}}return u(t,0,e.l-1)},m=(e,t,n)=>g(e,n,t-w(e,n)),p=(e,t,n)=>{const r=n?"unshift":"push";for(let n=e.l;n<t;n++)e.o[r](f),e.h.push(0===n?0:f);e.l=t},v=(e,t,n)=>{const r=t-e.l,o=r<0;let s;return o?(s=(n?e.o.splice(0,-r):e.o.splice(r)).reduce(((t,n)=>t+(n===f?e.i:n)),0),e.h.splice(r)):(s=e.i*r,p(e,e.l+r,n)),e.u=n?0:u(t-1,0,e.u),e.l=t,[s,o]},b=(e,t)=>t.reduce(((t,[n,r])=>t+(r-_(e,n))),0),S=(e,t=40,n=0,i=((e,t)=>{const n={i:t,l:0,u:0,o:[],h:[]};return p(n,e),n})(e,t),l,c)=>{let a=t*o(n-1,0),d=0,h=0,S=0,I=0,z=!1,R=!1,x=!1,y=[0,n];const k=new Set,O=()=>(e=>e.l?w(e,e.l-1)+_(e,e.l-1):0)(i),C=()=>O()-a,T=e=>u(e,0,C()),M=e=>{const t=I;return I=e,I!==t&&(0===I||0===t)};return{_:()=>JSON.parse(JSON.stringify(i)),g(){const[e,t]=y,n=m(i,d,e),r=g(i,n,a);return e===n&&t===r?y:y=[n,r]},m:e=>i.o[e]===f,p(e){const t=m(i,e,y[0]);return((e,t,n)=>e.o.slice(t,n+1).includes(f))(i,o(0,t-1),r(i.l-1,g(i,t,a)+1))},v(e){const t=w(i,e);return l?t+o(0,a-O()):t},S:e=>_(i,e),I:()=>i.l,R:()=>d,k:C,O:()=>0!==I,C:()=>a,T:()=>o(O(),a),M:()=>h,H(){const e=S;return S=0,e},J(e,t){const n=[e,t];return k.add(n),()=>{k.delete(n)}},W(e,t){let n,o=0;switch(e){case 1:{const e=t.filter((([e,t])=>i.o[e]!==t));if(!e.length)break;let s=0;if(z||R)if(0===d);else if(d>C()-1.5)s=b(i,e);else{const[t]=y;s=b(i,e.filter((([e])=>e<t)))}else 2===I&&(s=b(i,e));s&&(S=s,h++,o+=4);let l=!1;e.forEach((([e,t])=>{((e,t,n)=>{const o=e.o[t]===f;return e.o[t]=n,e.u=r(t,e.u),o})(i,e,t)&&(l=!0)})),c&&l&&!d&&(e=>{const t=e.o.filter((e=>e!==f)),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)})(i),o+=2,x=n=!0;break}case 2:a!==t&&(a=t,o=2);break;case 3:if(t[1]){const e=C()-d,[n,s]=v(i,t[0],!0),l=s?-r(n,e):n;S+=l,d=T(d+l),h++,o=5,z=!0}else v(i,t[0]);break;case 4:case 5:if(d===t)break;if(4===e){const e=x;x=!1,0!==I&&e||R||M(d>t?2:1)&&(o+=8),n=s(d-t)>a,o+=16,e||(z=!1)}d=T(t),o+=1;break;case 6:M(0)&&(o=8),z=R=!1;break;case 7:R=!0}o&&k.forEach((([e,t])=>{o&e&&t(n)}))}}},I="undefined"!=typeof window?t.useLayoutEffect:t.useEffect,z="current",R={},x=(e,t)=>{if(Array.isArray(e))for(const n of e)x(n,t);else a(e)&&"boolean"!=typeof e&&t.push(e)},y=e=>{const t=[];return x(e,t),t},k=e=>{const n=t.useRef(e);return I((()=>{n[z]=e}),[e]),n},O=(e,r,o,s)=>{const[i,l]=t.useState(r),c=k(r);if(t.useLayoutEffect((()=>{const t=()=>{l((()=>c[z]()))};return e.J(o,(e=>{e?n.flushSync(t):t()}))}),[]),s){const e=r();i!==e&&l(e)}return i},C=/*#__PURE__*/h((e=>{const t="scrollLeft",n=e[t];e[t]=1;const r=e[t]<1;return e[t]=n,r})),T=(e,t,n)=>(()=>{let r=i()-50;return(...o)=>{const s=i();r+50<s&&(r=s,(r=>{if(e.O()&&!r.ctrlKey&&(t?r.deltaX:r.deltaY)){const t=e.R();t>0&&t<e.k()&&n()}})(...o))}})(),M=(e,t,n)=>{let r,o;const s=t?"scrollLeft":"scrollTop",i=()=>r?t?r.scrollWidth:r.scrollHeight:0,l=(o,s)=>t&&n?C(r)||s?-o:e.k()-o:o,a=async t=>{if(!r)return;const n=()=>u(t(),0,i()-e.C());for(;;){const t=n();if(e.W(5,t),!e.p(t))break;o&&o[1]();const r=e.J(2,(()=>{o&&o[0]()}));try{await new Promise(((e,t)=>{let n=!1;const r=()=>{n||(n=!0,e(),o=void 0)};o=[r,t],c(r,250)}))}catch(e){return}finally{r()}}r[s]=l(n()),e.W(7)};return{L(n){r=n;const o=()=>{e.W(4,l(n[s]))},i=d((()=>{o(),e.W(6)}),150),c=()=>{o(),i()},u=T(e,t,i);return n.addEventListener("scroll",c),n.addEventListener("wheel",u,{passive:!0}),()=>{n.removeEventListener("scroll",c),n.removeEventListener("wheel",u),i.t()}},$:i,q(e){a((()=>e))},B(t){t+=e.R(),a((()=>t))},j(t,n){t=u(t,0,e.I()-1),a("end"===n?()=>e.v(t)+e.S(t)-e.C():()=>e.v(t))},A:e=>{r&&(r[s]+=l(e,!0))}}},H=(e,t)=>{const n=t?"scrollX":"scrollY",r=t?"offsetLeft":"offsetTop";return{L(o){let s=!1;const i=(e,t)=>{const n=t+e[r],o=e.offsetParent;return e!==document.body&&o?i(o,n):n},l=()=>{s&&e.W(4,window[n]-i(o,0))},c=d((()=>{l(),e.W(6)}),150),u=()=>{l(),c()},a=T(e,t,c),h=new IntersectionObserver((([e])=>{s=e.isIntersecting}));return h.observe(o),window.addEventListener("scroll",u),window.addEventListener("wheel",a,{passive:!0}),()=>{h.disconnect(),window.removeEventListener("scroll",u),window.removeEventListener("wheel",a),c.t()}},A:e=>{window.scrollBy(t?e:0,t?0:e)}}},J=e=>{const n=t.useRef();return n[z]||(n[z]=e())},W=(e,t)=>{let n;const r=t?"width":"height",o=new WeakMap,s=h((()=>new ResizeObserver((t=>{const s=[];for(const{target:i,contentRect:l}of t)if(i===n)e.W(2,l[r]);else{const e=o.get(i);a(e)&&s.push([e,l[r]])}s.length&&e.W(1,s)}))));return{N(e){n=e;const t=s();return t.observe(e),()=>{t.disconnect()}},U(e,t){const n=s();return o.set(e,t),n.observe(e),()=>{o.delete(e),n.unobserve(e)}}}},L=(e,t)=>{const n=t?"width":"height",r=t?"innerWidth":"innerHeight",o=new WeakMap,s=h((()=>new ResizeObserver((t=>{const r=[];for(const{target:e,contentRect:s}of t){const t=o.get(e);a(t)&&r.push([t,s[n]])}r.length&&e.W(1,r)}))));return{N(){const t=()=>{e.W(2,window[r])};return window.addEventListener("resize",t),t(),()=>{window.removeEventListener("resize",t),s().disconnect()}},U(e,t){const n=s();return o.set(e,t),n.observe(e),()=>{o.delete(e),n.unobserve(e)}}}},$=(e,t)=>{let n;const r="height",s="width",i=new WeakMap,l=new Set,c=new Set,u=new Map,a=(e,t)=>`${e}-${t}`,d=h((()=>new ResizeObserver((d=>{const h=new Set,f=new Set;for(const{target:o,contentRect:l}of d)if(o===n)e.W(2,l[r]),t.W(2,l[s]);else{const e=i.get(o);if(e){const[t,n]=e,o=a(t,n),i=u.get(o),c=[l[r],l[s]];let d,_;i?(i[0]!==c[0]&&(d=!0),i[1]!==c[1]&&(_=!0)):d=_=!0,d&&h.add(t),_&&f.add(n),(d||_)&&u.set(o,c)}}if(h.size){const t=[];h.forEach((e=>{let n=0;c.forEach((t=>{const r=u.get(a(e,t));r&&(n=o(n,r[0]))})),n&&t.push([e,n])})),e.W(1,t)}if(f.size){const e=[];f.forEach((t=>{let n=0;l.forEach((e=>{const r=u.get(a(e,t));r&&(n=o(n,r[1]))})),n&&e.push([t,n])})),t.W(1,e)}}))));return{N(e){n=e;const t=d();return t.observe(e),()=>{t.disconnect()}},U(e,t,n){const r=d();return i.set(e,[t,n]),l.add(t),c.add(n),r.observe(e),()=>{i.delete(e),r.unobserve(e)}}}},q=t.forwardRef((({children:n,attrs:r,width:o,height:s,scrolling:i},l)=>e.jsx("div",{ref:l,...r,children:e.jsx("div",{style:t.useMemo((()=>({position:"relative",visibility:"hidden",width:null!=o?o:"100%",height:null!=s?s:"100%",pointerEvents:i?"none":"auto"})),[o,s,i]),children:n})}))),B=t.memo((({V:n,D:r,P:o,X:s,Y:i,F:l,G:c})=>{const u=t.useRef(null),a=O(o,(()=>o.v(s)),2,!0),d=O(o,(()=>o.m(s)),2,!0);return I((()=>r.U(u[z],s)),[s]),e.jsx(i,{ref:u,style:t.useMemo((()=>{const e=c?"right":"left",t={margin:0,padding:0,position:"absolute",[l?"height":"width"]:"100%",[l?"top":e]:0,[l?e:"top"]:a,visibility:d?"hidden":"visible"};return l&&(t.display="flex"),t}),[a,d]),children:n})})),j=t.forwardRef((({children:n,overscan:s=4,initialItemSize:i,initialItemCount:c,shift:u,horizontal:d,mode:h,cache:f,components:{Root:_=q,Item:w="div"}=R,onScroll:g,onScrollStop:m,onRangeChange:p,...v},b)=>{const x=t.useMemo((()=>y(n)),[n]),C=x.length,T=k(g),H=k(m),[L,$,j,A,N]=J((()=>{const e=!!d,t="rtl"===h,n=S(C,i,c,f,"reverse"===h,!i);return[n,W(n,e),M(n,e,t),e,t]}));C!==L.I()&&L.W(3,[C,u]);const[U,V]=O(L,L.g,3),D=O(L,L.O,8),E=O(L,L.M,4),P=O(L,L.T,2,!0),X=t.useRef(null);I((()=>{const e=X[z],t=$.N(e),n=j.L(e),r=L.J(16,(()=>{T[z]&&T[z](L.R())}));return()=>{t(),n(),r()}}),[]),I((()=>{const e=L.H();e&&j.A(e)}),[E]),t.useEffect((()=>{D||H[z]&&H[z]()}),[D]),t.useEffect((()=>{p&&p(U,V)}),[U,V]),t.useImperativeHandle(b,(()=>({get cache(){return L._()},get scrollOffset(){return L.R()},get scrollSize(){return j.$()},get viewportSize(){return L.C()},scrollToIndex:j.j,scrollTo:j.q,scrollBy:j.B})),[]);const Y=o(U-s,0),F=r(V+s,C-1),G=t.useMemo((()=>{const t=[];for(let n=Y;n<=F;n++){const r=x[n],o=r.key;t.push(e.jsx(B,{D:$,P:L,X:n,Y:w,V:r,F:A,G:N},a(o)?o:"_"+n))}return t}),[x,Y,F]);return e.jsx(_,{ref:X,width:A?P:void 0,height:A?void 0:P,scrolling:D,attrs:t.useMemo((()=>({...v,style:{overflow:A?"auto hidden":"hidden auto",display:A?"inline-block":"block",contain:"strict",width:"100%",height:"100%",padding:0,margin:0,...v.style}})),l(v)),children:G})})),A=(e,t)=>`${e}-${t}`,N=t.memo((({V:n,D:r,K:o,Z:s,ee:i,te:l,Y:c,G:u})=>{const a=t.useRef(null),d=O(o,(()=>o.v(i)),2,!0),h=O(s,(()=>s.v(l)),2,!0),f=O(o,(()=>o.m(i)),2,!0),_=O(s,(()=>s.m(l)),2,!0),w=O(o,(()=>o.S(i)),2,!0),g=O(s,(()=>s.S(l)),2,!0);return I((()=>r.U(a[z],i,l)),[l,i]),e.jsx(c,{ref:a,style:t.useMemo((()=>({display:"grid",margin:0,padding:0,position:"absolute",top:d,[u?"right":"left"]:h,visibility:f||_?"hidden":"visible",minHeight:w,minWidth:g})),[d,h,g,w,f,_]),children:n})})),U=t.forwardRef((({children:n,row:s,col:i,cellHeight:c=40,cellWidth:u=100,overscan:a=2,initialRowCount:d,initialColCount:h,rtl:f,components:{Root:_=q,Cell:w="div"}=R,...g},m)=>{const[p,v,b,x,y,k]=J((()=>{const e=!!f,t=S(s,c,d),n=S(i,u,h);return[t,n,$(t,n),M(t,!1,e),M(n,!0,e),e]}));s!==p.I()&&p.W(3,[s]),i!==v.I()&&v.W(3,[i]);const[C,T]=O(p,p.g,3),[H,W]=O(v,v.g,3),L=O(p,p.O,8),B=O(v,v.O,8),j=O(p,p.M,4),U=O(v,v.M,4),V=O(p,p.T,2,!0),D=O(v,v.T,2,!0),E=t.useRef(null);I((()=>{const e=E[z],t=b.N(e),n=x.L(e),r=y.L(e);return()=>{t(),n(),r()}}),[]),I((()=>{const e=p.H();e&&x.A(e)}),[j]),I((()=>{const e=v.H();e&&y.A(e)}),[U]),t.useImperativeHandle(m,(()=>({get scrollOffset(){return[v.R(),p.R()]},get scrollSize(){return[y.$(),x.$()]},get viewportSize(){return[v.C(),p.C()]},scrollToIndex(e,t){y.j(e),x.j(t)},scrollTo(e,t){y.q(e),x.q(t)},scrollBy(e,t){y.B(e),x.B(t)}})),[]);const P=t.useMemo((()=>{const e=new Map;return(t,r)=>{let o=e.get(A(t,r));return o||e.set(A(t,r),o=n({rowIndex:t,colIndex:r})),o}}),[n]),X=o(C-a,0),Y=r(T+a,s-1),F=o(H-a,0),G=r(W+a,i-1),K=t.useMemo((()=>{const t=[];for(let n=X;n<=Y;n++)for(let r=F;r<=G;r++)t.push(e.jsx(N,{D:b,K:p,Z:v,ee:n,te:r,Y:w,V:P(n,r),G:k},A(n,r)));return t}),[P,X,Y,F,G]);return e.jsx(_,{ref:E,width:D,height:V,scrolling:L||B,attrs:t.useMemo((()=>({...g,style:{overflow:"auto",contain:"strict",width:"100%",height:"100%",padding:0,margin:0,...g.style}})),l(g)),children:K})})),V=t.forwardRef((({children:n,overscan:s=4,initialItemSize:i,initialItemCount:c,horizontal:u,cache:d,components:{Root:h=q,Item:f="div"}=R,onScrollStop:_,onRangeChange:w,...g},m)=>{const p=t.useMemo((()=>y(n)),[n]),v=p.length,b=k(_),[x,C,T,M]=J((()=>{const e=!!u,t=S(v,i,c,d,!1,!i);return[t,L(t,e),H(t,e),e]}));v!==x.I()&&x.W(3,[v]);const[W,$]=O(x,x.g,3),j=O(x,x.O,8),A=O(x,x.M,4),N=O(x,x.T,2,!0),U=t.useRef(null);I((()=>{const e=U[z],t=C.N(e),n=T.L(e);return()=>{t(),n()}}),[]),I((()=>{const e=x.H();e&&T.A(e)}),[A]),t.useEffect((()=>{j||b[z]&&b[z]()}),[j]),t.useEffect((()=>{w&&w(W,$)}),[W,$]),t.useImperativeHandle(m,(()=>({get cache(){return x._()}})),[]);const V=o(W-s,0),D=r($+s,v-1),E=t.useMemo((()=>{const t=[];for(let n=V;n<=D;n++){const r=p[n],o=r.key;t.push(e.jsx(B,{D:C,P:x,X:n,Y:f,V:r,F:M,G:!1},a(o)?o:"_"+n))}return t}),[p,V,D]);return e.jsx(h,{ref:U,width:M?N:void 0,height:M?void 0:N,scrolling:j,attrs:t.useMemo((()=>({...g,style:{overflow:"visible",display:M?"inline-block":"block",width:M?"auto":"100%",height:M?"100%":"auto",padding:0,margin:0,...g.style}})),l(g)),children:E})}));exports.VGrid=U,exports.VList=j,exports.WVList=V;
|
|
3
3
|
//# sourceMappingURL=index.js.map
|