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

switched to react navigation stacks instead of modals

main
alex 2023-07-23 19:59:43 +00:00
parent 0b7612a8a6
commit af351d4168
14 changed files with 446 additions and 372 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
App.js
View File

@ -2,7 +2,7 @@ import "react-native-gesture-handler";
import { StatusBar } from "expo-status-bar";
import { Text, View } from "react-native";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { NavigationContainer } from "@react-navigation/native";
import { DefaultTheme, NavigationContainer } from "@react-navigation/native";
import SideBar from "./src/Components/SideBar";
import {
AppContext,
@ -20,7 +20,18 @@ import { createStackNavigator } from "@react-navigation/stack";
import { TouchableOpacity } from "react-native";
import MyIcon from "./src/Components/Icon";
import { useTranslation } from "react-i18next";
import { LightsEditActionModalContent } from "./src/Screens/Device/modals/EditActions/Lights";
import {
LayersEditActionColorModeSelectionModalContent,
LightsEditActionModalContent,
} from "./src/Screens/Device/modals/EditActions/Lights";
import ChooseSceneModalContent from "./src/Screens/Device/modals/ChooseScene";
import CreateSceneModalContent from "./src/Screens/Device/modals/ChooseScene/CreateScene";
import AddSceneActionModalContent from "./src/Screens/Device/modals/AddSceneAction";
import LayerSelectionModalContent from "./src/Screens/Device/modals/AddSceneAction/LayerSelection";
import {
SettingsAppColorSchemeModalContent,
SettingsAppLanguageModalContent,
} from "./src/Screens/Settings";
const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();
@ -66,20 +77,32 @@ export function MyApp() {
loadData();
}, []);
const options = ({ navigation }) => {
const options = ({ navigation, pageTitle }) => {
return getScreenStackOptions(
navigation,
t("screens.device.scenes.modalLayersEditAction.headerTitle"),
pageTitle,
appContext.appTheme.text,
appContext.appTheme.backgroundColor,
true
);
};
const navigatonTheme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
background: appContext.appTheme.backgroundColor,
},
};
return (
<SafeAreaView style={{ height: "100%" }}>
<NavigationContainer>
<Stack.Navigator screenOptions={{ headerTitleAlign: "center" }}>
<NavigationContainer theme={navigatonTheme}>
<Stack.Navigator
screenOptions={{
headerTitleAlign: "center",
}}
>
<Stack.Screen
name="drawer"
component={MyDrawer}
@ -87,9 +110,103 @@ export function MyApp() {
/>
<Stack.Screen
name="modalLayersEditActionIsOpen"
name="modalChooseScene"
component={ChooseSceneModalContent}
options={({ navigation }) =>
options({
navigation: navigation,
pageTitle: t(
"screens.device.scenes.modalChooseScene.pageTitle"
),
})
}
/>
<Stack.Screen
name="modalCreateScene"
component={CreateSceneModalContent}
options={({ navigation }) =>
options({
navigation: navigation,
pageTitle: t(
"screens.device.scenes.modalCreateScene.pageTitle"
),
})
}
/>
<Stack.Screen
name="modalAddSceneAction"
component={AddSceneActionModalContent}
options={({ navigation }) =>
options({
navigation: navigation,
pageTitle: t(
"screens.device.scenes.modalAddSceneAction.pageTitle"
),
})
}
/>
<Stack.Screen
name="modalLayerSection"
component={LayerSelectionModalContent}
options={({ navigation }) =>
options({
navigation: navigation,
pageTitle: t(
"screens.device.scenes.modalLayerSection.pageTitle"
),
})
}
/>
<Stack.Screen
name="modalLayersEditAction"
component={LightsEditActionModalContent}
options={options}
options={({ navigation }) =>
options({
navigation: navigation,
pageTitle: t(
"screens.device.scenes.modalLayersEditAction.pageTitle"
),
})
}
/>
<Stack.Screen
name="modalLayersEditActionColorModeSelection"
component={LayersEditActionColorModeSelectionModalContent}
options={({ navigation }) =>
options({
navigation: navigation,
pageTitle: t(
"screens.device.scenes.modalLayersEditActionColorModeSelection.pageTitle"
),
})
}
/>
<Stack.Screen
name="modalSettingsAppColorScheme"
component={SettingsAppColorSchemeModalContent}
options={({ navigation }) =>
options({
navigation: navigation,
pageTitle: t("screens.settings.appColorSchemeModalTitle"),
})
}
/>
<Stack.Screen
name="modalSettingsAppLanguage"
component={SettingsAppLanguageModalContent}
options={({ navigation }) =>
options({
navigation: navigation,
pageTitle: t("screens.settings.languageModalTitle"),
})
}
/>
</Stack.Navigator>
</NavigationContainer>

15
locales/de.json
View File

@ -36,11 +36,11 @@
"infoNoActionsAvailableInScene": "Keine Aktionen in der Szene vorhanden",
"buttonAddAction": "Aktion hinzufügen",
"modalChooseScene": {
"headerTitle": "Wähle eine Szene aus",
"pageTitle": "Wähle eine Szene aus",
"textButtonAddScene": "Neue Szene erstellen"
},
"modalCreateScene": {
"headerTitle": "Szene erstellen",
"pageTitle": "Szene erstellen",
"options": {
"emptyScene": "Leere Szene erstellen",
"standardScene": "Standard Szene erstellen",
@ -48,7 +48,7 @@
}
},
"modalAddSceneAction": {
"headerTitle": "Aktion hinzufügen",
"pageTitle": "Aktion hinzufügen",
"actions": {
"layers": "Ebenen",
"motor": "Motor",
@ -62,10 +62,13 @@
}
},
"modalLayerSection": {
"headerTitle": "Layer auswahl"
"pageTitle": "Layer auswahl"
},
"modalLayersEditAction": {
"headerTitle": "Ebenen bearbeiten"
"pageTitle": "Ebenen bearbeiten"
},
"modalLayersEditActionColorModeSelection": {
"pageTitle": "Wähle einen Farbmodus"
}
}
},
@ -79,7 +82,9 @@
"pageTitle": "Einstellungen",
"settingsCardTitle": "Einstellungen",
"languageText": "Sprache",
"languageModalTitle": "Sprache anpassen",
"appColorSchemeText": "Anzeigemodus",
"appColorSchemeModalTitle": "Anzeigemodus anpassen",
"appColorSchemePicker": {
"auto": "System Standard",
"dark": "Dunkel",

15
locales/en.json
View File

@ -36,11 +36,11 @@
"infoNoActionsAvailableInScene": "No actions available in the scene",
"buttonAddAction": "Add action",
"modalChooseScene": {
"headerTitle": "Choose a scene",
"pageTitle": "Choose a scene",
"textButtonAddScene": "Create new scene"
},
"modalCreateScene": {
"headerTitle": "Create scene",
"pageTitle": "Create scene",
"options": {
"emptyScene": "Create empty scene",
"standardScene": "Create standard scene",
@ -48,7 +48,7 @@
}
},
"modalAddSceneAction": {
"headerTitle": "Add action",
"pageTitle": "Add action",
"actions": {
"layers": "Layers",
"motor": "Motor",
@ -62,10 +62,13 @@
}
},
"modalLayerSection": {
"headerTitle": "Layer selection"
"pageTitle": "Layer selection"
},
"modalLayersEditAction": {
"headerTitle": "Edit layers"
"pageTitle": "Edit layers"
},
"modalLayersEditActionColorModeSelection": {
"pageTitle": "Choose a color mode"
}
}
},
@ -79,7 +82,9 @@
"pageTitle": "Settings",
"settingsCardTitle": "Settings",
"languageText": "Language",
"languageModalTitle": "Customize language",
"appColorSchemeText": "Appearance",
"appColorSchemeModalTitle": "Customize appearance",
"appColorSchemePicker": {
"auto": "System default",
"dark": "Dark",

16
src/Components/ColorPicker/index.js
View File

@ -268,22 +268,6 @@ export function MyColorPickerV2({ isUserExpertModeEnabled, appThemeText }) {
onChange={onColorSelect}
boundedThumb
>
<TouchableOpacity
onPress={() =>
setColorSwatchesFavorites([
...colorSwatchesFavorites,
selectedColorPickerColor.value,
])
}
style={{
position: "absolute",
top: -18,
right: 2,
}}
>
<MyIcon name="star-outline" size={20} />
</TouchableOpacity>
<View style={{ flexDirection: "row", justifyContent: "space-evenly" }}>
<Panel3 style={{ width: 200 }} />

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

@ -97,7 +97,7 @@ export function MyDefaultModalHeader({ title, closeModal }) {
<Text
style={[
AppStyles.typography16,
AppStyles.typography20,
{ fontWeight: "bold", color: appContext.appTheme.text },
]}
>

9
src/Components/SideBar/index.js
View File

@ -1,7 +1,7 @@
import { DrawerContentScrollView, DrawerItem } from "@react-navigation/drawer";
import { useContext } from "react";
import { Image, Text, TouchableOpacity, View } from "react-native";
import { AppContext, AppStyles } from "../../utils";
import { AppContext, AppSelectedUserDevice, AppStyles } from "../../utils";
import { Divider } from "../Divider";
import { useTranslation } from "react-i18next";
import MyIcon from "../Icon";
@ -27,6 +27,8 @@ export default function Sidebar(props) {
? appContext.appTheme.drawer.item.activeTintColor
: appContext.appTheme.drawer.item.inactiveTintColor;
if (isFocused && isDevice) AppSelectedUserDevice.current = routeName;
return (
<DrawerItem
label={() =>
@ -138,11 +140,6 @@ export default function Sidebar(props) {
label={"Old Device"}
onPress={() => props.navigation.navigate("Old Turtle")}
/>
<MyDrawerItem
label={"test"}
onPress={() => props.navigation.navigate("test")}
/>
</DrawerContentScrollView>
<View style={{ justifyContent: "flex-end" }}>

14
src/Screens/Device/modals/AddSceneAction/LayerSelection/index.js
View File

@ -2,6 +2,7 @@ import { useState } from "react";
import { Text, TouchableHighlight, View } from "react-native";
import MyButton from "../../../../../Components/Button";
import { useTranslation } from "react-i18next";
import { AppSelectedUserDevice, ModalContainer } from "../../../../../utils";
function Layer({ number, selected, onPress }) {
return (
@ -36,9 +37,7 @@ function Layer({ number, selected, onPress }) {
);
}
export default function LayerSelectionModalContent({
openLayersActionEditModal,
}) {
export default function LayerSelectionModalContent({ navigation, route }) {
const { t } = useTranslation();
const [selectedLayer, setSelectedLayer] = useState([]);
@ -53,7 +52,7 @@ export default function LayerSelectionModalContent({
};
return (
<>
<ModalContainer>
<View
style={{
flexDirection: "row",
@ -77,9 +76,12 @@ export default function LayerSelectionModalContent({
title={t("screens.device.scenes.buttonAddAction")}
style={{ marginTop: 20, width: 180 }}
disabled={selectedLayer.length === 0}
onPress={openLayersActionEditModal}
onPress={() => {
navigation.navigate(AppSelectedUserDevice.current);
navigation.navigate("modalLayersEditAction", route.params);
}}
/>
</View>
</>
</ModalContainer>
);
}

43
src/Screens/Device/modals/AddSceneAction/index.js
View File

@ -1,6 +1,6 @@
import { useContext } from "react";
import { Image, Text, TouchableOpacity, View } from "react-native";
import { AppContext, AppStyles } from "../../../../utils";
import { Image, ScrollView, Text, TouchableOpacity, 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";
@ -65,22 +65,22 @@ function Action({
);
}
export default function AddSceneActionModalContent({
device,
openLayerSelectionModal,
}) {
export default function AddSceneActionModalContent({ navigation, route }) {
const { t } = useTranslation();
// TODO: check model type for actions
const deviceFirmwareVersion = route.params.deviceFirmwareVersion;
// TODO: show only actions by device model
return (
<>
<ScrollView>
<ModalContainer>
<Action
text={t("screens.device.scenes.modalAddSceneAction.actions.layers")}
iconName="lightbulb-on-outline"
imageSource={require("../../../../../assets/layers.gif")}
onPress={openLayerSelectionModal}
deviceFirmwareVersion={device.firmwareVersion}
onPress={() => navigation.navigate("modalLayerSection", route.params)}
deviceFirmwareVersion={deviceFirmwareVersion}
supportedFirmwareVersions={["1.0.1"]}
/>
@ -89,16 +89,18 @@ export default function AddSceneActionModalContent({
iconName="axis-z-rotate-counterclockwise"
imageSource={require("../../../../../assets/motor.gif")}
onPress={() => console.log("pressed action")}
deviceFirmwareVersion={device.firmwareVersion}
deviceFirmwareVersion={deviceFirmwareVersion}
supportedFirmwareVersions={["1.0.1"]}
/>
<Action
text={t("screens.device.scenes.modalAddSceneAction.actions.ambilight")}
text={t(
"screens.device.scenes.modalAddSceneAction.actions.ambilight"
)}
iconName="television-ambient-light"
imageSource={require("../../../../../assets/ambilight.gif")}
onPress={() => console.log("pressed action")}
deviceFirmwareVersion={device.firmwareVersion}
deviceFirmwareVersion={deviceFirmwareVersion}
supportedFirmwareVersions={["1.0.1"]}
/>
@ -108,7 +110,7 @@ export default function AddSceneActionModalContent({
)}
iconName="timer-sand"
onPress={() => console.log("pressed action")}
deviceFirmwareVersion={device.firmwareVersion}
deviceFirmwareVersion={deviceFirmwareVersion}
supportedFirmwareVersions={["1.0.1"]}
/>
@ -118,7 +120,7 @@ export default function AddSceneActionModalContent({
)}
iconName="clock-time-eight-outline"
onPress={() => console.log("pressed action")}
deviceFirmwareVersion={device.firmwareVersion}
deviceFirmwareVersion={deviceFirmwareVersion}
supportedFirmwareVersions={["1.0.1"]}
/>
@ -126,7 +128,7 @@ export default function AddSceneActionModalContent({
text={t("screens.device.scenes.modalAddSceneAction.actions.stop")}
iconName="pause-octagon-outline"
onPress={() => console.log("pressed action")}
deviceFirmwareVersion={device.firmwareVersion}
deviceFirmwareVersion={deviceFirmwareVersion}
supportedFirmwareVersions={["1.0.1"]}
/>
@ -136,7 +138,7 @@ export default function AddSceneActionModalContent({
)}
iconName="timer-cog"
onPress={() => console.log("pressed action")}
deviceFirmwareVersion={device.firmwareVersion}
deviceFirmwareVersion={deviceFirmwareVersion}
supportedFirmwareVersions={["1.0.1"]}
/>
@ -146,7 +148,7 @@ export default function AddSceneActionModalContent({
)}
iconName="gesture-tap-button"
onPress={() => console.log("pressed action")}
deviceFirmwareVersion={device.firmwareVersion}
deviceFirmwareVersion={deviceFirmwareVersion}
supportedFirmwareVersions={["1.0.0"]}
/>
@ -156,9 +158,10 @@ export default function AddSceneActionModalContent({
)}
iconName="debug-step-over"
onPress={() => console.log("pressed action")}
deviceFirmwareVersion={device.firmwareVersion}
deviceFirmwareVersion={deviceFirmwareVersion}
supportedFirmwareVersions={["1.0.0"]}
/>
</>
</ModalContainer>
</ScrollView>
);
}

21
src/Screens/Device/modals/ChooseScene/CreateScene/index.js
View File

@ -1,13 +1,14 @@
import { useContext } from "react";
import { AppContext, NewEmptyDeviceScene } from "../../../../../utils";
import {
AppContext,
ModalContainer,
NewEmptyDeviceScene,
} from "../../../../../utils";
import { FlatList } from "react-native";
import { MyPickerModalListItem } from "../../../../../Components/Modal";
import { useTranslation } from "react-i18next";
export default function CreateSceneModalContent({
device,
closeChooseSceneModals,
}) {
export default function CreateSceneModalContent({ navigation, route }) {
const appContext = useContext(AppContext);
const { t } = useTranslation();
@ -29,6 +30,7 @@ export default function CreateSceneModalContent({
];
return (
<ModalContainer>
<FlatList
data={options}
keyExtractor={(item) => item.id}
@ -39,17 +41,18 @@ export default function CreateSceneModalContent({
appContext.setDevices((arr) => {
const newArr = [...arr];
newArr[arr.findIndex((d) => d.id === device.id)].scenes.push(
NewEmptyDeviceScene()
);
newArr[
arr.findIndex((d) => d.id === route.params.id)
].scenes.push(NewEmptyDeviceScene());
return newArr;
});
closeChooseSceneModals();
navigation.pop(2);
}}
/>
)}
/>
</ModalContainer>
);
}

19
src/Screens/Device/modals/ChooseScene/index.js
View File

@ -1,20 +1,19 @@
import { useContext } from "react";
import { FlatList } from "react-native";
import { AppContext } from "../../../../utils";
import { AppContext, ModalContainer } from "../../../../utils";
import { MyPickerModalListItem } from "../../../../Components/Modal";
import { useTranslation } from "react-i18next";
import { MyTextButton } from "../../../../Components/Button";
import MyResult from "../../../../Components/Result";
export default function ChooseSceneModalContent({
device,
openCreateSceneModal,
}) {
export default function ChooseSceneModalContent({ navigation, route }) {
const appContext = useContext(AppContext);
const { t } = useTranslation();
const device = route.params;
return (
<>
<ModalContainer>
{device.scenes.length === 0 ? (
<MyResult
text={"Keine Szenen vorhanden"}
@ -38,6 +37,8 @@ export default function ChooseSceneModalContent({
return newArr;
});
navigation.goBack();
}}
/>
)}
@ -47,9 +48,11 @@ export default function ChooseSceneModalContent({
<MyTextButton
style={{ marginTop: 10 }}
actionColor={!device.scenes.length}
onPress={openCreateSceneModal}
onPress={() =>
navigation.navigate("modalCreateScene", { id: device.id })
}
title={t("screens.device.scenes.modalChooseScene.textButtonAddScene")}
/>
</>
</ModalContainer>
);
}

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

@ -7,14 +7,14 @@ import {
import Card from "../../../../../Components/Card";
import MyDropdown from "../../../../../Components/Dropdown";
import { useContext, useState } from "react";
import { AppContext } from "../../../../../utils";
import { AppContext, ModalContainer } from "../../../../../utils";
import MyModal, {
MyDefaultModalHeader,
MyPickerModalListItem,
} from "../../../../../Components/Modal";
import { MyColorPickerV2 } from "../../../../../Components/ColorPicker";
export function LightsEditActionModalContent({ route }) {
export function LightsEditActionModalContent({ navigation, route }) {
const appContext = useContext(AppContext);
const [modalColorModeSelectionIsOpen, setModalColorSelectionModeIsOpen] =
useState(false);
@ -64,7 +64,12 @@ export function LightsEditActionModalContent({ route }) {
appContext.appLanguage
]
}
onPress={() => setModalColorSelectionModeIsOpen(true)}
onPress={() =>
navigation.navigate("modalLayersEditActionColorModeSelection", {
supportedLightModes: supportedLightModes,
selectedLightMode: selectedLightMode,
})
}
/>
<MyColorPickerV2
@ -77,32 +82,31 @@ export function LightsEditActionModalContent({ route }) {
<Card key={i} />
))}
</ScrollView>
</View>
);
}
<MyModal
isOpen={modalColorModeSelectionIsOpen}
closeModal={() => setModalColorSelectionModeIsOpen(false)}
header={
<MyDefaultModalHeader
title={"Farbmodus wählen"}
closeModal={() => setModalColorSelectionModeIsOpen(false)}
/>
}
content={
export function LayersEditActionColorModeSelectionModalContent({
navigation,
route,
}) {
const appContext = useContext(AppContext);
return (
<ModalContainer>
<FlatList
data={supportedLightModes}
data={route.params.supportedLightModes}
renderItem={({ item, index }) => (
<MyPickerModalListItem
itemName={item.name[appContext.appLanguage]}
itemSelected={selectedLightMode === index}
itemSelected={route.params.selectedLightMode === index}
onPress={() => {
setSelectedLightMode(index);
setModalColorSelectionModeIsOpen(false);
// TODO: set selected light mode directly in appContext actions
navigation.goBack();
}}
/>
)}
/>
}
/>
</View>
</ModalContainer>
);
}

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

@ -1,16 +1,12 @@
import { FlatList, Text, TouchableOpacity, View } from "react-native";
import Card from "../../Components/Card";
import { AppContext, IsPlatformIos } from "../../utils";
import { useContext, useState } from "react";
import { AppContext } from "../../utils";
import { useContext } from "react";
import MyDropdown from "../../Components/Dropdown";
import MyIcon from "../../Components/Icon";
import MyModal, { MyDefaultModalHeader } from "../../Components/Modal";
import CreateSceneModalContent from "./modals/ChooseScene/CreateScene";
import ChooseSceneModalContent from "./modals/ChooseScene";
import AddSceneActionModalContent from "./modals/AddSceneAction";
import LayerSelectionModalContent from "./modals/AddSceneAction/LayerSelection";
import { useTranslation } from "react-i18next";
import MyResult from "../../Components/Result";
import { MyTextButton } from "../../Components/Button";
export default function SceneView({ navigation, device }) {
const appContext = useContext(AppContext);
@ -20,58 +16,18 @@ export default function SceneView({ navigation, device }) {
(scene) => scene.id === device.selectedScene
);
const [modalOpenStates, setModalOpenStates] = useState({
modalChooseSceneIsOpen: false,
modalCreateSceneIsOpen: false,
modalAddSceneActionIsOpen: false,
modalLayerSectionIsOpen: false,
modalLayersEditActionIsOpen: false,
});
const setModalOpen = (modalName, open) =>
setModalOpenStates((prevState) => ({
...prevState,
[modalName]: open,
}));
const closeChooseSceneModals = () =>
setModalOpenStates((prevState) => ({
...prevState,
modalChooseSceneIsOpen: false,
modalCreateSceneIsOpen: false,
}));
const openLayersActionEditModal = () => {
setModalOpenStates((prevState) => ({
...prevState,
modalChooseSceneIsOpen: false,
modalCreateSceneIsOpen: false,
modalAddSceneActionIsOpen: false,
modalLayerSectionIsOpen: false,
}));
// setTimeout is needed, otherwise the modal would not open on iOS
IsPlatformIos()
? setTimeout(
() =>
setModalOpenStates((prevState) => ({
...prevState,
modalLayersEditActionIsOpen: true,
})),
600
)
: setModalOpenStates((prevState) => ({
...prevState,
modalLayersEditActionIsOpen: true,
}));
};
return (
<>
<Card>
<MyDropdown
label={t("screens.device.scenes.dropdownSceneSelection.label")}
onPress={() => setModalOpen("modalChooseSceneIsOpen", true)}
onPress={() =>
navigation.navigate("modalChooseScene", {
id: device.id,
selectedScene: device.selectedScene,
scenes: device.scenes,
})
}
selectedItemLabel={
device.selectedScene === null
? t(
@ -110,7 +66,7 @@ export default function SceneView({ navigation, device }) {
<Text>{item.name}</Text>
<TouchableOpacity
onPress={() =>
navigation.navigate("modalLayersEditActionIsOpen", {
navigation.navigate("modalLayersEditAction", {
deviceFirmwareVersion: device.firmware.version,
})
}
@ -122,85 +78,19 @@ export default function SceneView({ navigation, device }) {
)}
/>
)}
<MyTextButton
title={t("screens.device.scenes.buttonAddAction")}
style={{ marginTop: 10 }}
actionColor={deviceScene.actions.length === 0}
onPress={() =>
navigation.navigate("modalAddSceneAction", {
deviceFirmwareVersion: device.firmware.version,
})
}
/>
</View>
)}
<MyModal
isOpen={modalOpenStates.modalChooseSceneIsOpen}
closeModal={() => setModalOpen("modalChooseSceneIsOpen", false)}
header={
<MyDefaultModalHeader
title={t("screens.device.scenes.modalChooseScene.headerTitle")}
closeModal={() => setModalOpen("modalChooseSceneIsOpen", false)}
/>
}
content={
<ChooseSceneModalContent
device={{
id: device.id,
selectedScene: device.selectedScene,
scenes: device.scenes,
}}
openCreateSceneModal={() =>
setModalOpen("modalCreateSceneIsOpen", true)
}
/>
}
>
<MyModal
isOpen={modalOpenStates.modalCreateSceneIsOpen}
closeModal={() => setModalOpen("modalCreateSceneIsOpen", false)}
header={
<MyDefaultModalHeader
title={t("screens.device.scenes.modalCreateScene.headerTitle")}
closeModal={() => setModalOpen("modalCreateSceneIsOpen", false)}
/>
}
content={
<CreateSceneModalContent
device={{ id: device.id }}
closeChooseSceneModals={closeChooseSceneModals}
/>
}
/>
</MyModal>
<MyModal
scrollView
isOpen={modalOpenStates.modalAddSceneActionIsOpen}
closeModal={() => setModalOpen("modalAddSceneActionIsOpen", false)}
header={
<MyDefaultModalHeader
title={t("screens.device.scenes.modalAddSceneAction.headerTitle")}
closeModal={() => setModalOpen("modalAddSceneActionIsOpen", false)}
/>
}
content={
<AddSceneActionModalContent
device={{ firmwareVersion: device.firmware.version }}
openLayerSelectionModal={() =>
setModalOpen("modalLayerSectionIsOpen", true)
}
/>
}
>
<MyModal
scrollView
isOpen={modalOpenStates.modalLayerSectionIsOpen}
closeModal={() => setModalOpen("modalLayerSectionIsOpen", false)}
header={
<MyDefaultModalHeader
title={t("screens.device.scenes.modalLayerSection.headerTitle")}
closeModal={() => setModalOpen("modalLayerSectionIsOpen", false)}
/>
}
content={
<LayerSelectionModalContent
openLayersActionEditModal={() => openLayersActionEditModal()}
/>
}
/>
</MyModal>
</>
);
}

86
src/Screens/Settings/index.js
View File

@ -1,18 +1,15 @@
import { useContext, useState } from "react";
import { Text, TouchableOpacity, View } from "react-native";
import { useContext } from "react";
import { FlatList, Text, TouchableOpacity, View } from "react-native";
import Card from "../../Components/Card";
import { AppContext, AppStyles, Constants } from "../../utils";
import { AppContext, AppStyles, Constants, ModalContainer } from "../../utils";
import { Divider } from "../../Components/Divider";
import { useTranslation } from "react-i18next";
import MySwitch from "../../Components/Switch";
import { MyPickerModal } from "../../Components/Modal";
import { MyPickerModalListItem } from "../../Components/Modal";
export default function SettingsScreen() {
export default function SettingsScreen({ navigation }) {
const appContext = useContext(AppContext);
const { t } = useTranslation();
const [modalAppColorSchemeVisible, setAppColorSchemeModalVisible] =
useState(false);
const [modalAppLanguageVisible, setModalAppLanguageVisible] = useState(false);
return (
<View
@ -35,7 +32,7 @@ export default function SettingsScreen() {
</Text>
<TouchableOpacity
onPress={() => setModalAppLanguageVisible(true)}
onPress={() => navigation.navigate("modalSettingsAppLanguage")}
style={{ marginBottom: 6 }}
>
<View
@ -63,7 +60,9 @@ export default function SettingsScreen() {
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => setAppColorSchemeModalVisible(true)}>
<TouchableOpacity
onPress={() => navigation.navigate("modalSettingsAppColorScheme")}
>
<View
style={{
flexDirection: "row",
@ -138,11 +137,39 @@ export default function SettingsScreen() {
onValueChange={(e) => appContext.setUserIsDeveloperModeEnabled(e)}
/>
</View>
</Card>
</View>
);
}
<MyPickerModal
isOpen={modalAppColorSchemeVisible}
setIsOpen={setAppColorSchemeModalVisible}
items={[
export function SettingsAppLanguageModalContent({ navigation }) {
const appContext = useContext(AppContext);
return (
<ModalContainer>
<FlatList
data={Constants.languages}
renderItem={({ item, index }) => (
<MyPickerModalListItem
key={index}
itemName={item.label}
onPress={() => {
appContext.setAppLanguage(item.name);
navigation.goBack();
}}
itemSelected={appContext.appLanguage === item.name}
/>
)}
/>
</ModalContainer>
);
}
export function SettingsAppColorSchemeModalContent({ navigation }) {
const appContext = useContext(AppContext);
const { t } = useTranslation();
const items = [
{
label: t("screens.settings.appColorSchemePicker.auto"),
onPress: () => appContext.setAppColorScheme("auto"),
@ -158,21 +185,24 @@ export default function SettingsScreen() {
onPress: () => appContext.setAppColorScheme("light"),
selected: appContext.appColorScheme === "light",
},
]}
/>
];
<MyPickerModal
isOpen={modalAppLanguageVisible}
setIsOpen={setModalAppLanguageVisible}
items={Constants.languages.map((language) => {
return {
label: language.label,
onPress: () => appContext.setAppLanguage(language.name),
selected: appContext.appLanguage === language.name,
};
})}
return (
<ModalContainer>
<FlatList
data={items}
renderItem={({ item, index }) => (
<MyPickerModalListItem
key={index}
itemName={item.label}
itemSelected={item.selected}
onPress={() => {
item.onPress();
navigation.goBack();
}}
/>
</Card>
</View>
)}
/>
</ModalContainer>
);
}

37
src/utils.js
View File

@ -1,7 +1,13 @@
import AsyncStorage from "@react-native-async-storage/async-storage";
import { createContext, useState } from "react";
import { createContext, createRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { Appearance, Platform, StyleSheet, Vibration } from "react-native";
import {
Appearance,
Platform,
StyleSheet,
Vibration,
View,
} from "react-native";
import uuid from "react-native-uuid";
export const Constants = {
@ -39,6 +45,10 @@ export const AppStyles = StyleSheet.create({
shadowOpacity: 0.2, // only ios
shadowRadius: 1, // only ios
},
modal: {
flex: 1,
padding: 10,
},
});
const DarkAppTheme = {
@ -342,7 +352,18 @@ const devDevices = [
lastUpdated: "11.07.2023 um 20:33 Uhr",
},
selectedScene: null,
scenes: [],
scenes: [
{
id: "3f21a12a-0bec-4336-99bb-df3f9fc9f537",
name: "Yolo",
actions: [
{
id: 0,
name: "Haha",
},
],
},
],
},
];
@ -354,6 +375,8 @@ export function NewEmptyDeviceScene() {
};
}
export const AppSelectedUserDevice = createRef(null);
export const AppContext = createContext(appContextPreview);
export function AppProvider({ children }) {
@ -429,3 +452,11 @@ export function IsPlatformIos() {
export function VibrateShort() {
Vibration.vibrate(50);
}
export function ModalContainer({ children }) {
return (
<View style={AppStyles.modal}>
<View>{children}</View>
</View>
);
}