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

added scene sorting

main
alex 2023-08-04 01:26:42 +00:00
parent 8edf96043a
commit 3445cbac09
3 changed files with 138 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -172,7 +172,6 @@ export function MyDotsModal({ isOpen, closeModal, data }) {
}} }}
disabled={item.disabled} disabled={item.disabled}
> >
{console.log("dis", item.disabled)}
<View <View
style={[ style={[
{ {

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

@ -1,29 +1,79 @@
import { useContext } from "react"; import { useCallback, useContext, useEffect, useState } from "react";
import { FlatList, View } from "react-native"; import { FlatList } from "react-native";
import { import {
AppContext, AppContext,
AppSelectedUserDevice, AppSelectedUserDevice,
AppStyles,
ModalContainer, ModalContainer,
} from "../../../../utils"; } from "../../../../utils";
import { MyPickerModalListItem } from "../../../../Components/Modal"; import { MyPickerModalListItem } from "../../../../Components/Modal";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { MyTextButton } from "../../../../Components/Button"; import { MyIconButton, MyTextButton } from "../../../../Components/Button";
import MyResult from "../../../../Components/Result"; import MyResult from "../../../../Components/Result";
import { useFocusEffect } from "@react-navigation/native";
export default function ChooseSceneModalContent({ navigation, route }) { export default function ChooseSceneModalContent({ navigation, route }) {
const appContext = useContext(AppContext); const appContext = useContext(AppContext);
const { t } = useTranslation(); const { t } = useTranslation();
const [isSortingAlphabeticalAscending, setIsSortingAlphabeticalAscending] =
useState(true);
const { device } = route.params; const { device } = route.params;
const deviceScenes = appContext.deviceScenes.filter( const deviceScenes = appContext.deviceScenes
(s) => s.deviceId === AppSelectedUserDevice.current.id .filter((s) => s.deviceId === AppSelectedUserDevice.current.id)
.sort((a, b) => {
if (isSortingAlphabeticalAscending) {
if (a.name < b.name) {
return -1;
}
if (a.name > b.name) {
return 1;
}
return 0;
} else {
if (a.name > b.name) {
return -1;
}
if (a.name < b.name) {
return 1;
}
return 0;
}
});
useFocusEffect(
useCallback(() => {
navigation.setOptions({
headerRight: () =>
deviceScenes.length > 0 && (
<MyIconButton
iconName={
isSortingAlphabeticalAscending
? "sort-alphabetical-ascending"
: "sort-alphabetical-descending"
}
iconSize={24}
style={AppStyles.headerNavigationIcons}
onPress={() => {
setIsSortingAlphabeticalAscending(
!isSortingAlphabeticalAscending
);
}}
/>
),
});
}, [isSortingAlphabeticalAscending])
); );
return ( return (
<ModalContainer withoutPadding> <ModalContainer withoutPadding>
<FlatList <FlatList
data={deviceScenes} data={deviceScenes}
extraData={isSortingAlphabeticalAscending}
ListEmptyComponent={ ListEmptyComponent={
<MyResult <MyResult
text={t("screens.device.scenes.modalChooseScene.noResult")} text={t("screens.device.scenes.modalChooseScene.noResult")}

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

@ -108,109 +108,105 @@ export default function SceneView({ navigation }) {
/> />
) : ( ) : (
<View> <View>
{deviceSceneActions === undefined || <FlatList
deviceSceneActions.length === 0 ? ( scrollEnabled={false}
<MyResult data={deviceSceneActions}
text={t("screens.device.scenes.infoNoActionsAvailableInScene")} keyExtractor={(item) => item.actionId}
iconName={"selection-search"} ListEmptyComponent={
/> <MyResult
) : ( text={t("screens.device.scenes.infoNoActionsAvailableInScene")}
<FlatList iconName={"selection-search"}
scrollEnabled={false} />
data={deviceSceneActions} }
keyExtractor={(item) => item.actionId} ListFooterComponent={
renderItem={({ item }) => { <MyTextButton
console.log("item", item); title={t("screens.device.scenes.buttonAddAction")}
styleContainer={{
alignItems: "center",
marginTop: 10,
}}
style={{ padding: 8 }}
actionColor={
deviceSceneActions === undefined ||
deviceSceneActions.length === 0
}
onPress={() =>
navigation.navigate("modalAddSceneAction", {
deviceFirmwareVersion: device.firmware.version,
})
}
iconName="plus-circle-outline"
/>
}
renderItem={({ item }) => {
console.log("item", item);
return ( return (
<View style={{ marginLeft: 10, marginRight: 10 }}> <View style={{ marginLeft: 10, marginRight: 10 }}>
<TouchableOpacity <TouchableOpacity
onPress={() => onPress={() =>
navigation.navigate("modalLayersEditAction", { navigation.navigate("modalLayersEditAction", {
actionId: item.actionId, actionId: item.actionId,
deviceFirmwareVersion: device.firmware.version, deviceFirmwareVersion: device.firmware.version,
}) })
} }
>
<View
style={{
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
}}
> >
<View <View
style={{ style={{ flexDirection: "row", alignItems: "center" }}
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
}}
> >
<View {getActionTypeIcon(item.type)}
style={{ flexDirection: "row", alignItems: "center" }} <View style={{ marginLeft: 12 }}>
> <Text
{getActionTypeIcon(item.type)} style={{
<View style={{ marginLeft: 12 }}> color: appContext.appTheme.text,
}}
>
Rainbow
</Text>
<View
style={{
flexDirection: "row",
alignItems: "center",
}}
>
<Text <Text
style={{ style={{
color: appContext.appTheme.text, color: appContext.appTheme.textSecondary,
}} }}
> >
Rainbow Set to
</Text> </Text>
<View <MyColorSwatch
style={{ style={{ marginLeft: 6 }}
flexDirection: "row", size={16}
alignItems: "center", backgroundColor={"red"}
}} />
> <MyColorSwatch
<Text size={16}
style={{ backgroundColor={"orange"}
color: appContext.appTheme.textSecondary, />
}} <MyColorSwatch size={16} backgroundColor={"blue"} />
>
Set to
</Text>
<MyColorSwatch
style={{ marginLeft: 6 }}
size={16}
backgroundColor={"red"}
/>
<MyColorSwatch
size={16}
backgroundColor={"orange"}
/>
<MyColorSwatch
size={16}
backgroundColor={"blue"}
/>
</View>
</View> </View>
</View> </View>
<MyIcon name="menu" size={20} />
</View> </View>
<Divider /> <MyIcon name="menu" size={20} />
</TouchableOpacity> </View>
</View>
);
}}
/>
)}
<MyTextButton <Divider />
title={t("screens.device.scenes.buttonAddAction")} </TouchableOpacity>
styleContainer={{ </View>
alignItems: "center", );
marginTop: 10,
}} }}
style={{ padding: 8 }}
actionColor={
deviceSceneActions === undefined ||
deviceSceneActions.length === 0
}
onPress={() =>
navigation.navigate("modalAddSceneAction", {
deviceFirmwareVersion: device.firmware.version,
})
}
iconName="plus-circle-outline"
/> />
</View> </View>
)} )}