ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-11-26 16:34:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

calendar changes, fixes

Browse Source
This commit is contained in:
ivic00
2024-09-29 22:24:37 +02:00
parent 908eeab607
commit e17dabe801
8 changed files with 1040 additions and 1307 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
app/(auth)/calendar/index.tsx
View File

@ -2,11 +2,9 @@ import React, { useRef, useState } from "react";
import { LayoutChangeEvent, StyleSheet } from "react-native"; import { LayoutChangeEvent, StyleSheet } from "react-native";
import { Calendar } from "react-native-big-calendar"; import { Calendar } from "react-native-big-calendar";
import { import {
Button,
Picker, Picker,
PickerModes, PickerModes,
SegmentedControl, SegmentedControl,
Text,
View, View,
} from "react-native-ui-lib"; } from "react-native-ui-lib";
import { MaterialIcons } from "@expo/vector-icons"; import { MaterialIcons } from "@expo/vector-icons";
@ -54,7 +52,7 @@ export default function Screen() {
const handleSegmentChange = (index: number) => { const handleSegmentChange = (index: number) => {
const selectedMode = modeMap.get(index); const selectedMode = modeMap.get(index);
if (selectedMode) { if (selectedMode) {
setMode(selectedMode as "week" | "month" | "day"); setMode(selectedMode as "day" | "week" | "month");
} }
}; };
@ -71,81 +69,77 @@ export default function Screen() {
console.log(events); console.log(events);
return ( return (
<View style={{ flex: 1, height: "100%", padding: 10 }}> <View style={{ flex: 1, height: "100%", padding: 10 }}>
<HeaderTemplate <HeaderTemplate
message={"Let's get your week started!"} message={"Let's get your week started!"}
isWelcome={true} isWelcome={true}
/> />
<View
style={{ flex: 1, backgroundColor: "#fff", borderRadius: 30 }}
ref={calendarContainerRef}
onLayout={onLayout}
>
<View <View
style={{ style={{ flex: 1, backgroundColor: "#fff", borderRadius: 30 }}
flexDirection: "row", ref={calendarContainerRef}
justifyContent: "space-between", onLayout={onLayout}
alignItems: "center",
paddingHorizontal: 10,
paddingVertical: 8,
borderRadius: 20,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
backgroundColor: "white",
marginBottom: 10,
}}
> >
<Picker <View
value={months[selectedDate.getMonth()]} // Get the month from the date style={{
placeholder={"Select Month"} flexDirection: "row",
mode={PickerModes.SINGLE} justifyContent: "space-between",
onChange={(itemValue) => handleMonthChange(itemValue as string)} alignItems: "center",
trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"} />} paddingHorizontal: 10,
> paddingVertical: 8,
{months.map((month) => ( borderRadius: 20,
<Picker.Item key={month} label={month} value={month} /> borderBottomLeftRadius: 0,
))} borderBottomRightRadius: 0,
</Picker> backgroundColor: "white",
marginBottom: 10,
<View>
<SegmentedControl
segments={[{ label: "D" }, { label: "W" }, { label: "M" }]}
backgroundColor="#ececec"
inactiveColor="#919191"
activeBackgroundColor="#ea156c"
activeColor="white"
outlineColor="white"
outlineWidth={3}
style={{ backgroundColor: "green" }}
segmentLabelStyle={styles.segmentslblStyle}
onChangeIndex={handleSegmentChange}
initialIndex={
[...modeMap.entries()].find(
([_, value]) => value === mode
)?.[0] || 1
}
/>
</View>
</View>
{calendarHeight > 0 && (
<Calendar
bodyContainerStyle={styles.calHeader}
mode={mode}
events={events ?? []}
height={calendarHeight}
activeDate={selectedDate}
onSwipeEnd={(newDate) => {
console.log(newDate);
setSelectedDate(newDate);
}} }}
/> >
)} <Picker
</View> value={months[selectedDate.getMonth()]} // Get the month from the date
placeholder={"Select Month"}
mode={PickerModes.SINGLE}
onChange={(itemValue) => handleMonthChange(itemValue as string)}
trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"} />}
>
{months.map((month) => (
<Picker.Item key={month} label={month} value={month} />
))}
</Picker>
<View>
<SegmentedControl
segments={[{ label: "D" }, { label: "W" }, { label: "M" }]}
backgroundColor="#ececec"
inactiveColor="#919191"
activeBackgroundColor="#ea156c"
activeColor="white"
outlineColor="white"
outlineWidth={3}
style={{ backgroundColor: "green" }}
segmentLabelStyle={styles.segmentslblStyle}
onChangeIndex={handleSegmentChange}
initialIndex={mode === "day" ? 0 : mode === "week" ? 1 : 2}
/>
</View>
</View>
{calendarHeight > 0 && (
<Calendar
bodyContainerStyle={styles.calHeader}
mode={mode}
events={events ?? []}
height={calendarHeight}
activeDate={selectedDate}
onSwipeEnd={(newDate) => {
console.log(newDate);
setSelectedDate(newDate);
}}
/>
)}
</View>
<CalendarViewSwitch /> <CalendarViewSwitch />
<AddEventDialog /> <AddEventDialog />
</View> </View>
); );
} }
@ -154,6 +148,6 @@ const styles = StyleSheet.create({
fontSize: 14, fontSize: 14,
}, },
calHeader: { calHeader: {
borderWidth: 0 borderWidth: 0,
}, },
}); });

