mirror of
https://github.com/urosran/cally.git
synced 2025-07-10 15:17:17 +00:00
177 lines
6.7 KiB
TypeScript
177 lines
6.7 KiB
TypeScript
import React, {useState} from "react";
|
|
import {MaterialIcons,} from "@expo/vector-icons";
|
|
import {Button, Card, Dialog, PanningProvider, Text, View,} from "react-native-ui-lib";
|
|
import {StyleSheet, TouchableOpacity} from "react-native";
|
|
import AddChoreDialog from "../todos/AddChoreDialog";
|
|
import {ToDosContextProvider} from "@/contexts/ToDosContext";
|
|
import UploadImageDialog from "./UploadImageDialog";
|
|
import CameraIcon from "@/assets/svgs/CameraIcon";
|
|
import CalendarIcon from "@/assets/svgs/CalendarIcon";
|
|
import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
|
|
import {useSetAtom} from "jotai";
|
|
import {selectedNewEventDateAtom} from "@/components/pages/calendar/atoms";
|
|
|
|
export const AddEventDialog = () => {
|
|
const [show, setShow] = useState(false);
|
|
const [choreDialogVisible, setChoreDialogVisible] = useState<boolean>(false);
|
|
const [showUploadDialog, setShowUploadDialog] = useState<boolean>(false);
|
|
const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom)
|
|
|
|
const handleOpenManualInputModal = () => {
|
|
setShow(false);
|
|
setTimeout(() => {
|
|
setSelectedNewEndDate(new Date());
|
|
}, 500);
|
|
};
|
|
|
|
const handleScanImageDialog = () => {
|
|
setShow(false);
|
|
setTimeout(() => {
|
|
setShowUploadDialog(true);
|
|
}, 100);
|
|
};
|
|
|
|
return (
|
|
<ToDosContextProvider>
|
|
<>
|
|
<Button
|
|
style={{
|
|
position: "absolute",
|
|
bottom: 20,
|
|
right: 20,
|
|
height: 40,
|
|
borderRadius: 30,
|
|
backgroundColor: "#fd1775",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
color="white"
|
|
enableShadow
|
|
onPress={() => setShow(true)}
|
|
>
|
|
<View row centerV centerH>
|
|
<MaterialIcons name="add" size={22} color={"white"}/>
|
|
<Text white style={{fontSize: 16, fontFamily: 'Manrope_600SemiBold'}}>
|
|
New
|
|
</Text>
|
|
</View>
|
|
</Button>
|
|
|
|
<Dialog
|
|
visible={show}
|
|
onDismiss={() => setShow(false)}
|
|
panDirection={PanningProvider.Directions.DOWN}
|
|
center
|
|
>
|
|
<Card style={styles.dialogCard}>
|
|
<Text text60 style={styles.modalTitle}>
|
|
Create a new event
|
|
</Text>
|
|
|
|
<View
|
|
style={{marginTop: 20, alignItems: "center", width: "100%"}}
|
|
>
|
|
<Button
|
|
disabled
|
|
style={{
|
|
marginBottom: 10,
|
|
// backgroundColor: "#ea156c",
|
|
justifyContent: "center",
|
|
width: "100%",
|
|
paddingVertical: 13,
|
|
opacity: 0.5
|
|
}}
|
|
label="Scan Image"
|
|
labelStyle={styles.btnLabel}
|
|
onPress={handleScanImageDialog}
|
|
iconSource={() => (
|
|
<CameraIcon color="white" style={styles.btnIcon}/>
|
|
)}
|
|
/>
|
|
|
|
<Button
|
|
style={{
|
|
marginBottom: 10,
|
|
backgroundColor: "#e28800",
|
|
justifyContent: "center",
|
|
width: "100%",
|
|
paddingVertical: 13,
|
|
}}
|
|
label="Create Event"
|
|
labelStyle={styles.btnLabel}
|
|
onPress={handleOpenManualInputModal}
|
|
iconSource={() => (
|
|
<CalendarIcon color={"white"} style={styles.btnIcon}/>
|
|
)}
|
|
/>
|
|
|
|
<Button
|
|
disabled
|
|
style={{
|
|
marginBottom: 10,
|
|
// backgroundColor: "#05a8b6",
|
|
justifyContent: "center",
|
|
width: "100%",
|
|
paddingVertical: 13,
|
|
opacity: 0.5
|
|
}}
|
|
label="Add To Do"
|
|
labelStyle={styles.btnLabel}
|
|
onPress={() => setChoreDialogVisible(true)}
|
|
iconSource={() => (
|
|
<NavToDosIcon
|
|
color={"white"}
|
|
width={23}
|
|
style={styles.btnIcon}
|
|
/>
|
|
)}
|
|
/>
|
|
</View>
|
|
|
|
<TouchableOpacity onPress={() => setShow(false)}>
|
|
<Text style={styles.bottomText} text70>
|
|
Go back to calendar
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</Card>
|
|
</Dialog>
|
|
<AddChoreDialog
|
|
isVisible={choreDialogVisible}
|
|
setIsVisible={setChoreDialogVisible}
|
|
/>
|
|
<UploadImageDialog
|
|
show={showUploadDialog}
|
|
setShow={setShowUploadDialog}
|
|
/>
|
|
</>
|
|
</ToDosContextProvider>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
modalTitle: {
|
|
fontSize: 22,
|
|
fontFamily: "Manrope_600SemiBold",
|
|
marginBottom: 16,
|
|
},
|
|
bottomText: {
|
|
marginTop: 20,
|
|
color: "#999999",
|
|
fontSize: 13.53,
|
|
fontFamily: "Poppins_500Medium",
|
|
},
|
|
dialogCard: {
|
|
paddingHorizontal: 40,
|
|
paddingTop: 35,
|
|
paddingBottom: 20,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
borderRadius: 20,
|
|
},
|
|
btnLabel: {
|
|
fontSize: 15,
|
|
fontFamily: "PlusJakartaSans_500Medium",
|
|
},
|
|
btnIcon: {marginRight: 10},
|
|
});
|