react-crud-mobile 1.3.369 → 1.3.373

package/src/elements/core/UIOrder.tsx

@@ -1,194 +1,255 @@
-import React, { useState } from 'react';
-import { ChildType, ComponentUtils, ScopeUtils, Utils } from 'react-crud-utils';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import UI from '../UI';
-import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
-import DraggableFlatList, {
-  ScaleDecorator,
-} from 'react-native-draggable-flatlist';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import UIHeader from './UIHeader';
-import UIChildren from '../UIChildren';
+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 crud = scope.crud;
-  const original = scope.original;
-  const cols = Utils.nvl(scope.getPart('cols', undefined, 1));
-
-  const getStyle = (key: string, extra?: any) => {
-    return scope.getStyle(key, { ...extra, ...styles[key] });
-  };
-
-  const getContainerStyle = (extra?: any) => {
-    let row = getStyle('container', {});
-
-    if (cols > 1) {
-      row = { ...row, flexDirection: 'row', flexWrap: 'wrap' };
-    }
-
-    return row;
-  };
-
-  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];
+  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)
+          )
+        );
 
-          if (label) {
-            if (label.includes(query)) {
-              filters.push(o);
-            }
-          }
+        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)
+          )
+        );
 
-        return filters;
-      }
+        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);
     }
-    return list;
   });
 
-  //v2
-
-  const renderItem = ({ item, drag, isActive, getIndex }) => {
-    const index = getIndex();
-    const name = `${scope.key('row', index, '')}`;
-    const [row] = useState(
-      ScopeUtils.create({
-        ...original,
-        parent: scope,
-        name,
-        crud: scope.crud,
-        index,
-        type: 'row',
-        data: item,
-      })
-    );
-
-    let css = { ...scope.getStyle('row') };
-
-    if (isActive) {
-      css = { ...css, ...scope.getStyle('active') };
+  const removeItem = (id: string) => {
+    if (draggingId === id) {
+      setDraggingId(null);
+      activeItem.current = null;
+      activeIndex.current = -1;
     }
 
-    if (isActive) {
-      css = { ...css, ...row.getStyle('rowSelected', {}) };
-    } else {
-      css = { ...css, ...row.getStyle('rowUnSelected', {}) };
+    // CORREÇÃO: Delete a referência Animated.Value *e* a referência PanResponder
+    if (positions[id]) {
+      delete positions[id];
     }
-    const Child = () => {
-      if (Utils.isEmpty(props.children)) {
-        return (
-          <>
-            <MaterialCommunityIcons name="drag" size={24} color="black" />
-            <Text style={styles.text}>{scope.getItemLabel(item)}</Text>
-          </>
-        );
-      }
-
-      return (
-        <>
-          <UIChildren transient scope={row} crud={row.crud}>
-            {props.children}
-          </UIChildren>
-        </>
-      );
-    };
-    return (
-      <ScaleDecorator>
-        <TouchableOpacity
-          style={[
-            styles.row,
-            { backgroundColor: isActive ? 'lightblue' : 'white' },
-            { ...css },
-          ]}
-          delayLongPress={100}
-          onLongPress={drag} // Initiate drag on long press
-        >
-          <Child />
-        </TouchableOpacity>
-      </ScaleDecorator>
-    );
-  };
-
-  const OrderView = ({ children }) => {
-    if (original.gesture !== false) {
-      return (
-        <GestureHandlerRootView
-          style={{
-            flex: 1,
-            width: '100%',
-            ...scope.getStyle('order', { justifyContent: 'flex-start' }),
-          }}
-        >
-          {children}
-        </GestureHandlerRootView>
-      );
+    if (panRespondersRef.current[id]) {
+      delete panRespondersRef.current[id];
     }
-    return <>{children}</>;
-  };
 
-  const Header = ({ pos }) => {
-    const hPos = Utils.nvl(original.headerPos, 'outer');
+    setItems(prev => {
+      const updated = prev.filter(it => it.value !== id);
 
-    if (hPos !== pos) return <></>;
+      // 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 <UIHeader scope={scope} />;
+      return updated;
+    });
   };
 
-  let OrderData = () => {
-    const [data, setData] = useState(items);
-
-    return (
-      <DraggableFlatList
-        data={data}
-        ListHeaderComponent={<Header pos="inner" />}
-        ListFooterComponent={<>{scope.getPart('footer')}</>}
-        renderItem={renderItem}
-        containerStyle={{ ...scope.getStyle('list') }}
-        keyExtractor={item => {
-          let key = scope.getItemValue(item);
-
-          if (original?.debug) {
-            console.log(key);
-          }
-          return key;
-        }}
-        onDragEnd={({ data }) => {
-          setData(data);
-          scope.changeValue(data);
-        }}
-      />
-    );
-  };
   return (
-    <OrderView>
-      <Header pos="outer" />
-      <OrderData />
-    </OrderView>
+    <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({
-  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',
   },
 });