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

separating states into multiple states

main
alex 2023-07-26 00:05:37 +00:00
parent 37892eff3e
commit 18290605b7
7 changed files with 184 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -249,22 +249,25 @@ export default function MyColorPicker({ colorLayer }) {
);
}
export function MyColorPickerV2({ isUserExpertModeEnabled, appThemeText }) {
export function MyColorPickerV2({
isUserExpertModeEnabled,
appThemeText,
onColorPickerChange,
}) {
const appContext = useContext(AppContext);
const selectedColorPickerColor = useSharedValue("#fff");
const pickerRef = useRef(ColorPickerRef);
const onColorSelect = (color) => {
selectedColorPickerColor.value = color.hex;
};
return (
<Animated.View style={{ marginTop: 20 }}>
<ColorPicker
ref={pickerRef}
value={selectedColorPickerColor.value}
thumbSize={26}
onChange={onColorSelect}
onChange={(color) => {
selectedColorPickerColor.value = color.hex;
onColorPickerChange(color.hex);
}}
boundedThumb
>
<View style={{ flexDirection: "row", justifyContent: "space-evenly" }}>
@ -286,7 +289,10 @@ export function MyColorPickerV2({ isUserExpertModeEnabled, appThemeText }) {
<TouchableHighlight
key={i}
style={{ borderRadius: 16 }}
onPress={() => pickerRef.current.setColor(color)}
onPress={() => {
pickerRef.current.setColor(color);
onColorPickerChange(color);
}}
onLongPress={() => {
let filteredColors =
appContext.userColorSwatchesFavorites.filter(

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

@ -6,10 +6,8 @@ import {
AppContext,
AppSelectedUserDevice,
Constants,
GetDevice,
ModalContainer,
NewAction,
NewInitialDeviceSceneAction,
} from "../../../../../utils";
function Layer({ number, selected, onPress }) {
@ -86,34 +84,18 @@ export default function LayerSelectionModalContent({ navigation, route }) {
style={{ marginTop: 20, width: 180 }}
disabled={selectedLayer.length === 0}
onPress={() => {
const newAction = NewAction(Constants.actionType.layers);
const device = appContext.devices.find(
(d) => d.id === AppSelectedUserDevice.current.id
);
appContext.setDeviceSceneActions((arr) => {
let newArr = [...arr];
const newAction = NewAction(
device.selectedScene,
Constants.actionType.layers
);
const deviceSelectedScene = GetDevice(
appContext.devices
).selectedScene;
appContext.setDeviceSceneActions((arr) => [...arr, newAction]);
const foundDeviceSceneActionIndex = newArr.findIndex(
(a) => a.sceneId === deviceSelectedScene
);
if (foundDeviceSceneActionIndex === -1) {
const initialDeviceActionScene =
NewInitialDeviceSceneAction(deviceSelectedScene);
initialDeviceActionScene.actions.push(newAction);
newArr.push(initialDeviceActionScene);
} else {
newArr[foundDeviceSceneActionIndex].actions.push(newAction);
}
return newArr;
});
route.params["actionId"] = newAction.id;
route.params["actionId"] = newAction.actionId;
navigation.navigate(AppSelectedUserDevice.current.routeName);
navigation.navigate("modalLayersEditAction", route.params);

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

@ -40,31 +40,10 @@ export default function CreateSceneModalContent({ navigation }) {
<MyPickerModalListItem
itemName={item.name}
onPress={() => {
appContext.setDeviceScenes((arr) => {
let newArr = [...arr];
const deviceId = AppSelectedUserDevice.current.id;
const foundDeviceSceneIndex = newArr.findIndex(
(s) => s.deviceId === deviceId
);
const newEmptyDeviceScene = NewEmptyDeviceScene("Leere Szene");
if (foundDeviceSceneIndex === -1) {
const initalDeviceScene = NewInitialDeviceScene(deviceId);
initalDeviceScene.scenes.push(newEmptyDeviceScene);
newArr.push(initalDeviceScene);
} else {
newArr[foundDeviceSceneIndex].scenes.push(
newEmptyDeviceScene
);
}
return newArr;
});
appContext.setDeviceScenes((arr) => [
...arr,
NewEmptyDeviceScene("Leere Szene"),
]);
navigation.pop(2);
}}

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

@ -16,31 +16,25 @@ export default function ChooseSceneModalContent({ navigation, route }) {
const { device } = route.params;
let scenes = [];
const deviceScenes = appContext.deviceScenes.find(
const deviceScenes = appContext.deviceScenes.filter(
(s) => s.deviceId === AppSelectedUserDevice.current.id
);
if (deviceScenes !== undefined) {
scenes = deviceScenes.scenes;
}
return (
<ModalContainer>
{scenes.length === 0 ? (
{deviceScenes.length === 0 ? (
<MyResult
text={"Keine Szenen vorhanden"}
iconName={"selection-search"}
/>
) : (
<FlatList
data={scenes}
keyExtractor={(item) => item.id}
data={deviceScenes}
keyExtractor={(item) => item.sceneId}
renderItem={({ item }) => (
<MyPickerModalListItem
itemName={item.name}
itemSelected={device.selectedScene === item.id}
itemSelected={device.selectedScene === item.sceneId}
onPress={() => {
navigation.goBack();
@ -51,7 +45,7 @@ export default function ChooseSceneModalContent({ navigation, route }) {
arr.findIndex(
(d) => d.id === AppSelectedUserDevice.current.id
)
].selectedScene = item.id;
].selectedScene = item.sceneId;
return newArr;
});
@ -63,7 +57,7 @@ export default function ChooseSceneModalContent({ navigation, route }) {
<MyTextButton
style={{ marginTop: 10 }}
actionColor={!scenes.length}
actionColor={!deviceScenes.length}
onPress={() => navigation.navigate("modalCreateScene")}
title={t("screens.device.scenes.modalChooseScene.textButtonAddScene")}
/>

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

@ -1,4 +1,11 @@
import { FlatList, Image, ScrollView, View } from "react-native";
import {
FlatList,
Image,
ScrollView,
Text,
TouchableOpacity,
View,
} from "react-native";
import {
MyDeviceTabButton,
topFirst,
@ -6,7 +13,7 @@ import {
} from "../../../deviceTabButton";
import Card from "../../../../../Components/Card";
import MyDropdown from "../../../../../Components/Dropdown";
import { useContext, useState } from "react";
import { useContext, useEffect, useState } from "react";
import {
AppContext,
GetDevice,
@ -15,10 +22,16 @@ import {
} from "../../../../../utils";
import { MyPickerModalListItem } from "../../../../../Components/Modal";
import { MyColorPickerV2 } from "../../../../../Components/ColorPicker";
import { useSharedValue } from "react-native-reanimated";
import { Divider } from "../../../../../Components/Divider";
export function LightsEditActionModalContent({ navigation, route }) {
const appContext = useContext(AppContext);
//const [selectedLightModeId, setSelectedLightMode] = useState(null);
const lightModeDefaultColors = useSharedValue(["red", "blue"]);
const [selectedLightModeDefaultColor, setSelectedLightModeDefaultColor] =
useState();
const [lightModeDefaultColorSwatched2, setLightModeDefaultColorSwatched] =
useState(<></>);
const { actionId } = route.params;
@ -29,12 +42,59 @@ export function LightsEditActionModalContent({ navigation, route }) {
)
);
const selectedLightModeId = GetDeviceSceneAction(
appContext.deviceSceneActions,
GetDevice(appContext.devices).selectedScene,
actionId
const selectedLightModeId = appContext.deviceSceneActions.find(
(a) => a.actionId === actionId
).modeId;
const selectedLightMode = supportedLightModes.find(
(s) => s.id === selectedLightModeId
);
const lightModeDefaultColorSwatched = () => {
const filteredColors = selectedLightMode.defaults.filter(
(d) => d.type === "color"
);
const elements = [];
if (filteredColors.length > 0) {
filteredColors.forEach((color, index) =>
elements.push(
<TouchableOpacity
key={index}
onPress={() => console.log("clicked", color, index)}
>
<View
style={{
width: 32,
height: 32,
borderRadius: 10,
backgroundColor: color.value,
}}
/>
</TouchableOpacity>
)
);
}
return (
<>
<View
style={{
flexDirection: "row",
gap: 10,
flexWrap: "wrap",
justifyContent: "center",
}}
>
{elements}
</View>
<Divider />
</>
);
};
return (
<View style={{ backgroundColor: appContext.appTheme.backgroundColor }}>
{appContext.isUserDeveloperModeEnabled ? (
@ -68,8 +128,7 @@ export function LightsEditActionModalContent({ navigation, route }) {
selectedItemLabel={
selectedLightModeId === ""
? "Kein Farbmodus ausgewählt"
: supportedLightModes.find((s) => s.id === selectedLightModeId)
.name[appContext.appLanguage]
: selectedLightMode.name[appContext.appLanguage]
}
onPress={() =>
navigation.navigate("modalLayersEditActionColorModeSelection", {
@ -80,9 +139,16 @@ export function LightsEditActionModalContent({ navigation, route }) {
}
/>
{selectedLightModeId !== "" && <>{lightModeDefaultColorSwatched()}</>}
{lightModeDefaultColorSwatched2}
<MyColorPickerV2
appThemeText={appContext.appTheme.text}
isUserExpertModeEnabled={appContext.isUserExpertModeEnabled}
onColorPickerChange={(color) =>
console.log("color picker change", color)
}
/>
</Card>
@ -104,29 +170,21 @@ export function LayersEditActionColorModeSelectionModalContent({
<ModalContainer>
<FlatList
data={route.params.supportedLightModes}
renderItem={({ item, index }) => (
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<MyPickerModalListItem
itemName={item.name[appContext.appLanguage]}
itemSelected={route.params.selectedLightModeId === item.id}
onPress={() => {
const deviceScene = GetDevice(appContext.devices).selectedScene;
appContext.setDeviceSceneActions((arr) => {
const newArr = [...arr];
const deviceActionIndex = newArr.findIndex(
(a) => a.sceneId === deviceScene
const actionIndex = newArr.findIndex(
(a) => a.actionId === route.params.actionId
);
if (deviceActionIndex !== -1) {
const actionIndex = newArr[
deviceActionIndex
].actions.findIndex((a) => a.id === route.params.actionId);
if (actionIndex !== -1) {
newArr[deviceActionIndex].actions[actionIndex].modeId =
item.id;
}
if (actionIndex !== -1) {
newArr[actionIndex].modeId = item.id;
}
return newArr;

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

@ -5,8 +5,10 @@ import {
AppSelectedUserDevice,
Constants,
GetDevice,
GetDeviceScene,
GetDeviceScenes,
} from "../../utils";
import { useCallback, useContext, useEffect, useState } from "react";
import { useCallback, useContext, useState } from "react";
import MyDropdown from "../../Components/Dropdown";
import MyIcon from "../../Components/Icon";
import { useTranslation } from "react-i18next";
@ -52,7 +54,7 @@ export default function SceneView({ navigation }) {
return <MyIcon name={iconName} size={24} />;
};
const deviceSceneActions = appContext.deviceSceneActions.find(
const deviceSceneActions = appContext.deviceSceneActions.filter(
(a) => a.sceneId === device.selectedScene
);
@ -71,9 +73,9 @@ export default function SceneView({ navigation }) {
? t(
"screens.device.scenes.dropdownSceneSelection.noSceneSelected"
)
: appContext.deviceScenes
.find((s) => s.deviceId === AppSelectedUserDevice.current.id)
.scenes.find((s) => s.id === device.selectedScene).name
: appContext.deviceScenes.find(
(s) => s.sceneId === device.selectedScene
).name
}
/>
</Card>
@ -86,7 +88,7 @@ export default function SceneView({ navigation }) {
) : (
<View>
{deviceSceneActions === undefined ||
deviceSceneActions.actions.length === 0 ? (
deviceSceneActions.length === 0 ? (
<MyResult
text={t("screens.device.scenes.infoNoActionsAvailableInScene")}
iconName={"selection-search"}
@ -94,8 +96,8 @@ export default function SceneView({ navigation }) {
) : (
<FlatList
scrollEnabled={false}
data={deviceSceneActions.actions}
keyExtractor={(item) => item.id}
data={deviceSceneActions}
keyExtractor={(item) => item.actionId}
renderItem={({ item }) => {
console.log("item", item);
@ -116,7 +118,7 @@ export default function SceneView({ navigation }) {
<TouchableOpacity
onPress={() =>
navigation.navigate("modalLayersEditAction", {
actionId: item.id,
actionId: item.actionId,
deviceFirmwareVersion: device.firmware.version,
})
}
@ -135,7 +137,7 @@ export default function SceneView({ navigation }) {
style={{ marginTop: 10 }}
actionColor={
deviceSceneActions === undefined ||
deviceSceneActions.actions.length === 0
deviceSceneActions.length === 0
}
onPress={() =>
navigation.navigate("modalAddSceneAction", {

63
src/utils.js
View File

@ -194,7 +194,12 @@ const devDevicesFirmwareModes = {
de: "Einfarbig",
en: "Solid",
},
defaults: [],
defaults: [
{
type: "color",
value: "red",
},
],
adjustments: [],
},
{
@ -337,7 +342,42 @@ const devDevices = [
},
];
// preview
const devDeviceScenes = [
{
sceneId: "", // sceneId
deviceId: "",
name: "",
},
];
export function NewEmptyDeviceScene(name) {
return {
sceneId: GetUuid(),
deviceId: AppSelectedUserDevice.current.id,
name: name,
};
}
const devDeviceSceneActions = [
{
actionId: "", // actionId
sceneId: "",
type: "",
modeId: "",
},
];
export function NewAction(sceneId, actionType) {
return {
actionId: GetUuid(),
sceneId: sceneId,
type: actionType, // layers, ambilight, motor
modeId: "",
};
}
/*const devDeviceScenes = [
{
deviceId: "",
scenes: [
@ -359,8 +399,13 @@ const devDeviceSceneActions = [
},
],
},
];
];*/
export function GetDevice(devices) {
return devices.find((d) => d.id === AppSelectedUserDevice.current.id);
}
/*
export function NewInitialDeviceScene(deviceId) {
return {
deviceId: deviceId,
@ -390,15 +435,23 @@ export function NewAction(actionType) {
};
}
export function GetDevice(devices) {
return devices.find((d) => d.id === AppSelectedUserDevice.current.id);
export function GetDeviceScene(deviceScenes, sceneId) {
const deviceScene = deviceScenes.find(
(d) => d.deviceId === AppSelectedUserDevice.current.id
);
if (deviceScene === undefined) return [];
return deviceScene.scenes.find((s) => s.id === sceneId);
}
export function GetDeviceSceneAction(sceneActions, sceneId, actionId) {
return sceneActions
.find((s) => s.sceneId === sceneId)
.actions.find((a) => a.id === actionId);
}
} */
const appContextPreview = {
appColorScheme: "",