diff --git a/locales/de.json b/locales/de.json index cb223e2..0c13913 100644 --- a/locales/de.json +++ b/locales/de.json @@ -86,6 +86,10 @@ }, "modeSpecificColors": "Modus spezifische Farben" }, + "modalDotsEditAction": { + "duplicateAction": "Aktion duplizieren", + "deleteAction": "Aktion löschen" + }, "editActionAnimationsCardContent": { "animationsIn": "Animations in", "animationsOut": "Animations out", diff --git a/locales/en.json b/locales/en.json index 1dcaa86..8666f5a 100644 --- a/locales/en.json +++ b/locales/en.json @@ -86,6 +86,10 @@ }, "modeSpecificColors": "Mode specific colors" }, + "modalDotsEditAction": { + "duplicateAction": "Duplicate action", + "deleteAction": "Delete action" + }, "editActionAnimationsCardContent": { "animationsIn": "Animations in", "animationsOut": "Animations out", diff --git a/src/Components/Modal/index.js b/src/Components/Modal/index.js index 93a49b7..706f848 100644 --- a/src/Components/Modal/index.js +++ b/src/Components/Modal/index.js @@ -112,7 +112,28 @@ export function MyDefaultModalHeader({ title, closeModal }) { ); } */ -export function MyDotsModal({ isOpen, closeModal, data }) { +export function MyDotsModal({ modalData }) { + const [isDotsModalOpen, setIsDotsModalOpen] = useState(false); + + return ( + <> + setIsDotsModalOpen(true)} + /> + + setIsDotsModalOpen(false)} + data={modalData} + /> + + ); +} + +function DotsModal({ isOpen, closeModal, data }) { const appContext = useContext(AppContext); const listItemStyle = (isFirst, isLast) => { diff --git a/src/Screens/Device/modals/EditActions/Lights/index.js b/src/Screens/Device/modals/EditActions/Lights/index.js index 6f74711..2b125c7 100644 --- a/src/Screens/Device/modals/EditActions/Lights/index.js +++ b/src/Screens/Device/modals/EditActions/Lights/index.js @@ -13,9 +13,12 @@ import { } from "../../../deviceTabButton"; import Card from "../../../../../Components/Card"; import MyDropdown from "../../../../../Components/Dropdown"; -import { useContext, useEffect, useRef, useState } from "react"; +import { useCallback, useContext, useEffect, useRef, useState } from "react"; import { AppContext, AppStyles, ModalContainer } from "../../../../../utils"; -import { MyPickerModalListItem } from "../../../../../Components/Modal"; +import { + MyDotsModal, + MyPickerModalListItem, +} from "../../../../../Components/Modal"; import { MyColorPickerV2 } from "../../../../../Components/ColorPicker"; import Animated, { useAnimatedStyle, @@ -27,6 +30,7 @@ import EditActionAnimationsCardContent, { EditActionAdjustmentsContent, } from ".."; import { useTranslation } from "react-i18next"; +import { useFocusEffect } from "@react-navigation/native"; function LightModeDefaultColor({ sharedColor, @@ -79,6 +83,39 @@ export function LightsEditActionModalContent({ navigation, route }) { const { actionId, deviceFirmwareVersion } = route.params; + useFocusEffect( + useCallback(() => { + navigation.setOptions({ + headerRight: () => ( + {}, + }, + { + icon: "trash-can", + label: t( + "screens.device.scenes.modalDotsEditAction.deleteAction" + ), + onPress: () => { + appContext.setDeviceSceneActions((actions) => + actions.filter((a) => a.actionId !== actionId) + ); + + navigation.goBack(); + }, + }, + ]} + /> + ), + }); + }, []) + ); + const supportedDeviceLightModes = appContext.deviceFirmwareModes.lightModes.filter((lightMode) => lightMode.supportedFirmwareVersions.includes(deviceFirmwareVersion) @@ -90,8 +127,9 @@ export function LightsEditActionModalContent({ navigation, route }) { const [lightModeDefaultColors, setLightModeDefaultColors] = useState([]); + // check if selectedSceneAction exists before accessing modeId as the action could be deleted by the user const selectedLightMode = supportedDeviceLightModes.find( - (s) => s.id === selectedSceneAction.modeId + (s) => s.id === (selectedSceneAction && selectedSceneAction.modeId) ); useEffect(() => { @@ -109,7 +147,7 @@ export function LightsEditActionModalContent({ navigation, route }) { setLightModeDefaultColors(selectedSceneAction.modeAdjustments.colors); setSelectedDefaultLightModeColor(0); } - }, [selectedSceneAction.modeId]); + }, [selectedSceneAction?.modeId]); const saveColorsToModeAdjustments = () => { appContext.setDeviceSceneActions((arr) => { @@ -128,6 +166,8 @@ export function LightsEditActionModalContent({ navigation, route }) { }); }; + if (!selectedSceneAction) return null; + return ( { let scene; @@ -53,11 +49,57 @@ export default function SceneView({ navigation }) { navigation.setOptions({ headerRight: () => device.selectedScene !== "" ? ( - setIsDotsModalOpen(true)} + + navigation.navigate("modalUpdateSceneName", { + deviceSelectedScene: device.selectedScene, + sceneName: getSelectedDeviceSceneName(), + }), + }, + { + icon: "trash-can", + label: t( + "screens.device.scenes.modalDotsScene.deleteScene" + ), + onPress: () => { + appContext.setDeviceScenes((scenes) => + scenes.filter( + (scene) => + scene.sceneId !== + GetDevice(appContext.devices).selectedScene + ) + ); + + appContext.setDevices((arr) => { + const newArr = [...arr]; + + const foundDeviceIndex = arr.findIndex( + (d) => d.id === AppSelectedUserDevice.current.id + ); + + if (foundDeviceIndex !== -1) { + newArr[foundDeviceIndex].selectedScene = ""; + + appContext.setDeviceSceneActions((actions) => + actions.filter( + (action) => + action.sceneId !== + newArr[foundDeviceIndex].selectedScene + ) + ); + } + + return newArr; + }); + }, + }, + ]} /> ) : null, }); @@ -158,57 +200,6 @@ export default function SceneView({ navigation }) { onRelease={VibrateShort} /> )} - - setIsDotsModalOpen(false)} - data={[ - { - icon: "pencil", - label: t("screens.device.scenes.modalDotsScene.changeSceneName"), - onPress: () => - navigation.navigate("modalUpdateSceneName", { - deviceSelectedScene: device.selectedScene, - sceneName: getSelectedDeviceSceneName(), - }), - }, - { - icon: "trash-can", - label: t("screens.device.scenes.modalDotsScene.deleteScene"), - onPress: () => { - appContext.setDeviceScenes((scenes) => - scenes.filter( - (scene) => - scene.sceneId !== - GetDevice(appContext.devices).selectedScene - ) - ); - - appContext.setDevices((arr) => { - const newArr = [...arr]; - - const foundDeviceIndex = arr.findIndex( - (d) => d.id === AppSelectedUserDevice.current.id - ); - - if (foundDeviceIndex !== -1) { - newArr[foundDeviceIndex].selectedScene = ""; - - appContext.setDeviceSceneActions((actions) => - actions.filter( - (action) => - action.sceneId !== - newArr[foundDeviceIndex].selectedScene - ) - ); - } - - return newArr; - }); - }, - }, - ]} - /> ); }