frontend: introduce a date picker component

Pedro Lucas Porcellis porcellis@eletrotupi.com 27 days ago 16e98ad4fc123f536ae1c082c199095289a3ee05
Parents: a8152cd
1 file(s) changed
frontend/components/ui/DatePickerField.tsx +90 -0
frontend/components/ui/DatePickerField.tsx
@@ -0,0 +1,90 @@
  + import { useState, useEffect } from "react";
  + import { View, Text, Pressable, StyleSheet, Platform } from "react-native";
  + import DateTimePicker from "@react-native-community/datetimepicker";
  + import { format } from "date-fns";
  + import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
  + import { Colors } from '@/constants/theme';
  + import { Label } from '@/components/ui/Input';
  + 
  + export default function DatePickerField({
  +   label,
  +   initialDate = new Date(),
  +   onChange,
  +   minimumDate,
  +   maximumDate,
  + }) {
  +   const [date, setDate] = useState(initialDate);
  +   const [show, setShow] = useState(false);
  + 
  +   useEffect(() => {
  +     setDate(initialDate);
  +   }, [initialDate]);
  + 
  +   const openPicker = () => setShow(true);
  + 
  +   const handleChange = (event, selectedDate) => {
  +     setShow(false);
  + 
  +     if (selectedDate) {
  +       setDate(selectedDate);
  +       if (onChange) onChange(selectedDate);
  +     }
  +   };
  + 
  +   const formatted = format(date, "dd/MM/yyyy");
  + 
  +   return (
  +     <View>
  +       <Label text={label} />
  + 
  +       <Pressable onPress={openPicker}
  +                  style={({ pressed }) => [styles.container, pressed && styles.pressed]}>
  +         <Text style={styles.dateText}>{formatted}</Text>
  +         <MaterialCommunityIcons name="calendar-outline" size={22} color="#6B7280" />
  +       </Pressable>
  + 
  +       {show && (
  +         <DateTimePicker
  +           value={date}
  +           mode="date"
  +           display={"default"}
  +           onChange={handleChange}
  +           minimumDate={minimumDate}
  +           maximumDate={maximumDate}
  +         />
  +       )}
  +     </View>
  +   );
  + }
  + 
  + const styles = StyleSheet.create({
  +   label: {
  +     fontWeight: '500',
  +     color: Colors.light.textSecondary,
  +     fontSize: 12,
  +     marginBottom: 8,
  +     letterSpacing: 0.5,
  +     textTransform: 'uppercase'
  +   },
  +   container: {
  +     flexDirection: "row",
  +     alignItems: "center",
  +     justifyContent: "space-between",
  +     backgroundColor: "#F3F4F6", // light gray pill
  +     paddingVertical: 14,
  +     paddingHorizontal: 16,
  +     borderRadius: 10,
  +     borderWidth: 0.5,
  +     borderColor: "#E5E7EB",
  +     minWidth: 220,
  +   },
  +   pressed: {
  +     opacity: 0.8,
  +   },
  +   dateText: {
  +     color: "#111827",
  +     fontSize: 16,
  +     fontWeight: "600",
  +   },
  + });
  + 