frontend: add time picker to the triggers page
Pedro Lucas Porcellis porcellis@eletrotupi.com · 4 months ago
d3c5b58dc393528a72928debc31a06def83abf7f Browse filesParents
3c48957Changed files
2
Additions
+90
Deletions
0
frontend/app/triggers/new.tsx
1 1
import {
2 2
View,
3 3
Text,
4 4
StyleSheet,
5 5
KeyboardAvoidingView,
15 15
import { Spacing, Typography, Colors, BorderRadius } from "@/constants/theme";
16 16
import { Ionicons, MaterialIcons } from "@expo/vector-icons";
17 17
import { useCreateTrigger } from "@/hooks";
18 18
import { CategoryChips, CategoryOption } from "@/components/ui/CategoryChips";
19 19
import { TriggerCategory } from "@/constants/triggers";
20 +
import { TimePicker } from "@/components/ui/TimePicker";
20 21
21 22
const TRIGGER_CATEGORIES: CategoryOption<TriggerCategory>[] = [
22 23
{
23 24
label: "Trabalho",
24 25
value: "WORK",
84 85
<Text style={styles.description}>
85 86
Identificar gatilhos ajuda a entender melhor seus padrões
86 87
emocionais
87 88
</Text>
88 89
</View>
90 +
91 +
<Section>
92 +
<SectionHeader title="Horário do Evento" />
93 +
<TimePicker value={moment} onChange={setMoment} />
94 +
</Section>
89 95
90 96
<Section>
91 97
<SectionHeader title="Selecionar uma categoria" />
92 98
<CategoryChips
93 99
options={TRIGGER_CATEGORIES}
159 165
},
160 166
keyboardView: {
161 167
flex: 1,
162 168
},
163 169
});
/dev/null → frontend/components/ui/TimePicker.tsx
1 +
import { useState } from "react";
2 +
import { TouchableOpacity, Text, View, StyleSheet } from "react-native";
3 +
import DateTimePicker, {
4 +
DateTimePickerEvent,
5 +
} from "@react-native-community/datetimepicker";
6 +
import { Ionicons } from "@expo/vector-icons";
7 +
8 +
type Props = {
9 +
value: Date;
10 +
onChange: (date: Date) => void;
11 +
};
12 +
13 +
function formatTime(date: Date): string {
14 +
const hours = date.getHours();
15 +
const minutes = date.getMinutes();
16 +
const ampm = hours >= 12 ? "PM" : "AM";
17 +
const h = hours % 12 || 12;
18 +
const m = minutes.toString().padStart(2, "0");
19 +
return `${h.toString().padStart(2, "0")}:${m} ${ampm}`;
20 +
}
21 +
22 +
export const TimePicker: React.FC<Props> = ({ value, onChange }) => {
23 +
const [show, setShow] = useState(false);
24 +
25 +
const handleChange = (_: DateTimePickerEvent, selected?: Date) => {
26 +
setShow(false);
27 +
28 +
if (selected) {
29 +
onChange(selected);
30 +
}
31 +
};
32 +
33 +
return (
34 +
<View>
35 +
<TouchableOpacity
36 +
style={styles.input}
37 +
onPress={() => setShow(true)}
38 +
activeOpacity={0.7}
39 +
>
40 +
<Text style={styles.timeText}>{formatTime(value)}</Text>
41 +
<Ionicons
42 +
name="time-outline"
43 +
size={20}
44 +
color="#8E8E9A"
45 +
strokeWidth={1.5}
46 +
/>
47 +
</TouchableOpacity>
48 +
49 +
{show && (
50 +
<DateTimePicker
51 +
value={value}
52 +
mode="time"
53 +
display="default"
54 +
onChange={handleChange}
55 +
onTouchCancel={() => setShow(false)}
56 +
/>
57 +
)}
58 +
</View>
59 +
);
60 +
};
61 +
62 +
const styles = StyleSheet.create({
63 +
input: {
64 +
flexDirection: "row",
65 +
alignItems: "center",
66 +
justifyContent: "space-between",
67 +
backgroundColor: "#FFFFFF",
68 +
borderRadius: 12,
69 +
paddingHorizontal: 16,
70 +
paddingVertical: 14,
71 +
shadowColor: "#000",
72 +
shadowOffset: { width: 0, height: 1 },
73 +
shadowOpacity: 0.06,
74 +
shadowRadius: 4,
75 +
elevation: 1,
76 +
},
77 +
timeText: {
78 +
fontSize: 16,
79 +
fontWeight: "500",
80 +
color: "#1C1C1E",
81 +
letterSpacing: 0.5,
82 +
fontVariant: ["tabular-nums"],
83 +
},
84 +
});