248
components/pages/calendar/AddEventDialog.tsx
View File

@ -1,103 +1,163 @@
import React, {useState} from "react"; import React, { useState } from "react";
import {MaterialIcons} from "@expo/vector-icons"; import {
import {Button, Card, Dialog, PanningProvider, Text, View} from "react-native-ui-lib"; AntDesign,
import {TouchableOpacity} from "react-native"; Feather,
import {ManuallyAddEventModal} from "@/components/pages/calendar/ManuallyAddEventModal"; MaterialCommunityIcons,
MaterialIcons,
} from "@expo/vector-icons";
import {
Button,
ButtonSize,
Card,
Dialog,
PanningProvider,
Text,
View,
} from "react-native-ui-lib";
import { TouchableOpacity } from "react-native";
import { ManuallyAddEventModal } from "@/components/pages/calendar/ManuallyAddEventModal";
import AddChore from "../todos/AddChore";
import AddChoreDialog from "../todos/AddChoreDialog";
import { ToDosContextProvider } from "@/contexts/ToDosContext";
import UploadImageDialog from "./UploadImageDialog";
export const AddEventDialog = () => { export const AddEventDialog = () => {
const [show, setShow] = useState(false); const [show, setShow] = useState(false);
const [showManualInputModal, setShowManualInputModal] = useState(false); const [showManualInputModal, setShowManualInputModal] = useState(false);
const [choreDialogVisible, setChoreDialogVisible] = useState<boolean>(false);
const [showUploadDialog, setShowUploadDialog] = useState<boolean>(false);
const handleOpenManualInputModal = () => { const handleOpenManualInputModal = () => {
setShow(false); setShow(false);
setTimeout(() => { setTimeout(() => {
setShowManualInputModal(true); setShowManualInputModal(true);
}, 500); }, 500);
}; };
return ( 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",
}}
centerV
color="white"
enableShadow
iconSource={() => (
<MaterialIcons name="add" size={22} color={"white"} />
)}
onPress={() => setShow(true)}
label="New"
text60R
/>
<Dialog
visible={show}
onDismiss={() => setShow(false)}
panDirection={PanningProvider.Directions.DOWN}
center
>
<Card
style={{
paddingHorizontal: 40,
paddingTop: 40,
paddingBottom: 20,
justifyContent: "center",
alignItems: "center",
}}
>
<Text text50R>Create a new event</Text>
<View style={{ marginTop: 20, alignItems: "center", width: "100%" }}>
<Button <Button
style={{ style={{
position: "absolute", marginBottom: 10,
bottom: 20, backgroundColor: "#ea156c",
right: 20, justifyContent: "center",
height: 40, width: "100%",
borderRadius: 30, paddingVertical: 13,
backgroundColor: "#fd1775", }}
alignItems: 'center', label="Scan Image"
justifyContent: 'center', onPress={handleScanImageDialog}
}} iconSource={() => (
centerV <Feather
color="white" name="camera"
enableShadow size={21}
iconSource={() => <MaterialIcons name="add" size={22} color={'white'}/>} style={{ marginRight: 7 }}
onPress={() => setShow(true)} color="white"
label="New" />
text60R )}
/> />
<Dialog <Button
visible={show} style={{
onDismiss={() => setShow(false)} marginBottom: 10,
panDirection={PanningProvider.Directions.DOWN} backgroundColor: "#e28800",
center justifyContent: "center",
> width: "100%",
<Card style={{padding: 20, justifyContent: 'center', alignItems: "center"}}> paddingVertical: 13,
<Text text60>Create a new event</Text> }}
label="Create Event"
onPress={handleOpenManualInputModal}
iconSource={() => (
<MaterialCommunityIcons
name="calendar-text-outline"
size={22}
style={{ marginRight: 5 }}
color="white"
/>
)}
/>
<View style={{marginTop: 20, alignItems: 'center'}}> <Button
<Button style={{
style={{ marginBottom: 10,
marginBottom: 10, backgroundColor: "#05a8b6",
backgroundColor: "#007bff", justifyContent: "center",
}} width: "100%",
onPress={handleOpenManualInputModal} paddingVertical: 13,
> }}
<Text style={{color: "white"}}>Create New</Text> label="Add To Do"
</Button> onPress={() => setChoreDialogVisible(true)}
iconSource={() => (
<AntDesign
name="checkcircleo"
size={20}
style={{ marginRight: 7 }}
color="white"
/>
)}
/>
</View>
<Button <TouchableOpacity onPress={() => setShow(false)}>
style={{ <Text style={{ marginTop: 20, color: "#999999" }} text70>Go back to calendar</Text>
marginBottom: 10, </TouchableOpacity>
backgroundColor: "#007bff", </Card>
opacity: 0.5 </Dialog>
}} <AddChoreDialog isVisible={choreDialogVisible} setIsVisible={setChoreDialogVisible} />
disabled <ManuallyAddEventModal
> show={showManualInputModal}
<Text style={{color: "white"}}>Event</Text> close={() => setShowManualInputModal(false)}
</Button> />
<UploadImageDialog show={showUploadDialog} setShow={setShowUploadDialog} />
<Button </>
style={{ </ToDosContextProvider>
marginBottom: 10, );
backgroundColor: "#007bff", };
opacity: 0.5
}}
disabled
>
<Text style={{color: "white"}}>To Do</Text>
</Button>
<Button
style={{
marginBottom: 10,
backgroundColor: "#007bff",
opacity: 0.5
}}
disabled
>
<Text style={{color: "white"}}>Upload Image</Text>
</Button>
</View>
<TouchableOpacity onPress={() => setShow(false)}>
<Text style={{marginTop: 20, color: "#007bff"}}>Go back</Text>
</TouchableOpacity>
</Card>
</Dialog>
<ManuallyAddEventModal show={showManualInputModal} close={() => setShowManualInputModal(false)}/>
</>
)
}

