react-crud-mobile 1.3.57 → 1.3.59

package/package.json

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

package/src/elements/core/UIOrder.tsx

@@ -3,7 +3,9 @@ import { ChildType, ComponentUtils, ScopeUtils, Utils } from 'react-crud-utils';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import UI from '../UI';
 import { Ionicons } from '@expo/vector-icons';
-import DraggableFlatList from 'react-native-draggable-flatlist';
+import DraggableFlatList, {
+  ScaleDecorator,
+} from 'react-native-draggable-flatlist';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 export default function UIOrder(props: ChildType) {
@@ -11,7 +13,6 @@ export default function UIOrder(props: ChildType) {
   const crud = scope.crud;
   const original = scope.original;
   const cols = Utils.nvl(scope.getPart('cols', undefined, 1));
-  const hideAddWhenEmpty = original.hideAddWhenEmpty;
 
   const getStyle = (key: string, extra?: any) => {
     return scope.getStyle(key, { ...extra, ...styles[key] });
@@ -27,48 +28,38 @@ export default function UIOrder(props: ChildType) {
     return row;
   };
 
-  const LocalData = () => {
-    let [index, setIndex] = useState(scope.updateIndex);
+  const items = Utils.call(() => {
+    let list = Utils.nvl(scope.getItems(), []);
 
-    scope.update = () => {
-      scope.updateIndex = ++index;
+    if (original.search && !original.list?.url) {
+      let query = crud
+        .get('query', '')
+        .toLowerCase()
+        .trim() as string;
 
-      setIndex(index);
-    };
+      if (query.length > 1) {
+        let filters: any[] = [];
+        let filterBy = Utils.nvl(original.filterBy, 'label');
 
-    let keyData = scope.key('data');
+        Utils.each(list, o => {
+          let label = o[filterBy];
 
-    const items = Utils.call(() => {
-      let list = Utils.nvl(scope.getItems(), []);
-
-      if (original.search && !original.list?.url) {
-        let query = crud
-          .get('query', '')
-          .toLowerCase()
-          .trim() as string;
-
-        if (query.length > 1) {
-          let filters: any[] = [];
-          let filterBy = Utils.nvl(original.filterBy, 'label');
-
-          Utils.each(list, o => {
-            let label = o[filterBy];
-
-            if (label) {
-              if (label.includes(query)) {
-                filters.push(o);
-              }
+          if (label) {
+            if (label.includes(query)) {
+              filters.push(o);
             }
-          });
+          }
+        });
 
-          return filters;
-        }
+        return filters;
       }
-      return list;
-    });
+    }
+    return list;
+  });
 
-    const renderItem = ({ item, drag, isActive }) => {
-      return (
+  const renderItem = ({ item, drag, isActive }) => {
+    return (
+      <ScaleDecorator>
         <TouchableOpacity
           style={[
             styles.row,
@@ -78,25 +69,14 @@ export default function UIOrder(props: ChildType) {
         >
           <Text style={styles.text}>{scope.getItemLabel(item)}</Text>
         </TouchableOpacity>
-      );
-    };
-
-    return (
-      <View key={keyData} style={getContainerStyle()}>
-        <DraggableFlatList
-          data={items}
-          renderItem={renderItem}
-          keyExtractor={item => scope.getItemValue(item)}
-          onDragEnd={({ data }) => {
-            scope.changeValue(data);
-          }}
-        />
-      </View>
+      </ScaleDecorator>
     );
   };
 
+  const [data, setData] = useState(items);
+
   return (
-    <>
+    <GestureHandlerRootView style={{ flex: 1, ...scope.getStyle('container') }}>
       {original.search !== false && (
         <UI.Text
           placeholder="Pesquisar..."
@@ -111,8 +91,17 @@ export default function UIOrder(props: ChildType) {
           icon={<Ionicons name="search" size={20} color="#888" />}
         />
       )}
-      <LocalData />
-    </>
+
+      <DraggableFlatList
+        data={data}
+        renderItem={renderItem}
+        keyExtractor={item => scope.getItemValue(item)}
+        onDragEnd={({ data }) => {
+          setData(data);
+          scope.changeValue(data);
+        }}
+      />
+    </GestureHandlerRootView>
   );
 }