react-crud-mobile 1.3.372 → 1.3.373

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-crud-mobile",
-  "version": "1.3.372",
+  "version": "1.3.373",
   "license": "MIT",
   "description": "Uma biblioteca de componentes para React Native v1",
   "main": "dist/index.js",

package/src/elements/core/UIOrder.tsx

@@ -1,11 +1,255 @@
-import React from 'react';
-import { ChildType } from 'react-crud-utils';
-import UIDraggableList from './UIDraggableList';
+import React, { useRef, useState, useEffect } from 'react';
+import { ChildType, OptionType } from 'react-crud-utils';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Animated,
+  PanResponder,
+  TouchableOpacity,
+} from 'react-native';
+
+const ITEM_HEIGHT = 70;
 
 export default function UIOrder(props: ChildType) {
+  const scope = props.scope;
+  const initial: OptionType[] = scope.getOptions();
+
+  const [items, setItems] = useState<OptionType[]>(initial);
+  const [draggingId, setDraggingId] = useState<string | null>(null);
+
+  // 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.
+  const positions = useRef<Record<string, Animated.Value>>(
+    Object.fromEntries(
+      initial.map((it, i) => [it.value, new Animated.Value(i * ITEM_HEIGHT)])
+    )
+  ).current;
+
+  const panRespondersRef = useRef<Record<string, any>>({});
+
+  const activeItem = useRef<OptionType | null>(null);
+  const activeIndex = useRef<number>(-1);
+  const offsetY = useRef(0);
+
+  // Armazena a lista mais recente em uma ref para uso em funções de PanResponder
+  const itemsRef = useRef(items);
+  useEffect(() => {
+    itemsRef.current = items;
+  }, [items]);
+
+  // 1. Atualiza posições apenas para itens existentes
+  useEffect(() => {
+    items.forEach((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]);
+
+  const createPanResponder = (item: OptionType) =>
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onPanResponderGrant: () => {
+        // Use itemsRef.current para obter a lista mais recente no momento do arrasto.
+        const currentItems = itemsRef.current;
+        if (
+          !positions[item.value] ||
+          !currentItems.find(it => it.value === item.value)
+        )
+          return;
+
+        activeItem.current = item;
+        activeIndex.current = currentItems.findIndex(
+          it => it.value === item.value
+        );
+        // CORREÇÃO: Usa a propriedade interna _value para acessar o valor atual
+        offsetY.current = (positions[item.value] as any)._value; // 👈 CORREÇÃO APLICADA
+        setDraggingId(item.value);
+      },
+      onPanResponderMove: (_, gesture) => {
+        const currentItems = itemsRef.current;
+        if (
+          !positions[item.value] ||
+          !currentItems.find(it => it.value === item.value)
+        )
+          return;
+
+        const y = offsetY.current + gesture.dy;
+        positions[item.value].setValue(y);
+
+        const targetIndex = Math.max(
+          0,
+          Math.min(
+            currentItems.length - 1,
+            Math.floor((y + ITEM_HEIGHT / 2) / ITEM_HEIGHT)
+          )
+        );
+
+        currentItems.forEach((other, idx) => {
+          if (other.value === item.value || !positions[other.value]) return;
+          let 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: () => {
+        const moved = activeItem.current;
+        const currentItems = itemsRef.current;
+
+        if (
+          !moved ||
+          !positions[moved.value] ||
+          !currentItems.find(it => it.value === moved.value)
+        )
+          return;
+
+        // CORREÇÃO: Usa a propriedade interna _value para obter a posição final
+        const finalY = (positions[moved.value] as any)._value; // 👈 CORREÇÃO APLICADA
+        const newIndex = Math.max(
+          0,
+          Math.min(
+            currentItems.length - 1,
+            Math.floor((finalY + ITEM_HEIGHT / 2) / ITEM_HEIGHT)
+          )
+        );
+
+        const oldIndex = activeIndex.current;
+        const updated = [...currentItems];
+        const [removed] = updated.splice(oldIndex, 1);
+        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;
+      },
+    });
+
+  // Cria/Reusa os PanResponders
+  items.forEach(it => {
+    if (!panRespondersRef.current[it.value]) {
+      panRespondersRef.current[it.value] = createPanResponder(it);
+    }
+  });
+
+  const removeItem = (id: string) => {
+    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(prev => {
+      const updated = prev.filter(it => it.value !== id);
+
+      // Anima os itens restantes para seus novos índices
+      updated.forEach((it, idx) => {
+        if (positions[it.value])
+          Animated.spring(positions[it.value], {
+            toValue: idx * ITEM_HEIGHT,
+            useNativeDriver: false,
+          }).start();
+      });
+
+      return updated;
+    });
+  };
+
   return (
-    <>
-      <UIDraggableList {...props} />
-    </>
+    <View style={styles.container}>
+      <Text style={styles.title}>
+        Lista Dragável (Esperando que a correção final funcione 🙏)
+      </Text>
+      <View style={{ height: items.length * ITEM_HEIGHT, width: '100%' }}>
+        {items.map(item => {
+          const y = positions[item.value];
+          if (!y) return null;
+
+          const isDragging = draggingId === item.value;
+          return (
+            <Animated.View
+              key={item.value}
+              {...(panRespondersRef.current[item.value]?.panHandlers ?? {})}
+              style={[
+                styles.item,
+                {
+                  position: 'absolute',
+                  left: 0,
+                  right: 0,
+                  height: ITEM_HEIGHT - 8,
+                  transform: [{ translateY: y }],
+                  zIndex: isDragging ? 999 : 0,
+                  elevation: isDragging ? 999 : 0,
+                },
+              ]}
+            >
+              <View style={styles.handle}>
+                <Text style={styles.handleText}>≡</Text>
+              </View>
+              <Text style={styles.itemText}>{item.label}</Text>
+              <TouchableOpacity
+                onPress={() => removeItem(item.value)}
+                style={styles.del}
+              >
+                <Text style={{ color: '#fff' }}>X</Text>
+              </TouchableOpacity>
+            </Animated.View>
+          );
+        })}
+      </View>
+    </View>
   );
 }
+
+const styles = StyleSheet.create({
+  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',
+    elevation: 3,
+    shadowColor: '#000',
+    shadowOpacity: 0.05,
+    shadowRadius: 6,
+  },
+  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',
+  },
+});