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 { 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,11 +43,11 @@ 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) => (
|
||||
@ -113,7 +113,7 @@ const styles = StyleSheet.create({
|
||||
height: 45,
|
||||
width: 45,
|
||||
backgroundColor: "#fcf4eb",
|
||||
marginRight: 10
|
||||
marginRight: 10,
|
||||
},
|
||||
});
|
||||
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": {
|
||||
"@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",
|
||||
|
@ -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",
|
||||
|
Reference in New Issue
Block a user