mirror of
https://github.com/urosran/cally.git
synced 2025-07-11 07:37:25 +00:00

- Implemented saving of the number of completed todos per user - Changed "To do's" labels to "To Do"
225 lines
6.0 KiB
TypeScript
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;
|