178
components/pages/calendar/UploadImageDialog.tsx Normal file
View File

@ -0,0 +1,178 @@
import {
View,
Text,
TouchableOpacity,
Image,
Button,
ButtonSize,
} from "react-native-ui-lib";
import React, { useState } from "react";
import { Dialog, PanningProvider, Card } from "react-native-ui-lib";
import { StyleSheet } from "react-native";
import { Feather, MaterialIcons } from "@expo/vector-icons";
import * as ImagePicker from "expo-image-picker";
interface IUploadDialogProps {
show: boolean;
setShow: (value: boolean) => void;
}
const UploadImageDialog = (uploadDialogProps: IUploadDialogProps) => {
const [selectedImage, setSelectedImage] = useState<string | null>(null);
const [imageTitle, setImageTitle] = useState<string | null>(null);
const handleImagePick = async () => {
const permissionResult =
await ImagePicker.requestMediaLibraryPermissionsAsync();
if (permissionResult.granted === false) {
alert("Permission to access camera roll is required!");
return;
}
const result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
});
// Check if the user canceled the image picker
if (!result.canceled) {
setSelectedImage(result.assets[0].uri);
setImageTitle(result.assets[0].fileName || "Untitled");
}
};
return (
<Dialog
visible={uploadDialogProps.show}
onDismiss={() => uploadDialogProps.setShow(false)}
panDirection={PanningProvider.Directions.DOWN}
center
>
<Card
style={{
paddingHorizontal: 40,
paddingTop: 20,
paddingBottom: 10,
justifyContent: "center",
alignItems: "center",
}}
>
<View centerH>
<Text text60 marginB-20>
Upload an Image
</Text>
{!selectedImage && (
<TouchableOpacity onPress={handleImagePick}>
<View
style={styles.uploadImgBox}
centerV
centerH
gap-8
marginB-20
>
<MaterialIcons
name="add-photo-alternate"
size={30}
color="#fd1775"
/>
<Text color="#fd1775" text70>
Click here to upload an image
</Text>
</View>
</TouchableOpacity>
)}
{selectedImage && (
<>
<View style={styles.imageContainer} row gap-15>
<Image
source={{ uri: selectedImage }}
style={styles.selectedImage}
/>
<View style={styles.imageInfo}>
<Text style={styles.imageTitle}>{imageTitle}</Text>
</View>
<TouchableOpacity
onPress={() => {
setSelectedImage(null);
setImageTitle("");
}}
>
<Feather
name="trash"
size={22}
color="#919191"
/>
</TouchableOpacity>
</View>
<Button
style={{
marginBottom: 10,
marginTop: 20,
backgroundColor: "#ea156c",
justifyContent: "center",
paddingVertical: 13,
alignItems: "center",
}}
label="Upload Image"
onPress={() => {}}
iconSource={() => (
<Feather
name="camera"
size={21}
style={{ marginRight: 7 }}
color="white"
/>
)}
/>
</>
)}
<TouchableOpacity onPress={() => uploadDialogProps.setShow(false)}>
<Text text80 color="#999999">
Go back
</Text>
</TouchableOpacity>
</View>
</Card>
</Dialog>
);
};
export default UploadImageDialog;
const styles = StyleSheet.create({
uploadImgBox: {
backgroundColor: "#ffe8f2",
width: "100%",
aspectRatio: 1.8,
borderRadius: 20,
borderWidth: 2,
borderColor: "#fd1775",
borderStyle: "dashed",
},
selectedImage: {
width: 60,
aspectRatio: 1,
borderRadius: 10,
},
imageContainer: {
alignItems: "center",
width: "80%",
borderWidth: 1,
borderColor: "#d9d9d9",
padding: 10,
borderRadius: 13,
},
imageInfo: {
marginLeft: 10,
},
imageTitle: {
fontSize: 16,
color: "#333",
},
});

