react-crud-mobile 1.3.369 → 1.3.372

package/dist/react-crud-mobile.esm.js

@@ -1,13 +1,12 @@
 import React, { useState, useRef, useEffect, useContext, useLayoutEffect, createContext } from 'react';
 import { Utils, ScopeUtils, CrudUtils, ComponentUtils, HtmlUtils, ViewUtils, ThemeUtils, useTheme } from 'react-crud-utils';
-import { View, StyleSheet, TouchableOpacity, Text, Linking, TouchableHighlight, Modal, SafeAreaView, ScrollView, Switch, TextInput, Platform, Dimensions, Alert, Image, StatusBar, KeyboardAvoidingView, TouchableWithoutFeedback, Keyboard } from 'react-native';
+import { View, StyleSheet, TouchableOpacity, Text, Linking, TouchableHighlight, Modal, SafeAreaView, ScrollView, Switch, TextInput, Platform, Dimensions, Animated, PanResponder, Alert, Image, StatusBar, KeyboardAvoidingView, TouchableWithoutFeedback, Keyboard } from 'react-native';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import Ionicons from '@expo/vector-icons/Ionicons';
 import { Ionicons as Ionicons$1, AntDesign, Entypo, EvilIcons, MaterialCommunityIcons } from '@expo/vector-icons';
 import Slider from '@react-native-community/slider';
 import Toast, { BaseToast, ErrorToast } from 'react-native-toast-message';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import DraggableFlatList, { ScaleDecorator } from 'react-native-draggable-flatlist';
 import { SafeAreaProvider, SafeAreaView as SafeAreaView$1 } from 'react-native-safe-area-context';
 
 function _extends() {
@@ -1718,164 +1717,240 @@ var styles$9 = /*#__PURE__*/StyleSheet.create({
   view: {}
 });
 
-function UIOrder(props) {
+var ITEM_HEIGHT = 70;
+function UIDraggableList(props) {
   var scope = props.scope;
-  var crud = scope.crud;
-  var original = scope.original;
-  var cols = Utils.nvl(scope.getPart('cols', undefined, 1));
-  var items = Utils.call(function () {
-    var _original$list;
-    var list = Utils.nvl(scope.getItems(), []);
-    if (original.search && !((_original$list = original.list) != null && _original$list.url)) {
-      var query = crud.get('query', '').toLowerCase().trim();
-      if (query.length > 1) {
-        var filters = [];
-        var filterBy = Utils.nvl(original.filterBy, 'label');
-        Utils.each(list, function (o) {
-          var label = o[filterBy];
-          if (label) {
-            if (label.includes(query)) {
-              filters.push(o);
-            }
-          }
+  var initial = scope.getOptions();
+  var _useState = useState(initial),
+    items = _useState[0],
+    setItems = _useState[1];
+  var _useState2 = useState(null),
+    draggingId = _useState2[0],
+    setDraggingId = _useState2[1];
+  // O tipo Animated.Value em um ambiente TypeScript puro não tem o método ._value,
+  // mas é a propriedade interna usada para acessar o valor diretamente.
+  // Usamos 'any' no acesso para suprimir o erro TS.
+  var positions = useRef(Object.fromEntries(initial.map(function (it, i) {
+    return [it.value, new Animated.Value(i * ITEM_HEIGHT)];
+  }))).current;
+  var panRespondersRef = useRef({});
+  var activeItem = useRef(null);
+  var activeIndex = useRef(-1);
+  var offsetY = useRef(0);
+  // Armazena a lista mais recente em uma ref para uso em funções de PanResponder
+  var itemsRef = useRef(items);
+  useEffect(function () {
+    itemsRef.current = items;
+  }, [items]);
+  // 1. Atualiza posições apenas para itens existentes
+  useEffect(function () {
+    items.forEach(function (it, idx) {
+      if (!positions[it.value]) positions[it.value] = new Animated.Value(idx * ITEM_HEIGHT);
+      Animated.spring(positions[it.value], {
+        toValue: idx * ITEM_HEIGHT,
+        useNativeDriver: false
+      }).start();
+    });
+  }, [items]);
+  var createPanResponder = function createPanResponder(item) {
+    return PanResponder.create({
+      onStartShouldSetPanResponder: function onStartShouldSetPanResponder() {
+        return true;
+      },
+      onPanResponderGrant: function onPanResponderGrant() {
+        // Use itemsRef.current para obter a lista mais recente no momento do arrasto.
+        var currentItems = itemsRef.current;
+        if (!positions[item.value] || !currentItems.find(function (it) {
+          return it.value === item.value;
+        })) return;
+        activeItem.current = item;
+        activeIndex.current = currentItems.findIndex(function (it) {
+          return it.value === item.value;
         });
-        return filters;
-      }
-    }
-    return list;
-  });
-  //v2
-  var renderItem = function renderItem(_ref) {
-    var item = _ref.item,
-      drag = _ref.drag,
-      isActive = _ref.isActive,
-      getIndex = _ref.getIndex;
-    var index = getIndex();
-    var name = "" + scope.key('row', index, '');
-    var _useState = useState(ScopeUtils.create(_extends({}, original, {
-        parent: scope,
-        name: name,
-        crud: scope.crud,
-        index: index,
-        type: 'row',
-        data: item
-      }))),
-      row = _useState[0];
-    var css = _extends({}, scope.getStyle('row'));
-    if (isActive) {
-      css = _extends({}, css, scope.getStyle('active'));
-    }
-    if (isActive) {
-      css = _extends({}, css, row.getStyle('rowSelected', {}));
-    } else {
-      css = _extends({}, css, row.getStyle('rowUnSelected', {}));
-    }
-    var Child = function Child() {
-      if (Utils.isEmpty(props.children)) {
-        return /*#__PURE__*/jsxs(Fragment, {
-          children: [/*#__PURE__*/jsx(MaterialCommunityIcons, {
-            name: "drag",
-            size: 24,
-            color: "black"
-          }), /*#__PURE__*/jsx(Text, {
-            style: styles$a.text,
-            children: scope.getItemLabel(item)
-          })]
+        // CORREÇÃO: Usa a propriedade interna _value para acessar o valor atual
+        offsetY.current = positions[item.value]._value; // 👈 CORREÇÃO APLICADA
+        setDraggingId(item.value);
+      },
+      onPanResponderMove: function onPanResponderMove(_, gesture) {
+        var currentItems = itemsRef.current;
+        if (!positions[item.value] || !currentItems.find(function (it) {
+          return it.value === item.value;
+        })) return;
+        var y = offsetY.current + gesture.dy;
+        positions[item.value].setValue(y);
+        var targetIndex = Math.max(0, Math.min(currentItems.length - 1, Math.floor((y + ITEM_HEIGHT / 2) / ITEM_HEIGHT)));
+        currentItems.forEach(function (other, idx) {
+          if (other.value === item.value || !positions[other.value]) return;
+          var targetY = idx * ITEM_HEIGHT;
+          if (idx > activeIndex.current && idx <= targetIndex) targetY = (idx - 1) * ITEM_HEIGHT;else if (idx < activeIndex.current && idx >= targetIndex) targetY = (idx + 1) * ITEM_HEIGHT;
+          Animated.timing(positions[other.value], {
+            toValue: targetY,
+            duration: 120,
+            useNativeDriver: false
+          }).start();
         });
+      },
+      onPanResponderRelease: function onPanResponderRelease() {
+        var moved = activeItem.current;
+        var currentItems = itemsRef.current;
+        if (!moved || !positions[moved.value] || !currentItems.find(function (it) {
+          return it.value === moved.value;
+        })) return;
+        // CORREÇÃO: Usa a propriedade interna _value para obter a posição final
+        var finalY = positions[moved.value]._value; // 👈 CORREÇÃO APLICADA
+        var newIndex = Math.max(0, Math.min(currentItems.length - 1, Math.floor((finalY + ITEM_HEIGHT / 2) / ITEM_HEIGHT)));
+        var oldIndex = activeIndex.current;
+        var updated = [].concat(currentItems);
+        var _updated$splice = updated.splice(oldIndex, 1),
+          removed = _updated$splice[0];
+        updated.splice(newIndex, 0, removed);
+        // Atualiza o state com a nova ordem.
+        setItems(updated);
+        // A animação final agora está no useEffect, mas fazemos a limpeza das refs.
+        setDraggingId(null);
+        activeItem.current = null;
+        activeIndex.current = -1;
       }
-      return /*#__PURE__*/jsx(Fragment, {
-        children: /*#__PURE__*/jsx(UIChildren, {
-          "transient": true,
-          scope: row,
-          crud: row.crud,
-          children: props.children
-        })
-      });
-    };
-    return /*#__PURE__*/jsx(ScaleDecorator, {
-      children: /*#__PURE__*/jsx(TouchableOpacity, {
-        style: [styles$a.row, {
-          backgroundColor: isActive ? 'lightblue' : 'white'
-        }, _extends({}, css)],
-        delayLongPress: 100,
-        onLongPress: drag // Initiate drag on long press
-        ,
-        children: /*#__PURE__*/jsx(Child, {})
-      })
     });
   };
-  var OrderView = function OrderView(_ref2) {
-    var children = _ref2.children;
-    if (original.gesture !== false) {
-      return /*#__PURE__*/jsx(GestureHandlerRootView, {
-        style: _extends({
-          flex: 1,
-          width: '100%'
-        }, scope.getStyle('order', {
-          justifyContent: 'flex-start'
-        })),
-        children: children
-      });
+  // Cria/Reusa os PanResponders
+  items.forEach(function (it) {
+    if (!panRespondersRef.current[it.value]) {
+      panRespondersRef.current[it.value] = createPanResponder(it);
     }
-    return /*#__PURE__*/jsx(Fragment, {
-      children: children
-    });
-  };
-  var Header = function Header(_ref3) {
-    var pos = _ref3.pos;
-    var hPos = Utils.nvl(original.headerPos, 'outer');
-    if (hPos !== pos) return /*#__PURE__*/jsx(Fragment, {});
-    return /*#__PURE__*/jsx(UIHeader, {
-      scope: scope
+  });
+  var removeItem = function removeItem(id) {
+    if (draggingId === id) {
+      setDraggingId(null);
+      activeItem.current = null;
+      activeIndex.current = -1;
+    }
+    // CORREÇÃO: Delete a referência Animated.Value *e* a referência PanResponder
+    if (positions[id]) {
+      delete positions[id];
+    }
+    if (panRespondersRef.current[id]) {
+      delete panRespondersRef.current[id];
+    }
+    setItems(function (prev) {
+      var updated = prev.filter(function (it) {
+        return it.value !== id;
+      });
+      // Anima os itens restantes para seus novos índices
+      updated.forEach(function (it, idx) {
+        if (positions[it.value]) Animated.spring(positions[it.value], {
+          toValue: idx * ITEM_HEIGHT,
+          useNativeDriver: false
+        }).start();
+      });
+      return updated;
     });
   };
-  var OrderData = function OrderData() {
-    var _useState2 = useState(items),
-      data = _useState2[0],
-      setData = _useState2[1];
-    return /*#__PURE__*/jsx(DraggableFlatList, {
-      data: data,
-      ListHeaderComponent: /*#__PURE__*/jsx(Header, {
-        pos: "inner"
-      }),
-      ListFooterComponent: /*#__PURE__*/jsx(Fragment, {
-        children: scope.getPart('footer')
-      }),
-      renderItem: renderItem,
-      containerStyle: _extends({}, scope.getStyle('list')),
-      keyExtractor: function keyExtractor(item) {
-        var key = scope.getItemValue(item);
-        if (original != null && original.debug) {
-          console.log(key);
-        }
-        return key;
+  return /*#__PURE__*/jsxs(View, {
+    style: styles$a.container,
+    children: [/*#__PURE__*/jsx(Text, {
+      style: styles$a.title,
+      children: "Lista Drag\xE1vel (Esperando que a corre\xE7\xE3o final funcione \uD83D\uDE4F)"
+    }), /*#__PURE__*/jsx(View, {
+      style: {
+        height: items.length * ITEM_HEIGHT,
+        width: '100%'
       },
-      onDragEnd: function onDragEnd(_ref4) {
-        var data = _ref4.data;
-        setData(data);
-        scope.changeValue(data);
-      }
-    });
-  };
-  return /*#__PURE__*/jsxs(OrderView, {
-    children: [/*#__PURE__*/jsx(Header, {
-      pos: "outer"
-    }), /*#__PURE__*/jsx(OrderData, {})]
+      children: items.map(function (item) {
+        var _panRespondersRef$cur, _panRespondersRef$cur2;
+        var y = positions[item.value];
+        if (!y) return null;
+        var isDragging = draggingId === item.value;
+        return /*#__PURE__*/jsxs(Animated.View, _extends({}, (_panRespondersRef$cur = (_panRespondersRef$cur2 = panRespondersRef.current[item.value]) == null ? void 0 : _panRespondersRef$cur2.panHandlers) != null ? _panRespondersRef$cur : {}, {
+          style: [styles$a.item, {
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            height: ITEM_HEIGHT - 8,
+            transform: [{
+              translateY: y
+            }],
+            zIndex: isDragging ? 999 : 0,
+            elevation: isDragging ? 999 : 0
+          }],
+          children: [/*#__PURE__*/jsx(View, {
+            style: styles$a.handle,
+            children: /*#__PURE__*/jsx(Text, {
+              style: styles$a.handleText,
+              children: "\u2261"
+            })
+          }), /*#__PURE__*/jsx(Text, {
+            style: styles$a.itemText,
+            children: item.label
+          }), /*#__PURE__*/jsx(TouchableOpacity, {
+            onPress: function onPress() {
+              return removeItem(item.value);
+            },
+            style: styles$a.del,
+            children: /*#__PURE__*/jsx(Text, {
+              style: {
+                color: '#fff'
+              },
+              children: "X"
+            })
+          })]
+        }), item.value);
+      })
+    })]
   });
 }
 var styles$a = /*#__PURE__*/StyleSheet.create({
-  row: {
+  container: {
+    flex: 1,
+    paddingHorizontal: 20,
+    backgroundColor: '#f5f7fb'
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+    marginBottom: 12
+  },
+  item: {
+    backgroundColor: '#fff',
+    borderRadius: 10,
+    marginVertical: 4,
+    paddingHorizontal: 12,
+    alignItems: 'center',
     flexDirection: 'row',
-    gap: 10,
-    padding: 15,
-    borderBottomWidth: 1,
-    borderBottomColor: '#ccc'
+    elevation: 3,
+    shadowColor: '#000',
+    shadowOpacity: 0.05,
+    shadowRadius: 6
   },
-  text: {
-    fontSize: 18
+  handle: {
+    width: 40,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  handleText: {
+    fontSize: 22,
+    color: '#666'
+  },
+  itemText: {
+    fontSize: 16,
+    flex: 1
+  },
+  del: {
+    backgroundColor: '#e74c3c',
+    height: 34,
+    width: 34,
+    borderRadius: 6,
+    alignItems: 'center',
+    justifyContent: 'center'
   }
 });
 
+function UIOrder(props) {
+  return /*#__PURE__*/jsx(Fragment, {
+    children: /*#__PURE__*/jsx(UIDraggableList, _extends({}, props))
+  });
+}
+
 var CrudContext = /*#__PURE__*/createContext({});
 function UIElement(props) {
   var _original$list,