react-crud-mobile 1.0.641 → 1.0.643

package/package.json

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

package/src/elements/core/UIListRow.tsx

@@ -1,8 +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 { InView } from 'react-native-intersection-observer';
+import {
+  StyleSheet,
+  TouchableHighlight,
+  ScrollView,
+  View,
+  Text,
+  Dimensions,
+  findNodeHandle,
+  UIManager,
+} from 'react-native';
 
 interface UIListRowType extends ChildType {
   item: any;
@@ -37,6 +45,19 @@ 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 && !visible) {
+        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 });
@@ -54,31 +75,45 @@ 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 (
-      <InView>
-        <TouchableHighlight
-          key={key}
-          style={getRowStyle()}
-          underlayColor={'transparent'}
-          onPress={e => {
-            e.stopPropagation();
-            onClick(item);
-          }}
-        >
-          <UIChildren scope={row} crud={row.crud}>
-            {props.children}
-          </UIChildren>
-        </TouchableHighlight>
-      </InView>
+      <TouchableHighlight
+        key={key}
+        style={getRowStyle()}
+        ref={viewRef}
+        underlayColor={'transparent'}
+        onLayout={checkIfVisible}
+        onPress={e => {
+          e.stopPropagation();
+          onClick(item);
+        }}
+      >
+        <Child />
+      </TouchableHighlight>
     );
   };