released 0.1.6

iNerdStack · iNerdStack · commit c44b75851d4c · 2024-03-16T15:25:23.000+01:00
diff --git a/example/src/TileGrid.tsx b/example/src/TileGrid.tsx
@@ -32,14 +32,16 @@ export default function TileGrid() {
     },
   ];
 
-  const renderItem = (item: any, _: number) => {
+  const repeatedData = Array(50).fill(data).flat();
+
+  const renderItem = (_: any, index: number) => {
     return (
       <TouchableOpacity
         style={{
           flex: 1,
         }}
         onPress={() => {
-          console.log(item.text, 'pressed');
+          console.log(index + 1, 'pressed');
         }}
       >
         <View
@@ -58,7 +60,7 @@ export default function TileGrid() {
               fontSize: 20,
             }}
           >
-            {item.text}
+            {index + 1}
           </Text>
         </View>
       </TouchableOpacity>
@@ -73,7 +75,7 @@ export default function TileGrid() {
     >
       <ResponsiveGrid
         maxItemsPerColumn={4}
-        data={data}
+        data={repeatedData}
         itemContainerStyle={{
           padding: 2,
         }}
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-flexible-grid",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "React Native Flexible Grid is an advanced grid layout system inspired by CSS Grid, designed to facilitate responsive, customizable, and dynamic grid layouts in React Native applications. It supports both responsive and fixed layouts, enabling the creation of intricate designs with minimal effort.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -127,4 +127,4 @@
   "directories": {
     "example": "example"
   }
-}
+}
diff --git a/src/flex-grid/index.tsx b/src/flex-grid/index.tsx
@@ -6,6 +6,7 @@ import type { NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
 import type { FlexGridProps, FlexGridTile } from './types';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { calcFlexGrid } from './calc-flex-grid';
+import useThrottle from '../hooks/use-throttle';
 
 export const FlexGrid: React.FC<FlexGridProps> = ({
   data = [],
@@ -21,18 +22,13 @@ export const FlexGrid: React.FC<FlexGridProps> = ({
 }) => {
   const [visibleItems, setVisibleItems] = useState<FlexGridTile[]>([]);
 
-  const [containerWidth, setContainerWidth] = useState(0);
-  const [containerHeight, setContainerHeight] = useState(0);
+  const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
 
   const scrollPosition = useRef<{
     x: number;
     y: number;
   }>({ x: 0, y: 0 });
 
-  const throttleScrollTimeout = useRef<ReturnType<typeof setTimeout> | null>(
-    null
-  );
-
   const { totalHeight, totalWidth, gridItems } = useMemo(() => {
     return calcFlexGrid(data, maxColumnRatioUnits, itemSizeUnit);
   }, [data, maxColumnRatioUnits, itemSizeUnit]);
@@ -42,14 +38,16 @@ export const FlexGrid: React.FC<FlexGridProps> = ({
   const updateVisibleItems = () => {
     if (!virtualization) return;
 
-    const bufferX = containerWidth * virtualizedBufferFactor;
-    const bufferY = containerHeight * virtualizedBufferFactor;
+    const bufferX = containerSize.width * virtualizedBufferFactor;
+    const bufferY = containerSize.height * virtualizedBufferFactor;
 
     const visibleStartX = Math.max(0, scrollPosition.current.x - bufferX);
-    const visibleEndX = scrollPosition.current.x + containerWidth + bufferX;
+    const visibleEndX =
+      scrollPosition.current.x + containerSize.width + bufferX;
 
     const visibleStartY = Math.max(0, scrollPosition.current.y - bufferY);
-    const visibleEndY = scrollPosition.current.y + containerHeight + bufferY;
+    const visibleEndY =
+      scrollPosition.current.y + containerSize.height + bufferY;
 
     const vItems = gridItems.filter((item) => {
       const itemRight = item.left + (item.widthRatio || 1) * itemSizeUnit;
@@ -65,6 +63,11 @@ export const FlexGrid: React.FC<FlexGridProps> = ({
     setVisibleItems(vItems);
   };
 
+  const throttledUpdateVisibleItems = useThrottle(
+    updateVisibleItems,
+    scrollEventInterval
+  );
+
   const onHorizontalScroll = (
     event: NativeSyntheticEvent<NativeScrollEvent>
   ) => {
@@ -77,15 +80,7 @@ export const FlexGrid: React.FC<FlexGridProps> = ({
       x: nativeEvent.contentOffset.x,
     };
 
-    if (throttleScrollTimeout.current !== null) {
-      return;
-    }
-
-    throttleScrollTimeout.current = setTimeout(() => {
-      updateVisibleItems();
-
-      throttleScrollTimeout.current = null;
-    }, scrollEventInterval);
+    throttledUpdateVisibleItems();
   };
 
   const onVerticalScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
@@ -98,30 +93,15 @@ export const FlexGrid: React.FC<FlexGridProps> = ({
       y: nativeEvent.contentOffset.y,
     };
 
-    if (throttleScrollTimeout.current !== null) {
-      return;
-    }
-
-    throttleScrollTimeout.current = setTimeout(() => {
-      updateVisibleItems();
-
-      throttleScrollTimeout.current = null;
-    }, scrollEventInterval);
+    throttledUpdateVisibleItems();
   };
 
   useEffect(() => {
     //recalculate visible items when itemSizeUnit or maxColumnRatioUnits or data changes
     if (virtualization) {
       updateVisibleItems();
     }
-  }, [
-    itemSizeUnit,
-    maxColumnRatioUnits,
-    data,
-    virtualization,
-    containerHeight,
-    containerWidth,
-  ]);
+  }, [itemSizeUnit, maxColumnRatioUnits, data, virtualization, containerSize]);
 
   if (!renderedList) {
     return null;
@@ -132,8 +112,7 @@ export const FlexGrid: React.FC<FlexGridProps> = ({
       style={[{ flexGrow: 1 }, style]}
       onLayout={(event) => {
         const { width, height } = event.nativeEvent.layout;
-        setContainerWidth(width);
-        setContainerHeight(height);
+        setContainerSize({ width, height });
       }}
     >
       <ScrollView
diff --git a/src/hooks/use-throttle.ts b/src/hooks/use-throttle.ts
@@ -0,0 +1,31 @@
+import { useCallback, useRef } from 'react';
+
+/**
+ * A hook to throttle function calls.
+ * @param callback The function to throttle.
+ * @param delay The throttle delay in milliseconds.
+ * @returns A throttled version of the provided function.
+ */
+const useThrottle = <T extends (...args: any[]) => any>(
+  callback: T,
+  delay: number
+): ((...args: Parameters<T>) => void) => {
+  const throttleTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const throttledFunction = useCallback(
+    (...args: Parameters<T>) => {
+      if (throttleTimeout.current === null) {
+        callback(...args);
+        throttleTimeout.current = setTimeout(() => {
+          throttleTimeout.current = null;
+        }, delay);
+      }
+    },
+
+    [callback, delay]
+  );
+
+  return throttledFunction;
+};
+
+export default useThrottle;
diff --git a/src/responsive-grid/index.tsx b/src/responsive-grid/index.tsx
@@ -6,6 +6,7 @@ import { ScrollView, View } from 'react-native';
 import type { ResponsiveGridProps, TileItem } from './types';
 import { calcResponsiveGrid } from './calc-responsive-grid';
 import type { NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
+import useThrottle from '../hooks/use-throttle';
 
 export const ResponsiveGrid: React.FC<ResponsiveGridProps> = ({
   data = [],
@@ -20,12 +21,8 @@ export const ResponsiveGrid: React.FC<ResponsiveGridProps> = ({
   itemUnitHeight,
 }) => {
   const [visibleItems, setVisibleItems] = useState<TileItem[]>([]);
-  const throttleScrollTimeout = useRef<ReturnType<typeof setTimeout> | null>(
-    null
-  );
 
-  const [containerWidth, setContainerWidth] = useState(0);
-  const [containerHeight, setContainerHeight] = useState(0);
+  const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
 
   const scrollYPosition = useRef<number>(0);
 
@@ -34,10 +31,10 @@ export const ResponsiveGrid: React.FC<ResponsiveGridProps> = ({
       calcResponsiveGrid(
         data,
         maxItemsPerColumn,
-        containerWidth,
+        containerSize.width,
         itemUnitHeight
       ),
-    [data, maxItemsPerColumn, containerWidth]
+    [data, maxItemsPerColumn, containerSize]
   );
 
   const renderedItems = virtualization ? visibleItems : gridItems;
@@ -46,11 +43,11 @@ export const ResponsiveGrid: React.FC<ResponsiveGridProps> = ({
     if (!virtualization) return;
 
     // Buffer to add outside visible range
-    const buffer = containerHeight * virtualizedBufferFactor;
+    const buffer = containerSize.height * virtualizedBufferFactor;
 
     // Define the range of items that are visible based on scroll position
     const visibleStart = Math.max(0, scrollYPosition.current - buffer);
-    const visibleEnd = scrollYPosition.current + containerHeight + buffer;
+    const visibleEnd = scrollYPosition.current + containerSize.height + buffer;
 
     const vItems = gridItems.filter((item: TileItem) => {
       const itemBottom = item.top + item.height;
@@ -63,54 +60,48 @@ export const ResponsiveGrid: React.FC<ResponsiveGridProps> = ({
     return vItems;
   };
 
+  const throttledUpdateVisibleItems = useThrottle(
+    updateVisibleItems,
+    scrollEventInterval
+  );
+
   const onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-    // If virtualization is disabled, return
     if (!virtualization) return;
 
     const currentScrollY = event.nativeEvent.contentOffset.y;
 
     scrollYPosition.current = currentScrollY;
 
-    // Throttling logic
-    if (throttleScrollTimeout.current !== null) {
-      return;
-    }
-
-    throttleScrollTimeout.current = setTimeout(() => {
-      updateVisibleItems();
-
-      throttleScrollTimeout.current = null;
-    }, scrollEventInterval);
+    throttledUpdateVisibleItems();
   };
 
   useEffect(() => {
     if (virtualization) {
       updateVisibleItems();
     }
-  }, [gridItems, containerHeight, containerWidth, virtualization]);
+  }, [gridItems, containerSize, virtualization]);
 
   return (
     <View
       style={[{ flexGrow: 1 }, style]}
       onLayout={(event) => {
         const { width, height } = event.nativeEvent.layout;
-        setContainerWidth(width);
-        setContainerHeight(height);
+        setContainerSize({ width, height });
       }}
     >
       <ScrollView
         onScroll={onScroll}
         scrollEventThrottle={32}
         contentContainerStyle={{
           height: gridViewHeight,
-          width: containerWidth,
+          width: containerSize.width,
         }}
         showsVerticalScrollIndicator={showScrollIndicator}
       >
         <View
           style={{
             height: gridViewHeight,
-            width: containerWidth,
+            width: containerSize.width,
           }}
         >
           {renderedItems.map((item, index) => (

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "react-native-flexible-grid",`
`3`		`- "version": "0.1.5",`
	`3`	`+ "version": "0.1.6",`
`4`	`4`	`"description": "React Native Flexible Grid is an advanced grid layout system inspired by CSS Grid, designed to facilitate responsive, customizable, and dynamic grid layouts in React Native applications. It supports both responsive and fixed layouts, enabling the creation of intricate designs with minimal effort.",`
`5`	`5`	`"main": "lib/commonjs/index",`
`6`	`6`	`"module": "lib/module/index",`
`@@ -127,4 +127,4 @@`
`127`	`127`	`"directories": {`
`128`	`128`	`"example": "example"`
`129`	`129`	`}`
`130`		`-}`
	`130`	`+}`