related-ui-components 2.1.9 → 2.2.0

package/src/components/TravelBooking/HotelForm.tsx

@@ -1,5 +1,11 @@
 import { ThemeType, useTheme } from "../../theme";
-import React, { useCallback, useMemo, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import {
   View,
   Text,
@@ -15,8 +21,8 @@ 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 { FormInputType, HotelSuggestions } from "./types"; 
+import SuggestionList from "../Suggestions/SuggestionList";
+import { FormInputType, HotelSuggestions } from "./types";
 import { TextInput } from "react-native-gesture-handler";
 
 // --- Helper Types ---
@@ -40,6 +46,13 @@ export interface HotelFormProps {
     nationality: string | undefined;
   }) => void;
 
+  onSelectionChange?: (details: {
+    destination: LocationData | undefined; // Renamed from destintation
+    checkin: string | undefined; // Send YYYY-MM-DD
+    checkout: string | undefined; // Send YYYY-MM-DD
+    nationality: string | undefined;
+  }) => void;
+
   // Labels & Placeholders
   destinationLabel?: string;
   destinationPlaceholder?: string;
@@ -52,22 +65,22 @@ export interface HotelFormProps {
 
   // Data & Config
   suggestionData?: HotelSuggestions[];
-  nationalityData?: { label: string; value: string }[]; 
+  nationalityData?: { label: string; value: string }[];
   calendarThemeOverrides?: object;
 
   // --- Style Props ---
   containerStyle?: StyleProp<ViewStyle>;
-  inputWrapperStyle?: StyleProp<ViewStyle>; 
+  inputWrapperStyle?: StyleProp<ViewStyle>;
   customInputContainerStyle?: StyleProp<ViewStyle>;
-  labelStyle?: StyleProp<TextStyle>; 
-  checkoutRowStyle?: StyleProp<ViewStyle>; 
+  labelStyle?: StyleProp<TextStyle>;
+  checkoutRowStyle?: StyleProp<ViewStyle>;
   searchButtonStyle?: StyleProp<ViewStyle>;
-  searchIconStyle?: StyleProp<TextStyle>; 
+  searchIconStyle?: StyleProp<TextStyle>;
 
   // DateRangePicker specific styles (passed down)
   dateRangePickerOuterContainerStyle?: StyleProp<ViewStyle>;
-  dateRangePickerLabelStyle?: StyleProp<TextStyle>; 
-  dateRangePickerInputGroupStyle?: StyleProp<ViewStyle>; 
+  dateRangePickerLabelStyle?: StyleProp<TextStyle>;
+  dateRangePickerInputGroupStyle?: StyleProp<ViewStyle>;
   dateRangePickerCalendarContainerStyle?: StyleProp<ViewStyle>;
 
   // SuggestionList specific styles
@@ -76,10 +89,10 @@ export interface HotelFormProps {
   suggestionItemTextStyle?: StyleProp<TextStyle>;
 
   // Nationality Picker specific styles
-  nationalityPickerWrapperStyle?: StyleProp<ViewStyle>; 
-  nationalityPickerLabelStyle?: StyleProp<TextStyle>; 
+  nationalityPickerWrapperStyle?: StyleProp<ViewStyle>;
+  nationalityPickerLabelStyle?: StyleProp<TextStyle>;
   pickerContainerStyle?: StyleProp<ViewStyle>;
-  pickerStyle?: StyleProp<TextStyle>; 
+  pickerStyle?: StyleProp<TextStyle>;
 }
 
 // Default Nationality Data (can be overridden by prop)
@@ -137,6 +150,7 @@ const HotelForm: React.FC<HotelFormProps> = ({
   nationalityPickerLabelStyle,
   pickerContainerStyle,
   pickerStyle,
+  onSelectionChange,
 }) => {
   const { theme, isRTL } = useTheme();
   const styles = useMemo(() => themedStyles(theme, isRTL), [theme, isRTL]);
@@ -158,6 +172,21 @@ const HotelForm: React.FC<HotelFormProps> = ({
   >(initialNationality);
   const [focusedInput, setFocusedInput] = useState<FormInputType>();
 
+  useEffect(() => {
+    onSelectionChange?.({
+      destination: destination,
+      checkin: checkinDate,
+      checkout: checkoutDate,
+      nationality: selectedNationality,
+    });
+  }, [
+    destination,
+    checkinDate,
+    checkoutDate,
+    selectedNationality,
+    onSelectionChange,
+  ]);
+
   // --- Handlers ---
   const handleSearch = useCallback(() => {
     onSearchPress?.({
@@ -236,8 +265,8 @@ const HotelForm: React.FC<HotelFormProps> = ({
         ]}
         labelStyle={[labelStyle, dateRangePickerLabelStyle]}
         inputGroupStyle={dateRangePickerInputGroupStyle}
-        calendarContainerStyle={dateRangePickerCalendarContainerStyle} 
-        calendarThemeOverrides={calendarThemeOverrides} 
+        calendarContainerStyle={dateRangePickerCalendarContainerStyle}
+        calendarThemeOverrides={calendarThemeOverrides}
         onDatesChange={(d) => {
           setCheckinDate(d.departure);
           setCheckoutDate(d.return);
@@ -249,15 +278,12 @@ const HotelForm: React.FC<HotelFormProps> = ({
 
       <View style={[styles.checkoutRow, checkoutRowStyle]}>
         <View
-          style={[styles.nationalityPickerWrapper, nationalityPickerWrapperStyle]}
+          style={[
+            styles.nationalityPickerWrapper,
+            nationalityPickerWrapperStyle,
+          ]}
         >
-          <Text
-            style={[
-              styles.label,
-              labelStyle, 
-              nationalityPickerLabelStyle, 
-            ]}
-          >
+          <Text style={[styles.label, labelStyle, nationalityPickerLabelStyle]}>
             {nationalityLabel}
           </Text>
           <View style={[styles.pickerContainer, pickerContainerStyle]}>
@@ -269,7 +295,7 @@ const HotelForm: React.FC<HotelFormProps> = ({
             >
               {nationalityData.map((nat) => (
                 <Picker.Item
-                  key={nat.value || "placeholder"} 
+                  key={nat.value || "placeholder"}
                   label={nat.label}
                   value={nat.value}
                   enabled={nat.value !== undefined}
@@ -279,18 +305,20 @@ const HotelForm: React.FC<HotelFormProps> = ({
           </View>
         </View>
 
-        <TouchableOpacity
-          style={[styles.searchButton, searchButtonStyle]}
-          onPress={handleSearch}
-          activeOpacity={0.8}
-        >
-          <Ionicons
-            name={searchIconName}
-            size={24}
-            color={theme.onPrimary}
-            style={searchIconStyle}
-          />
-        </TouchableOpacity>
+        {onSearchPress && (
+          <TouchableOpacity
+            style={[styles.searchButton, searchButtonStyle]}
+            onPress={handleSearch}
+            activeOpacity={0.8}
+          >
+            <Ionicons
+              name={searchIconName}
+              size={24}
+              color={theme.onPrimary}
+              style={searchIconStyle}
+            />
+          </TouchableOpacity>
+        )}
       </View>
     </View>
   );
@@ -306,8 +334,8 @@ const themedStyles = (theme: ThemeType, isRTL: boolean) =>
       borderBottomLeftRadius: 8,
     },
     inputWrapper: {
-      marginBottom: 15, 
-      position: "relative", 
+      marginBottom: 15,
+      position: "relative",
     },
     label: {
       color: theme.labelText,
@@ -318,12 +346,12 @@ const themedStyles = (theme: ThemeType, isRTL: boolean) =>
       marginBottom: 6,
     },
     dateRangePickerOuterContainer: {
-      marginTop: 10, 
+      marginTop: 10,
     },
     checkoutRow: {
       flexDirection: isRTL ? "row-reverse" : "row",
-      alignItems: "flex-end", 
-      marginTop: 20, 
+      alignItems: "flex-end",
+      marginTop: 20,
       gap: 10,
     },
     nationalityPickerWrapper: {
@@ -334,8 +362,8 @@ const themedStyles = (theme: ThemeType, isRTL: boolean) =>
       borderColor: theme.border,
       borderRadius: 8,
       backgroundColor: theme.surface,
-      justifyContent: "center", 
-      height: 50, 
+      justifyContent: "center",
+      height: 50,
     },
     picker: {
       width: "100%",

package/src/index.ts

@@ -1,10 +1,10 @@
-import { registerRootComponent } from 'expo';
-import "react-native-reanimated";
+// import { registerRootComponent } from 'expo';
+// import "react-native-reanimated";
 
 
-import App from "./app";
+// import App from "./app";
 
-registerRootComponent(App);
+// registerRootComponent(App);
 
 export * from "./theme"
 export * from "./components";