Files
cally/components/pages/brain_dump/MoveBrainDump.tsx
Dejan c14910447e - Implemented saving of points per week per day for user
- Implemented saving of the number of completed todos per user
- Changed "To do's" labels to "To Do"
2024-12-25 22:41:53 +01:00

225 lines
6.0 KiB
TypeScript

import React, {useEffect, useRef, useState} from "react";
import {
Button,
Dialog,
View,
Text,
TextField,
TouchableOpacity, TextFieldRef,
} from "react-native-ui-lib";
import { Dimensions, 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";
import BrainDumpDialog from "./BrainDumpDialog";
const MoveBrainDump = (props: {
item: IBrainDump;
isVisible: boolean;
setIsVisible: (value: boolean) => void;
}) => {
const { updateBrainDumpItem, deleteBrainDump } = useBrainDumpContext();
const [description, setDescription] = useState<string>(
props.item.description
);
const [modalVisible, setModalVisible] = useState<boolean>(false);
const descriptionRef = useRef<TextFieldRef>(null)
const { width } = Dimensions.get("screen");
useEffect(() => {
updateBrainDumpItem(props.item.id, { description: description });
}, [description]);
useEffect(() => {
if (props.isVisible) {
setTimeout(() => {
descriptionRef?.current?.focus()
}, 500)
}
}, [props.isVisible]);
const showConfirmationDialog = () => {
setModalVisible(true);
};
const handleDeleteNote = () =>{
deleteBrainDump(props.item.id);
}
const hideConfirmationDialog = () => {
setModalVisible(false);
}
return (
<Dialog
bottom={true}
height={"90%"}
width={width}
panDirection={PanningDirectionsEnum.DOWN}
onDismiss={() => props.setIsVisible(false)}
containerStyle={{
borderRadius: 15,
backgroundColor: "white",
width: "100%",
alignSelf: "stretch",
padding: 10,
paddingTop: 3,
margin: 0,
}}
visible={props.isVisible}
>
<View center paddingT-8>
<TouchableOpacity onPress={() => props.setIsVisible(false)}>
<DropModalIcon />
</TouchableOpacity>
</View>
<View row spread paddingH-10 paddingB-15>
<Button
color="#05a8b6"
style={styles.topBtn}
iconSource={() => <CloseXIcon />}
onPress={() => {
props.setIsVisible(false);
}}
/>
<View row>
<Button
style={styles.topBtn}
marginR-10
iconSource={() => <PenIcon />}
onPress={() => {
console.log("selview");
props.setIsVisible(false);
}}
/>
<Button
style={styles.topBtn}
marginL-5
iconSource={() => <BinIcon />}
onPress={() => {
showConfirmationDialog();
}}
/>
</View>
</View>
<View centerH>
<Text style={styles.title}>{props.item.title} </Text>
</View>
<View style={styles.divider} />
<View row gap-5>
<View paddingT-8 marginR-5>
<MenuIcon width={20} height={12} />
</View>
<TextField
textAlignVertical="top"
multiline
fieldStyle={{
width: "94%",
}}
style={styles.description}
placeholder="Add description"
numberOfLines={3}
value={description}
onChangeText={(value) => {
setDescription(value);
}}
ref={descriptionRef}
returnKeyType="default"
/>
</View>
<View style={styles.divider} />
<View gap-20>
<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 dos</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>
<BrainDumpDialog visible={modalVisible} title={props.item.title} onDismiss={hideConfirmationDialog} onConfirm={handleDeleteNote} />
</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",
marginTop: -3,
},
rotateSwitch: {
marginLeft: 35,
marginBottom: 10,
marginTop: 25,
},
optionsReg: {
fontSize: 16,
fontFamily: "PlusJakartaSans_400Regular",
},
optionsBold: {
fontSize: 16,
fontFamily: "PlusJakartaSans_600SemiBold",
},
optionsIcon: {
marginRight: 10,
},
title: {
fontSize: 22,
fontFamily: "Manrope_500Medium",
},
description: {
fontFamily: "Manrope_400Regular",
fontSize: 14,
},
});
export default MoveBrainDump;