From f69378bdeece46db375e16df4218f5530962709c Mon Sep 17 00:00:00 2001 From: Diego Zafferani <43524162+DiegoZaff@users.noreply.github.com> Date: Sat, 7 Jan 2023 02:00:09 +0100 Subject: [PATCH 1/5] DateTimePicker --- package.json | 2 + .../FreeClass/DateTimePicker/DateTimeBox.tsx | 40 +++++++ .../DateTimePicker/DateTimePicker.tsx | 101 ++++++++++++++++++ src/pages/FreeClass/CampusChoice.tsx | 23 ++-- src/utils/dates.ts | 13 +++ yarn.lock | 14 +++ 6 files changed, 180 insertions(+), 13 deletions(-) create mode 100644 src/components/FreeClass/DateTimePicker/DateTimeBox.tsx create mode 100644 src/components/FreeClass/DateTimePicker/DateTimePicker.tsx diff --git a/package.json b/package.json index 850421cf..229909dd 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "@freakycoder/react-native-header-view": "^1.2.0", "@gorhom/bottom-sheet": "^4.4.3", "@react-native-async-storage/async-storage": "^1.17.10", + "@react-native-community/datetimepicker": "6.2.0", "@react-native-masked-view/masked-view": "0.2.7", "@react-navigation/native": "^6.0.13", "@react-navigation/stack": "^6.3.2", @@ -40,6 +41,7 @@ "react-native-app-intro-slider": "^4.0.4", "react-native-gesture-handler": "~2.5.0", "react-native-imaged-card-view": "^0.0.11", + "react-native-modal-datetime-picker": "^14.0.1", "react-native-reanimated": "~2.9.1", "react-native-safe-area-context": "4.3.1", "react-native-safe-area-view": "^1.1.1", diff --git a/src/components/FreeClass/DateTimePicker/DateTimeBox.tsx b/src/components/FreeClass/DateTimePicker/DateTimeBox.tsx new file mode 100644 index 00000000..bf00da86 --- /dev/null +++ b/src/components/FreeClass/DateTimePicker/DateTimeBox.tsx @@ -0,0 +1,40 @@ +import React, { FC } from "react" +import { View } from "react-native" +import { Text } from "components/Text" +import { usePalette } from "utils/colors" + +export interface DateTimeBoxProps { + value?: string +} +/** + * custom box which contains a 2 digit number, used + * inside {@link DateTimePicker} + */ +export const DateTimeBox: FC = props => { + const { isLight } = usePalette() + return ( + + + {props.value} + + + ) +} diff --git a/src/components/FreeClass/DateTimePicker/DateTimePicker.tsx b/src/components/FreeClass/DateTimePicker/DateTimePicker.tsx new file mode 100644 index 00000000..2a94711d --- /dev/null +++ b/src/components/FreeClass/DateTimePicker/DateTimePicker.tsx @@ -0,0 +1,101 @@ +import React, { FC, useState } from "react" +import { Pressable, View } from "react-native" +import { Text } from "components/Text" +import { usePalette } from "utils/colors" +import { DateTimeBox } from "./DateTimeBox" +import { destructureDate } from "utils/dates" +import DateTimePickerModal from "react-native-modal-datetime-picker" +export interface DateTimePickerProps { + date: Date + setDate: (date: Date) => void +} + +/** + * custom DateTime picker + */ +export const DateTimePicker: FC = props => { + const { year, month, day, hour, minute } = destructureDate(props.date) + const { isLight, primary } = usePalette() + + const [isDatePickerVisible, setDatePickerVisibility] = useState(false) + + //there would be also "date-time" but we don't use it + const [dateMode, setDateMode] = useState<"date" | "time">("date") + + const showDatePicker = () => { + setDateMode("date") + setDatePickerVisibility(true) + } + + const showTimePicker = () => { + setDateMode("time") + setDatePickerVisibility(true) + } + + const hideDateOrTimePicker = () => { + setDatePickerVisibility(false) + } + + const handleConfirm = (date: Date) => { + props.setDate(date) + console.log("A date has been picked: ", date) + hideDateOrTimePicker() + } + return ( + + + + + Date + + + + + + + + + + Time + + + + + + + + + + ) +} diff --git a/src/pages/FreeClass/CampusChoice.tsx b/src/pages/FreeClass/CampusChoice.tsx index 987b0c0a..b3765dce 100644 --- a/src/pages/FreeClass/CampusChoice.tsx +++ b/src/pages/FreeClass/CampusChoice.tsx @@ -4,6 +4,7 @@ import { View, Pressable, FlatList, Dimensions } from "react-native" import { usePalette } from "utils/colors" import { NavBar } from "components/NavBar" import { Title, BodyText } from "components/Text" +import { DateTimePicker } from "components/FreeClass/DateTimePicker/DateTimePicker" export interface CampusItem { id: number @@ -12,7 +13,7 @@ export interface CampusItem { export const CampusChoice: RootStackScreen<"CampusChoice"> = () => { const { navigate } = useNavigation() - const { homeBackground, background, primary } = usePalette() + const { homeBackground, background, primary, isLight } = usePalette() const [data, setData] = useState([ { id: 0, name: ["Bovisa", "Durando"] }, @@ -22,6 +23,10 @@ export const CampusChoice: RootStackScreen<"CampusChoice"> = () => { { id: 4, name: ["Mancinelli"] }, ]) + //non-ISO format for simplicity (local timezone) and + // compatibility with `handleConfirm` function + const [date, setDate] = useState(new Date()) + return ( = () => { > Campus - - Data Picker - + setDate(date)} + /> Date: Wed, 11 Jan 2023 22:15:22 +0100 Subject: [PATCH 2/5] Pr requested changes --- .../FreeClass/DateTimePicker/DateTimeBox.tsx | 1 - .../DateTimePicker/DateTimePicker.tsx | 30 ++++++++++++++----- 2 files changed, 22 insertions(+), 9 deletions(-) diff --git a/src/components/FreeClass/DateTimePicker/DateTimeBox.tsx b/src/components/FreeClass/DateTimePicker/DateTimeBox.tsx index bf00da86..7b5bc170 100644 --- a/src/components/FreeClass/DateTimePicker/DateTimeBox.tsx +++ b/src/components/FreeClass/DateTimePicker/DateTimeBox.tsx @@ -22,7 +22,6 @@ export const DateTimeBox: FC = props => { borderRadius: 5, justifyContent: "center", alignItems: "center", - marginLeft: 12, }} > void @@ -38,7 +39,6 @@ export const DateTimePicker: FC = props => { const handleConfirm = (date: Date) => { props.setDate(date) - console.log("A date has been picked: ", date) hideDateOrTimePicker() } return ( @@ -54,39 +54,44 @@ export const DateTimePicker: FC = props => { }} > - - Date - + Data + + . + . - - Time - + Ora + + : @@ -95,7 +100,16 @@ export const DateTimePicker: FC = props => { mode={dateMode} onConfirm={handleConfirm} onCancel={hideDateOrTimePicker} + date={props.date} /> ) } + +const styles = StyleSheet.create({ + dot: { + alignSelf: "flex-end", marginHorizontal: 4, fontSize: 14, + }, + colon: { alignSelf: "center", marginHorizontal: 4, fontSize: 14, } +}) + From e8c7754d50499baa37f925b221277322f7917fd1 Mon Sep 17 00:00:00 2001 From: DiegoZaff Date: Wed, 11 Jan 2023 22:18:19 +0100 Subject: [PATCH 3/5] changed Text into BodyText --- .../FreeClass/DateTimePicker/DateTimePicker.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/FreeClass/DateTimePicker/DateTimePicker.tsx b/src/components/FreeClass/DateTimePicker/DateTimePicker.tsx index 1b139dba..dd263a84 100644 --- a/src/components/FreeClass/DateTimePicker/DateTimePicker.tsx +++ b/src/components/FreeClass/DateTimePicker/DateTimePicker.tsx @@ -1,6 +1,6 @@ import React, { FC, useState } from "react" import { Pressable, View } from "react-native" -import { BodyText, Text } from "components/Text" +import { BodyText } from "components/Text" import { usePalette } from "utils/colors" import { DateTimeBox } from "./DateTimeBox" import { destructureDate } from "utils/dates" @@ -69,9 +69,9 @@ export const DateTimePicker: FC = props => { style={{ flexDirection: "row" }} > - . + . - . + . @@ -91,7 +91,7 @@ export const DateTimePicker: FC = props => { style={{ flexDirection: "row" }} > - : + : From 5bf559eee3c996d65bfe8e4f3eee463aa182f4c7 Mon Sep 17 00:00:00 2001 From: DiegoZaff Date: Wed, 11 Jan 2023 22:32:08 +0100 Subject: [PATCH 4/5] fix modal shows up twice --- src/components/FreeClass/DateTimePicker/DateTimePicker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/FreeClass/DateTimePicker/DateTimePicker.tsx b/src/components/FreeClass/DateTimePicker/DateTimePicker.tsx index dd263a84..651d352d 100644 --- a/src/components/FreeClass/DateTimePicker/DateTimePicker.tsx +++ b/src/components/FreeClass/DateTimePicker/DateTimePicker.tsx @@ -38,8 +38,8 @@ export const DateTimePicker: FC = props => { } const handleConfirm = (date: Date) => { - props.setDate(date) hideDateOrTimePicker() + props.setDate(date) } return ( From 8718ab4705cd43023396813add10dee69e1c208e Mon Sep 17 00:00:00 2001 From: DiegoZaff Date: Wed, 11 Jan 2023 22:35:52 +0100 Subject: [PATCH 5/5] prettier error --- .../DateTimePicker/DateTimePicker.tsx | 38 +++++++++++++++---- 1 file changed, 30 insertions(+), 8 deletions(-) diff --git a/src/components/FreeClass/DateTimePicker/DateTimePicker.tsx b/src/components/FreeClass/DateTimePicker/DateTimePicker.tsx index 651d352d..4fba75f2 100644 --- a/src/components/FreeClass/DateTimePicker/DateTimePicker.tsx +++ b/src/components/FreeClass/DateTimePicker/DateTimePicker.tsx @@ -58,7 +58,7 @@ export const DateTimePicker: FC = props => { style={{ color: isLight ? primary : "#fff", fontSize: 14, - marginRight: 12 + marginRight: 12, }} > Data @@ -69,9 +69,23 @@ export const DateTimePicker: FC = props => { style={{ flexDirection: "row" }} > - . + + . + - . + + . + @@ -80,7 +94,7 @@ export const DateTimePicker: FC = props => { color: isLight ? primary : "#fff", fontSize: 14, marginLeft: 28, - marginRight: 12 + marginRight: 12, }} > Ora @@ -91,7 +105,14 @@ export const DateTimePicker: FC = props => { style={{ flexDirection: "row" }} > - : + + : + @@ -108,8 +129,9 @@ export const DateTimePicker: FC = props => { const styles = StyleSheet.create({ dot: { - alignSelf: "flex-end", marginHorizontal: 4, fontSize: 14, + alignSelf: "flex-end", + marginHorizontal: 4, + fontSize: 14, }, - colon: { alignSelf: "center", marginHorizontal: 4, fontSize: 14, } + colon: { alignSelf: "center", marginHorizontal: 4, fontSize: 14 }, }) -