@rolster/react-components 19.4.4 → 19.4.5

package/dist/esm/components/organisms/VirtualScroll/VirtualScroll.js

@@ -1,35 +1,26 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from 'react';
-export function RlsVirtualScroll({ items, itemHeight, containerHeight }) {
-    const [visibleItems, setVisibleItems] = useState([]);
-    const containerRef = useRef(null);
+import { useCallback, useMemo, useState } from 'react';
+export function RlsVirtualScroll({ container, height, items }) {
     const [scrollTop, setScrollTop] = useState(0);
-    useEffect(() => {
-        const calculateVisibleItems = () => {
-            if (!containerRef.current)
-                return;
-            const startIndex = Math.floor(scrollTop / itemHeight);
-            const endIndex = Math.min(items.length - 1, Math.floor((scrollTop + containerHeight) / itemHeight));
-            setVisibleItems(items.slice(startIndex, endIndex + 1));
-        };
-        calculateVisibleItems();
-    }, [scrollTop, items, itemHeight, containerHeight]);
-    const handleScroll = (e) => {
-        setScrollTop(e.currentTarget.scrollTop);
-    };
-    return (_jsx("div", { ref: containerRef, style: {
-            height: `${containerHeight}px`,
+    const startIndex = useMemo(() => Math.floor(scrollTop / height), [scrollTop, height]);
+    const endIndex = useMemo(() => Math.min(items.length - 1, Math.floor((scrollTop + container) / height)), [scrollTop, items.length, height, container]);
+    const visibleItems = useMemo(() => items.slice(startIndex, endIndex + 1), [items, startIndex, endIndex]);
+    const handleScroll = useCallback((event) => {
+        setScrollTop(event.currentTarget.scrollTop);
+    }, []);
+    return (_jsx("div", { style: {
+            height: `${container}px`,
             overflowY: 'auto',
             position: 'relative'
         }, onScroll: handleScroll, children: _jsx("div", { style: {
-                height: `${items.length * itemHeight}px`,
+                height: `${items.length * height}px`,
                 position: 'relative'
             }, children: visibleItems.map((item, index) => {
-                const actualIndex = Math.floor(scrollTop / itemHeight) + index;
+                const actualIndex = startIndex + index;
                 return (_jsx("div", { style: {
                         position: 'absolute',
-                        top: `${actualIndex * itemHeight}px`,
-                        height: `${itemHeight}px`,
+                        top: `${actualIndex * height}px`,
+                        height: `${height}px`,
                         width: '100%'
                     }, children: item }, actualIndex));
             }) }) }));

package/dist/esm/components/organisms/VirtualScroll/VirtualScroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualScroll.js","sourceRoot":"","sources":["../../../../../src/components/organisms/VirtualScroll/VirtualScroll.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAE7D,MAAM,UAAU,gBAAgB,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,eAAe,EAAO;IAC1E,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACrD,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAClC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAE9C,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,qBAAqB,GAAG,GAAG,EAAE;YACjC,IAAI,CAAC,YAAY,CAAC,OAAO;gBAAE,OAAO;YAElC,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,UAAU,CAAC,CAAC;YACtD,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CACvB,KAAK,CAAC,MAAM,GAAG,CAAC,EAChB,IAAI,CAAC,KAAK,CAAC,CAAC,SAAS,GAAG,eAAe,CAAC,GAAG,UAAU,CAAC,CACvD,CAAC;YAEF,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC;QACzD,CAAC,CAAC;QAEF,qBAAqB,EAAE,CAAC;IAC1B,CAAC,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,eAAe,CAAC,CAAC,CAAC;IAEpD,MAAM,YAAY,GAAG,CAAC,CAAU,EAAE,EAAE;QAClC,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;IAC1C,CAAC,CAAC;IAEF,OAAO,CACL,cACE,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE;YACL,MAAM,EAAE,GAAG,eAAe,IAAI;YAC9B,SAAS,EAAE,MAAM;YACjB,QAAQ,EAAE,UAAU;SACrB,EACD,QAAQ,EAAE,YAAY,YAEtB,cACE,KAAK,EAAE;gBACL,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,GAAG,UAAU,IAAI;gBACxC,QAAQ,EAAE,UAAU;aACrB,YAEA,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBAChC,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,UAAU,CAAC,GAAG,KAAK,CAAC;gBAC/D,OAAO,CACL,cAEE,KAAK,EAAE;wBACL,QAAQ,EAAE,UAAU;wBACpB,GAAG,EAAE,GAAG,WAAW,GAAG,UAAU,IAAI;wBACpC,MAAM,EAAE,GAAG,UAAU,IAAI;wBACzB,KAAK,EAAE,MAAM;qBACd,YAEA,IAAI,IARA,WAAW,CASZ,CACP,CAAC;YACJ,CAAC,CAAC,GACE,GACF,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"VirtualScroll.js","sourceRoot":"","sources":["../../../../../src/components/organisms/VirtualScroll/VirtualScroll.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAsB,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAQ3E,MAAM,UAAU,gBAAgB,CAAC,EAC/B,SAAS,EACT,MAAM,EACN,KAAK,EACc;IACnB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAE9C,MAAM,UAAU,GAAG,OAAO,CACxB,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC,EACpC,CAAC,SAAS,EAAE,MAAM,CAAC,CACpB,CAAC;IAEF,MAAM,QAAQ,GAAG,OAAO,CACtB,GAAG,EAAE,CACH,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,SAAS,GAAG,SAAS,CAAC,GAAG,MAAM,CAAC,CAAC,EAC1E,CAAC,SAAS,EAAE,KAAK,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,CAAC,CAC7C,CAAC;IAEF,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,QAAQ,GAAG,CAAC,CAAC,EAC3C,CAAC,KAAK,EAAE,UAAU,EAAE,QAAQ,CAAC,CAC9B,CAAC;IAEF,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,KAA8B,EAAE,EAAE;QAClE,YAAY,CAAC,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;IAC9C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,cACE,KAAK,EAAE;YACL,MAAM,EAAE,GAAG,SAAS,IAAI;YACxB,SAAS,EAAE,MAAM;YACjB,QAAQ,EAAE,UAAU;SACrB,EACD,QAAQ,EAAE,YAAY,YAEtB,cACE,KAAK,EAAE;gBACL,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,IAAI;gBACpC,QAAQ,EAAE,UAAU;aACrB,YAEA,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBAChC,MAAM,WAAW,GAAG,UAAU,GAAG,KAAK,CAAC;gBAEvC,OAAO,CACL,cAEE,KAAK,EAAE;wBACL,QAAQ,EAAE,UAAU;wBACpB,GAAG,EAAE,GAAG,WAAW,GAAG,MAAM,IAAI;wBAChC,MAAM,EAAE,GAAG,MAAM,IAAI;wBACrB,KAAK,EAAE,MAAM;qBACd,YAEA,IAAI,IARA,WAAW,CASZ,CACP,CAAC;YACJ,CAAC,CAAC,GACE,GACF,CACP,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rolster/react-components",
-  "version": "19.4.4",
+  "version": "19.4.5",
   "type": "module",
   "description": "Package containing UI components for React Project.",
   "license": "MIT",
@@ -53,7 +53,7 @@
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.21.0",
     "@rolster/rollup": "^2.0.0",
-    "@rolster/styles-foundations": "^2.7.1",
+    "@rolster/styles-foundations": "^2.7.3",
     "@rolster/types": "^1.1.0",
     "@types/node-sass": "^4.11.4",
     "@types/react": "^19.0.0",