react-layout-virtual 0.0.3 → 0.0.4
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/dist/index.js +2 -2
- package/package.json +4 -3
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{useRef as n,useState as s,useLayoutEffect as i,useEffect as o}from"react";import{flushSync as l,createPortal as h}from"react-dom";import
|
|
1
|
+
import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{useRef as n,useState as s,useLayoutEffect as i,useEffect as o}from"react";import{flushSync as l,createPortal as h}from"react-dom";import a,{ScrollableContainer as d,ArrayItemStore as c,DynamicListLayout as u}from"layout-virtual";class f{t=null;i;o=/* @__PURE__ */new Map;l=/* @__PURE__ */new Map;h;u=/* @__PURE__ */new Map;m=[];v=()=>{this.h(this.m)};p(e){const t="first"===e?this.i.getFirstItem():"last"===e?this.i.getLastItem():null;if(t)return this.getIndex(t)}constructor(e){this.i=new d({...e}),this.h=e.itemsSetter}render(e,t,r){const n=this.p("first"),s=this.p("last");let i=e,o=t,l=n,h=s,a=0;return"down"===r?(console.log("SCROLLING DOWN"),void 0!==l&&void 0!==s&&(h=Math.min(i-1,s),i=Math.max(s+1,i),l<=h&&(a=this.removeRange(l,h,r)))):"up"===r&&(console.log("SCROLLING UP"),void 0!==h&&void 0!==n&&(l=Math.max(o+1,n),o=Math.min(n-1,o),l<=h&&(a=this.removeRange(l,h,r)))),i<o&&this.renderRange(i,o,r),a}renderRange(t,r,n){console.log("_renderRange",t,r,n),t>r&&console.error("_renderRange",t,r,n);const s=this.t,i=this.m,o=[],l=this.u;if(s){for(let n=t;n<=r;n++){const t=s.getByIndex(n);if(t){const r=t.render,s=l.get(n)||{current:null,idx:n};l.set(n,s),o.push(/* @__PURE__ */e(r,{data:t.data,ref:s,index:n},n))}}this.m="down"===n?i.concat(o):"up"===n?o.concat(i):this.m}}removeRange(e,t,r){const n=this.o,s=this.l;let i=0,o=1/0,l=0;for(let h=e;h<=t;h++){const e=s.get(h);if(e){const{offsetTop:t,offsetHeight:r}=e,a=getComputedStyle(e),d=parseFloat(a.marginTop),c=parseFloat(a.marginBottom);o=Math.min(o,t-d),l=Math.max(l,t+r+c),s.delete(h),n.delete(e),i++}}return i&&(this.m="down"===r?this.m.slice(i):"up"===r?this.m.slice(0,-i):this.m),console.log("_removeItems startIndex:",e,"endIndex:",t,"removedHeight:",l>o?l-o:0,"removedItemsCount:",i),l>o?l-o:0}clear(){this.o.clear(),this.l.clear(),this.m=[],this.h(this.m)}getIndex(e){return this.o.get(e)}getItem(e){return this.l.get(e)}get scrollableContainer(){return this.i}attach(e){this.t=e}flush(){return l(this.v),Promise.resolve()}commit(){const e=this.o,t=this.l,r=this.u;for(const n of r.values()){const{idx:r,current:s}=n;s&&(e.set(s,r),t.set(r,s))}r.clear()}}function m(l){const{overscanHeight:d=200,data:m,renderItem:v,scrollerRef:p}=l,g=n(null),I=p??g,w=n(null),R=n(null),_=n(null),x=n(null),M=n(null),C=n(null),[y,S]=s([]),H=n(void 0);i(()=>{H.current=new f({container:I.current,scrollHeightFiller:w.current,viewportContainer:R.current,scrollCanvas:_.current,topSpacer:x.current,contentLayer:M.current,bottomSpacer:C.current,itemsSetter:S});const e=new c,t=new u({overscanHeight:d,renderer:H.current}),r=new a({store:e,layout:t});for(let n=0;n<m.length;n++)r.insert({data:m[n],render:v},n)},[]),o(()=>{H.current?.commit()},[y]);const L=/* @__PURE__ */t(r,{children:[
|
|
2
2
|
/* @__PURE__ */e("div",{ref:w}),
|
|
3
3
|
/* @__PURE__ */e("div",{ref:R,children:/* @__PURE__ */t("div",{ref:_,children:[
|
|
4
4
|
/* @__PURE__ */e("div",{ref:x}),
|
|
5
5
|
/* @__PURE__ */e("div",{ref:M,children:y}),
|
|
6
|
-
/* @__PURE__ */e("div",{ref:C})]})})]});return
|
|
6
|
+
/* @__PURE__ */e("div",{ref:C})]})})]});return p&&p.current?h(L,p.current):/* @__PURE__ */e("div",{ref:I,children:L})}export{m as default};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-layout-virtual",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.4",
|
|
4
4
|
"description": "React virtual scrolling component for responsive lists and grids with dynamic item sizes.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"virtual",
|
|
@@ -39,10 +39,11 @@
|
|
|
39
39
|
"test": "test",
|
|
40
40
|
"build": "npm run build:bundle && npm run build:types",
|
|
41
41
|
"build:bundle": "vite build",
|
|
42
|
-
"build:types": "tsc -p tsconfig.build.json --emitDeclarationOnly"
|
|
42
|
+
"build:types": "tsc -p tsconfig.build.json --emitDeclarationOnly",
|
|
43
|
+
"prepublishOnly": "npm run build"
|
|
43
44
|
},
|
|
44
45
|
"dependencies": {
|
|
45
|
-
"layout-virtual": "^0.0.
|
|
46
|
+
"layout-virtual": "^0.0.3"
|
|
46
47
|
},
|
|
47
48
|
"peerDependencies": {
|
|
48
49
|
"react": "^19.2.5",
|