added new reminder modal

This commit is contained in:
ivic00
2024-08-03 19:44:02 +02:00
parent c3058e4464
commit 33421b2ef4
5 changed files with 321 additions and 16 deletions

View 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;

View File

@ -1,14 +1,8 @@
import { useState } from "react";
import { StyleSheet } from "react-native";
import {
Button,
Card,
Checkbox,
Icon,
ListItem,
Text,
View,
} from "react-native-ui-lib";
import { Button, Card, Checkbox, Text, View } from "react-native-ui-lib";
import AddReminderModal from "./addReminderModal";
import ButtonOutlined from "@/components/ui/ButtonOutlined";
interface Reminder {
title: string;
@ -18,6 +12,7 @@ interface Reminder {
}
const RemindersList = () => {
const [isModalVisible, setIsModalVisible] = useState(false);
const [reminders, setReminders] = useState<Reminder[]>([
{
title: "Shaving Time",
@ -32,8 +27,13 @@ const RemindersList = () => {
done: false,
},
]);
return (
<View style={styles.listContainer}>
<AddReminderModal
visible={isModalVisible}
onClose={() => setIsModalVisible(false)}
/>
<View
style={{
display: "flex",
@ -43,18 +43,18 @@ const RemindersList = () => {
}}
>
<Text text70BL>Reminders</Text>
<Button style={styles.button} size={Button.sizes.small}>
<Text text70L style={styles.buttonText}>
New reminder
</Text>
</Button>
<ButtonOutlined
title={"New Reminder"}
size={Button.sizes.small}
onPress={() => setIsModalVisible(true)}
/>
</View>
<View style={styles.cardList}>
{reminders.map((reminder, index) => (
<Card key={index} style={{ marginBottom: 10, padding: 15 }}>
<View style={styles.card} row>
<View row>
<View style={styles.icon}/>
<View style={styles.icon} />
<View>
<Text text70BL>{reminder.title}</Text>
<Text text80>
@ -113,7 +113,7 @@ const styles = StyleSheet.create({
height: 45,
width: 45,
backgroundColor: "#fcf4eb",
marginRight: 10
marginRight: 10,
},
});
export default RemindersList;

View 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
View File

@ -10,6 +10,7 @@
"dependencies": {
"@expo/vector-icons": "^14.0.2",
"@react-native-community/blur": "^4.4.0",
"@react-native-community/datetimepicker": "^8.2.0",
"@react-native-firebase/app": "^20.3.0",
"@react-native-firebase/auth": "^20.3.0",
"@react-native-firebase/crashlytics": "^20.3.0",
@ -7011,6 +7012,29 @@
"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": {
"version": "20.3.0",
"resolved": "https://registry.npmjs.org/@react-native-firebase/app/-/app-20.3.0.tgz",

View File

@ -17,6 +17,7 @@
"dependencies": {
"@expo/vector-icons": "^14.0.2",
"@react-native-community/blur": "^4.4.0",
"@react-native-community/datetimepicker": "^8.2.0",
"@react-native-firebase/app": "^20.3.0",
"@react-native-firebase/auth": "^20.3.0",
"@react-native-firebase/crashlytics": "^20.3.0",