react-crud-mobile 1.0.648 → 1.0.650

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.648",
+  "version": "1.0.650",
   "license": "MIT",
   "description": "Uma biblioteca de componentes para React Native",
   "main": "dist/index.js",

package/src/elements/core/UIListRow.tsx

@@ -1,14 +1,8 @@
 import React, { useRef, useState } from 'react';
 import { ChildType, ScopeUtils, Utils, ViewUtils } from 'react-crud-utils';
 import UIChildren from '../UIChildren';
-import {
-  Dimensions,
-  findNodeHandle,
-  StyleSheet,
-  TouchableHighlight,
-  UIManager,
-  View,
-} from 'react-native';
+import { StyleSheet, TouchableHighlight, View } from 'react-native';
+import { useIsVisible } from '../../hooks/useIsVisible';
 
 interface UIListRowType extends ChildType {
   item: any;
@@ -36,37 +30,15 @@ export default function UIListRow(props: UIListRowType) {
     })
   );
 
-  const main = ViewUtils.getCrud();
   const targetRef = useRef(null);
-  const [visivel, setVisivel] = useState(false);
-
-  const onScroll = () => {
-    console.log(visivel);
-
-    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;
-
-  main.scroll[row.getName()] = row;
+  const isVisible = useIsVisible(targetRef);
 
   const onClick = (item: any) => {
     row.call('click', { value: item, item, edit: true, index });
   };
 
   const Child = () => {
-    if (!visivel) {
+    if (!isVisible) {
       return <></>;
     }
     return (
@@ -100,12 +72,7 @@ export default function UIListRow(props: UIListRowType) {
 
     if (!original.click) {
       return (
-        <View
-          key={key}
-          style={getRowStyle()}
-          ref={targetRef}
-          onLayout={onScroll}
-        >
+        <View key={key} style={getRowStyle()} ref={targetRef}>
           <Child />
         </View>
       );
@@ -116,7 +83,6 @@ export default function UIListRow(props: UIListRowType) {
         style={getRowStyle()}
         underlayColor={'transparent'}
         ref={targetRef}
-        onLayout={onScroll}
         onPress={e => {
           e.stopPropagation();
           onClick(item);

package/src/hooks/useIsVisible.ts

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+import { Dimensions, Platform } from 'react-native';
+
+export function useIsVisible(ref: any) {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const checkVisibility = () => {
+      if (!ref.current) return;
+
+      if (Platform.OS === 'web') {
+        const rect = ref.current.getBoundingClientRect?.();
+
+        if (rect && typeof window !== 'undefined') {
+          const windowHeight = window.innerHeight;
+          const visible = rect.top < windowHeight && rect.bottom > 0;
+          setIsVisible(visible);
+        }
+      } else {
+        ref.current.measureInWindow?.((x, y, width, height) => {
+          const windowHeight = Dimensions.get('window').height;
+          const visible = y < windowHeight && y + height > 0;
+          setIsVisible(visible);
+        });
+      }
+    };
+
+    const interval = setInterval(checkVisibility, 300); // roda a cada 300ms
+    return () => clearInterval(interval);
+  }, [ref]);
+
+  return isVisible;
+}