mirror of
https://github.com/urosran/cally.git
synced 2025-11-26 16:34:54 +00:00
Calendar page refactor
This commit is contained in:
Milan Paunovic
@ -1,490 +1,482 @@
|
||||
import {
|
||||
Avatar,
|
||||
Button,
|
||||
ButtonSize,
|
||||
Colors,
|
||||
DateTimePicker,
|
||||
LoaderScreen,
|
||||
Modal,
|
||||
Picker,
|
||||
Switch,
|
||||
Text,
|
||||
TextField,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
Button,
|
||||
ButtonSize,
|
||||
Colors,
|
||||
DateTimePicker,
|
||||
LoaderScreen,
|
||||
Modal,
|
||||
Switch,
|
||||
Text,
|
||||
TextField,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native-ui-lib";
|
||||
import { ScrollView } from "react-native-gesture-handler";
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
import { useState } from "react";
|
||||
import {
|
||||
AntDesign,
|
||||
Feather,
|
||||
Ionicons,
|
||||
MaterialIcons,
|
||||
} from "@expo/vector-icons";
|
||||
import { PickerMultiValue } from "react-native-ui-lib/src/components/picker/types";
|
||||
import { useAuthContext } from "@/contexts/AuthContext";
|
||||
import { useCreateEvent } from "@/hooks/firebase/useCreateEvent";
|
||||
import { EventData } from "@/hooks/firebase/types/eventData";
|
||||
import { addHours, setDate } from "date-fns";
|
||||
import {ScrollView} from "react-native-gesture-handler";
|
||||
import {useSafeAreaInsets} from "react-native-safe-area-context";
|
||||
import {useState} from "react";
|
||||
import {AntDesign, Feather, Ionicons,} from "@expo/vector-icons";
|
||||
import {PickerMultiValue} from "react-native-ui-lib/src/components/picker/types";
|
||||
import {useCreateEvent} from "@/hooks/firebase/useCreateEvent";
|
||||
import {EventData} from "@/hooks/firebase/types/eventData";
|
||||
import {addHours} from "date-fns";
|
||||
import DropModalIcon from "@/assets/svgs/DropModalIcon";
|
||||
import { CalendarEvent, useCalendarContext } from "@/contexts/CalendarContext";
|
||||
import { repeatOptions } from "@/contexts/ToDosContext";
|
||||
import { ImageBackground, StyleSheet } from "react-native";
|
||||
import {StyleSheet} from "react-native";
|
||||
import ClockIcon from "@/assets/svgs/ClockIcon";
|
||||
import LockIcon from "@/assets/svgs/LockIcon";
|
||||
import MenuIcon from "@/assets/svgs/MenuIcon";
|
||||
import CameraIcon from "@/assets/svgs/CameraIcon";
|
||||
import AssigneesDisplay from "@/components/shared/AssigneesDisplay";
|
||||
import {useAtom} from "jotai";
|
||||
import {selectedNewEventDateAtom} from "@/components/pages/calendar/atoms";
|
||||
|
||||
const daysOfWeek = [
|
||||
{ label: "Monday", value: "monday" },
|
||||
{ label: "Tuesday", value: "tuesday" },
|
||||
{ label: "Wednesday", value: "wednesday" },
|
||||
{ label: "Thursday", value: "thursday" },
|
||||
{ label: "Friday", value: "friday" },
|
||||
{ label: "Saturday", value: "saturday" },
|
||||
{ label: "Sunday", value: "sunday" },
|
||||
{label: "Monday", value: "monday"},
|
||||
{label: "Tuesday", value: "tuesday"},
|
||||
{label: "Wednesday", value: "wednesday"},
|
||||
{label: "Thursday", value: "thursday"},
|
||||
{label: "Friday", value: "friday"},
|
||||
{label: "Saturday", value: "saturday"},
|
||||
{label: "Sunday", value: "sunday"},
|
||||
];
|
||||
|
||||
export const ManuallyAddEventModal = ({
|
||||
show,
|
||||
close,
|
||||
initialDate,
|
||||
}: {
|
||||
show: boolean;
|
||||
close: () => void;
|
||||
initialDate?: Date;
|
||||
}) => {
|
||||
const { addEvent } = useCalendarContext();
|
||||
const { user } = useAuthContext();
|
||||
const insets = useSafeAreaInsets();
|
||||
export const ManuallyAddEventModal = () => {
|
||||
const insets = useSafeAreaInsets();
|
||||
|
||||
const [title, setTitle] = useState<string>("");
|
||||
const [selectedNewEventDate, setSelectedNewEndDate] = useAtom(selectedNewEventDateAtom)
|
||||
|
||||
const [isAllDay, setIsAllDay] = useState(false);
|
||||
const [isPrivate, setIsPrivate] = useState<boolean>(false);
|
||||
const [startTime, setStartTime] = useState(() => {
|
||||
const date = initialDate ?? new Date();
|
||||
date.setSeconds(0, 0);
|
||||
return date;
|
||||
});
|
||||
const [endTime, setEndTime] = useState(() => {
|
||||
const date = initialDate
|
||||
? addHours(initialDate, 1)
|
||||
: addHours(new Date(), 1);
|
||||
date.setSeconds(0, 0);
|
||||
return date;
|
||||
});
|
||||
|
||||
const [startDate, setStartDate] = useState(initialDate ?? new Date());
|
||||
const [endDate, setEndDate] = useState(initialDate ?? new Date());
|
||||
|
||||
const [repeatInterval, setRepeatInterval] = useState<PickerMultiValue>([]);
|
||||
|
||||
const { mutateAsync: createEvent, isLoading, isError } = useCreateEvent();
|
||||
|
||||
const formatDateTime = (date?: Date | string) => {
|
||||
if (!date) return undefined;
|
||||
return new Date(date).toLocaleDateString("en-US", {
|
||||
weekday: "long",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
});
|
||||
};
|
||||
|
||||
const combineDateAndTime = (date: Date, time: Date): Date => {
|
||||
const combined = new Date(date);
|
||||
combined.setHours(time.getHours());
|
||||
combined.setMinutes(time.getMinutes());
|
||||
combined.setSeconds(0);
|
||||
combined.setMilliseconds(0);
|
||||
return combined;
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
let finalStartDate: Date;
|
||||
let finalEndDate: Date;
|
||||
|
||||
if (isAllDay) {
|
||||
finalStartDate = new Date(startDate.setHours(0, 0, 0, 0));
|
||||
finalEndDate = new Date(startDate.setHours(0, 0, 0, 0));
|
||||
} else {
|
||||
finalStartDate = combineDateAndTime(startDate, startTime);
|
||||
finalEndDate = combineDateAndTime(endDate, endTime);
|
||||
const {show, close, initialDate} = {
|
||||
show: !!selectedNewEventDate,
|
||||
close: () => setSelectedNewEndDate(undefined),
|
||||
initialDate: selectedNewEventDate
|
||||
}
|
||||
|
||||
const eventData: Partial<EventData> = {
|
||||
title: title,
|
||||
startDate: finalStartDate,
|
||||
endDate: finalEndDate,
|
||||
allDay: isAllDay,
|
||||
const [title, setTitle] = useState<string>("");
|
||||
|
||||
const [isAllDay, setIsAllDay] = useState(false);
|
||||
const [isPrivate, setIsPrivate] = useState<boolean>(false);
|
||||
const [startTime, setStartTime] = useState(() => {
|
||||
const date = initialDate ?? new Date();
|
||||
date.setSeconds(0, 0);
|
||||
return date;
|
||||
});
|
||||
const [endTime, setEndTime] = useState(() => {
|
||||
const date = initialDate
|
||||
? addHours(initialDate, 1)
|
||||
: addHours(new Date(), 1);
|
||||
date.setSeconds(0, 0);
|
||||
return date;
|
||||
});
|
||||
|
||||
const [startDate, setStartDate] = useState(initialDate ?? new Date());
|
||||
const [endDate, setEndDate] = useState(initialDate ?? new Date());
|
||||
|
||||
const [repeatInterval, setRepeatInterval] = useState<PickerMultiValue>([]);
|
||||
|
||||
const {mutateAsync: createEvent, isLoading, isError} = useCreateEvent();
|
||||
|
||||
if (!selectedNewEventDate) return null;
|
||||
|
||||
const formatDateTime = (date?: Date | string) => {
|
||||
if (!date) return undefined;
|
||||
return new Date(date).toLocaleDateString("en-US", {
|
||||
weekday: "long",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
});
|
||||
};
|
||||
|
||||
await createEvent(eventData);
|
||||
const combineDateAndTime = (date: Date, time: Date): Date => {
|
||||
const combined = new Date(date);
|
||||
combined.setHours(time.getHours());
|
||||
combined.setMinutes(time.getMinutes());
|
||||
combined.setSeconds(0);
|
||||
combined.setMilliseconds(0);
|
||||
return combined;
|
||||
};
|
||||
|
||||
close();
|
||||
};
|
||||
const handleSave = async () => {
|
||||
let finalStartDate: Date;
|
||||
let finalEndDate: Date;
|
||||
|
||||
const getRepeatLabel = () => {
|
||||
const selectedDays = repeatInterval;
|
||||
const allDays = [
|
||||
"sunday",
|
||||
"monday",
|
||||
"tuesday",
|
||||
"wednesday",
|
||||
"thursday",
|
||||
"friday",
|
||||
"saturday",
|
||||
];
|
||||
const workDays = ["monday", "tuesday", "wednesday", "thursday", "friday"];
|
||||
if (isAllDay) {
|
||||
finalStartDate = new Date(startDate.setHours(0, 0, 0, 0));
|
||||
finalEndDate = new Date(startDate.setHours(0, 0, 0, 0));
|
||||
} else {
|
||||
finalStartDate = combineDateAndTime(startDate, startTime);
|
||||
finalEndDate = combineDateAndTime(endDate, endTime);
|
||||
}
|
||||
|
||||
const isEveryWorkDay = workDays.every((day) => selectedDays.includes(day));
|
||||
const eventData: Partial<EventData> = {
|
||||
title: title,
|
||||
startDate: finalStartDate,
|
||||
endDate: finalEndDate,
|
||||
allDay: isAllDay,
|
||||
};
|
||||
|
||||
const isEveryDay = allDays.every((day) => selectedDays.includes(day));
|
||||
await createEvent(eventData);
|
||||
|
||||
if (isEveryDay) {
|
||||
return "Every day";
|
||||
} else if (
|
||||
isEveryWorkDay &&
|
||||
!selectedDays.includes("saturday") &&
|
||||
!selectedDays.includes("sunday")
|
||||
) {
|
||||
return "Every work day";
|
||||
} else {
|
||||
return selectedDays
|
||||
.map((item) => daysOfWeek.find((day) => day.value === item)?.label)
|
||||
.join(", ");
|
||||
close();
|
||||
};
|
||||
|
||||
const getRepeatLabel = () => {
|
||||
const selectedDays = repeatInterval;
|
||||
const allDays = [
|
||||
"sunday",
|
||||
"monday",
|
||||
"tuesday",
|
||||
"wednesday",
|
||||
"thursday",
|
||||
"friday",
|
||||
"saturday",
|
||||
];
|
||||
const workDays = ["monday", "tuesday", "wednesday", "thursday", "friday"];
|
||||
|
||||
const isEveryWorkDay = workDays.every((day) => selectedDays.includes(day));
|
||||
|
||||
const isEveryDay = allDays.every((day) => selectedDays.includes(day));
|
||||
|
||||
if (isEveryDay) {
|
||||
return "Every day";
|
||||
} else if (
|
||||
isEveryWorkDay &&
|
||||
!selectedDays.includes("saturday") &&
|
||||
!selectedDays.includes("sunday")
|
||||
) {
|
||||
return "Every work day";
|
||||
} else {
|
||||
return selectedDays
|
||||
.map((item) => daysOfWeek.find((day) => day.value === item)?.label)
|
||||
.join(", ");
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading && !isError) {
|
||||
return (
|
||||
<Modal
|
||||
visible={show}
|
||||
animationType="slide"
|
||||
onRequestClose={close}
|
||||
transparent={false}
|
||||
>
|
||||
<LoaderScreen message={"Saving event..."} color={Colors.grey40}/>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading && !isError) {
|
||||
return (
|
||||
<Modal
|
||||
visible={show}
|
||||
animationType="slide"
|
||||
onRequestClose={close}
|
||||
transparent={false}
|
||||
>
|
||||
<LoaderScreen message={"Saving event..."} color={Colors.grey40} />
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
visible={show}
|
||||
animationType="slide"
|
||||
onRequestClose={close}
|
||||
transparent={false}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
backgroundColor: "#fff",
|
||||
paddingTop: insets.top, // Safe area inset for top
|
||||
paddingBottom: insets.bottom, // Safe area inset for bottom
|
||||
paddingLeft: insets.left, // Safe area inset for left
|
||||
paddingRight: insets.right, // Safe area inset for right
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
padding: 16,
|
||||
}}
|
||||
<Modal
|
||||
visible={show}
|
||||
animationType="slide"
|
||||
onRequestClose={close}
|
||||
transparent={false}
|
||||
>
|
||||
<TouchableOpacity onPress={close}>
|
||||
<Text
|
||||
style={{
|
||||
color: "#05a8b6",
|
||||
fontFamily: "PlusJakartaSans_400Regular",
|
||||
fontSize: 16,
|
||||
}}
|
||||
text70
|
||||
>
|
||||
Cancel
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
<DropModalIcon onPress={close} />
|
||||
<TouchableOpacity onPress={handleSave}>
|
||||
<Text
|
||||
style={{
|
||||
color: "#05a8b6",
|
||||
fontFamily: "PlusJakartaSans_400Regular",
|
||||
fontSize: 16,
|
||||
}}
|
||||
text70
|
||||
>
|
||||
Save
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<ScrollView>
|
||||
<TextField
|
||||
placeholder="Add event title"
|
||||
value={title}
|
||||
autoFocus
|
||||
onChangeText={(text) => {
|
||||
setTitle(text);
|
||||
}}
|
||||
placeholderTextColor="#2d2d30"
|
||||
style={{ fontFamily: "Manrope_500Medium", fontSize: 22 }}
|
||||
paddingT-15
|
||||
paddingL-30
|
||||
returnKeyType="next"
|
||||
/>
|
||||
<View style={styles.divider} marginT-8 />
|
||||
<View marginL-30 centerV>
|
||||
<View row spread marginB-10 centerV>
|
||||
<View row>
|
||||
<AntDesign name="clockcircleo" size={24} color="#919191" />
|
||||
<Text
|
||||
style={{
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
fontSize: 16,
|
||||
}}
|
||||
marginL-10
|
||||
>
|
||||
All day
|
||||
</Text>
|
||||
</View>
|
||||
<View right marginR-30>
|
||||
<Switch
|
||||
onColor={"#ea156c"}
|
||||
offColor={"#e1e1e2"}
|
||||
marginL-10
|
||||
value={isAllDay}
|
||||
onValueChange={(value) => setIsAllDay(value)}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<View row marginB-10 spread>
|
||||
<View row centerV>
|
||||
<Feather name="calendar" size={25} color="#919191" />
|
||||
<DateTimePicker
|
||||
value={startDate}
|
||||
onChange={(date) => {
|
||||
setStartDate(date);
|
||||
}}
|
||||
maximumDate={endDate}
|
||||
style={{
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
fontSize: 16,
|
||||
}}
|
||||
marginL-8
|
||||
/>
|
||||
</View>
|
||||
<DateTimePicker
|
||||
value={startTime}
|
||||
onChange={(date) => setStartTime(date)}
|
||||
maximumDate={endTime}
|
||||
minuteInterval={5}
|
||||
dateTimeFormatter={(date, mode) =>
|
||||
date.toLocaleTimeString("en-us", {
|
||||
hour: "numeric",
|
||||
minute: "numeric",
|
||||
})
|
||||
}
|
||||
mode="time"
|
||||
<View
|
||||
style={{
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
fontSize: 16,
|
||||
flex: 1,
|
||||
backgroundColor: "#fff",
|
||||
paddingTop: insets.top, // Safe area inset for top
|
||||
paddingBottom: insets.bottom, // Safe area inset for bottom
|
||||
paddingLeft: insets.left, // Safe area inset for left
|
||||
paddingRight: insets.right, // Safe area inset for right
|
||||
}}
|
||||
marginR-30
|
||||
/>
|
||||
</View>
|
||||
|
||||
{!isAllDay && (
|
||||
<View row marginB-10 spread>
|
||||
<View row centerV>
|
||||
<Feather name="calendar" size={25} color="#919191" />
|
||||
<DateTimePicker
|
||||
value={endDate}
|
||||
minimumDate={startDate}
|
||||
text70
|
||||
marginL-8
|
||||
onChange={(date) => {
|
||||
setEndDate(date);
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
fontSize: 16,
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
padding: 16,
|
||||
}}
|
||||
/>
|
||||
>
|
||||
<TouchableOpacity onPress={close}>
|
||||
<Text
|
||||
style={{
|
||||
color: "#05a8b6",
|
||||
fontFamily: "PlusJakartaSans_400Regular",
|
||||
fontSize: 16,
|
||||
}}
|
||||
text70
|
||||
>
|
||||
Cancel
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
<DropModalIcon onPress={close}/>
|
||||
<TouchableOpacity onPress={handleSave}>
|
||||
<Text
|
||||
style={{
|
||||
color: "#05a8b6",
|
||||
fontFamily: "PlusJakartaSans_400Regular",
|
||||
fontSize: 16,
|
||||
}}
|
||||
text70
|
||||
>
|
||||
Save
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<DateTimePicker
|
||||
value={endTime}
|
||||
onChange={(date) => setEndTime(date)}
|
||||
minimumDate={startTime}
|
||||
minuteInterval={5}
|
||||
dateTimeFormatter={(date, mode) =>
|
||||
date.toLocaleTimeString("en-us", {
|
||||
hour: "numeric",
|
||||
minute: "numeric",
|
||||
})
|
||||
}
|
||||
mode="time"
|
||||
style={{
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
fontSize: 16,
|
||||
}}
|
||||
marginR-30
|
||||
<ScrollView>
|
||||
<TextField
|
||||
placeholder="Add event title"
|
||||
value={title}
|
||||
autoFocus
|
||||
onChangeText={(text) => {
|
||||
setTitle(text);
|
||||
}}
|
||||
placeholderTextColor="#2d2d30"
|
||||
style={{fontFamily: "Manrope_500Medium", fontSize: 22}}
|
||||
paddingT-15
|
||||
paddingL-30
|
||||
returnKeyType="next"
|
||||
/>
|
||||
<View style={styles.divider} marginT-8/>
|
||||
<View marginL-30 centerV>
|
||||
<View row spread marginB-10 centerV>
|
||||
<View row>
|
||||
<AntDesign name="clockcircleo" size={24} color="#919191"/>
|
||||
<Text
|
||||
style={{
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
fontSize: 16,
|
||||
}}
|
||||
marginL-10
|
||||
>
|
||||
All day
|
||||
</Text>
|
||||
</View>
|
||||
<View right marginR-30>
|
||||
<Switch
|
||||
onColor={"#ea156c"}
|
||||
offColor={"#e1e1e2"}
|
||||
marginL-10
|
||||
value={isAllDay}
|
||||
onValueChange={(value) => setIsAllDay(value)}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<View row marginB-10 spread>
|
||||
<View row centerV>
|
||||
<Feather name="calendar" size={25} color="#919191"/>
|
||||
<DateTimePicker
|
||||
value={startDate}
|
||||
onChange={(date) => {
|
||||
setStartDate(date);
|
||||
}}
|
||||
maximumDate={endDate}
|
||||
style={{
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
fontSize: 16,
|
||||
}}
|
||||
marginL-8
|
||||
/>
|
||||
</View>
|
||||
<DateTimePicker
|
||||
value={startTime}
|
||||
onChange={(date) => setStartTime(date)}
|
||||
maximumDate={endTime}
|
||||
minuteInterval={5}
|
||||
dateTimeFormatter={(date, mode) =>
|
||||
date.toLocaleTimeString("en-us", {
|
||||
hour: "numeric",
|
||||
minute: "numeric",
|
||||
})
|
||||
}
|
||||
mode="time"
|
||||
style={{
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
fontSize: 16,
|
||||
}}
|
||||
marginR-30
|
||||
/>
|
||||
</View>
|
||||
|
||||
{!isAllDay && (
|
||||
<View row marginB-10 spread>
|
||||
<View row centerV>
|
||||
<Feather name="calendar" size={25} color="#919191"/>
|
||||
<DateTimePicker
|
||||
value={endDate}
|
||||
minimumDate={startDate}
|
||||
text70
|
||||
marginL-8
|
||||
onChange={(date) => {
|
||||
setEndDate(date);
|
||||
}}
|
||||
style={{
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
fontSize: 16,
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
<DateTimePicker
|
||||
value={endTime}
|
||||
onChange={(date) => setEndTime(date)}
|
||||
minimumDate={startTime}
|
||||
minuteInterval={5}
|
||||
dateTimeFormatter={(date, mode) =>
|
||||
date.toLocaleTimeString("en-us", {
|
||||
hour: "numeric",
|
||||
minute: "numeric",
|
||||
})
|
||||
}
|
||||
mode="time"
|
||||
style={{
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
fontSize: 16,
|
||||
}}
|
||||
marginR-30
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View style={styles.divider}/>
|
||||
|
||||
<View marginH-30 marginB-10 row centerV>
|
||||
<Ionicons name="person-circle-outline" size={28} color="#919191"/>
|
||||
<Text
|
||||
style={{fontFamily: "Manrope_600SemiBold", fontSize: 18}}
|
||||
marginL-10
|
||||
>
|
||||
Attendees
|
||||
</Text>
|
||||
<Button
|
||||
size={ButtonSize.small}
|
||||
paddingH-8
|
||||
iconSource={() => (
|
||||
<Ionicons name="add-outline" size={20} color="#ea156c"/>
|
||||
)}
|
||||
style={{
|
||||
marginLeft: "auto",
|
||||
borderRadius: 8,
|
||||
backgroundColor: "#ffe8f1",
|
||||
borderColor: "#ea156c",
|
||||
borderWidth: 1,
|
||||
}}
|
||||
color="#ea156c"
|
||||
label="Add"
|
||||
labelStyle={{fontFamily: "Manrope_600SemiBold", fontSize: 14}}
|
||||
/>
|
||||
</View>
|
||||
<View marginL-35>
|
||||
<AssigneesDisplay/>
|
||||
</View>
|
||||
<View style={styles.divider}/>
|
||||
<View marginH-30 marginB-0 row spread centerV>
|
||||
<View row centerV>
|
||||
<ClockIcon/>
|
||||
<Text
|
||||
style={{
|
||||
fontFamily: "Manrope_600SemiBold",
|
||||
fontSize: 18,
|
||||
}}
|
||||
marginL-10
|
||||
>
|
||||
Reminders
|
||||
</Text>
|
||||
</View>
|
||||
<View>
|
||||
<Button
|
||||
size={ButtonSize.small}
|
||||
paddingH-8
|
||||
iconSource={() => (
|
||||
<Ionicons name="add-outline" size={20} color="#ea156c"/>
|
||||
)}
|
||||
style={{
|
||||
marginLeft: "auto",
|
||||
borderRadius: 8,
|
||||
backgroundColor: "#ffe8f1",
|
||||
borderColor: "#ea156c",
|
||||
borderWidth: 1,
|
||||
}}
|
||||
labelStyle={{fontFamily: "Manrope_600SemiBold", fontSize: 14}}
|
||||
color="#ea156c"
|
||||
label="Set Reminder"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.divider}/>
|
||||
<View marginH-30 marginB-0 row spread centerV>
|
||||
<View row>
|
||||
<LockIcon/>
|
||||
<Text
|
||||
style={{
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
fontSize: 16,
|
||||
}}
|
||||
marginL-10
|
||||
>
|
||||
Mark as Private
|
||||
</Text>
|
||||
</View>
|
||||
<View>
|
||||
<Switch
|
||||
onColor={"#ea156c"}
|
||||
offColor={"#e1e1e2"}
|
||||
marginL-10
|
||||
value={isPrivate}
|
||||
onValueChange={(value) => setIsPrivate(value)}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.divider}/>
|
||||
<View marginH-30 marginB-0 row spread centerV>
|
||||
<View row centerV>
|
||||
<MenuIcon/>
|
||||
<Text
|
||||
style={{
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
fontSize: 16,
|
||||
}}
|
||||
marginL-10
|
||||
>
|
||||
Add Details
|
||||
</Text>
|
||||
</View>
|
||||
<View></View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
<Button
|
||||
marginH-30
|
||||
marginB-15
|
||||
label="Create event from image"
|
||||
text70
|
||||
style={{height: 47}}
|
||||
labelStyle={{fontFamily: "PlusJakartaSans_500Medium", fontSize: 15}}
|
||||
backgroundColor="#05a8b6"
|
||||
iconSource={() => (
|
||||
<View marginR-5>
|
||||
<CameraIcon color="white"/>
|
||||
</View>
|
||||
)}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View style={styles.divider} />
|
||||
|
||||
<View marginH-30 marginB-10 row centerV>
|
||||
<Ionicons name="person-circle-outline" size={28} color="#919191" />
|
||||
<Text
|
||||
style={{ fontFamily: "Manrope_600SemiBold", fontSize: 18 }}
|
||||
marginL-10
|
||||
>
|
||||
Attendees
|
||||
</Text>
|
||||
<Button
|
||||
size={ButtonSize.small}
|
||||
paddingH-8
|
||||
iconSource={() => (
|
||||
<Ionicons name="add-outline" size={20} color="#ea156c" />
|
||||
)}
|
||||
style={{
|
||||
marginLeft: "auto",
|
||||
borderRadius: 8,
|
||||
backgroundColor: "#ffe8f1",
|
||||
borderColor: "#ea156c",
|
||||
borderWidth: 1,
|
||||
}}
|
||||
color="#ea156c"
|
||||
label="Add"
|
||||
labelStyle={{ fontFamily: "Manrope_600SemiBold", fontSize: 14 }}
|
||||
/>
|
||||
</View>
|
||||
<View marginL-35>
|
||||
<AssigneesDisplay />
|
||||
</View>
|
||||
<View style={styles.divider} />
|
||||
<View marginH-30 marginB-0 row spread centerV>
|
||||
<View row centerV>
|
||||
<ClockIcon />
|
||||
<Text
|
||||
style={{
|
||||
fontFamily: "Manrope_600SemiBold",
|
||||
fontSize: 18,
|
||||
}}
|
||||
marginL-10
|
||||
>
|
||||
Reminders
|
||||
</Text>
|
||||
</View>
|
||||
<View>
|
||||
<Button
|
||||
size={ButtonSize.small}
|
||||
paddingH-8
|
||||
iconSource={() => (
|
||||
<Ionicons name="add-outline" size={20} color="#ea156c" />
|
||||
)}
|
||||
style={{
|
||||
marginLeft: "auto",
|
||||
borderRadius: 8,
|
||||
backgroundColor: "#ffe8f1",
|
||||
borderColor: "#ea156c",
|
||||
borderWidth: 1,
|
||||
}}
|
||||
labelStyle={{ fontFamily: "Manrope_600SemiBold", fontSize: 14 }}
|
||||
color="#ea156c"
|
||||
label="Set Reminder"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.divider} />
|
||||
<View marginH-30 marginB-0 row spread centerV>
|
||||
<View row>
|
||||
<LockIcon />
|
||||
<Text
|
||||
style={{
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
fontSize: 16,
|
||||
}}
|
||||
marginL-10
|
||||
>
|
||||
Mark as Private
|
||||
</Text>
|
||||
</View>
|
||||
<View>
|
||||
<Switch
|
||||
onColor={"#ea156c"}
|
||||
offColor={"#e1e1e2"}
|
||||
marginL-10
|
||||
value={isPrivate}
|
||||
onValueChange={(value) => setIsPrivate(value)}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.divider} />
|
||||
<View marginH-30 marginB-0 row spread centerV>
|
||||
<View row centerV>
|
||||
<MenuIcon />
|
||||
<Text
|
||||
style={{
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
fontSize: 16,
|
||||
}}
|
||||
marginL-10
|
||||
>
|
||||
Add Details
|
||||
</Text>
|
||||
</View>
|
||||
<View></View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
<Button
|
||||
marginH-30
|
||||
marginB-15
|
||||
label="Create event from image"
|
||||
text70
|
||||
style={{ height: 47 }}
|
||||
labelStyle={{ fontFamily: "PlusJakartaSans_500Medium", fontSize: 15 }}
|
||||
backgroundColor="#05a8b6"
|
||||
iconSource={() => (
|
||||
<View marginR-5>
|
||||
<CameraIcon color="white" />
|
||||
</View>
|
||||
)}
|
||||
/>
|
||||
</View>
|
||||
</Modal>
|
||||
);
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
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,
|
||||
},
|
||||
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,
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user