react-crud-mobile 1.3.51 → 1.3.53

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.51",
+  "version": "1.3.53",
   "license": "MIT",
   "description": "Uma biblioteca de componentes para React Native",
   "main": "dist/index.js",
@@ -45,9 +45,10 @@
     "@react-native-vector-icons/ionicons": "^7.4.0",
     "@react-native-vector-icons/material-icons": "^0.0.1",
     "react": "19.0.0",
-    "react-crud-utils": "^0.1.367",
+    "react-crud-utils": "^0.1.368",
     "react-dom": "19.0.0",
     "react-native": "0.79.2",
+    "react-native-draggable-flatlist": "^4.0.3",
     "react-native-gesture-handler": "~2.24.0",
     "react-native-reanimated": "~3.17.4",
     "react-native-safe-area-context": "5.4.0",

package/src/elements/UI.tsx

@@ -18,6 +18,7 @@ import UIInclude from './core/UIInclude';
 import SafeView from './core/SafeView';
 
 const UI = {
+  Order: (props: ListType) => <UIElement {...props} type="order" />,
   List: (props: ListType) => <UIElement {...props} type="list" />,
   Row: (props: UserType) => <UIElement {...props} type="row" />,
   Value: (props: UserType) => <UIElement {...props} type="value" />,

package/src/elements/UIElement.tsx

@@ -45,6 +45,7 @@ import UIModal from './core/UIModal';
 import { Ionicons } from '@expo/vector-icons';
 import UIView from './core/UIView';
 import Toast from 'react-native-toast-message';
+import UIOrder from './core/UIOrder';
 
 const CrudContext = createContext<any>({});
 
@@ -508,6 +509,11 @@ export default function UIElement(props: ElementType) {
         {scope.isType('list', 'repeat') && (
           <UIList {...props} scope={scope} crud={crud} />
         )}
+
+        {scope.isType('order') && (
+          <UIOrder {...props} scope={scope} crud={crud} />
+        )}
+
         {scope.isType('dialog') && (
           <UIModal {...props} scope={scope} crud={crud} />
         )}

package/src/elements/core/UIOrder.tsx

@@ -0,0 +1,169 @@
+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 } from '@expo/vector-icons';
+import DraggableFlatList from 'react-native-draggable-flatlist';
+
+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 add = ComponentUtils.getDefine(props, 'add');
+  const hideAddWhenEmpty = original.hideAddWhenEmpty;
+
+  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 LocalData = () => {
+    let [index, setIndex] = useState(scope.updateIndex);
+
+    scope.update = () => {
+      scope.updateIndex = ++index;
+
+      setIndex(index);
+    };
+
+    let keyData = scope.key('data');
+
+    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);
+              }
+            }
+          });
+
+          return filters;
+        }
+      }
+      return list;
+    });
+
+    const isShowAdd = () => {
+      if (!Utils.isEmpty(items)) {
+        return true;
+      }
+      return hideAddWhenEmpty !== true;
+    };
+
+    let Empty = () => {
+      if (!Utils.isEmpty(items)) {
+        return <></>;
+      }
+
+      let empty = scope.attr('empty', 'Sem registro');
+
+      if (!empty) {
+        return <></>;
+      }
+
+      if (typeof empty === 'string') {
+        return (
+          <Text
+            style={scope.getStyle('empty', {
+              flex: 1,
+              fontWeight: 500,
+              fontSize: 20,
+              padding: 10,
+              textAlign: 'center',
+              justifyContent: 'center',
+              alignItems: 'center',
+            })}
+          >
+            {empty}
+          </Text>
+        );
+      }
+
+      return <>{empty}</>;
+    };
+
+    const renderItem = ({ item, drag, isActive }) => {
+      return (
+        <TouchableOpacity
+          style={[
+            styles.row,
+            { backgroundColor: isActive ? 'lightblue' : 'white' },
+          ]}
+          onLongPress={drag} // Initiate drag on long press
+        >
+          <Text style={styles.text}>{scope.getItemLabel(item)}</Text>
+        </TouchableOpacity>
+      );
+    };
+
+    return (
+      <View key={keyData} style={getContainerStyle()}>
+        <Empty />
+        <DraggableFlatList
+          data={items}
+          renderItem={renderItem}
+          keyExtractor={item => scope.getItemValue(item)}
+          onDragEnd={({ data }) => {
+            scope.changeValue(data);
+          }}
+        />
+        {isShowAdd() && <>{add}</>}
+      </View>
+    );
+  };
+
+  return (
+    <>
+      {original.search !== false && (
+        <UI.Text
+          placeholder="Pesquisar..."
+          field="query"
+          crud={crud}
+          style={{ marginBottom: 10 }}
+          change={{
+            action: () => {
+              scope.search();
+            },
+          }}
+          icon={<Ionicons name="search" size={20} color="#888" />}
+        />
+      )}
+      <LocalData />
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    padding: 20,
+    borderBottomWidth: 1,
+    borderBottomColor: '#ccc',
+  },
+  text: {
+    fontSize: 18,
+  },
+});