frontend: add time picker to the triggers page

Pedro Lucas Porcellis porcellis@eletrotupi.com 14 days ago d3c5b58dc393528a72928debc31a06def83abf7f

Parents: 3c48957

2 file(s) changed

frontend/app/triggers/new.tsx +6 -0
frontend/components/ui/TimePicker.tsx +84 -0

frontend/app/triggers/new.tsx

@@ -17,6 +17,7 @@ import { Ionicons, MaterialIcons } from "@expo/vector-icons";
    import { useCreateTrigger } from "@/hooks";
    import { CategoryChips, CategoryOption } from "@/components/ui/CategoryChips";
    import { TriggerCategory } from "@/constants/triggers";
  + import { TimePicker } from "@/components/ui/TimePicker";
    
    const TRIGGER_CATEGORIES: CategoryOption<TriggerCategory>[] = [
      {

@@ -86,6 +87,11 @@ Identificar gatilhos ajuda a entender melhor seus padrões
                  emocionais
                </Text>
              </View>
  + 
  +           <Section>
  +             <SectionHeader title="Horário do Evento" />
  +             <TimePicker value={moment} onChange={setMoment} />
  +           </Section>
    
              <Section>
                <SectionHeader title="Selecionar uma categoria" />

frontend/components/ui/TimePicker.tsx

@@ -0,0 +1,84 @@
  + import { useState } from "react";
  + import { TouchableOpacity, Text, View, StyleSheet } from "react-native";
  + import DateTimePicker, {
  +   DateTimePickerEvent,
  + } from "@react-native-community/datetimepicker";
  + import { Ionicons } from "@expo/vector-icons";
  + 
  + type Props = {
  +   value: Date;
  +   onChange: (date: Date) => void;
  + };
  + 
  + function formatTime(date: Date): string {
  +   const hours = date.getHours();
  +   const minutes = date.getMinutes();
  +   const ampm = hours >= 12 ? "PM" : "AM";
  +   const h = hours % 12 || 12;
  +   const m = minutes.toString().padStart(2, "0");
  +   return `${h.toString().padStart(2, "0")}:${m}  ${ampm}`;
  + }
  + 
  + export const TimePicker: React.FC<Props> = ({ value, onChange }) => {
  +   const [show, setShow] = useState(false);
  + 
  +   const handleChange = (_: DateTimePickerEvent, selected?: Date) => {
  +     setShow(false);
  + 
  +     if (selected) {
  +       onChange(selected);
  +     }
  +   };
  + 
  +   return (
  +     <View>
  +       <TouchableOpacity
  +         style={styles.input}
  +         onPress={() => setShow(true)}
  +         activeOpacity={0.7}
  +       >
  +         <Text style={styles.timeText}>{formatTime(value)}</Text>
  +         <Ionicons
  +           name="time-outline"
  +           size={20}
  +           color="#8E8E9A"
  +           strokeWidth={1.5}
  +         />
  +       </TouchableOpacity>
  + 
  +       {show && (
  +         <DateTimePicker
  +           value={value}
  +           mode="time"
  +           display="default"
  +           onChange={handleChange}
  +           onTouchCancel={() => setShow(false)}
  +         />
  +       )}
  +     </View>
  +   );
  + };
  + 
  + const styles = StyleSheet.create({
  +   input: {
  +     flexDirection: "row",
  +     alignItems: "center",
  +     justifyContent: "space-between",
  +     backgroundColor: "#FFFFFF",
  +     borderRadius: 12,
  +     paddingHorizontal: 16,
  +     paddingVertical: 14,
  +     shadowColor: "#000",
  +     shadowOffset: { width: 0, height: 1 },
  +     shadowOpacity: 0.06,
  +     shadowRadius: 4,
  +     elevation: 1,
  +   },
  +   timeText: {
  +     fontSize: 16,
  +     fontWeight: "500",
  +     color: "#1C1C1E",
  +     letterSpacing: 0.5,
  +     fontVariant: ["tabular-nums"],
  +   },
  + });