2
components/pages/settings/SettingsPage.tsx
View File

@ -63,7 +63,7 @@ const SettingsPage = () => {
<Button <Button
backgroundColor="white" backgroundColor="white"
style={styles.mainBtn} style={styles.mainBtn}
label="Chore reward settings" label="To Do reward settings"
color="#ff9900" color="#ff9900"
iconSource={() => ( iconSource={() => (
<Octicons <Octicons

196
components/pages/todos/AddChore.tsx
View File

@ -21,27 +21,13 @@ import { PanningDirectionsEnum } from "react-native-ui-lib/src/components/pannin
import { repeatOptions, useToDosContext } from "@/contexts/ToDosContext"; import { repeatOptions, useToDosContext } from "@/contexts/ToDosContext";
import { setDate } from "date-fns"; import { setDate } from "date-fns";
import PointsSlider from "@/components/shared/PointsSlider"; import PointsSlider from "@/components/shared/PointsSlider";
import AddChoreDialog from "./AddChoreDialog";
const AddChore = () => { const AddChore = () => {
const { addToDo, toDos } = useToDosContext();
const [isVisible, setIsVisible] = useState<boolean>(false); const [isVisible, setIsVisible] = useState<boolean>(false);
const [newTitle, setNewTitle] = useState<string>("");
const [points, setPoints] = useState<number>(10);
const [choreDate, setChoreDate] = useState<Date | null>(new Date());
const [rotate, setRotate] = useState<boolean>(false);
const [repeatType, setRepeatType] = useState<string>("Every week");
const handleChange = (text: string) => {
const numericValue = parseInt(text, 10);
if (!isNaN(numericValue) && numericValue >= 0 && numericValue <= 100) {
setPoints(numericValue);
} else if (text === "") {
setPoints(0);
}
};
return ( return (
<LinearGradient <LinearGradient
@ -58,187 +44,11 @@ const AddChore = () => {
> >
<AntDesign name="plus" size={24} color="white" /> <AntDesign name="plus" size={24} color="white" />
<Text white text60R marginL-10> <Text white text60R marginL-10>
Create new chore Add to do
</Text> </Text>
</Button> </Button>
</View> </View>
<Dialog <AddChoreDialog isVisible={isVisible} setIsVisible={setIsVisible} />
bottom={true}
height={"90%"}
panDirection={PanningDirectionsEnum.DOWN}
onDismiss={() => setIsVisible(false)}
containerStyle={{
borderRadius: 10,
backgroundColor: "white",
width: "100%",
alignSelf: "stretch",
padding: 0,
paddingTop: 3,
margin: 0,
}}
visible={isVisible}
>
<View row spread>
<Button
color="#05a8b6"
style={styles.topBtn}
label="Cancel"
onPress={() => {
setIsVisible(false);
}}
/>
<Button
style={styles.topBtn}
iconSource={() => (
<Feather name="chevron-down" size={24} color="black" />
)}
onPress={() => {
setIsVisible(false);
}}
/>
<Button
color="#05a8b6"
style={styles.topBtn}
label="Save"
onPress={() => {
addToDo({
id: 0,
title: newTitle,
done: false,
date: choreDate,
points: points,
rotate: rotate,
repeatType: repeatType,
});
setIsVisible(false);
console.log(toDos);
}}
/>
</View>
<TextField
placeholder="Add a To Do"
value={newTitle}
onChangeText={(text) => {
setNewTitle(text);
}}
placeholderTextColor="#2d2d30"
text60R
marginT-15
marginL-30
/>
<View style={styles.divider} marginT-8 />
<View marginL-30 centerV>
<View row marginB-10>
{choreDate && (
<View row centerV>
<Feather name="calendar" size={25} color="#919191" />
<DateTimePicker
value={choreDate}
text70
marginL-8
onChange={(date) => {
setChoreDate(date);
}}
/>
</View>
)}
</View>
<View row centerV>
<AntDesign name="clockcircleo" size={24} color="#919191" />
<Picker
marginL-8
placeholder="Select Repeat Type"
value={repeatType}
onChange={(value) => {
if (value) {
if (value.toString() == "None") {
setChoreDate(null);
setRepeatType("None");
} else {
setRepeatType(value.toString());
setChoreDate(new Date());
}
}
}}
topBarProps={{ title: "Repeat" }}
style={{ marginVertical: 5 }}
>
{repeatOptions.map((option) => (
<Picker.Item
key={option.value}
label={option.label}
value={option.value}
/>
))}
</Picker>
</View>
</View>
<View style={styles.divider} />
<View marginH-30 marginB-10 row centerV>
<Ionicons name="person-circle-outline" size={28} color="#919191" />
<Text text70R marginL-10>
Assignees
</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="Assign"
/>
</View>
<View row marginH-13 marginT-13>
<View
marginL-30
style={{
aspectRatio: 1,
width: 50,
backgroundColor: "red",
borderRadius: 50,
}}
/>
<View
marginL-30
style={{
aspectRatio: 1,
width: 50,
backgroundColor: "red",
borderRadius: 50,
}}
/>
</View>
<View row centerV style={styles.rotateSwitch}>
<Text text80>Take Turns</Text>
<Switch
onColor={"#ea156c"}
value={rotate}
marginL-10
onValueChange={(value) => setRotate(value)}
/>
</View>
<View style={styles.divider} />
<View marginH-30 marginB-15 row centerV>
<Ionicons name="gift-outline" size={25} color="#919191" />
<Text text70BL marginL-10>
Reward Points
</Text>
</View>
<PointsSlider
points={points}
setPoints={setPoints}
handleChange={handleChange}
/>
</Dialog>
</LinearGradient> </LinearGradient>
); );
}; };

251
components/pages/todos/AddChoreDialog.tsx Normal file
View File

@ -0,0 +1,251 @@
import { View, Text, Button, Switch } from "react-native-ui-lib";
import React, { useState } from "react";
import PointsSlider from "@/components/shared/PointsSlider";
import { repeatOptions, useToDosContext } from "@/contexts/ToDosContext";
import { Feather, AntDesign, Ionicons } from "@expo/vector-icons";
import {
Dialog,
TextField,
DateTimePicker,
Picker,
ButtonSize,
} from "react-native-ui-lib";
import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
import { StyleSheet } from "react-native";
interface IAddChoreDialog {
isVisible: boolean;
setIsVisible: (value: boolean) => void;
}
const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
const { addToDo, toDos } = useToDosContext();
const [newTitle, setNewTitle] = useState<string>("");
const [points, setPoints] = useState<number>(10);
const [choreDate, setChoreDate] = useState<Date | null>(new Date());
const [rotate, setRotate] = useState<boolean>(false);
const [repeatType, setRepeatType] = useState<string>("Every week");
const handleChange = (text: string) => {
const numericValue = parseInt(text, 10);
if (!isNaN(numericValue) && numericValue >= 0 && numericValue <= 100) {
setPoints(numericValue);
} else if (text === "") {
setPoints(0);
}
};
return (
<Dialog
bottom={true}
height={"90%"}
panDirection={PanningDirectionsEnum.DOWN}
onDismiss={() => addChoreDialogProps.setIsVisible(false)}
containerStyle={{
borderRadius: 10,
backgroundColor: "white",
width: "100%",
alignSelf: "stretch",
padding: 0,
paddingTop: 3,
margin: 0,
}}
visible={addChoreDialogProps.isVisible}
>
<View row spread>
<Button
color="#05a8b6"
style={styles.topBtn}
label="Cancel"
onPress={() => {
addChoreDialogProps.setIsVisible(false);
}}
/>
<Button
style={styles.topBtn}
iconSource={() => (
<Feather name="chevron-down" size={24} color="black" />
)}
onPress={() => {
addChoreDialogProps.setIsVisible(false);
}}
/>
<Button
color="#05a8b6"
style={styles.topBtn}
label="Save"
onPress={() => {
try {
addToDo({
id: 0,
title: newTitle,
done: false,
date: choreDate,
points: points,
rotate: rotate,
repeatType: repeatType,
});
addChoreDialogProps.setIsVisible(false);
console.log(toDos);
} catch (error) {
console.error(error)
}
}}
/>
</View>
<TextField
placeholder="Add a To Do"
value={newTitle}
onChangeText={(text) => {
setNewTitle(text);
}}
placeholderTextColor="#2d2d30"
text60R
marginT-15
marginL-30
/>
<View style={styles.divider} marginT-8 />
<View marginL-30 centerV>
<View row marginB-10>
{choreDate && (
<View row centerV>
<Feather name="calendar" size={25} color="#919191" />
<DateTimePicker
value={choreDate}
text70
marginL-8
onChange={(date) => {
setChoreDate(date);
}}
/>
</View>
)}
</View>
<View row centerV>
<AntDesign name="clockcircleo" size={24} color="#919191" />
<Picker
marginL-8
placeholder="Select Repeat Type"
value={repeatType}
onChange={(value) => {
if (value) {
if (value.toString() == "None") {
setChoreDate(null);
setRepeatType("None");
} else {
setRepeatType(value.toString());
setChoreDate(new Date());
}
}
}}
topBarProps={{ title: "Repeat" }}
style={{ marginVertical: 5 }}
>
{repeatOptions.map((option) => (
<Picker.Item
key={option.value}
label={option.label}
value={option.value}
/>
))}
</Picker>
</View>
</View>
<View style={styles.divider} />
<View marginH-30 marginB-10 row centerV>
<Ionicons name="person-circle-outline" size={28} color="#919191" />
<Text text70R marginL-10>
Assignees
</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="Assign"
/>
</View>
<View row marginH-13 marginT-13>
<View
marginL-30
style={{
aspectRatio: 1,
width: 50,
backgroundColor: "red",
borderRadius: 50,
}}
/>
<View
marginL-30
style={{
aspectRatio: 1,
width: 50,
backgroundColor: "red",
borderRadius: 50,
}}
/>
</View>
<View row centerV style={styles.rotateSwitch}>
<Text text80>Take Turns</Text>
<Switch
onColor={"#ea156c"}
value={rotate}
marginL-10
onValueChange={(value) => setRotate(value)}
/>
</View>
<View style={styles.divider} />
<View marginH-30 marginB-15 row centerV>
<Ionicons name="gift-outline" size={25} color="#919191" />
<Text text70BL marginL-10>
Reward Points
</Text>
</View>
<PointsSlider
points={points}
setPoints={setPoints}
handleChange={handleChange}
/>
</Dialog>
);
};
export default AddChoreDialog;
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,
},
});

1
package.json
View File

@ -31,6 +31,7 @@
"expo-constants": "~16.0.2", "expo-constants": "~16.0.2",
"expo-dev-client": "~4.0.21", "expo-dev-client": "~4.0.21",
"expo-font": "~12.0.9", "expo-font": "~12.0.9",
"expo-image-picker": "~15.0.7",
"expo-linking": "~6.3.1", "expo-linking": "~6.3.1",
"expo-router": "~3.5.20", "expo-router": "~3.5.20",
"expo-splash-screen": "~0.27.5", "expo-splash-screen": "~0.27.5",

1327
yarn.lock
View File

File diff suppressed because it is too large Load Diff