mirror of
https://github.com/urosran/cally.git
synced 2025-07-16 01:56:16 +00:00
189 lines
5.3 KiB
TypeScript
189 lines
5.3 KiB
TypeScript
import React, { useState } from "react";
|
|
import {
|
|
AntDesign,
|
|
Feather,
|
|
MaterialCommunityIcons,
|
|
MaterialIcons,
|
|
} from "@expo/vector-icons";
|
|
import {
|
|
Button,
|
|
ButtonSize,
|
|
Card,
|
|
Dialog,
|
|
PanningProvider,
|
|
Text,
|
|
View,
|
|
} from "react-native-ui-lib";
|
|
import { StyleSheet, TouchableOpacity } from "react-native";
|
|
import { ManuallyAddEventModal } from "@/components/pages/calendar/ManuallyAddEventModal";
|
|
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";
|
|
|
|
export const AddEventDialog = () => {
|
|
const [show, setShow] = useState(false);
|
|
const [showManualInputModal, setShowManualInputModal] = useState(false);
|
|
const [choreDialogVisible, setChoreDialogVisible] = useState<boolean>(false);
|
|
const [showUploadDialog, setShowUploadDialog] = useState<boolean>(false);
|
|
|
|
const handleOpenManualInputModal = () => {
|
|
setShow(false);
|
|
setTimeout(() => {
|
|
setShowManualInputModal(true);
|
|
}, 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
|
|
style={{
|
|
marginBottom: 10,
|
|
backgroundColor: "#ea156c",
|
|
justifyContent: "center",
|
|
width: "100%",
|
|
paddingVertical: 13,
|
|
}}
|
|
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
|
|
style={{
|
|
marginBottom: 10,
|
|
backgroundColor: "#05a8b6",
|
|
justifyContent: "center",
|
|
width: "100%",
|
|
paddingVertical: 13,
|
|
}}
|
|
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}
|
|
/>
|
|
<ManuallyAddEventModal
|
|
show={showManualInputModal}
|
|
close={() => setShowManualInputModal(false)}
|
|
/>
|
|
<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 },
|
|
});
|