Files
cally/components/pages/brain_dump/MoveBrainDump.tsx
2024-10-15 23:07:21 +02:00

185 lines
4.9 KiB
TypeScript

import React, { useEffect, useState } from "react";
import {
Button,
Dialog,
View,
Text,
TextField,
TouchableOpacity,
} from "react-native-ui-lib";
import { StyleSheet } from "react-native";
import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
import { IBrainDump, useBrainDumpContext } from "@/contexts/DumpContext";
import PenIcon from "@/assets/svgs/PenIcon";
import BinIcon from "@/assets/svgs/BinIcon";
import DropModalIcon from "@/assets/svgs/DropModalIcon";
import CloseXIcon from "@/assets/svgs/CloseXIcon";
import NavCalendarIcon from "@/assets/svgs/NavCalendarIcon";
import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
import RemindersIcon from "@/assets/svgs/RemindersIcon";
import MenuIcon from "@/assets/svgs/MenuIcon";
const MoveBrainDump = (props: {
item: IBrainDump;
isVisible: boolean;
setIsVisible: (value: boolean) => void;
}) => {
const { updateBrainDumpItem, deleteBrainDump } = useBrainDumpContext();
const [description, setDescription] = useState<string>(
props.item.description
);
useEffect(() => {
updateBrainDumpItem(props.item.id, { description: description });
}, [description]);
return (
<Dialog
bottom={true}
height={"90%"}
panDirection={PanningDirectionsEnum.DOWN}
onDismiss={() => props.setIsVisible(false)}
containerStyle={{
borderRadius: 10,
backgroundColor: "white",
width: "100%",
alignSelf: "stretch",
padding: 0,
paddingTop: 3,
margin: 0,
}}
visible={props.isVisible}
>
<View row spread paddingH-10 paddingV-15>
<Button
color="#05a8b6"
style={styles.topBtn}
iconSource={() => <CloseXIcon />}
onPress={() => {
props.setIsVisible(false);
}}
/>
<Button
style={styles.topBtn}
iconSource={() => <DropModalIcon />}
onPress={() => {
props.setIsVisible(false);
}}
/>
<View row>
<Button
style={styles.topBtn}
iconSource={() => <PenIcon />}
onPress={() => {
console.log("selview");
props.setIsVisible(false);
}}
/>
<Button
style={styles.topBtn}
marginL-5
iconSource={() => <BinIcon />}
onPress={() => {
deleteBrainDump(props.item.id);
props.setIsVisible(false);
}}
/>
</View>
</View>
<View centerH>
<Text text60R>{props.item.title} </Text>
</View>
<View style={styles.divider} />
<View row marginL-10 gap-5>
<View paddingT-8>
<MenuIcon width={20} height={12} />
</View>
<TextField
textAlignVertical="top"
multiline
placeholder="Add description"
numberOfLines={3}
value={description}
onChangeText={(value) => {
setDescription(value);
}}
/>
</View>
<View style={styles.divider} />
<View gap-20 paddingH-10>
<TouchableOpacity>
<View row centerV>
<NavToDosIcon
width={22}
color={"#919191"}
style={styles.optionsIcon}
/>
<Text style={styles.optionsReg}>Move to</Text>
<Text style={styles.optionsBold}> my to do's</Text>
</View>
</TouchableOpacity>
<TouchableOpacity>
<View row centerV>
<NavCalendarIcon
width={22}
height={22}
color={"#919191"}
style={styles.optionsIcon}
/>
<Text style={styles.optionsReg}>Move to</Text>
<Text style={styles.optionsBold}> my calendar</Text>
</View>
</TouchableOpacity>
<TouchableOpacity>
<View row centerV>
<RemindersIcon width={22} style={styles.optionsIcon} />
<Text style={styles.optionsReg}>Move to</Text>
<Text style={styles.optionsBold}> my reminders</Text>
</View>
</TouchableOpacity>
</View>
</Dialog>
);
};
const styles = StyleSheet.create({
divider: { height: 1, backgroundColor: "#e4e4e4", marginVertical: 15 },
gradient: {
height: "25%",
position: "absolute",
bottom: 0,
width: "100%",
},
buttonContainer: {
position: "absolute",
bottom: 25,
width: "100%",
},
button: {
backgroundColor: "rgb(253, 23, 117)",
paddingVertical: 20,
},
topBtn: {
backgroundColor: "white",
color: "#05a8b6",
},
rotateSwitch: {
marginLeft: 35,
marginBottom: 10,
marginTop: 25,
},
optionsReg: {
fontSize: 16,
fontFamily: "PlusJakartaSans_400Regular",
},
optionsBold: {
fontSize: 16,
fontFamily: "PlusJakartaSans_600SemiBold",
},
optionsIcon: {
marginRight: 10,
},
});
export default MoveBrainDump;