diff --git a/package-lock.json b/package-lock.json index b47f28d..44fa3b5 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 4cc4f63..d985b47 100644 --- a/package.json +++ b/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" diff --git a/src/Screens/Device/scene.js b/src/Screens/Device/scene.js index 70f8d52..4a69657 100644 --- a/src/Screens/Device/scene.js +++ b/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"} /> ) : ( - + // 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={ } - renderItem={({ item }) => { + renderItem={({ item, drag }) => { return ( - + + + ); }} + 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 }) { - + { + drag(); + VibrateShort(); + }} + style={{ padding: 4 }} + > + + diff --git a/src/utils.js b/src/utils.js index 040705f..9942af3 100644 --- a/src/utils.js +++ b/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 }) {