react-layout-virtual 0.1.0 → 0.2.1

package/dist/index.js

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

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/ReactRenderer.tsx","../src/ReactLayoutVirtual.tsx"],"sourcesContent":["/**\n * @fileoverview ReactRenderer.\n * @license MIT\n * @author Alexandr Kalabin\n */\n\nimport { flushSync } from 'react-dom';\nimport { BaseRenderer } from 'layout-virtual/core';\nimport type { IRangeRenderer, ScrollDirection } from \"layout-virtual/types\";\nimport type { ItemRenderer, ReactRendererOptions } from './types';\n\ntype IndexedRef = React.RefObject<HTMLDivElement | null> & { idx: number };\n\nexport default class ReactRenderer<DataType = unknown> extends BaseRenderer implements IRangeRenderer<DataType, ItemRenderer<DataType>> {\n  private _store: DataType[] = [];\n  private _renderItem: ItemRenderer<DataType> | null = null;\n  private _itemsSetter: React.Dispatch<React.SetStateAction<React.ReactNode[]>>;\n  private _renderedRangeRefPool = new Map<number, IndexedRef>();\n  private _listItems: React.ReactNode[] = [];\n  private _flushItems = () => { this._itemsSetter(this._listItems); };\n\n  constructor(opts: ReactRendererOptions) {\n    super(opts);\n    this._itemsSetter = opts.itemsSetter;\n  }\n\n  renderRange(startIndex: number, endIndex: number, direction: ScrollDirection) {\n    const store = this._store;\n    const listItems = this._listItems;\n    const itemsToAdd: React.ReactNode[] = [];\n    const refPool = this._renderedRangeRefPool;\n\n    for (let index = startIndex; index <= endIndex; index++) {\n      const data = store[index];\n\n      if (data) {\n        const ListItem = this._renderItem;\n\n        if (ListItem) {\n          const ref: IndexedRef = refPool.get(index) || { current: null, idx: index };\n\n          refPool.set(index, ref);\n          itemsToAdd.push(<ListItem data={data} key={index} ref={ref} index={index} />);\n        }\n      }\n    }\n\n    this._listItems = direction === 'down' \n      ? listItems.concat(itemsToAdd)\n      : direction === 'up'\n        ? itemsToAdd.concat(listItems)\n        : this._listItems;\n  }\n\n  removeRange(startIndex: number, endIndex: number, direction?: ScrollDirection) {\n    const removal = super.removeRange(startIndex, endIndex);\n    const removedItemsCount = removal.itemsToRemove.length;\n\n    if (removedItemsCount) {\n      this._listItems = direction === 'down'\n        ? this._listItems.slice(removedItemsCount)\n        : direction === 'up'\n          ? this._listItems.slice(0, -removedItemsCount)\n          : this._listItems;\n    }\n\n    return removal;\n  }\n\n  clear() {\n    super.clear();\n    this._listItems = [];\n    this._itemsSetter(this._listItems);\n  }\n\n  setData(store: DataType[]) {\n    this._store = store;\n  }\n\n  setRenderItem(renderItem: ItemRenderer<DataType>) {\n    this._renderItem = renderItem;\n  }\n\n  flush() {\n    flushSync(this._flushItems);\n    return Promise.resolve();\n  }\n\n  commit() {\n    const renderedRefs = this._renderedRangeRefPool;\n\n    for (const ref of renderedRefs.values()) {\n      const { idx, current: element } = ref;\n\n      if (element) {\n        this.registerElement(idx, element);\n      }\n    }\n\n    renderedRefs.clear();\n  }\n\n  get dataSize() {\n    return this._store.length;\n  }\n}\n","/**\n * @fileoverview VirtualizedList React component.\n * @license MIT\n * @author Alexandr Kalabin\n */\n\nimport { useRef, useLayoutEffect, useState, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { LayoutVirtual, DynamicListLayout } from 'layout-virtual/core';\nimport ReactRenderer from './ReactRenderer';\nimport type { ItemRenderer, VirtualizedListReactProps } from './types';\n\nexport default function VirtualizedListReact<ItemData = unknown>(props: VirtualizedListReactProps<ItemData>) {\n  const { overscanHeight = 200, data, renderItem, scrollerRef } = props;\n  const { scrollerClass, viewportClass, contentLayerClass } = props;\n  const containerRef = useRef<HTMLDivElement>(null);\n  const scrollHeightFillerRef = useRef<HTMLDivElement>(null);\n  const viewportContainerRef = useRef<HTMLDivElement>(null);\n  const scrollCanvasRef = useRef<HTMLDivElement>(null);\n  const topSpacerRef = useRef<HTMLDivElement>(null);\n  const contentLayerRef = useRef<HTMLDivElement>(null);\n  const bottomSpacerRef = useRef<HTMLDivElement>(null);\n  const [visibleItems, setVisibleItems] = useState<React.ReactNode[]>([]);\n  const renderer = useRef<ReactRenderer<ItemData> | undefined>(undefined);\n\n  useLayoutEffect(() => {\n    renderer.current = new ReactRenderer<ItemData>({\n      container: scrollerRef?.current || containerRef.current!,\n      scrollHeightFiller: scrollHeightFillerRef.current!,\n      viewportContainer: viewportContainerRef.current!,\n      scrollCanvas: scrollCanvasRef.current!,\n      topSpacer: topSpacerRef.current!,\n      contentLayer: contentLayerRef.current!,\n      bottomSpacer: bottomSpacerRef.current!,\n      itemsSetter: setVisibleItems,\n    });\n\n    const layout = new DynamicListLayout<ItemData, ItemRenderer<ItemData>>({ overscanHeight, renderer: renderer.current });\n    const list = new LayoutVirtual<ItemData, ItemRenderer<ItemData>>({ layout });\n\n    list.setData(data);\n    list.setRenderItem(renderItem);\n\n    const scroller = scrollerRef?.current;\n\n    if (scroller) {\n      scroller.classList.add(scrollerClass || '');\n    }\n  }, []);\n\n  useEffect(() => {\n    renderer.current?.commit();\n  }, [visibleItems]);\n\n  const scrollerContent = <>\n    <div ref={scrollHeightFillerRef}></div>\n    <div className={viewportClass} ref={viewportContainerRef}>\n      <div ref={scrollCanvasRef}>\n        <div ref={topSpacerRef}></div>\n        <div className={contentLayerClass} ref={contentLayerRef}>{ visibleItems }</div>\n        <div ref={bottomSpacerRef}></div>\n      </div>\n    </div>\n  </>;\n\n  return (\n    scrollerRef && scrollerRef.current \n      ? createPortal(scrollerContent, scrollerRef.current)\n      : <div className={scrollerClass} ref={containerRef}>{ scrollerContent }</div>\n  );\n};\n"],"names":["ReactRenderer","BaseRenderer","_store","_renderItem","_itemsSetter","_renderedRangeRefPool","Map","_listItems","_flushItems","this","constructor","opts","super","itemsSetter","renderRange","startIndex","endIndex","direction","store","listItems","itemsToAdd","refPool","index","data","ListItem","ref","get","current","idx","set","push","concat","removeRange","removal","removedItemsCount","itemsToRemove","length","slice","clear","setData","setRenderItem","renderItem","flush","flushSync","Promise","resolve","commit","renderedRefs","values","element","registerElement","dataSize","VirtualizedListReact","props","overscanHeight","scrollerRef","scrollerClass","viewportClass","contentLayerClass","containerRef","useRef","scrollHeightFillerRef","viewportContainerRef","scrollCanvasRef","topSpacerRef","contentLayerRef","bottomSpacerRef","visibleItems","setVisibleItems","useState","renderer","useLayoutEffect","container","scrollHeightFiller","viewportContainer","scrollCanvas","topSpacer","contentLayer","bottomSpacer","layout","DynamicListLayout","list","LayoutVirtual","scroller","classList","add","useEffect","scrollerContent","jsxs","Fragment","children","jsx","className","createPortal"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/ReactRenderer.tsx","../src/ReactLayoutVirtual.tsx"],"sourcesContent":["/**\n * @fileoverview ReactRenderer.\n * @license MIT\n * @author Alexandr Kalabin\n */\n\nimport { flushSync } from 'react-dom';\nimport { BaseRenderer } from 'layout-virtual/core';\nimport type { IRangeRenderer, ScrollDirection } from \"layout-virtual/types\";\nimport type { ItemRenderer, ReactRendererOptions } from './types';\n\ntype IndexedRef = React.RefObject<HTMLDivElement | null> & { idx: number };\n\nexport default class ReactRenderer<DataType = unknown> extends BaseRenderer implements IRangeRenderer<DataType, ItemRenderer<DataType>> {\n  private _store: DataType[] = [];\n  private _renderItem: ItemRenderer<DataType> | null = null;\n  private _itemsSetter: React.Dispatch<React.SetStateAction<React.ReactNode[]>>;\n  private _renderedRangeRefPool = new Map<number, IndexedRef>();\n  private _listItems: React.ReactNode[] = [];\n  private _flushItems = () => { this._itemsSetter(this._listItems); };\n\n  constructor(opts: ReactRendererOptions) {\n    super(opts);\n    this._itemsSetter = opts.itemsSetter;\n  }\n\n  renderRange(startIndex: number, endIndex: number, direction: ScrollDirection) {\n    const store = this._store;\n    const listItems = this._listItems;\n    const itemsToAdd: React.ReactNode[] = [];\n    const refPool = this._renderedRangeRefPool;\n\n    for (let index = startIndex; index <= endIndex; index++) {\n      const data = store[index];\n\n      if (data) {\n        const ListItem = this._renderItem;\n\n        if (ListItem) {\n          const ref: IndexedRef = refPool.get(index) || { current: null, idx: index };\n\n          refPool.set(index, ref);\n          itemsToAdd.push(<ListItem data={data} key={index} ref={ref} index={index} />);\n        }\n      }\n    }\n\n    this._listItems = direction === 'down' \n      ? listItems.concat(itemsToAdd)\n      : direction === 'up'\n        ? itemsToAdd.concat(listItems)\n        : this._listItems;\n  }\n\n  removeRange(startIndex: number, endIndex: number, direction?: ScrollDirection) {\n    const removal = super.removeRange(startIndex, endIndex);\n    const removedItemsCount = removal.itemsToRemove.length;\n\n    if (removedItemsCount) {\n      this._listItems = direction === 'down'\n        ? this._listItems.slice(removedItemsCount)\n        : direction === 'up'\n          ? this._listItems.slice(0, -removedItemsCount)\n          : this._listItems;\n    }\n\n    return removal;\n  }\n\n  clear() {\n    super.clear();\n    this._listItems = [];\n    this._itemsSetter(this._listItems);\n  }\n\n  setData(store: DataType[]) {\n    this._store = store;\n  }\n\n  setRenderItem(renderItem: ItemRenderer<DataType>) {\n    this._renderItem = renderItem;\n  }\n\n  flush() {\n    flushSync(this._flushItems);\n    return Promise.resolve();\n  }\n\n  commit() {\n    const renderedRefs = this._renderedRangeRefPool;\n\n    for (const ref of renderedRefs.values()) {\n      const { idx, current: element } = ref;\n\n      if (element) {\n        this.registerElement(idx, element);\n      }\n    }\n\n    renderedRefs.clear();\n  }\n\n  get dataSize() {\n    return this._store.length;\n  }\n}\n","/**\n * @fileoverview VirtualizedList React component.\n * @license MIT\n * @author Alexandr Kalabin\n */\n\nimport { useRef, useLayoutEffect, useState, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { LayoutVirtual, DynamicListLayout } from 'layout-virtual/core';\nimport ReactRenderer from './ReactRenderer';\nimport type { ItemRenderer, VirtualizedListReactProps } from './types';\n\nexport default function VirtualizedListReact<ItemData = unknown>(props: VirtualizedListReactProps<ItemData>) {\n  const { overscanHeight = 200, data, renderItem, scrollerRef } = props;\n  const { scrollerClass, viewportClass, contentLayerClass } = props;\n  const containerRef = useRef<HTMLDivElement>(null);\n  const scrollHeightFillerRef = useRef<HTMLDivElement>(null);\n  const viewportContainerRef = useRef<HTMLDivElement>(null);\n  const scrollCanvasRef = useRef<HTMLDivElement>(null);\n  const topSpacerRef = useRef<HTMLDivElement>(null);\n  const contentLayerRef = useRef<HTMLDivElement>(null);\n  const bottomSpacerRef = useRef<HTMLDivElement>(null);\n  const [visibleItems, setVisibleItems] = useState<React.ReactNode[]>([]);\n  const renderer = useRef<ReactRenderer<ItemData> | undefined>(undefined);\n\n  useLayoutEffect(() => {\n    renderer.current = new ReactRenderer<ItemData>({\n      container: scrollerRef?.current || containerRef.current!,\n      scrollHeightFiller: scrollHeightFillerRef.current!,\n      viewportContainer: viewportContainerRef.current!,\n      scrollCanvas: scrollCanvasRef.current!,\n      topSpacer: topSpacerRef.current!,\n      contentLayer: contentLayerRef.current!,\n      bottomSpacer: bottomSpacerRef.current!,\n      itemsSetter: setVisibleItems,\n    });\n\n    const layout = new DynamicListLayout<ItemData, ItemRenderer<ItemData>>({ overscanHeight, renderer: renderer.current });\n    const list = new LayoutVirtual<ItemData, ItemRenderer<ItemData>>({ layout });\n\n    list.setData(data);\n    list.setRenderItem(renderItem);\n\n    const scroller = scrollerRef?.current;\n\n    if (scroller) {\n      scroller.classList.add(scrollerClass || '');\n    }\n  }, []);\n\n  useEffect(() => {\n    renderer.current?.commit();\n  }, [visibleItems]);\n\n  const scrollerContent = <>\n    <div ref={scrollHeightFillerRef}></div>\n    <div className={viewportClass} ref={viewportContainerRef}>\n      <div ref={scrollCanvasRef}>\n        <div ref={topSpacerRef}></div>\n        <div className={contentLayerClass} ref={contentLayerRef}>{ visibleItems }</div>\n        <div ref={bottomSpacerRef}></div>\n      </div>\n    </div>\n  </>;\n\n  return (\n    scrollerRef && scrollerRef.current \n      ? createPortal(scrollerContent, scrollerRef.current)\n      : <div className={scrollerClass} ref={containerRef}>{ scrollerContent }</div>\n  );\n};\n"],"names":["ReactRenderer","BaseRenderer","_store","_renderItem","_itemsSetter","_renderedRangeRefPool","Map","_listItems","_flushItems","this","constructor","opts","super","itemsSetter","renderRange","startIndex","endIndex","direction","store","listItems","itemsToAdd","refPool","index","data","ListItem","ref","get","current","idx","set","push","concat","removeRange","removal","removedItemsCount","itemsToRemove","length","slice","clear","setData","setRenderItem","renderItem","flush","flushSync","Promise","resolve","commit","renderedRefs","values","element","registerElement","dataSize","VirtualizedListReact","props","overscanHeight","scrollerRef","scrollerClass","viewportClass","contentLayerClass","containerRef","useRef","scrollHeightFillerRef","viewportContainerRef","scrollCanvasRef","topSpacerRef","contentLayerRef","bottomSpacerRef","visibleItems","setVisibleItems","useState","renderer","useLayoutEffect","container","scrollHeightFiller","viewportContainer","scrollCanvas","topSpacer","contentLayer","bottomSpacer","layout","DynamicListLayout","list","LayoutVirtual","scroller","classList","add","useEffect","scrollerContent","jsxs","Fragment","children","jsx","className","createPortal"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-layout-virtual",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "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.2.0"
+    "layout-virtual": "^0.3.1"
   },
   "peerDependencies": {
     "react": "^19.2.5",