related-ui-components 1.3.3 → 1.3.5

package/src/components/TravelBooking/CarRentalForm.tsx

@@ -0,0 +1,440 @@
+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 { Picker } from "@react-native-picker/picker";
+import SuggestionList from "../Suggestions/SuggestionList";
+import { TextInput } from "react-native-gesture-handler";
+import { CarSuggestions, FormInputType } from "./types";
+
+export const mockCarSuggestions: CarSuggestions[] = [
+  { id: 1, city: "Beirut", country: "Lebanon", value: "BEIRUT, LEBANON" },
+  { id: 2, city: "Dubai", country: "UAE", value: "DUBAI, UAE" },
+  { id: 3, city: "London", country: "UK", value: "LONDON, UK" },
+  { id: 4, city: "Paris", country: "France", value: "PARIS, FRANCE" },
+  { id: 5, city: "New York", country: "USA", value: "NEW YORK, USA" },
+];
+
+// --- Helper Types ---
+type LocationData = string;
+
+// --- Component Props ---
+export interface CarRentalFormProps {
+  initialFromLocation?: LocationData;
+  initialToLocation?: LocationData;
+  initialPickupDate?: string; // Expect YYYY-MM-DD string
+  initialDropoffDate?: string; // Expect YYYY-MM-DD string
+
+  onTextChange?: (text: string) => void;
+  onInputFocus?: (input: FormInputType) => void;
+  onSwapPress?: (
+    currentFrom: LocationData | undefined,
+    currentTo: LocationData | undefined
+  ) => void;
+  onSearchPress?: (details: {
+    from: LocationData | undefined;
+    to: LocationData | undefined;
+    pickup: string | undefined; // Send YYYY-MM-DD
+    dropoff: string | undefined; // Send YYYY-MM-DD
+    driverAge: number | undefined;
+  }) => void;
+
+  fromLabel?: string;
+  fromPlaceholder?: string;
+
+  toLabel?: string;
+  toPlaceholder?: string;
+
+  pickupLabel?: string;
+  dropoffLabel?: string;
+  swapIconName?: keyof typeof Ionicons.glyphMap;
+  searchIconName?: keyof typeof Ionicons.glyphMap;
+  calendarThemeOverrides?: object; // Passed to DateRangePicker
+
+  isOneWay?: boolean;
+
+  suggestionData?: CarSuggestions[];
+
+  // --- Style Props ---
+  containerStyle?: StyleProp<ViewStyle>;
+  inputGroupContainerStyle?: StyleProp<ViewStyle>;
+  inputWrapperStyle?: StyleProp<ViewStyle>; 
+  inputGroupStyle?: StyleProp<ViewStyle>; 
+  labelStyle?: StyleProp<TextStyle>; 
+  swapButtonContainerStyle?: StyleProp<ViewStyle>;
+  swapButtonStyle?: StyleProp<ViewStyle>;
+  swapIconStyle?: StyleProp<TextStyle>; 
+  pickupRowStyle?: 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 (passed down / used in renderItem)
+  suggestionListContainerStyle?: StyleProp<ViewStyle>;
+  suggestionItemStyle?: StyleProp<ViewStyle>; 
+  suggestionItemTextStyle?: StyleProp<TextStyle>; 
+
+  // Age Picker specific styles
+  agePickerWrapperStyle?: StyleProp<ViewStyle>; 
+  agePickerLabelStyle?: StyleProp<TextStyle>; 
+  pickerContainerStyle?: StyleProp<ViewStyle>; 
+  pickerStyle?: StyleProp<ViewStyle>; 
+}
+
+// --- Component ---
+const CarRentalForm: React.FC<CarRentalFormProps> = ({
+  initialFromLocation,
+  initialToLocation,
+  initialPickupDate,
+  initialDropoffDate,
+  onSwapPress,
+  onSearchPress,
+  fromLabel = "PICK-UP",
+  toLabel = "DROP-OFF",
+  fromPlaceholder = "From Where?",
+  toPlaceholder = "To Where?",
+  pickupLabel = "PICK-UP DATE",
+  dropoffLabel = "DROP-OFF DATE",
+  swapIconName = "swap-horizontal",
+  searchIconName = "search",
+  calendarThemeOverrides = {},
+  containerStyle,
+  inputGroupContainerStyle, // Added
+  inputWrapperStyle, // Added
+  inputGroupStyle,
+  labelStyle,
+  swapButtonContainerStyle,
+  swapButtonStyle,
+  swapIconStyle,
+  pickupRowStyle,
+  searchButtonStyle,
+  searchIconStyle,
+  isOneWay,
+  suggestionData,
+  onInputFocus,
+  onTextChange,
+  dateRangePickerOuterContainerStyle,
+  dateRangePickerLabelStyle,
+  dateRangePickerInputGroupStyle,
+  dateRangePickerCalendarContainerStyle,
+  suggestionListContainerStyle,
+  suggestionItemStyle,
+  suggestionItemTextStyle,
+  agePickerWrapperStyle,
+  agePickerLabelStyle,
+  pickerContainerStyle,
+  pickerStyle,
+}) => {
+  const { theme, isRTL } = useTheme();
+  const styles = useMemo(() => themedStyles(theme, isRTL), [theme, isRTL]);
+  const fromInputRef = useRef<TextInput>(null);
+  const toInputRef = useRef<TextInput>(null);
+
+  // --- State ---
+  const [fromLocation, setFromLocation] = useState<LocationData | undefined>(
+    initialFromLocation
+  );
+  const [toLocation, setToLocation] = useState<LocationData | undefined>(
+    initialToLocation
+  );
+  const [pickupDate, setPickupDate] = useState<string | undefined>(
+    initialPickupDate
+  );
+  const [dropoffDate, setDropoffDate] = useState<string | undefined>(
+    initialDropoffDate
+  );
+  const [age, setAge] = useState<number>();
+  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,
+      pickup: pickupDate,
+      dropoff: dropoffDate,
+      driverAge: age,
+    });
+  }, [fromLocation, toLocation, pickupDate, dropoffDate, age, onSearchPress]);
+
+  // --- Shared Suggestion Render Item ---
+  const suggestionRenderItem = (item: CarSuggestions) => (
+    <TouchableOpacity
+      key={item.id}
+      onPress={() => {
+        if (focusedInput === FormInputType.CAR_PICKUP) {
+          setFromLocation(item.value);
+          fromInputRef.current?.blur();
+        } else if (focusedInput === FormInputType.CAR_DROP_OFF) {
+          setToLocation(item.value);
+          toInputRef.current?.blur();
+        }
+        // setFocusedInput(undefined); // Hide suggestions after selection
+      }}
+      style={[styles.suggestionItem, suggestionItemStyle]} // Use new prop
+    >
+      <Text style={[styles.suggestionItemText, suggestionItemTextStyle]}>
+        {item.value}
+      </Text>
+    </TouchableOpacity>
+  );
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      {/* Apply inputGroupContainerStyle */}
+      <View style={[styles.inputGroupContainer, inputGroupContainerStyle]}>
+        {/* Apply inputWrapperStyle */}
+        <View style={[styles.inputWrapper, inputWrapperStyle]}>
+          <CustomInput
+            ref={fromInputRef}
+            onChangeText={(t) => {
+              onTextChange?.(t);
+              setFromLocation(t);
+            }}
+            label={fromLabel}
+            value={fromLocation}
+            labelStyle={[styles.label, labelStyle]}
+            placeholder={fromPlaceholder}
+            onFocus={() => {
+              onInputFocus?.(FormInputType.CAR_PICKUP);
+              setFocusedInput(FormInputType.CAR_PICKUP);
+            }}
+            onBlur={() => {
+              // Delay blur slightly to allow suggestion press
+              setTimeout(() => {
+                if (focusedInput === FormInputType.CAR_PICKUP) {
+                  setFocusedInput(undefined);
+                }
+              }, 150);
+            }}
+            containerStyle={inputGroupStyle}
+          />
+          {suggestionData && (
+            <SuggestionList
+              data={suggestionData}
+              visible={focusedInput === FormInputType.CAR_PICKUP}
+              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={toInputRef}
+            onChangeText={(t) => {
+              setToLocation(t);
+              onTextChange?.(t);
+            }}
+            label={toLabel}
+            value={toLocation}
+            labelStyle={[styles.label, labelStyle]}
+            placeholder={toPlaceholder}
+            onFocus={() => {
+              onInputFocus?.(FormInputType.CAR_DROP_OFF);
+              setFocusedInput(FormInputType.CAR_DROP_OFF);
+            }}
+            onBlur={() => {
+              setTimeout(() => {
+                if (focusedInput === FormInputType.CAR_DROP_OFF) {
+                  setFocusedInput(undefined);
+                }
+              }, 150);
+            }}
+            containerStyle={inputGroupStyle}
+          />
+          {suggestionData && (
+            <SuggestionList
+              data={suggestionData}
+              visible={focusedInput === FormInputType.CAR_DROP_OFF}
+              renderItemContent={suggestionRenderItem}
+              containerStyle={suggestionListContainerStyle} // Use new prop
+            />
+          )}
+        </View>
+      </View>
+
+      <DateRangePicker
+        departureLabel={pickupLabel}
+        returnLabel={dropoffLabel}
+        outerContainerStyle={[
+          styles.dateRangePickerOuterContainer,
+          dateRangePickerOuterContainerStyle,
+        ]}
+        labelStyle={[labelStyle, dateRangePickerLabelStyle]}
+        inputGroupStyle={dateRangePickerInputGroupStyle}
+        calendarContainerStyle={dateRangePickerCalendarContainerStyle} 
+        calendarThemeOverrides={calendarThemeOverrides}
+        onDatesChange={(d) => {
+          setDropoffDate(d.return);
+          setPickupDate(d.departure);
+        }}
+        isOneWay={isOneWay}
+      />
+
+      <View style={[styles.pickupRow, pickupRowStyle]}>
+        <View style={[styles.agePickerWrapper, agePickerWrapperStyle]}>
+          <Text style={[styles.label, labelStyle, agePickerLabelStyle]}>
+            Driver's Age
+          </Text>
+          <View style={[styles.pickerContainer, pickerContainerStyle]}>
+            <Picker
+              selectedValue={age}
+              onValueChange={setAge}
+              style={[styles.picker, pickerStyle]}
+              dropdownIconColor={theme.onSurface}
+            >
+              <Picker.Item label="Select Age" value={undefined} enabled={false} />
+              {Array.from({ length: 80 - 21 + 1 }, (_, i) => i + 21).map(
+                (n) => (
+                  <Picker.Item key={n} label={n.toString()} value={n} />
+                )
+              )}
+            </Picker>
+          </View>
+        </View>
+        <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: {
+      // // Centering the button between the input wrappers
+      // position: "absolute",
+      // left: 0,
+      // right: 0,
+      // top: "50%", // Position roughly in the middle vertically
+      // transform: [{ translateY: -18 }], // Adjust based on button height / 2
+      alignItems: "center",
+      // zIndex: 1, // Ensure swap button is above inputs if they overlap slightly
+    },
+    swapButton: {
+      width: 36,
+      height: 36,
+      borderRadius: 18,
+      backgroundColor: theme.surface,
+      borderColor: theme.border,
+      borderWidth: 1,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    dateRangePickerOuterContainer: {
+      marginTop: 10, // Default margin, can be overridden
+    },
+    pickupRow: {
+      flexDirection: isRTL ? "row-reverse" : "row",
+      alignItems: "flex-end",
+      marginTop: 20,
+      gap: 10,
+    },
+    agePickerWrapper: {
+      flex: 1, 
+    },
+    pickerContainer: {
+      borderWidth: 1,
+      borderColor: theme.border,
+      borderRadius: 8,
+      backgroundColor: theme.surface,
+      justifyContent: "center",
+      height: 50,
+    },
+    picker: {
+      width: "100%",
+      color: theme.onSurface,
+    },
+    searchButton: {
+      backgroundColor: theme.primary,
+      width: 50,
+      height: 50,
+      borderRadius: 8,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    suggestionItem: {
+      padding: 12,
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderBottomColor: theme.border,
+      backgroundColor: theme.surface,
+    },
+    suggestionItemText: {
+      fontSize: 14,
+      color: theme.onSurface,
+    },
+  });
+
+export default CarRentalForm;