Jannex
/
expo-app
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

delete action

main
alex 2023-08-06 17:34:53 +00:00
parent d8b3f14658
commit 7ffb26c9a5
6 changed files with 127 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
locales/de.json
View File

@ -86,6 +86,10 @@
},
"modeSpecificColors": "Modus spezifische Farben"
},
"modalDotsEditAction": {
"duplicateAction": "Aktion duplizieren",
"deleteAction": "Aktion löschen"
},
"editActionAnimationsCardContent": {
"animationsIn": "Animations in",
"animationsOut": "Animations out",

4
locales/en.json
View File

@ -86,6 +86,10 @@
},
"modeSpecificColors": "Mode specific colors"
},
"modalDotsEditAction": {
"duplicateAction": "Duplicate action",
"deleteAction": "Delete action"
},
"editActionAnimationsCardContent": {
"animationsIn": "Animations in",
"animationsOut": "Animations out",

23
src/Components/Modal/index.js
View File

@ -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 (
<>
<MyIconButton
iconName="dots-vertical"
iconSize={24}
style={AppStyles.headerNavigationIcons}
onPress={() => setIsDotsModalOpen(true)}
/>
<DotsModal
isOpen={isDotsModalOpen}
closeModal={() => setIsDotsModalOpen(false)}
data={modalData}
/>
</>
);
}
function DotsModal({ isOpen, closeModal, data }) {
const appContext = useContext(AppContext);
const listItemStyle = (isFirst, isLast) => {

48
src/Screens/Device/modals/EditActions/Lights/index.js
View File

@ -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: () => (
<MyDotsModal
modalData={[
{
icon: "content-duplicate",
label: t(
"screens.device.scenes.modalDotsEditAction.duplicateAction"
),
onPress: () => {},
},
{
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 (
<View
style={{

1
src/Screens/Device/modals/EditActions/index.js
View File

@ -3,7 +3,6 @@ import Card from "../../../../Components/Card";
import {
AppContext,
AppStyles,
Constants,
IsPlatformIos,
ModalContainer,
} from "../../../../utils";

115
src/Screens/Device/scene.js
View File

@ -1,9 +1,8 @@
import { FlatList, Text, TouchableOpacity, View } from "react-native";
import { Text, TouchableOpacity, View } from "react-native";
import Card from "../../Components/Card";
import {
AppContext,
AppSelectedUserDevice,
AppStyles,
Constants,
GetDevice,
VibrateShort,
@ -13,14 +12,12 @@ import MyDropdown from "../../Components/Dropdown";
import MyIcon from "../../Components/Icon";
import { useTranslation } from "react-i18next";
import MyResult from "../../Components/Result";
import { MyIconButton, MyTextButton } from "../../Components/Button";
import { MyTextButton } from "../../Components/Button";
import { useFocusEffect } from "@react-navigation/native";
import { Divider } from "../../Components/Divider";
import { MyColorSwatch } from "../../Components/ColorPicker";
import { MyDotsModal } from "../../Components/Modal";
import DraggableFlatList, {
NestableDraggableFlatList,
NestableScrollContainer,
ScaleDecorator,
} from "react-native-draggable-flatlist";
@ -29,7 +26,6 @@ export default function SceneView({ navigation }) {
const { t } = useTranslation();
const [device, setDevice] = useState();
const [isDotsModalOpen, setIsDotsModalOpen] = useState(false);
const getSelectedDeviceSceneName = () => {
let scene;
@ -53,11 +49,57 @@ export default function SceneView({ navigation }) {
navigation.setOptions({
headerRight: () =>
device.selectedScene !== "" ? (
<MyIconButton
iconName="dots-vertical"
iconSize={24}
style={AppStyles.headerNavigationIcons}
onPress={() => setIsDotsModalOpen(true)}
<MyDotsModal
modalData={[
{
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;
});
},
},
]}
/>
) : null,
});
@ -158,57 +200,6 @@ export default function SceneView({ navigation }) {
onRelease={VibrateShort}
/>
)}
<MyDotsModal
isOpen={isDotsModalOpen}
closeModal={() => 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;
});
},
},
]}
/>
</>
);
}