react-layout-virtual 0.0.4 → 0.0.5

package/dist/ReactLayoutVirtual.d.ts

@@ -3,16 +3,11 @@
  * @license MIT
  * @author Alexandr Kalabin
  */
-import React from 'react';
-export interface ListItemProps<T = unknown> {
-    data: T;
-    ref: React.Ref<HTMLDivElement> | undefined;
-    index: number;
-}
+import { type ListItemProps } from './ReactRenderer';
 export interface VirtualizedListReactProps<T> {
-    scrollerRef?: React.RefObject<HTMLDivElement>;
+    scrollerRef?: React.RefObject<HTMLElement>;
     overscanHeight?: number;
     data: T[];
     renderItem: (props: ListItemProps<T>) => React.ReactNode;
 }
-export default function VirtualizedListReact<T>(props: VirtualizedListReactProps<T>): import("react/jsx-runtime").JSX.Element;
+export default function VirtualizedListReact<ItemData = unknown>(props: VirtualizedListReactProps<ItemData>): import("react/jsx-runtime").JSX.Element;

package/dist/ReactRenderer.d.ts

@@ -3,34 +3,38 @@
  * @license MIT
  * @author Alexandr Kalabin
  */
-import { ScrollableContainer } from "layout-virtual";
-import type { IRangeRenderer, ScrollDirection, IItemStore, IItem, VirtualScrollStructure } from "layout-virtual/types";
+import { BaseRenderer } from 'layout-virtual';
+import type { IRangeRenderer, ScrollDirection, VirtualScrollStructure } from "layout-virtual/types";
+export interface ListItemProps<T = unknown> {
+    data: T;
+    ref: React.Ref<HTMLDivElement> | undefined;
+    index: number;
+}
+export type ItemRenderer<T> = React.FC<ListItemProps<T>>;
 type ReactRendererOptions = {
     itemsSetter: React.Dispatch<React.SetStateAction<React.ReactNode[]>>;
 } & VirtualScrollStructure;
 interface IReactRenderer {
     commit: () => void;
 }
-export default class ReactRenderer implements IRangeRenderer, IReactRenderer {
+export default class ReactRenderer<DataType = unknown> extends BaseRenderer implements IRangeRenderer<DataType, ItemRenderer<DataType>>, IReactRenderer {
     private _store;
-    private _scrollableContainer;
-    private _renderedIndexRegistry;
-    private _renderedItemsRegistry;
+    private _renderItem;
     private _itemsSetter;
     private _renderedRangeRefPool;
     private _listItems;
     private _flushItems;
-    private _getRenderedBoundaryIndex;
     constructor(opts: ReactRendererOptions);
-    render(startIndex: number, endIndex: number, direction: ScrollDirection): number;
     renderRange(startIndex: number, endIndex: number, direction: ScrollDirection): void;
-    removeRange(startIndex: number, endIndex: number, direction: ScrollDirection): number;
+    removeRange(startIndex: number, endIndex: number, direction?: ScrollDirection): {
+        itemsToRemove: Element[];
+        removedHeight: number;
+    };
     clear(): void;
-    getIndex(item: Element): number | undefined;
-    getItem(index: number): Element | undefined;
-    get scrollableContainer(): ScrollableContainer;
-    attach(store: IItemStore<IItem>): void;
+    setData(store: DataType[]): void;
+    setRenderItem(renderItem: ItemRenderer<DataType>): void;
     flush(): Promise<void>;
     commit(): void;
+    get dataSize(): number;
 }
 export {};

package/dist/index.d.ts

@@ -4,4 +4,4 @@
  * @author Alexandr Kalabin
  */
 export { default } from './ReactLayoutVirtual';
-export { type ListItemProps } from './ReactLayoutVirtual';
+export { type ListItemProps } from './ReactRenderer';

package/dist/index.js

@@ -1,6 +1,6 @@
-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:[
-/* @__PURE__ */e("div",{ref:w}),
-/* @__PURE__ */e("div",{ref:R,children:/* @__PURE__ */t("div",{ref:_,children:[
-/* @__PURE__ */e("div",{ref:x}),
-/* @__PURE__ */e("div",{ref:M,children:y}),
-/* @__PURE__ */e("div",{ref:C})]})})]});return p&&p.current?h(L,p.current):/* @__PURE__ */e("div",{ref:I,children:L})}export{m as default};
+import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{useRef as n,useState as i,useLayoutEffect as s,useEffect as o}from"react";import{flushSync as l,createPortal as c}from"react-dom";import{BaseRenderer as h,DynamicListLayout as a,LayoutVirtual as d}from"layout-virtual";class u extends h{t=[];i=null;o;l=/* @__PURE__ */new Map;h=[];u=()=>{this.o(this.h)};constructor(e){super(e),this.o=e.itemsSetter}renderRange(t,r,n){const i=this.t,s=this.h,o=[],l=this.l;for(let c=t;c<=r;c++){const t=i[c];if(t){const r=this.i;if(r){const n=l.get(c)||{current:null,idx:c};l.set(c,n),o.push(/* @__PURE__ */e(r,{data:t,ref:n,index:c},c))}}}this.h="down"===n?s.concat(o):"up"===n?o.concat(s):this.h}removeRange(e,t,r){const n=super.removeRange(e,t),i=n.itemsToRemove.length;return i&&(this.h="down"===r?this.h.slice(i):"up"===r?this.h.slice(0,-i):this.h),n}clear(){super.clear(),this.h=[],this.o(this.h)}setData(e){this.t=e}setRenderItem(e){this.i=e}flush(){return l(this.u),Promise.resolve()}commit(){const e=this.l;for(const t of e.values()){const{idx:e,current:r}=t;r&&this.registerElement(e,r)}e.clear()}get dataSize(){return this.t.length}}function f(l){const{overscanHeight:h=200,data:f,renderItem:m,scrollerRef:p}=l,v=n(null),g=n(null),w=n(null),x=n(null),R=n(null),_=n(null),I=n(null),[S,y]=i([]),H=n(void 0);s(()=>{H.current=new u({container:p?.current||v.current,scrollHeightFiller:g.current,viewportContainer:w.current,scrollCanvas:x.current,topSpacer:R.current,contentLayer:_.current,bottomSpacer:I.current,itemsSetter:y});const e=new a({overscanHeight:h,renderer:H.current}),t=new d({layout:e});t.setData(f),t.setRenderItem(m)},[]),o(()=>{H.current?.commit()},[S]);const C=/* @__PURE__ */t(r,{children:[
+/* @__PURE__ */e("div",{ref:g}),
+/* @__PURE__ */e("div",{ref:w,children:/* @__PURE__ */t("div",{ref:x,children:[
+/* @__PURE__ */e("div",{ref:R}),
+/* @__PURE__ */e("div",{ref:_,children:S}),
+/* @__PURE__ */e("div",{ref:I})]})})]});return p&&p.current?c(C,p.current):/* @__PURE__ */e("div",{ref:v,children:C})}export{f as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-layout-virtual",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "React virtual scrolling component for responsive lists and grids with dynamic item sizes.",
   "keywords": [
     "virtual",
@@ -43,7 +43,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "layout-virtual": "^0.0.3"
+    "layout-virtual": "^0.1.0"
   },
   "peerDependencies": {
     "react": "^19.2.5",