related-ui-components 1.3.3 → 1.3.5

package/src/components/TravelBooking/FlightForm.tsx

@@ -0,0 +1,452 @@
+import { ThemeType, useTheme } from "@/theme";
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+} from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import CustomInput from "../Input/Input";
+import DateRangePicker from "../DateRangePicker/DateRangePicker"; 
+import SuggestionList from "../Suggestions/SuggestionList"; 
+import { FlightSuggestions, FormInputType } from "./types"; 
+import { TextInput } from "react-native-gesture-handler";
+
+// --- Helper Types ---
+type LocationData = string;
+
+// --- Component Props ---
+export interface FlightFormProps {
+  initialFromLocation?: LocationData;
+  initialToLocation?: LocationData;
+  initialDepartureDate?: string; // Expect YYYY-MM-DD string
+  initialReturnDate?: string; // Expect YYYY-MM-DD string
+
+  onInputFocus?: (input: FormInputType) => void;
+  onSwapPress?: (
+    currentFrom: LocationData | undefined,
+    currentTo: LocationData | undefined
+  ) => void;
+  onSearchPress?: (details: {
+    from: LocationData | undefined;
+    to: LocationData | undefined;
+    departure: string | undefined; // Send YYYY-MM-DD
+    return?: string | undefined; // Send YYYY-MM-DD
+  }) => void;
+  onTextChange?: (text: string) => void;
+
+  fromLabel?: string;
+  fromPlaceholder?: string;
+
+  toLabel?: string;
+  toPlaceholder?: string;
+
+  departureLabel?: string;
+  returnLabel?: string;
+  swapIconName?: keyof typeof Ionicons.glyphMap;
+  searchIconName?: keyof typeof Ionicons.glyphMap;
+  calendarThemeOverrides?: object; // Passed to DateRangePicker
+
+  isOneWay?: boolean;
+
+  suggestionData?: FlightSuggestions[];
+
+  // --- Style Props ---
+  containerStyle?: StyleProp<ViewStyle>; 
+  inputGroupContainerStyle?: StyleProp<ViewStyle>; 
+  inputWrapperStyle?: StyleProp<ViewStyle>; 
+  customInputContainerStyle?: StyleProp<ViewStyle>; 
+  labelStyle?: StyleProp<TextStyle>; 
+  swapButtonContainerStyle?: StyleProp<ViewStyle>;
+  swapButtonStyle?: StyleProp<ViewStyle>;
+  swapIconStyle?: StyleProp<TextStyle>;
+  departureRowStyle?: StyleProp<ViewStyle>; 
+  searchButtonStyle?: StyleProp<ViewStyle>;
+  searchIconStyle?: StyleProp<TextStyle>; 
+
+  // DateRangePicker specific styles (passed down)
+  dateRangePickerOuterContainerStyle?: StyleProp<ViewStyle>;
+  dateRangePickerLabelStyle?: StyleProp<TextStyle>;
+  dateRangePickerInputGroupStyle?: StyleProp<ViewStyle>;
+  dateRangePickerCalendarContainerStyle?: StyleProp<ViewStyle>; 
+
+  // SuggestionList specific styles
+  suggestionListContainerStyle?: StyleProp<ViewStyle>;
+  // Styles for the default suggestion item rendering
+  suggestionItemGroupStyle?: StyleProp<ViewStyle>; 
+  suggestionCityRowStyle?: StyleProp<ViewStyle>; 
+  suggestionCityIconStyle?: StyleProp<TextStyle>; 
+  suggestionCityTextStyle?: StyleProp<TextStyle>; 
+  suggestionAirportTouchableStyle?: StyleProp<ViewStyle>;
+  suggestionAirportIconStyle?: StyleProp<TextStyle>;
+  suggestionAirportTextStyle?: StyleProp<TextStyle>; 
+}
+// --- Component ---
+const FlightForm: React.FC<FlightFormProps> = ({
+  initialFromLocation = "Beirut, Beirut Intl Arpt - BEY",
+  initialToLocation = "Dubai, Dubai Intl Arpt - DXB",
+  initialDepartureDate,
+  initialReturnDate,
+  onSwapPress,
+  onSearchPress,
+  onInputFocus,
+  onTextChange,
+  fromLabel = "FROM",
+  toLabel = "TO",
+  fromPlaceholder = "From Where?",
+  toPlaceholder = "To Where?",
+  departureLabel = "DEPARTURE",
+  returnLabel = "RETURN",
+  swapIconName = "swap-horizontal",
+  searchIconName = "search",
+  calendarThemeOverrides = {},
+  isOneWay,
+  suggestionData,
+  // Style Props
+  containerStyle,
+  inputGroupContainerStyle,
+  inputWrapperStyle,
+  customInputContainerStyle, // Renamed from inputStyle for clarity
+  labelStyle,
+  swapButtonContainerStyle,
+  swapButtonStyle,
+  swapIconStyle,
+  departureRowStyle,
+  searchButtonStyle,
+  searchIconStyle,
+  dateRangePickerOuterContainerStyle,
+  dateRangePickerLabelStyle,
+  dateRangePickerInputGroupStyle,
+  dateRangePickerCalendarContainerStyle,
+  suggestionListContainerStyle,
+  suggestionItemGroupStyle,
+  suggestionCityRowStyle,
+  suggestionCityIconStyle,
+  suggestionCityTextStyle,
+  suggestionAirportTouchableStyle,
+  suggestionAirportIconStyle,
+  suggestionAirportTextStyle,
+}) => {
+  const { theme, isRTL } = useTheme();
+  const styles = useMemo(() => themedStyles(theme, isRTL), [theme, isRTL]);
+  const toLocationInput = useRef<TextInput>(null);
+  const fromLocationInput = useRef<TextInput>(null);
+
+  // --- State ---
+  const [fromLocation, setFromLocation] = useState<LocationData | undefined>(
+    initialFromLocation
+  );
+  const [toLocation, setToLocation] = useState<LocationData | undefined>(
+    initialToLocation
+  );
+  const [departureDate, setDepartureDate] = useState<string | undefined>(
+    initialDepartureDate
+  );
+  const [returnDate, setReturnDate] = useState<string | undefined>(
+    initialReturnDate
+  );
+  const [focusedInput, setFocusedInput] = useState<FormInputType>();
+
+  // --- Handlers ---
+  const handleSwap = useCallback(() => {
+    const currentFrom = fromLocation;
+    const currentTo = toLocation;
+    setFromLocation(currentTo);
+    setToLocation(currentFrom);
+    onSwapPress?.(currentFrom, currentTo);
+  }, [fromLocation, toLocation, onSwapPress]);
+
+  const handleSearch = useCallback(() => {
+    onSearchPress?.({
+      from: fromLocation,
+      to: toLocation,
+      departure: departureDate,
+      return: isOneWay ? undefined : returnDate, // Only send return if not one way
+    });
+  }, [
+    fromLocation,
+    toLocation,
+    departureDate,
+    returnDate,
+    isOneWay,
+    onSearchPress,
+  ]);
+
+  // --- Default Suggestion Renderer (Now Stylable) ---
+  const suggestionRenderItem = (item: FlightSuggestions) => (
+    <View key={item.id} style={[styles.suggestionItemGroup, suggestionItemGroupStyle]}>
+      <View style={[styles.suggestionCityRow, suggestionCityRowStyle]}>
+        <Ionicons
+          name="airplane" // Consider making icon name a prop too if needed
+          size={20}
+          color={theme.primary}
+          style={[styles.suggestionCityIcon, suggestionCityIconStyle]}
+        />
+        <Text style={[styles.suggestionCityText, suggestionCityTextStyle]}>
+          {item.city}
+        </Text>
+      </View>
+      {item.airports.map((airport, index) => (
+        <TouchableOpacity
+          key={`${item.id}-${index}`} 
+          style={[
+            styles.suggestionAirportTouchable,
+            suggestionAirportTouchableStyle,
+          ]}
+          onPress={() => {
+            if (focusedInput == FormInputType.FLIGHT_TO) {
+              setToLocation(airport);
+              toLocationInput.current?.blur();
+            } else {
+              setFromLocation(airport);
+              fromLocationInput.current?.blur();
+            }
+          }}
+        >
+          <Ionicons
+            name="arrow-forward"
+            size={18}
+            color={theme.primary}
+            style={[styles.suggestionAirportIcon, suggestionAirportIconStyle]}
+          />
+          <Text
+            style={[styles.suggestionAirportText, suggestionAirportTextStyle]}
+          >
+            {airport}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <View style={[styles.inputGroupContainer, inputGroupContainerStyle]}>
+        <View style={[styles.inputWrapper, inputWrapperStyle]}>
+          <CustomInput
+            ref={fromLocationInput}
+            onChangeText={(text) => {
+              setFromLocation(text);
+              onTextChange?.(text);
+            }}
+            label={fromLabel}
+            value={fromLocation}
+            labelStyle={[styles.label, labelStyle]}
+            placeholder={fromPlaceholder}
+            onFocus={() => {
+              setFocusedInput(FormInputType.FLIGHT_FROM);
+              onInputFocus?.(FormInputType.FLIGHT_FROM);
+            }}
+            onBlur={() => {
+              setTimeout(() => {
+                if (focusedInput === FormInputType.FLIGHT_FROM) {
+                  setFocusedInput(undefined);
+                }
+              }, 150);
+            }}
+            containerStyle={customInputContainerStyle}
+          />
+          {suggestionData && (
+            <SuggestionList
+              data={suggestionData}
+              visible={focusedInput === FormInputType.FLIGHT_FROM}
+              renderItemContent={suggestionRenderItem}
+              containerStyle={suggestionListContainerStyle}
+            />
+          )}
+        </View>
+
+        <View style={[styles.swapButtonContainer, swapButtonContainerStyle]}>
+          <TouchableOpacity
+            style={[styles.swapButton, swapButtonStyle]}
+            onPress={handleSwap}
+            activeOpacity={0.7}
+          >
+            <Ionicons
+              name={swapIconName}
+              size={20}
+              color={theme.onSurface}
+              style={swapIconStyle}
+            />
+          </TouchableOpacity>
+        </View>
+
+        {/* Apply inputWrapperStyle */}
+        <View style={[styles.inputWrapper, inputWrapperStyle]}>
+          <CustomInput
+            ref={toLocationInput}
+            onChangeText={(text) => {
+              setToLocation(text);
+              onTextChange?.(text);
+            }}
+            label={toLabel}
+            value={toLocation}
+            labelStyle={[styles.label, labelStyle]}
+            placeholder={toPlaceholder}
+            onFocus={() => {
+              setFocusedInput(FormInputType.FLIGHT_TO);
+              onInputFocus?.(FormInputType.FLIGHT_TO);
+            }}
+            onBlur={() => {
+              // Delay blur slightly to allow suggestion press
+              setTimeout(() => {
+                if (focusedInput === FormInputType.FLIGHT_TO) {
+                  setFocusedInput(undefined);
+                }
+              }, 150);
+            }}
+            // Apply customInputContainerStyle (passed to CustomInput)
+            containerStyle={customInputContainerStyle}
+          />
+          {suggestionData && (
+            <SuggestionList
+              data={suggestionData}
+              visible={focusedInput === FormInputType.FLIGHT_TO}
+              renderItemContent={suggestionRenderItem}
+              // Apply suggestionListContainerStyle
+              containerStyle={suggestionListContainerStyle}
+            />
+          )}
+        </View>
+      </View>
+
+      {/* Apply departureRowStyle */}
+      <View style={[styles.departureRow, departureRowStyle]}>
+        <DateRangePicker
+          returnLabel={returnLabel}
+          departureLabel={departureLabel}
+          outerContainerStyle={[
+            styles.dateRangePickerOuterContainer, 
+            dateRangePickerOuterContainerStyle,
+          ]}
+          labelStyle={[labelStyle, dateRangePickerLabelStyle]}
+          inputGroupStyle={dateRangePickerInputGroupStyle}
+          calendarContainerStyle={dateRangePickerCalendarContainerStyle} 
+          calendarThemeOverrides={calendarThemeOverrides} 
+          onDatesChange={(d) => {
+            setDepartureDate(d.departure);
+            setReturnDate(d.return);
+          }}
+          isOneWay={isOneWay}
+          initialDepartureDate={initialDepartureDate}
+          initialReturnDate={initialReturnDate}
+        />
+        {/* Search Button */}
+        <TouchableOpacity
+          style={[styles.searchButton, searchButtonStyle]}
+          onPress={handleSearch}
+          activeOpacity={0.8}
+        >
+          <Ionicons
+            name={searchIconName}
+            size={24}
+            color={theme.onPrimary}
+            style={searchIconStyle}
+          />
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+// --- Styles ---
+const themedStyles = (theme: ThemeType, isRTL: boolean) =>
+  StyleSheet.create({
+    container: {
+      padding: 16,
+      backgroundColor: theme.surface,
+      borderBottomRightRadius: 8,
+      borderBottomLeftRadius: 8,
+    },
+    inputGroupContainer: {
+      position: "relative", 
+    },
+    inputWrapper: {
+      marginBottom: 15, 
+      position: "relative", 
+    },
+    label: {
+      color: theme.labelText,
+      fontSize: 12,
+      fontWeight: "600",
+      textTransform: "uppercase",
+      textAlign: isRTL ? "right" : "left",
+      marginBottom: 6,
+    },
+    swapButtonContainer: {
+      // Position swap button between the two input wrappers
+      // position: "absolute",
+      // left: 0,
+      // right: 0,
+      // top: "50%", // Adjust as needed based on CustomInput height
+      // transform: [{ translateY: -18 }], // Half the button height
+      alignItems: "center",
+      // zIndex: 1, // Ensure button is clickable above inputs
+    },
+    swapButton: {
+      width: 36,
+      height: 36,
+      borderRadius: 18,
+      backgroundColor: theme.surface,
+      borderColor: theme.border,
+      borderWidth: 1,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    departureRow: {
+      flexDirection: isRTL ? "row-reverse" : "row",
+      alignItems: "flex-end", 
+      marginTop: 10,
+      gap: 10, 
+    },
+    dateRangePickerOuterContainer: {
+      flex: 1, 
+    },
+    searchButton: {
+      backgroundColor: theme.primary,
+      width: 50,
+      height: 50,
+      borderRadius: 8,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    suggestionItemGroup: {
+      paddingVertical: 8,
+      paddingHorizontal: 12,
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderBottomColor: theme.border,
+      backgroundColor: theme.surface, 
+    },
+    suggestionCityRow: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 10, 
+      marginBottom: 5, 
+    },
+    suggestionCityIcon: {
+    },
+    suggestionCityText: {
+      fontSize: 15,
+      fontWeight: "600",
+      color: theme.onSurface,
+    },
+    suggestionAirportTouchable: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 10, 
+      paddingVertical: 4,
+      marginLeft: 25, 
+    },
+    suggestionAirportIcon: {
+    },
+    suggestionAirportText: {
+      fontSize: 14,
+      color: theme.onSurfaceVariant, 
+    },
+  });
+
+export default FlightForm;