added draggable for actions sorting

package-lock.json

@@ -14,12 +14,14 @@
         "@react-navigation/native": "^6.1.7",
         "@react-navigation/stack": "^6.3.17",
         "expo": "~48.0.18",
+        "expo-haptics": "~12.2.1",
         "expo-status-bar": "~1.4.4",
         "i18next": "^23.2.11",
         "i18next-browser-languagedetector": "^7.1.0",
         "react": "18.2.0",
         "react-i18next": "^13.0.2",
         "react-native": "0.71.8",
+        "react-native-draggable-flatlist": "^4.0.1",
         "react-native-gesture-handler": "~2.9.0",
         "react-native-pager-view": "6.1.2",
         "react-native-reanimated": "~2.14.4",
@@ -7165,6 +7167,14 @@
         "expo": "*"
       }
     },
+    "node_modules/expo-haptics": {
+      "version": "12.2.1",
+      "resolved": "https://registry.npmjs.org/expo-haptics/-/expo-haptics-12.2.1.tgz",
+      "integrity": "sha512-XRZtmIQi901Q4+/cZnVrULRFOqShsgCuSP0SCbVEhnq8sK0OA4jgun12O93Pu5aGvTyoqsAcIArE8tX+8AEqRA==",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-keep-awake": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-12.0.1.tgz",
@@ -11886,6 +11896,19 @@
         "nullthrows": "^1.1.1"
       }
     },
+    "node_modules/react-native-draggable-flatlist": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/react-native-draggable-flatlist/-/react-native-draggable-flatlist-4.0.1.tgz",
+      "integrity": "sha512-ZO1QUTNx64KZfXGXeXcBfql67l38X7kBcJ3rxUVZzPHt5r035GnGzIC0F8rqSXp6zgnwgUYMfB6zQc5PKmPL9Q==",
+      "dependencies": {
+        "@babel/preset-typescript": "^7.17.12"
+      },
+      "peerDependencies": {
+        "react-native": ">=0.64.0",
+        "react-native-gesture-handler": ">=2.0.0",
+        "react-native-reanimated": ">=2.8.0"
+      }
+    },
     "node_modules/react-native-gesture-handler": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.9.0.tgz",

package.json

@@ -21,6 +21,7 @@
     "react": "18.2.0",
     "react-i18next": "^13.0.2",
     "react-native": "0.71.8",
+    "react-native-draggable-flatlist": "^4.0.1",
     "react-native-gesture-handler": "~2.9.0",
     "react-native-pager-view": "6.1.2",
     "react-native-reanimated": "~2.14.4",
@@ -28,7 +29,8 @@
     "react-native-screens": "~3.20.0",
     "react-native-tab-view": "^3.5.2",
     "react-native-uuid": "^2.0.1",
-    "reanimated-color-picker": "^2.3.1"
+    "reanimated-color-picker": "^2.3.1",
+    "expo-haptics": "~12.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"

src/Screens/Device/scene.js

@@ -6,6 +6,7 @@ import {
   AppStyles,
   Constants,
   GetDevice,
+  VibrateShort,
 } from "../../utils";
 import { useCallback, useContext, useState } from "react";
 import MyDropdown from "../../Components/Dropdown";
@@ -17,6 +18,9 @@ import { useFocusEffect } from "@react-navigation/native";
 import { Divider } from "../../Components/Divider";
 import { MyColorSwatch } from "../../Components/ColorPicker";
 import { MyDotsModal } from "../../Components/Modal";
+import DraggableFlatList, {
+  ScaleDecorator,
+} from "react-native-draggable-flatlist";
 
 export default function SceneView({ navigation }) {
   const appContext = useContext(AppContext);
@@ -85,9 +89,24 @@ export default function SceneView({ navigation }) {
           iconName={"selection-search"}
         />
       ) : (
-        <FlatList
+        <DraggableFlatList
           scrollEnabled={false}
           data={deviceSceneActions}
+          simultaneousHandlers
+          onDragEnd={({ data }) =>
+            // TODO: api: save sorting new order
+            appContext.setDeviceSceneActions((arr) => {
+              let newArr = [...arr];
+
+              newArr = arr.filter(
+                (a) => a.sceneId !== deviceSceneActions[0].sceneId
+              );
+
+              data.forEach((item) => newArr.push(item));
+
+              return newArr;
+            })
+          }
           keyExtractor={(item) => item.actionId}
           ListEmptyComponent={
             <MyResult
@@ -115,15 +134,19 @@ export default function SceneView({ navigation }) {
               iconName="plus-circle-outline"
             />
           }
-          renderItem={({ item }) => {
+          renderItem={({ item, drag }) => {
             return (
-              <ActionListItem
-                navigation={navigation}
-                device={device}
-                item={item}
-              />
+              <ScaleDecorator>
+                <ActionListItem
+                  drag={drag}
+                  navigation={navigation}
+                  device={device}
+                  item={item}
+                />
+              </ScaleDecorator>
             );
           }}
+          onRelease={VibrateShort}
         />
       )}
 
@@ -181,7 +204,7 @@ export default function SceneView({ navigation }) {
   );
 }
 
-function ActionListItem({ navigation, device, item }) {
+function ActionListItem({ drag, navigation, device, item }) {
   const appContext = useContext(AppContext);
 
   const ListItemTitle = () => {
@@ -314,7 +337,15 @@ function ActionListItem({ navigation, device, item }) {
             </View>
           </View>
 
-          <MyIcon name="menu" size={20} />
+          <TouchableOpacity
+            onLongPress={() => {
+              drag();
+              VibrateShort();
+            }}
+            style={{ padding: 4 }}
+          >
+            <MyIcon name="menu" size={20} />
+          </TouchableOpacity>
         </View>
 
         <Divider />

src/utils.js

@@ -9,6 +9,7 @@ import {
   View,
 } from "react-native";
 import uuid from "react-native-uuid";
+import * as Haptics from "expo-haptics";
 
 export const Constants = {
   defaultLanguage: "de",
@@ -561,7 +562,8 @@ export function IsPlatformIos() {
 }
 
 export function VibrateShort() {
-  Vibration.vibrate(50);
+  //Vibration.vibrate(50);
+  Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
 }
 
 export function ModalContainer({ children, withoutPadding }) {