virtua 0.3.0 → 0.4.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 +4 -4
- package/lib/core/cache.d.ts +4 -2
- package/lib/core/resizer.d.ts +0 -2
- package/lib/core/scroller.d.ts +2 -2
- package/lib/core/store.d.ts +8 -8
- package/lib/core/utils.d.ts +2 -0
- 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 +7 -5
- package/package.json +8 -7
package/README.md
CHANGED
|
@@ -10,11 +10,11 @@ If you want to check the difference with the alternatives right away, [see compa
|
|
|
10
10
|
|
|
11
11
|
This project is a challenge to rethink virtualization. The goals are...
|
|
12
12
|
|
|
13
|
-
- **
|
|
13
|
+
- **Zero configuration:** 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 in bottom-up scrolling and imperative scrolling, etc).
|
|
14
14
|
- **Fast:** Scrolling without frame drop needs optimization in many aspects (reduce CPU usage, reduce GC, [reduce layout recalculation](https://gist.github.com/paulirish/5d52fb081b3570c81e3a), optimize for frameworks, etc). We are trying to combine the best of them.
|
|
15
15
|
- **Small:** Its bundle size should be small as much as possible to be friendly with modern web development. Currently each components are ~3kB gzipped and the total is [~4kB gzipped](https://bundlephobia.com/package/virtua).
|
|
16
16
|
- **Flexible:** Aiming to support many usecases - fixed size, dynamic size, horizontal scrolling, reverse scrolling, rtl direction, sticky, infinite scrolling, placeholder, scrollTo, dnd, table, and more. See [live demo](#demo).
|
|
17
|
-
- **Framework agnostic (WIP):** Currently only for [React](https://react.dev/) but we could support [Vue](https://vuejs.org/), [Svelte](https://svelte.dev/), [Solid](https://www.solidjs.com/), [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) and more in the future.
|
|
17
|
+
- **Framework agnostic (WIP):** Currently only for [React](https://react.dev/) but we could support [Vue](https://vuejs.org/), [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.
|
|
18
18
|
|
|
19
19
|
## Demo
|
|
20
20
|
|
|
@@ -150,9 +150,9 @@ WIP
|
|
|
150
150
|
|
|
151
151
|
| | [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-cool-virtual](https://github.com/wellyshen/react-cool-virtual) |
|
|
152
152
|
| :------------------------------------------------- | :------------------------------------------------------- | :---------------------------------------------------------------- | :------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------ | :-------------------------------------------------------------------- |
|
|
153
|
-
| Bundle size | [4.
|
|
153
|
+
| Bundle size | [4.1kB gzipped](https://bundlephobia.com/package/virtua) | [16.3kB gzipped](https://bundlephobia.com/package/react-virtuoso) | [6.4kB gzipped](https://bundlephobia.com/package/react-window) | [27.3kB gzipped](https://bundlephobia.com/package/react-virtualized) | [2.3kB gzipped](https://bundlephobia.com/package/@tanstack/react-virtual) | [3.1kB gzipped](https://bundlephobia.com/package/react-cool-virtual) |
|
|
154
154
|
| Vertical scroll | ✅ | ✅ | ✅ | ✅ | 🟠 (needs customization) | 🟠 (needs customization) |
|
|
155
|
-
| Horizontal scroll | ✅ |
|
|
155
|
+
| Horizontal scroll | ✅ | ❌ | ✅ | ✅ | 🟠 (needs customization) | 🟠 (needs customization) |
|
|
156
156
|
| Grid (Virtualization for two dimension) | ✅ | ❌ | ✅ (FixedSizeGrid / VariableSizeGrid) | ✅ ([Grid](https://github.com/bvaughn/react-virtualized/blob/master/docs/Grid.md)) | 🟠 (needs customization) | 🟠 (needs customization) |
|
|
157
157
|
| Table | 🟠 (needs customization) | ✅ (TableVirtuoso) | 🟠 (needs customization) | ✅ ([Table](https://github.com/bvaughn/react-virtualized/blob/master/docs/Table.md)) | 🟠 (needs customization) | 🟠 (needs customization) |
|
|
158
158
|
| Window scroller | ❌ | ✅ | ❌ | ✅ ([WindowScroller](https://github.com/bvaughn/react-virtualized/blob/master/docs/WindowScroller.md)) | ✅ | ❌ |
|
package/lib/core/cache.d.ts
CHANGED
|
@@ -8,10 +8,12 @@ export type Cache = DeepReadonly<{
|
|
|
8
8
|
_offsets: number[];
|
|
9
9
|
}>;
|
|
10
10
|
export declare const getItemSize: (cache: Cache, index: number) => number;
|
|
11
|
-
export declare const setItemSize: (cache: Writeable<Cache>, index: number, size: number) =>
|
|
11
|
+
export declare const setItemSize: (cache: Writeable<Cache>, index: number, size: number) => boolean;
|
|
12
12
|
export declare const computeTotalSize: (cache: Writeable<Cache>) => number;
|
|
13
13
|
export declare const computeStartOffset: (cache: Writeable<Cache>, index: number) => number;
|
|
14
|
+
declare const findIndex: (cache: Cache, i: number, distance: number) => number;
|
|
14
15
|
export declare const findStartIndexWithOffset: (cache: Cache, offset: number, prevStartIndex: number, prevOffset: number) => number;
|
|
15
|
-
export
|
|
16
|
+
export { findIndex as findEndIndex };
|
|
16
17
|
export declare const hasUnmeasuredItemsInRange: (cache: Cache, startIndex: number, endIndex: number) => boolean;
|
|
18
|
+
export declare const estimateDefaultItemSize: (cache: Writeable<Cache>) => void;
|
|
17
19
|
export declare const resetCache: (length: number, itemSize: number, cache?: Cache) => Cache;
|
package/lib/core/resizer.d.ts
CHANGED
|
@@ -2,12 +2,10 @@ import { VirtualStore } from "./store";
|
|
|
2
2
|
export declare const createResizer: (store: VirtualStore, isHorizontal: boolean) => {
|
|
3
3
|
_observeRoot(root: HTMLElement): () => void;
|
|
4
4
|
_observeItem(el: HTMLElement, i: number): () => void;
|
|
5
|
-
_isJustResized(): boolean;
|
|
6
5
|
};
|
|
7
6
|
export type Resizer = ReturnType<typeof createResizer>;
|
|
8
7
|
export declare const createGridResizer: (vStore: VirtualStore, hStore: VirtualStore) => {
|
|
9
8
|
_observeRoot(root: HTMLElement): () => void;
|
|
10
9
|
_observeItem(el: HTMLElement, rowIndex: number, colIndex: number): () => void;
|
|
11
|
-
_isJustResized(horizontal?: boolean): boolean;
|
|
12
10
|
};
|
|
13
11
|
export type GridResizer = ReturnType<typeof createGridResizer>;
|
package/lib/core/scroller.d.ts
CHANGED
|
@@ -4,6 +4,6 @@ export type Scroller = {
|
|
|
4
4
|
_getActualScrollSize: () => number;
|
|
5
5
|
_scrollTo: (offset: number) => void;
|
|
6
6
|
_scrollToIndex: (index: number, count: number) => void;
|
|
7
|
-
_fixScrollJump: (jump: ScrollJump
|
|
7
|
+
_fixScrollJump: (jump: ScrollJump) => void;
|
|
8
8
|
};
|
|
9
|
-
export declare const createScroller: (store: VirtualStore, isHorizontal: boolean, isRtl: boolean
|
|
9
|
+
export declare const createScroller: (store: VirtualStore, isHorizontal: boolean, isRtl: boolean) => Scroller;
|
package/lib/core/store.d.ts
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
type
|
|
2
|
-
export type
|
|
3
|
-
|
|
4
|
-
type ItemsRange = [startIndex: number, endIndex: number];
|
|
1
|
+
export type ScrollJump = Readonly<number>;
|
|
2
|
+
export type ItemResize = Readonly<[index: number, size: number]>;
|
|
3
|
+
type ItemsRange = Readonly<[startIndex: number, endIndex: number]>;
|
|
5
4
|
export declare const SCROLL_STOP = 0;
|
|
6
5
|
export declare const SCROLL_DOWN = 1;
|
|
7
6
|
export declare const SCROLL_UP = 2;
|
|
@@ -11,7 +10,8 @@ export declare const ACTION_ITEM_RESIZE = 1;
|
|
|
11
10
|
export declare const ACTION_WINDOW_RESIZE = 2;
|
|
12
11
|
export declare const ACTION_SCROLL = 3;
|
|
13
12
|
export declare const ACTION_MANUAL_SCROLL = 4;
|
|
14
|
-
|
|
13
|
+
export declare const ACTION_SCROLL_END = 5;
|
|
14
|
+
type Actions = [type: typeof ACTION_ITEM_RESIZE, entries: ItemResize[]] | [type: typeof ACTION_WINDOW_RESIZE, size: number] | [type: typeof ACTION_SCROLL, offset: number] | [type: typeof ACTION_MANUAL_SCROLL, offset: number] | [type: typeof ACTION_SCROLL_END, isManual: boolean];
|
|
15
15
|
type Subscriber = (sync?: boolean) => void;
|
|
16
16
|
export type VirtualStore = {
|
|
17
17
|
_getRange(): ItemsRange;
|
|
@@ -23,14 +23,14 @@ export type VirtualStore = {
|
|
|
23
23
|
_getViewportSize(): number;
|
|
24
24
|
_getScrollSize(): number;
|
|
25
25
|
_getScrollableDomSize(): number;
|
|
26
|
-
|
|
26
|
+
_getJumpCount(): number;
|
|
27
|
+
_flushJump(): ScrollJump | undefined;
|
|
27
28
|
_getItemIndexForScrollTo(offset: number): number;
|
|
28
29
|
_waitForScrollDestinationItemsMeasured(): Promise<void>;
|
|
29
30
|
_subscribe(cb: Subscriber): () => void;
|
|
30
31
|
_update(...action: Actions): void;
|
|
31
32
|
_getScrollDirection(): ScrollDirection;
|
|
32
|
-
_setScrollDirection(direction: ScrollDirection): void;
|
|
33
33
|
_updateCacheLength(length: number): void;
|
|
34
34
|
};
|
|
35
|
-
export declare const createVirtualStore: (
|
|
35
|
+
export declare const createVirtualStore: (elementsCount: number, itemSize: number | undefined, initialItemCount: number | undefined, isReverse: boolean, onScrollStateChange: (scrolling: boolean) => void, onScrollOffsetChange: (offset: number) => void) => VirtualStore;
|
|
36
36
|
export {};
|
package/lib/core/utils.d.ts
CHANGED
|
@@ -2,8 +2,10 @@ export declare const min: (...values: number[]) => number;
|
|
|
2
2
|
export declare const max: (...values: number[]) => number;
|
|
3
3
|
export declare const abs: (x: number) => number;
|
|
4
4
|
export declare const now: () => number;
|
|
5
|
+
export declare const timeout: typeof setTimeout;
|
|
5
6
|
export declare const exists: <T>(v: T) => v is Exclude<T, null | undefined>;
|
|
6
7
|
export declare const range: <T>(length: number, cb: (i: number) => T) => T[];
|
|
8
|
+
export declare const median: (arr: number[]) => number;
|
|
7
9
|
export declare const debounce: <T extends (...args: any[]) => void>(fn: T, ms: number) => {
|
|
8
10
|
(): void;
|
|
9
11
|
_cancel: () => void;
|
package/lib/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
var e=require("react/jsx-runtime"),t=require("react"),r=require("react-dom");const n=Math.min,o=Math.max,
|
|
2
|
+
var e=require("react/jsx-runtime"),t=require("react"),r=require("react-dom");const n=Math.min,o=Math.max,l=Math.abs,i=Date.now,s=setTimeout,c=e=>null!=e,u=(e,t)=>Array.from({length:e},((e,r)=>t(r))),a=e=>{let t,r;return(...n)=>(t||(t=!0,r=e(...n)),r)},_=-1,d=(e,t)=>{const r=e.t[t];return r===_?e.o:r},h=(e,t,r)=>{if(!e.l)return 0;if(e.i>=t)return r?e.u[t]+d(e,t):e.u[t];let n=e.i,o=e.u[n];for(;n<=t&&(e.u[n]=o,n!==t||r);)o+=d(e,n),n++;return e.i=t,o},f=(e,t)=>h(e,t),g=(e,t,r)=>{let l=0;if(r>=0)for(;t<e.l-1;){const n=d(e,t++);if((l+=n)>=r){l-n/2>=r&&t--;break}}else for(;t>0;){const n=d(e,--t);if((l-=n)<=r){l+n/2<r&&t++;break}}return n(o(t,0),e.l-1)},m=(e,t,r,n)=>g(e,r,t-n),w=(e,t,r)=>({o:r?r.o:t,l:e,i:r?n(r.i,e-1):0,t:u(e,(e=>{const t=r&&r.t[e];return c(t)?t:_})),u:u(e,(e=>{if(0===e)return 0;const t=r&&r.u[e];return c(t)?t:_}))}),v=e=>e.reduce(((e,[t])=>e+t),0),S=(e,t)=>t.map((([t,r])=>[r-d(e,t),t])),p=(e,t,r=0,i,u,a)=>{const p=!t,z=t||40;let b,I,x=z*o(r-1,0),y=0,R=0,T=w(e,z),k=0,M=!1,C=[0,r];const O=new Set,H=()=>(e=>h(e,e.l-1,!0))(T),D=e=>{const t=k;return k=e,0!==k&&(0===t&&(1===k||2===k)||void 0)};return{_(){const[e,t]=C,r=f(T,e),n=m(T,y,e,r),o=g(T,n,x);return e===n&&t===o?C:C=[n,o]},h:e=>T.t[e]===_,g:e=>((e,t,r)=>{for(let n=t;n<=r;n++)if(e.t[n]===_)return!0;return!1})(T,o(0,e-2),n(T.l-1,e+2)),m(e){const t=f(T,e);return i?t+o(0,x-H()):t},v:e=>d(T,e),S:()=>y,p:()=>x,I:()=>H(),R:()=>o(H(),x),T:()=>R,k(){const e=b;return b=void 0,e},M:e=>m(T,e,0,0),C:()=>(I&&I[1](),new Promise(((e,t)=>{let r=!1;const n=()=>{r||(r=!0,e(),I=void 0)};I=[n,t],s(n,250)}))),O:e=>(O.add(e),()=>{O.delete(e)}),H(e,t){let r,o,i=!1;switch(e){case 1:{const e=t.filter((([e,t])=>T.t[e]!==t));if(!e.length)break;let o=0;if(2===k)o=v(S(T,e));else if(3===k){const t=S(T,e),[r]=C;0===y||(o=H()<=y+x?v(t):v(t.filter((([,e])=>e<r))))}o&&(b=o,R++);let l=!1;e.forEach((([e,t])=>{((e,t,r)=>{const o=e.t[t]===_;return e.t[t]=r,e.i=n(t,e.i),o})(T,e,t)&&(l=!0)})),p&&l&&!y&&(e=>{const t=e.t.filter((e=>e!==_)),r=t[0];e.o=t.every((e=>e===r))?r:(e=>{const t=[...e].sort(((e,t)=>e-t)),r=e.length/2|0;return t.length%2==0?(t[r-1]+t[r])/2:t[r]})(t)})(T),M=r=i=!0;break}case 2:i=x!==t,x=t;break;case 3:case 4:if(y===t)break;if(3===e){const e=(()=>{const e=M;return M=!1,e})();0!==k&&e||3===k||(o=D(y>t?2:1)),r=l(y-t)>x}y=t,i=!0;break;case 5:o=D(t?3:0)}i&&(O.forEach((e=>{e(r)})),3===e&&a(y)),I&&1===e&&I[0](),c(o)&&u(o)},D:()=>k,W(e){T.l!==e&&(T=w(e,z,T))}}},z="undefined"!=typeof window?t.useLayoutEffect:t.useEffect,b="current",I=e=>{const r=t.useRef(e);return z((()=>{r[b]=e}),[e]),r},x=(e,n,o)=>{const[l,i]=t.useState(n),s=I(n);if(t.useLayoutEffect((()=>{const t=()=>{i((()=>s[b]()))};return e.O((e=>{e?r.flushSync(t):t()}))}),[]),o){const e=n();l!==e&&i(e)}return l},y=a((e=>{const t="scrollLeft",r=e[t];e[t]=1;const n=e[t]<1;return e[t]=r,n})),R=(e,t,r)=>{let l;const u=t?"scrollLeft":"scrollTop",a=()=>l?t?l.scrollWidth:l.scrollHeight:0,_=(t,r)=>y(l)||r?-t:e.I()-e.p()-t,d=(e,n)=>{l&&(t&&r&&(e=_(e,n)),n?l[u]+=e:l[u]=e)},h=async(t,r)=>{const n=()=>{let t=r();const n=a(),o=e.p();return n-(t+o)<=0&&(t=n-o),t};for(;e.H(4,n()),e.g(t);)try{await e.C()}catch(e){return}d(n()),e.H(5,!0)};return{$(n){l=n;const o=()=>{let o=n[u];t&&r&&(o=_(o)),e.H(3,o)},a=(()=>{let t;const r=()=>{c(t)&&clearTimeout(t)},n=()=>{r(),t=s((()=>{t=null,o(),e.H(5,!1)}),150)};return n.q=r,n})(),d=()=>{o(),a()},h=(()=>{let r=i()-50;return(...n)=>{const o=i();r+50<o&&(r=o,(r=>{if(0!==e.D()&&!r.ctrlKey&&(t?r.deltaX:r.deltaY)){const t=e.S();t>0&&t<e.I()-e.p()&&a()}})(...n))}})();return n.addEventListener("scroll",d),n.addEventListener("wheel",h,{passive:!0}),()=>{n.removeEventListener("scroll",d),n.removeEventListener("wheel",h),a.q()}},J:a,L(t){t=o(t,0),h(e.M(t),(()=>t))},A(t,r){t=o(n(t,r-1),0),h(t,(()=>e.m(t)))},B:e=>{d(e,!0)}}},T=e=>{const r=t.useRef();return r[b]||(r[b]=e())},k=(e,t)=>{let r;const n=t?"width":"height",o=new WeakMap,l=a((()=>new ResizeObserver((t=>{const l=[];for(const{target:i,contentRect:s}of t)if(i===r)e.H(2,s[n]);else{const e=o.get(i);c(e)&&l.push([e,s[n]])}l.length&&e.H(1,l)}))));return{F(e){r=e;const t=l();return t.observe(e),()=>{t.disconnect()}},U(e,t){const r=l();return o.set(e,t),r.observe(e),()=>{o.delete(e),r.unobserve(e)}}}},M=(e,t)=>{let r;const n="height",l="width",i=new WeakMap,s=new Set,c=new Set,u=new Map,_=(e,t)=>`${e}-${t}`,d=a((()=>new ResizeObserver((a=>{const d=new Set,h=new Set;for(const{target:o,contentRect:s}of a)if(o===r)e.H(2,s[n]),t.H(2,s[l]);else{const e=i.get(o);if(e){const[t,r]=e,o=_(t,r),i=u.get(o),c=[s[n],s[l]];let a,f;i?(i[0]!==c[0]&&(a=!0),i[1]!==c[1]&&(f=!0)):a=f=!0,a&&d.add(t),f&&h.add(r),(a||f)&&u.set(o,c)}}if(d.size){const t=[];d.forEach((e=>{let r=0;c.forEach((t=>{const n=u.get(_(e,t));n&&(r=o(r,n[0]))})),r&&t.push([e,r])})),e.H(1,t)}if(h.size){const e=[];h.forEach((t=>{let r=0;s.forEach((e=>{const n=u.get(_(e,t));n&&(r=o(r,n[1]))})),r&&e.push([t,r])})),t.H(1,e)}}))));return{F(e){r=e;const t=d();return t.observe(e),()=>{t.disconnect()}},U(e,t,r){const n=d();return i.set(e,[t,r]),s.add(t),c.add(r),n.observe(e),()=>{i.delete(e),n.unobserve(e)}}}},C=t.forwardRef((({children:r,attrs:n,width:o,height:l,scrolling:i},s)=>e.jsx("div",{ref:s,...n,children:e.jsx("div",{style:t.useMemo((()=>({position:"relative",visibility:"hidden",width:null!=o?o:"100%",height:null!=l?l:"100%",pointerEvents:i?"none":"auto"})),[o,l,i]),children:r})}))),O=t.memo((({j:r,P:n,V:o,G:l,K:i,N:s,X:c})=>{const u=t.useRef(null),a=x(o,(()=>o.m(l)),!0),_=x(o,(()=>o.h(l)),!0);return z((()=>n.U(u[b],l)),[l]),e.jsx(i,{ref:u,style:t.useMemo((()=>{const e=c?"right":"left",t={margin:0,padding:0,position:"absolute",[s?"height":"width"]:"100%",[s?"top":e]:0,[s?e:"top"]:a,visibility:_?"hidden":"visible"};return s&&(t.display="flex"),t}),[a,_]),children:r})})),H=({j:r,Y:n,V:o,K:l,Z:i,ee:s,N:c})=>{const u=x(o,o.I);return e.jsx(l,{ref:n,width:c?u:void 0,height:c?void 0:u,scrolling:i,attrs:t.useMemo((()=>({...s,style:{overflow:c?"auto hidden":"hidden auto",contain:"strict",width:"100%",height:"100%",padding:0,margin:0,...s.style}})),[s]),children:r})},D=t.forwardRef((({children:r,overscan:l=4,initialItemSize:i,initialItemCount:s,horizontal:u,mode:a,element:_=C,itemElement:d="div",onScroll:h,onScrollStop:f,onRangeChange:g,...m},w)=>{const v=t.useMemo((()=>{const e=[];return t.Children.forEach(r,(t=>{(e=>!c(e)||"boolean"==typeof e)(t)||e.push(t)})),e}),[r]),S=v.length,y=I(h),M=I(f),[D,W]=t.useState(!1),[$,q,E,J,L]=T((()=>{const e=!!u,t="rtl"===a,r=p(S,i,s,"reverse"===a,(e=>{W(e),e||M[b]&&M[b]()}),(e=>{y[b]&&y[b](e)}));return[r,k(r,e),R(r,e,t),e,t]}));$.W(S);const[A,B]=x($,$._),F=x($,$.T),U=t.useRef(null);z((()=>{const e=U[b],t=q.F(e),r=E.$(e);return()=>{t(),r()}}),[]),z((()=>{const e=$.k();e&&E.B(e)}),[F]),t.useEffect((()=>{g&&g({start:A,end:B,count:S})}),[A,B]),t.useImperativeHandle(w,(()=>({get scrollOffset(){return $.S()},get scrollSize(){return E.J()},get viewportSize(){return $.p()},scrollToIndex(e){E.A(e,S)},scrollTo:E.L,scrollBy(e){E.L($.S()+e)}})),[S]);const j=o(A-l,0),P=n(B+l,S-1),V=t.useMemo((()=>{const t=[];for(let r=j;r<=P;r++){const n=v[r];c(n)&&t.push(e.jsx(O,{P:q,V:$,G:r,K:d,j:n,N:J,X:L},(null==n?void 0:n.key)||r))}return t}),[v,j,P]);return e.jsx(H,{Y:U,V:$,K:_,Z:D,j:V,ee:m,N:J})})),W=(e,t)=>`${e}-${t}`,$=t.memo((({j:r,P:n,te:o,re:l,ne:i,oe:s,K:c,X:u})=>{const a=t.useRef(null),_=x(o,(()=>o.m(i)),!0),d=x(l,(()=>l.m(s)),!0),h=x(o,(()=>o.h(i)),!0),f=x(l,(()=>l.h(s)),!0),g=x(o,(()=>o.v(i)),!0),m=x(l,(()=>l.v(s)),!0);return z((()=>n.U(a[b],i,s)),[s,i]),e.jsx(c,{ref:a,style:t.useMemo((()=>({display:"grid",margin:0,padding:0,position:"absolute",top:_,[u?"right":"left"]:d,visibility:h||f?"hidden":"visible",minHeight:g,minWidth:m})),[_,d,m,g,h,f]),children:r})})),q=({j:r,Y:n,le:o,ie:l,K:i,Z:s,ee:c})=>{const u=x(o,o.I),a=x(l,l.I);return e.jsx(i,{ref:n,width:a,height:u,scrolling:s,attrs:t.useMemo((()=>({...c,style:{overflow:"auto",contain:"strict",width:"100%",height:"100%",padding:0,margin:0,...c.style}})),[c]),children:r})},E=t.forwardRef((({children:r,row:l,col:i,cellHeight:s=40,cellWidth:c=100,overscan:u=2,initialRowCount:a,initialColCount:_,rtl:d,element:h=C,cellElement:f="div",...g},m)=>{const[w,v]=t.useState(!1),[S,I]=t.useState(!1),[y,k,O,H,D,E]=T((()=>{const e=!!d,t=()=>{},r=p(l,s,a,!1,v,t),n=p(i,c,_,!1,I,t);return[r,n,M(r,n),R(r,!1,e),R(n,!0,e),e]}));y.W(l),k.W(i);const[J,L]=x(y,y._),[A,B]=x(k,k._),F=x(y,y.T),U=x(k,k.T),j=t.useRef(null);z((()=>{const e=j[b],t=O.F(e),r=H.$(e),n=D.$(e);return()=>{t(),r(),n()}}),[]),z((()=>{const e=y.k();e&&H.B(e)}),[F]),z((()=>{const e=k.k();e&&D.B(e)}),[U]),t.useImperativeHandle(m,(()=>({get scrollOffset(){return[k.S(),y.S()]},get scrollSize(){return[D.J(),H.J()]},get viewportSize(){return[k.p(),y.p()]},scrollToIndex(e,t){D.A(e,i),H.A(t,l)},scrollTo(e,t){D.L(e),H.L(t)},scrollBy(e,t){D.L(k.S()+e),H.L(y.S()+t)}})),[l,i]);const P=t.useMemo((()=>{const e=new Map;return(t,n)=>{let o=e.get(W(t,n));return o||e.set(W(t,n),o=r({rowIndex:t,colIndex:n})),o}}),[r]),V=o(J-u,0),G=n(L+u,l-1),K=o(A-u,0),N=n(B+u,i-1),Q=t.useMemo((()=>{const t=[];for(let r=V;r<=G;r++)for(let n=K;n<=N;n++)t.push(e.jsx($,{P:O,te:y,re:k,ne:r,oe:n,K:f,j:P(r,n),X:E},W(r,n)));return t}),[P,V,G,K,N]);return e.jsx(q,{Y:j,le:y,ie:k,K:h,Z:w||S,j:Q,ee:g})}));exports.VGrid=E,exports.VList=D;
|
|
3
3
|
//# sourceMappingURL=index.js.map
|