react-crud-mobile 1.3.557 → 1.3.560

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "react-crud-mobile",
-   "version": "1.3.557",
+   "version": "1.3.560",
    "license": "MIT",
    "description": "Uma biblioteca de componentes para React Native v1",
    "author": "juarez",

package/src/elements/core/UIButton.tsx

@@ -122,7 +122,7 @@ export default function UIButton(props: ChildType) {
          def = { ...def, borderRadius: 20 };
       }
 
-      let css = style('button', def);
+      let css = { ...def, ...style('button') };
 
       if (!css.width) {
          let h = css.height;

package/src/elements/core/UIModal.tsx

@@ -69,7 +69,7 @@ export default function UIModal(props: UIModalType) {
       );
    };
    return (
-      <Modal key={key} animationType="slide" transparent={true} visible={true} onRequestClose={onClose}>
+      <Modal key={key} animationType="slide" visible={true} onRequestClose={onClose}>
          <ModalInner />
       </Modal>
    );

package/src/elements/core/UIOrder.tsx

@@ -1,286 +1,250 @@
 import React, { useRef, useState, useEffect } from 'react';
 import { ChildType, OptionType, Utils } from 'react-crud-utils';
-import {
-  View,
-  Text,
-  StyleSheet,
-  Animated,
-  PanResponder,
-  TouchableOpacity,
-} from 'react-native';
+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 element = scope.original;
-  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 onChange = (updated: any[]) => {
-    const array: any[] = [];
-    const items = scope.getItems();
-
-    items.splice(0);
-
-    Utils.each(updated, o => {
-      const v = o.object;
-
-      array.push(v);
-      items.push(v);
-    });
-
-    scope.changeValue(array);
-  };
-
-  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);
-        onChange(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], {
+   const scope = props.scope;
+   const element = scope.original;
+   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();
+         }).start();
       });
+   }, [items]);
+
+   const onChange = (updated: any[]) => {
+      const array: any[] = [];
+      const items = scope.getItems();
+
+      items.splice(0);
 
-      onChange(updated);
-      return updated;
-    });
-  };
-
-  const Empty = () => {
-    if (Utils.isEmpty(items)) {
-      let empty = scope.part('empty', 'Sem registro');
-
-      if (empty !== false) return <>{empty}</>;
-    }
-
-    return <></>;
-  };
-
-  return (
-    <View style={styles.container}>
-      <Empty />
-      <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;
-          const itemStyle = scope.getStyle('row', { ...styles.item });
-
-          return (
-            <Animated.View
-              key={item.value}
-              {...(panRespondersRef.current[item.value]?.panHandlers ?? {})}
-              style={[
-                itemStyle,
-                {
-                  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>
-              {element.remove && (
-                <TouchableOpacity
-                  onPress={() => removeItem(item.value)}
-                  style={styles.del}
-                >
-                  <Text style={{ color: '#fff' }}>X</Text>
-                </TouchableOpacity>
-              )}
-            </Animated.View>
-          );
-        })}
+      Utils.each(updated, (o) => {
+         const v = o.object;
+
+         array.push(v);
+         items.push(v);
+      });
+
+      scope.changeValue(array);
+   };
+
+   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);
+            onChange(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();
+         });
+
+         onChange(updated);
+         return updated;
+      });
+   };
+
+   const Empty = () => {
+      if (Utils.isEmpty(items)) {
+         let empty = scope.part('empty', 'Sem registro');
+
+         if (empty !== false) return <>{empty}</>;
+      }
+
+      return <></>;
+   };
+
+   return (
+      <View style={styles.container}>
+         <Empty />
+         <View style={{ height: items.length * ITEM_HEIGHT, width: '100%', ...scope.getStyle('container') }}>
+            {items.map((item) => {
+               const y = positions[item.value];
+               if (!y) return null;
+
+               const isDragging = draggingId === item.value;
+               const itemStyle = scope.getStyle('row', { ...styles.item });
+
+               return (
+                  <Animated.View
+                     key={item.value}
+                     {...(panRespondersRef.current[item.value]?.panHandlers ?? {})}
+                     style={[
+                        itemStyle,
+                        {
+                           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>
+                     {element.remove && (
+                        <TouchableOpacity onPress={() => removeItem(item.value)} style={styles.del}>
+                           <Text style={{ color: '#fff' }}>X</Text>
+                        </TouchableOpacity>
+                     )}
+                  </Animated.View>
+               );
+            })}
+         </View>
       </View>
-    </View>
-  );
+   );
 }
 
 const styles = StyleSheet.create({
-  container: { flex: 1 },
-  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',
-  },
+   container: { flex: 1 },
+   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',
+   },
 });