From 8edf96043afe8bbc8ad55866d01fd3099dece966 Mon Sep 17 00:00:00 2001 From: alex Date: Fri, 4 Aug 2023 00:32:38 +0000 Subject: [PATCH] added dots modal --- locales/en.json | 2 +- src/Components/Button/index.js | 57 +++--- src/Components/ColorPicker/index.js | 63 +++--- src/Components/Modal/index.js | 174 ++++++++++++---- src/Components/Pressable/index.js | 32 +++ .../Device/modals/AddSceneAction/index.js | 17 +- .../Device/modals/ChooseScene/index.js | 79 +++---- src/Screens/Device/scene.js | 193 ++++++++++++++---- src/utils.js | 4 +- 9 files changed, 416 insertions(+), 205 deletions(-) create mode 100644 src/Components/Pressable/index.js diff --git a/locales/en.json b/locales/en.json index 9552670..01224b2 100644 --- a/locales/en.json +++ b/locales/en.json @@ -96,7 +96,7 @@ "modalUpdateSceneName": { "pageTitle": "Change scene name", "textTitle": "Scene name", - "textDescription": "Give the scene a name to easily find it later" + "textDescription": "Give the scene a name to easily find it later." } } }, diff --git a/src/Components/Button/index.js b/src/Components/Button/index.js index ae59e8c..e024092 100644 --- a/src/Components/Button/index.js +++ b/src/Components/Button/index.js @@ -31,7 +31,14 @@ export default function MyButton({ title, style, disabled, onPress }) { ); } -export function MyTextButton({ title, style, onPress, actionColor }) { +export function MyTextButton({ + title, + styleContainer, + style, + onPress, + actionColor, + iconName, +}) { const appContext = useContext(AppContext); const color = actionColor @@ -39,28 +46,32 @@ export function MyTextButton({ title, style, onPress, actionColor }) { : appContext.appTheme.textSecondary; return ( - - - - {title} - - + + + + + + {title} + + + + ); } diff --git a/src/Components/ColorPicker/index.js b/src/Components/ColorPicker/index.js index 8adcf81..23d1a2c 100644 --- a/src/Components/ColorPicker/index.js +++ b/src/Components/ColorPicker/index.js @@ -20,7 +20,7 @@ import ColorPicker, { } from "reanimated-color-picker"; import MyIcon from "../Icon"; import { AppContext, AppStyles, VibrateShort } from "../../utils"; - +/* function ColorLayer({ layerNumber, sharedColor, selected, onPress }) { const backgroundColorStyle = useAnimatedStyle(() => { return { @@ -112,7 +112,7 @@ function ColorLayer({ layerNumber, sharedColor, selected, onPress }) { ); } - +/* export default function MyColorPicker({ colorLayer }) { const appContext = useContext(AppContext); const [selectedGlasLayer, setSelectedGlasLayer] = useState(1); @@ -247,7 +247,7 @@ export default function MyColorPicker({ colorLayer }) { ); -} +} */ export function MyColorPickerV2({ pickerRef, @@ -342,43 +342,9 @@ export function MyColorPickerV2({ VibrateShort(); }} > - {disabled ? ( - <> - - - - ) : ( - - )} + + + ))} @@ -436,6 +402,23 @@ export function MyColorPickerV2({ ); } +export function MyColorSwatch({ size, backgroundColor, style }) { + return ( + + ); +} + const styles = StyleSheet.create({ previewTxtContainer: { paddingTop: 20, diff --git a/src/Components/Modal/index.js b/src/Components/Modal/index.js index dea2c7b..c44ffac 100644 --- a/src/Components/Modal/index.js +++ b/src/Components/Modal/index.js @@ -1,10 +1,19 @@ import { useContext, useEffect, useState } from "react"; import { AppContext, AppStyles, ModalContainer } from "../../utils"; -import { Pressable, Text, View } from "react-native"; +import { + Modal, + Pressable, + SafeAreaView, + Text, + TouchableWithoutFeedback, + View, +} from "react-native"; import MyIcon from "../Icon"; import MyTextInput from "../TextInput"; import { MyIconButton } from "../Button"; import { Divider } from "../Divider"; +import MyPressable from "../Pressable"; +import { FlatList } from "react-native-gesture-handler"; //const modalContentStyle = { margin: 10, paddingTop: 10 }; @@ -103,6 +112,93 @@ export function MyDefaultModalHeader({ title, closeModal }) { ); } */ +export function MyDotsModal({ isOpen, closeModal, data }) { + const appContext = useContext(AppContext); + + const listItemStyle = (isFirst, isLast) => { + return { + borderTopLeftRadius: isFirst ? 10 : 0, + borderTopRightRadius: isFirst ? 10 : 0, + borderBottomLeftRadius: isLast ? 10 : 0, + borderBottomRightRadius: isLast ? 10 : 0, + }; + }; + + const handleBackdropPress = (e) => { + const x = e.nativeEvent.locationX; + const y = e.nativeEvent.locationY; + + const topLeftX = 0; + const topLeftY = 0; + const bottomRightX = 200; // width + const bottomRightY = 52; // height of item + + if (x < topLeftX || x > bottomRightX || y < topLeftY || y > bottomRightY) { + closeModal(); + } + }; + + return ( + closeModal()} + > + + + + ( + { + closeModal(); + item.onPress(); + }} + disabled={item.disabled} + > + {console.log("dis", item.disabled)} + + + + {item.label} + + + + )} + /> + + + + + ); +} + export function MyPickerModalListItem({ onPress, itemName, @@ -112,53 +208,41 @@ export function MyPickerModalListItem({ const appContext = useContext(AppContext); return ( - <> - [ - { - backgroundColor: pressed - ? appContext.appTheme.modal.pressedPickerItemColor - : appContext.appTheme.backgroundColor, - }, - ]} + + - - - {itemName} - + {itemName} + - {itemSelected ? ( - - ) : ( - - )} - - - - + {itemSelected ? ( + + ) : ( + + )} + + + ); } diff --git a/src/Components/Pressable/index.js b/src/Components/Pressable/index.js new file mode 100644 index 0000000..78231cd --- /dev/null +++ b/src/Components/Pressable/index.js @@ -0,0 +1,32 @@ +import { useContext } from "react"; +import { Pressable } from "react-native"; +import { AppContext } from "../../utils"; + +export default function MyPressable({ + children, + onPress, + disabled, + style, + backgroundColor, +}) { + const appContext = useContext(AppContext); + + return ( + [ + { + backgroundColor: pressed + ? appContext.appTheme.modal.pressedPickerItemColor + : backgroundColor === undefined + ? appContext.appTheme.backgroundColor + : backgroundColor, + }, + style, + ]} + > + {children} + + ); +} diff --git a/src/Screens/Device/modals/AddSceneAction/index.js b/src/Screens/Device/modals/AddSceneAction/index.js index c0fea69..0dafdba 100644 --- a/src/Screens/Device/modals/AddSceneAction/index.js +++ b/src/Screens/Device/modals/AddSceneAction/index.js @@ -1,10 +1,11 @@ import { useContext } from "react"; -import { Image, Pressable, ScrollView, Text, View } from "react-native"; +import { Image, ScrollView, Text, View } from "react-native"; import { AppContext, AppStyles, ModalContainer } from "../../../../utils"; import MyIcon from "../../../../Components/Icon"; import { Divider } from "../../../../Components/Divider"; import { useTranslation } from "react-i18next"; import MyTag from "../../../../Components/Tag"; +import MyPressable from "../../../../Components/Pressable"; function Action({ text, @@ -27,17 +28,7 @@ function Action({ return ( <> - [ - { - backgroundColor: pressed - ? appContext.appTheme.modal.pressedPickerItemColor - : appContext.appTheme.backgroundColor, - }, - ]} - > + )} - + diff --git a/src/Screens/Device/modals/ChooseScene/index.js b/src/Screens/Device/modals/ChooseScene/index.js index 6a99ef8..8ed30c4 100644 --- a/src/Screens/Device/modals/ChooseScene/index.js +++ b/src/Screens/Device/modals/ChooseScene/index.js @@ -1,5 +1,5 @@ import { useContext } from "react"; -import { FlatList } from "react-native"; +import { FlatList, View } from "react-native"; import { AppContext, AppSelectedUserDevice, @@ -22,44 +22,51 @@ export default function ChooseSceneModalContent({ navigation, route }) { return ( - {deviceScenes.length === 0 ? ( - - ) : ( - item.sceneId} - renderItem={({ item }) => ( - { - navigation.goBack(); + + } + keyExtractor={(item) => item.sceneId} + renderItem={({ item }) => ( + { + navigation.goBack(); - appContext.setDevices((arr) => { - const newArr = [...arr]; + appContext.setDevices((arr) => { + const newArr = [...arr]; - newArr[ - arr.findIndex( - (d) => d.id === AppSelectedUserDevice.current.id - ) - ].selectedScene = item.sceneId; + newArr[ + arr.findIndex( + (d) => d.id === AppSelectedUserDevice.current.id + ) + ].selectedScene = item.sceneId; - return newArr; - }); - }} - /> - )} - /> - )} - - navigation.navigate("modalCreateScene")} - title={t("screens.device.scenes.modalChooseScene.textButtonAddScene")} + return newArr; + }); + }} + /> + )} + ListFooterComponent={ + navigation.navigate("modalCreateScene")} + title={t( + "screens.device.scenes.modalChooseScene.textButtonAddScene" + )} + iconName="plus-circle-outline" + /> + } /> ); diff --git a/src/Screens/Device/scene.js b/src/Screens/Device/scene.js index dd6c424..af06422 100644 --- a/src/Screens/Device/scene.js +++ b/src/Screens/Device/scene.js @@ -1,6 +1,12 @@ import { FlatList, Text, TouchableOpacity, View } from "react-native"; import Card from "../../Components/Card"; -import { AppContext, AppStyles, Constants, GetDevice } from "../../utils"; +import { + AppContext, + AppSelectedUserDevice, + AppStyles, + Constants, + GetDevice, +} from "../../utils"; import { useCallback, useContext, useState } from "react"; import MyDropdown from "../../Components/Dropdown"; import MyIcon from "../../Components/Icon"; @@ -8,19 +14,29 @@ import { useTranslation } from "react-i18next"; import MyResult from "../../Components/Result"; import { MyIconButton, 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"; export default function SceneView({ navigation }) { const appContext = useContext(AppContext); const { t } = useTranslation(); const [device, setDevice] = useState(); + const [isDotsModalOpen, setIsDotsModalOpen] = useState(false); const getSelectedDeviceSceneName = () => { - const scenes = appContext.deviceScenes.find( - (s) => s.sceneId === device.selectedScene - ); + let scene; - return scenes === undefined ? "None" : scenes.name; + if (device.selectedScene !== "") { + scene = appContext.deviceScenes.find( + (s) => s.sceneId === device.selectedScene + ); + } + + return scene === undefined + ? t("screens.device.scenes.dropdownSceneSelection.noSceneSelected") + : scene.name; }; useFocusEffect( @@ -32,15 +48,10 @@ export default function SceneView({ navigation }) { navigation.setOptions({ headerRight: () => ( - navigation.navigate("modalUpdateSceneName", { - deviceSelectedScene: device.selectedScene, - sceneName: getSelectedDeviceSceneName(), - }) - } + onPress={() => setIsDotsModalOpen(true)} /> ), }); @@ -86,17 +97,11 @@ export default function SceneView({ navigation }) { device: { selectedScene: device.selectedScene }, }) } - selectedItemLabel={ - device.selectedScene === null - ? t( - "screens.device.scenes.dropdownSceneSelection.noSceneSelected" - ) - : getSelectedDeviceSceneName() - } + selectedItemLabel={getSelectedDeviceSceneName()} /> - {device.selectedScene === null ? ( + {device.selectedScene === "" ? ( - + + navigation.navigate("modalLayersEditAction", { + actionId: item.actionId, + deviceFirmwareVersion: device.firmware.version, + }) + } > - {getActionTypeIcon(item.type)} - - Layer 1 wird auf rot setzen - Animation In: Fade in - Animation out: Fade out - - - navigation.navigate("modalLayersEditAction", { - actionId: item.actionId, - deviceFirmwareVersion: device.firmware.version, - }) - } + - - - - + + {getActionTypeIcon(item.type)} + + + Rainbow + + + + + Set to + + + + + + + + + + + + + + + ); }} /> @@ -150,7 +196,11 @@ export default function SceneView({ navigation }) { )} + + setIsDotsModalOpen(false)} + data={[ + { + icon: "pencil", + label: "Change scene name", + onPress: () => + navigation.navigate("modalUpdateSceneName", { + deviceSelectedScene: device.selectedScene, + sceneName: getSelectedDeviceSceneName(), + }), + }, + { + icon: "trash-can", + label: "Delete scene", + disabled: GetDevice(appContext.devices).selectedScene === "", + 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; + }); + }, + }, + ]} + /> ); } diff --git a/src/utils.js b/src/utils.js index b62b7bd..13e9203 100644 --- a/src/utils.js +++ b/src/utils.js @@ -363,7 +363,7 @@ const devDevices = [ version: "1.0.1", lastUpdated: "11.07.2023 um 20:33 Uhr", }, - selectedScene: null, + selectedScene: "", }, { id: "5b331a12a-0bec-4336-99bb-df3f9fc9f537", // deviceId @@ -373,7 +373,7 @@ const devDevices = [ version: "1.0.1", lastUpdated: "11.07.2023 um 20:33 Uhr", }, - selectedScene: null, + selectedScene: "", }, ];