react-crud-mobile 1.0.640 → 1.0.642

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.640",
+  "version": "1.0.642",
   "license": "MIT",
   "description": "Uma biblioteca de componentes para React Native",
   "main": "dist/index.js",
@@ -48,6 +48,7 @@
     "react-dom": "19.0.0",
     "react-native": "0.79.2",
     "react-native-gesture-handler": "~2.24.0",
+    "react-native-intersection-observer": "^0.2.1",
     "react-native-reanimated": "~3.17.4",
     "react-native-safe-area-context": "5.4.0",
     "react-native-screens": "~4.10.0",

package/src/elements/core/UIListRow.tsx

@@ -1,7 +1,16 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { ChildType, ScopeUtils, Utils } from 'react-crud-utils';
 import UIChildren from '../UIChildren';
-import { StyleSheet, TouchableHighlight, View } from 'react-native';
+import {
+  StyleSheet,
+  TouchableHighlight,
+  ScrollView,
+  View,
+  Text,
+  Dimensions,
+  findNodeHandle,
+  UIManager,
+} from 'react-native';
 
 interface UIListRowType extends ChildType {
   item: any;
@@ -36,6 +45,18 @@ export default function UIListRow(props: UIListRowType) {
   const ListItem = () => {
     let [updateIndex, setUpdateIndex] = useState(0);
     let key = scope.key('item');
+    const viewRef = useRef(null);
+    const [visible, setVisible] = useState(false);
+    const windowHeight = Dimensions.get('window').height;
+    const checkIfVisible = () => {
+      const nodeHandle = findNodeHandle(viewRef.current);
+      if (nodeHandle) {
+        UIManager.measure(nodeHandle, (x, y, width, height, pageX, pageY) => {
+          const isVisible = pageY >= 0 && pageY + height <= windowHeight;
+          setVisible(isVisible);
+        });
+      }
+    };
 
     const getRowStyle = () => {
       let css = row.getStyle('row', { ...styles.row });
@@ -53,28 +74,44 @@ export default function UIListRow(props: UIListRowType) {
       setUpdateIndex(++updateIndex);
     };
 
+    const Child = () => {
+      return (
+        <>
+          {visible && (
+            <UIChildren scope={row} crud={row.crud}>
+              {props.children}
+            </UIChildren>
+          )}
+        </>
+      );
+    };
+
     if (!original.click) {
       return (
-        <View key={key} style={getRowStyle()}>
-          <UIChildren scope={row} crud={row.crud}>
-            {props.children}
-          </UIChildren>
+        <View
+          key={key}
+          style={getRowStyle()}
+          onLayout={checkIfVisible}
+          ref={viewRef}
+        >
+          <Child />
         </View>
       );
     }
+
     return (
       <TouchableHighlight
         key={key}
         style={getRowStyle()}
+        ref={viewRef}
         underlayColor={'transparent'}
+        onLayout={checkIfVisible}
         onPress={e => {
           e.stopPropagation();
           onClick(item);
         }}
       >
-        <UIChildren scope={row} crud={row.crud}>
-          {props.children}
-        </UIChildren>
+        <Child />
       </TouchableHighlight>
     );
   };