mirror of
https://github.com/urosran/cally.git
synced 2025-07-10 15:17:17 +00:00
added new reminder modal
This commit is contained in:
246
components/pages/reminders/addReminderModal.tsx
Normal file
246
components/pages/reminders/addReminderModal.tsx
Normal file
@ -0,0 +1,246 @@
|
|||||||
|
import { StyleSheet } from "react-native";
|
||||||
|
import React, { useState } from "react";
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
Text,
|
||||||
|
PanningProvider,
|
||||||
|
TextField,
|
||||||
|
Button,
|
||||||
|
View,
|
||||||
|
Checkbox,
|
||||||
|
Switch,
|
||||||
|
Picker,
|
||||||
|
} from "react-native-ui-lib";
|
||||||
|
import ButtonOutlined from "@/components/ui/ButtonOutlined";
|
||||||
|
import AntDesign from "@expo/vector-icons/AntDesign";
|
||||||
|
import Feather from "@expo/vector-icons/Feather";
|
||||||
|
import Ionicons from "@expo/vector-icons/Ionicons";
|
||||||
|
import { DateTimePicker } from "react-native-ui-lib";
|
||||||
|
import { TouchableOpacity } from "react-native-gesture-handler";
|
||||||
|
|
||||||
|
interface ReminderModalProps {
|
||||||
|
visible: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
/*onSave: (reminderText: string) => void;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
interface reminderOptions {
|
||||||
|
label: string;
|
||||||
|
value: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const AddReminderModal = (props: ReminderModalProps) => {
|
||||||
|
const { visible, onClose /*, onSave*/ } = props;
|
||||||
|
const [reminderTitle, setReminderTitle] = useState<string>("");
|
||||||
|
const [time, setTime] = useState(new Date());
|
||||||
|
const [autoRepeat, setAutoRepeat] = useState<boolean>(false);
|
||||||
|
const [reminder, setReminder] = useState<reminderOptions | undefined>({
|
||||||
|
label: "Remind me just in time",
|
||||||
|
value: "just-in-time",
|
||||||
|
});
|
||||||
|
|
||||||
|
const reminderOptions = [
|
||||||
|
{ label: "Remind me just in time", value: "just-in-time" },
|
||||||
|
{ label: "Remind me 5 minutes before", value: "5-min-before" },
|
||||||
|
{ label: "Remind me 10 minutes before", value: "10-min-before" },
|
||||||
|
{ label: "Remind me 15 minutes before", value: "15-min-before" },
|
||||||
|
{ label: "Remind me 30 minutes before", value: "30-min-before" },
|
||||||
|
{ label: "Remind me 1 hour before", value: "1-hr-before" },
|
||||||
|
{ label: "Remind me 1 day before", value: "1-day-before" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const handleDateTimeChange = (selectedTime: Date) => {
|
||||||
|
setTime(selectedTime);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog
|
||||||
|
visible={visible}
|
||||||
|
onDismiss={onClose}
|
||||||
|
panDirection={PanningProvider.Directions.RIGHT}
|
||||||
|
containerStyle={{ borderRadius: 12, backgroundColor: "white" }}
|
||||||
|
height="70%"
|
||||||
|
>
|
||||||
|
<View style={styles.container}>
|
||||||
|
<Text style={styles.title}>New Reminder</Text>
|
||||||
|
<View style={styles.divider} />
|
||||||
|
<View style={styles.inner}>
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "row",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
marginBottom: 10,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text text70>Profiles</Text>
|
||||||
|
<ButtonOutlined
|
||||||
|
title={"+ Add"}
|
||||||
|
size={Button.sizes.xSmall}
|
||||||
|
onPress={() => {}}
|
||||||
|
></ButtonOutlined>
|
||||||
|
</View>
|
||||||
|
<View style={styles.iconTitle}>
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
height: 25,
|
||||||
|
width: 25,
|
||||||
|
marginRight: 10,
|
||||||
|
borderRadius: 50,
|
||||||
|
backgroundColor: "#fcf4eb",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
value={reminderTitle}
|
||||||
|
onChangeText={(text) => setReminderTitle(text)}
|
||||||
|
placeholder="Reminder Title"
|
||||||
|
text70L
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View style={styles.divider} />
|
||||||
|
<View style={styles.inner}>
|
||||||
|
<Text text70>Reminder Time</Text>
|
||||||
|
<View style={styles.inputsBetween}>
|
||||||
|
<Feather name="calendar" size={20} color="black" />
|
||||||
|
<DateTimePicker
|
||||||
|
migrateDialog
|
||||||
|
value={time}
|
||||||
|
mode="date"
|
||||||
|
onChange={handleDateTimeChange}
|
||||||
|
text70
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<TouchableOpacity>
|
||||||
|
<View style={styles.inputsBetween}>
|
||||||
|
<AntDesign name="clockcircleo" size={20} color="black" />
|
||||||
|
<DateTimePicker
|
||||||
|
migrateDialog
|
||||||
|
value={time}
|
||||||
|
mode="time"
|
||||||
|
is24Hour={false}
|
||||||
|
onChange={handleDateTimeChange}
|
||||||
|
text70
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</TouchableOpacity>
|
||||||
|
<View style={styles.inputsStart}>
|
||||||
|
<Feather
|
||||||
|
name="bell"
|
||||||
|
size={19}
|
||||||
|
color="black"
|
||||||
|
style={{ marginRight: 7 }}
|
||||||
|
/>
|
||||||
|
<Picker
|
||||||
|
text70
|
||||||
|
value={reminder?.value}
|
||||||
|
onChange={(item: reminderOptions) => {
|
||||||
|
setReminder({ label: item.label, value: item.value });
|
||||||
|
}}
|
||||||
|
useDialog
|
||||||
|
fieldType="form"
|
||||||
|
placeholder="Select a reminder"
|
||||||
|
items={reminderOptions}
|
||||||
|
trailingAccessory={
|
||||||
|
<Feather
|
||||||
|
name="chevron-down"
|
||||||
|
style={{ marginLeft: "auto" }}
|
||||||
|
size={22}
|
||||||
|
color="black"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
></Picker>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View style={styles.divider} />
|
||||||
|
<View style={styles.inner}>
|
||||||
|
<View style={styles.inputsStart}>
|
||||||
|
<Ionicons
|
||||||
|
name="repeat-sharp"
|
||||||
|
size={25}
|
||||||
|
color="black"
|
||||||
|
style={{ marginRight: 7 }}
|
||||||
|
/>
|
||||||
|
<Text text70>Auto Repeat</Text>
|
||||||
|
<Switch
|
||||||
|
style={{ marginLeft: "auto" }}
|
||||||
|
onColor={"#00c87e"}
|
||||||
|
offColor={"gray"}
|
||||||
|
value={autoRepeat}
|
||||||
|
onValueChange={(value) => setAutoRepeat(value)}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View style={styles.divider} />
|
||||||
|
<View style={styles.inner}>
|
||||||
|
<View flex row>
|
||||||
|
<ButtonOutlined
|
||||||
|
title={"+ Add"}
|
||||||
|
size={Button.sizes.medium}
|
||||||
|
onPress={() => {}}
|
||||||
|
></ButtonOutlined>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
paddingVertical: 10,
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
justifyContent: 'space-between'
|
||||||
|
},
|
||||||
|
inner: {
|
||||||
|
paddingHorizontal: 20,
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
fontSize: 20,
|
||||||
|
fontWeight: "400",
|
||||||
|
textAlign: "center",
|
||||||
|
},
|
||||||
|
divider: {
|
||||||
|
width: "100%",
|
||||||
|
height: 1,
|
||||||
|
backgroundColor: "#E0E0E0",
|
||||||
|
marginVertical: 10,
|
||||||
|
},
|
||||||
|
iconTitle: {
|
||||||
|
padding: 10,
|
||||||
|
borderRadius: 10,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: "#E0E0E0",
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "row",
|
||||||
|
},
|
||||||
|
inputsBetween: {
|
||||||
|
paddingVertical: 12,
|
||||||
|
paddingHorizontal: 15,
|
||||||
|
marginVertical: 5,
|
||||||
|
borderRadius: 10,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: "#E0E0E0",
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
flexDirection: "row",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
},
|
||||||
|
inputsStart: {
|
||||||
|
paddingVertical: 12,
|
||||||
|
paddingHorizontal: 15,
|
||||||
|
marginVertical: 5,
|
||||||
|
borderRadius: 10,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: "#E0E0E0",
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
flexDirection: "row",
|
||||||
|
justifyContent: "flex-start",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default AddReminderModal;
|
@ -1,14 +1,8 @@
|
|||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { StyleSheet } from "react-native";
|
import { StyleSheet } from "react-native";
|
||||||
import {
|
import { Button, Card, Checkbox, Text, View } from "react-native-ui-lib";
|
||||||
Button,
|
import AddReminderModal from "./addReminderModal";
|
||||||
Card,
|
import ButtonOutlined from "@/components/ui/ButtonOutlined";
|
||||||
Checkbox,
|
|
||||||
Icon,
|
|
||||||
ListItem,
|
|
||||||
Text,
|
|
||||||
View,
|
|
||||||
} from "react-native-ui-lib";
|
|
||||||
|
|
||||||
interface Reminder {
|
interface Reminder {
|
||||||
title: string;
|
title: string;
|
||||||
@ -18,6 +12,7 @@ interface Reminder {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const RemindersList = () => {
|
const RemindersList = () => {
|
||||||
|
const [isModalVisible, setIsModalVisible] = useState(false);
|
||||||
const [reminders, setReminders] = useState<Reminder[]>([
|
const [reminders, setReminders] = useState<Reminder[]>([
|
||||||
{
|
{
|
||||||
title: "Shaving Time",
|
title: "Shaving Time",
|
||||||
@ -32,8 +27,13 @@ const RemindersList = () => {
|
|||||||
done: false,
|
done: false,
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={styles.listContainer}>
|
<View style={styles.listContainer}>
|
||||||
|
<AddReminderModal
|
||||||
|
visible={isModalVisible}
|
||||||
|
onClose={() => setIsModalVisible(false)}
|
||||||
|
/>
|
||||||
<View
|
<View
|
||||||
style={{
|
style={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
@ -43,18 +43,18 @@ const RemindersList = () => {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Text text70BL>Reminders</Text>
|
<Text text70BL>Reminders</Text>
|
||||||
<Button style={styles.button} size={Button.sizes.small}>
|
<ButtonOutlined
|
||||||
<Text text70L style={styles.buttonText}>
|
title={"New Reminder"}
|
||||||
New reminder
|
size={Button.sizes.small}
|
||||||
</Text>
|
onPress={() => setIsModalVisible(true)}
|
||||||
</Button>
|
/>
|
||||||
</View>
|
</View>
|
||||||
<View style={styles.cardList}>
|
<View style={styles.cardList}>
|
||||||
{reminders.map((reminder, index) => (
|
{reminders.map((reminder, index) => (
|
||||||
<Card key={index} style={{ marginBottom: 10, padding: 15 }}>
|
<Card key={index} style={{ marginBottom: 10, padding: 15 }}>
|
||||||
<View style={styles.card} row>
|
<View style={styles.card} row>
|
||||||
<View row>
|
<View row>
|
||||||
<View style={styles.icon}/>
|
<View style={styles.icon} />
|
||||||
<View>
|
<View>
|
||||||
<Text text70BL>{reminder.title}</Text>
|
<Text text70BL>{reminder.title}</Text>
|
||||||
<Text text80>
|
<Text text80>
|
||||||
@ -113,7 +113,7 @@ const styles = StyleSheet.create({
|
|||||||
height: 45,
|
height: 45,
|
||||||
width: 45,
|
width: 45,
|
||||||
backgroundColor: "#fcf4eb",
|
backgroundColor: "#fcf4eb",
|
||||||
marginRight: 10
|
marginRight: 10,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
export default RemindersList;
|
export default RemindersList;
|
||||||
|
34
components/ui/ButtonOutlined.tsx
Normal file
34
components/ui/ButtonOutlined.tsx
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
import { StyleSheet, View } from "react-native";
|
||||||
|
import React from "react";
|
||||||
|
import { Text, Button } from "react-native-ui-lib";
|
||||||
|
|
||||||
|
interface ButtonProps {
|
||||||
|
title: string;
|
||||||
|
size: keyof typeof Button.sizes;
|
||||||
|
onPress: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ButtonOutlined = (props: ButtonProps) => {
|
||||||
|
const { size, onPress, title } = props;
|
||||||
|
return (
|
||||||
|
<Button style={styles.button} size={size} onPress={onPress} avoidMinWidth>
|
||||||
|
<Text text80L style={styles.buttonText}>
|
||||||
|
{title}
|
||||||
|
</Text>
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default ButtonOutlined;
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
button: {
|
||||||
|
backgroundColor: "white",
|
||||||
|
color: "black",
|
||||||
|
borderColor: "lightgray",
|
||||||
|
borderWidth: 1,
|
||||||
|
borderRadius: 5,
|
||||||
|
padding: 0,
|
||||||
|
marginHorizontal: 0
|
||||||
|
},
|
||||||
|
buttonText: {
|
||||||
|
},
|
||||||
|
});
|
24
package-lock.json
generated
24
package-lock.json
generated
@ -10,6 +10,7 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@expo/vector-icons": "^14.0.2",
|
"@expo/vector-icons": "^14.0.2",
|
||||||
"@react-native-community/blur": "^4.4.0",
|
"@react-native-community/blur": "^4.4.0",
|
||||||
|
"@react-native-community/datetimepicker": "^8.2.0",
|
||||||
"@react-native-firebase/app": "^20.3.0",
|
"@react-native-firebase/app": "^20.3.0",
|
||||||
"@react-native-firebase/auth": "^20.3.0",
|
"@react-native-firebase/auth": "^20.3.0",
|
||||||
"@react-native-firebase/crashlytics": "^20.3.0",
|
"@react-native-firebase/crashlytics": "^20.3.0",
|
||||||
@ -7011,6 +7012,29 @@
|
|||||||
"node": ">=8"
|
"node": ">=8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@react-native-community/datetimepicker": {
|
||||||
|
"version": "8.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@react-native-community/datetimepicker/-/datetimepicker-8.2.0.tgz",
|
||||||
|
"integrity": "sha512-qrUPhiBvKGuG9Y+vOqsc56RPFcHa1SU2qbAMT0hfGkoFIj3FodE0VuPVrEa8fgy7kcD5NQmkZIKgHOBLV0+hWg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"invariant": "^2.2.4"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"expo": ">=50.0.0",
|
||||||
|
"react": "*",
|
||||||
|
"react-native": "*",
|
||||||
|
"react-native-windows": "*"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"expo": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"react-native-windows": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@react-native-firebase/app": {
|
"node_modules/@react-native-firebase/app": {
|
||||||
"version": "20.3.0",
|
"version": "20.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/@react-native-firebase/app/-/app-20.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/@react-native-firebase/app/-/app-20.3.0.tgz",
|
||||||
|
@ -17,6 +17,7 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@expo/vector-icons": "^14.0.2",
|
"@expo/vector-icons": "^14.0.2",
|
||||||
"@react-native-community/blur": "^4.4.0",
|
"@react-native-community/blur": "^4.4.0",
|
||||||
|
"@react-native-community/datetimepicker": "^8.2.0",
|
||||||
"@react-native-firebase/app": "^20.3.0",
|
"@react-native-firebase/app": "^20.3.0",
|
||||||
"@react-native-firebase/auth": "^20.3.0",
|
"@react-native-firebase/auth": "^20.3.0",
|
||||||
"@react-native-firebase/crashlytics": "^20.3.0",
|
"@react-native-firebase/crashlytics": "^20.3.0",
|
||||||
|
Reference in New Issue
Block a user