react-crud-mobile 1.0.644 → 1.0.646

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.644",
+  "version": "1.0.646",
   "license": "MIT",
   "description": "Uma biblioteca de componentes para React Native",
   "main": "dist/index.js",
@@ -44,11 +44,10 @@
     "@react-native-vector-icons/ionicons": "^7.4.0",
     "@react-native-vector-icons/material-icons": "^0.0.1",
     "react": "19.0.0",
-    "react-crud-utils": "^0.1.260",
+    "react-crud-utils": "^0.1.261",
     "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

@@ -2,14 +2,12 @@ import React, { useRef, useState } from 'react';
 import { ChildType, ScopeUtils, Utils } from 'react-crud-utils';
 import UIChildren from '../UIChildren';
 import {
-  StyleSheet,
-  TouchableHighlight,
-  ScrollView,
-  View,
-  Text,
   Dimensions,
   findNodeHandle,
+  StyleSheet,
+  TouchableHighlight,
   UIManager,
+  View,
 } from 'react-native';
 
 interface UIListRowType extends ChildType {
@@ -38,24 +36,43 @@ export default function UIListRow(props: UIListRowType) {
     })
   );
 
-  const viewRef = useRef(null);
-  const [visible, setVisible] = useState(false);
-  const windowHeight = Dimensions.get('window').height;
-  const checkIfVisible = () => {
-    const nodeHandle = findNodeHandle(viewRef.current);
-
-    if (nodeHandle && !visible) {
-      UIManager.measure(nodeHandle, (x, y, width, height, pageX, pageY) => {
-        const isVisible = pageY >= 0 && pageY + height <= windowHeight;
-        setVisible(isVisible);
-      });
+  const targetRef = useRef(null);
+  const [visivel, setVisivel] = useState(false);
+
+  const onScroll = () => {
+    if (!visivel) {
+      const handle = findNodeHandle(targetRef.current);
+      if (handle) {
+        UIManager.measure(handle, (x, y, width, height, pageX, pageY) => {
+          const windowHeight = Dimensions.get('window').height;
+          const topoVisivel = pageY >= 0 && pageY < windowHeight;
+          const fundoVisivel =
+            pageY + height > 0 && pageY + height < windowHeight;
+          setVisivel(topoVisivel || fundoVisivel);
+        });
+      }
     }
   };
 
+  row.onScroll = onScroll;
+
   const onClick = (item: any) => {
     row.call('click', { value: item, item, edit: true, index });
   };
 
+  const Child = () => {
+    if (!visivel) {
+      return <></>;
+    }
+    return (
+      <>
+        <UIChildren scope={row} crud={row.crud}>
+          {props.children}
+        </UIChildren>
+      </>
+    );
+  };
+
   const ListItem = () => {
     let [updateIndex, setUpdateIndex] = useState(0);
     let key = scope.key('item');
@@ -76,38 +93,25 @@ 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()}
-          onLayout={checkIfVisible}
-          ref={viewRef}
+          ref={targetRef}
+          onLayout={onScroll}
         >
           <Child />
         </View>
       );
     }
-
     return (
       <TouchableHighlight
         key={key}
         style={getRowStyle()}
-        ref={viewRef}
         underlayColor={'transparent'}
-        onLayout={checkIfVisible}
+        ref={targetRef}
+        onLayout={onScroll}
         onPress={e => {
           e.stopPropagation();
           onClick(item);

package/src/elements/core/UIView.tsx

@@ -1,7 +1,7 @@
 import { ScrollView, StyleSheet, View } from 'react-native';
 
 import UIChildren from '../UIChildren';
-import { ChildType, useTheme } from 'react-crud-utils';
+import { ChildType, useTheme, Utils, ViewUtils } from 'react-crud-utils';
 import { useEffect } from 'react';
 import { StatusBar } from 'react-native';
 
@@ -13,11 +13,24 @@ export default function UIView({ scope, children }: ChildType) {
     StatusBar.setBarStyle('light-content');
     StatusBar.setBackgroundColor?.(theme.colors.primary);
   }, []);
+
+  const onScroll = () => {
+    const crud = ViewUtils.getCrud();
+
+    Utils.each(crud.scroll, s => {
+      if (s.onScroll) {
+        s.onScroll.call(s);
+      }
+    });
+  };
+
   return (
     <>
       {header}
       <View style={scope.getStyle('container', styles.container)}>
         <ScrollView
+          onScroll={onScroll}
+          scrollEventThrottle={16}
           keyboardShouldPersistTaps="handled"
           contentContainerStyle={scope.getStyle('contentContainer', {})}
           style={scope.getStyle('scroll', styles.scroll)}