related-ui-components 2.7.5 → 2.7.7

package/src/components/TravelBooking/SummaryBar.tsx

@@ -1,239 +1,239 @@
-import React, { useState, useCallback, useMemo, useEffect } from "react";
-import {
-  LayoutAnimation,
-  Platform,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  UIManager,
-  View,
-  StyleProp,
-  ViewStyle,
-  TextStyle,
-  ScrollView,
-  Dimensions,
-} from "react-native";
-import FlightSummary, {
-  FlightSelection,
-  FlightSummaryProps as FlightChildProps,
-  FlightSummaryProps,
-} from "./FlightSummary";
-import HotelSummary, {
-  RoomState,
-  HotelSummaryProps as HotelChildProps,
-  HotelSummaryProps,
-} from "./HotelSummary";
-import { ThemeType, useTheme } from "../../theme";
-import { Ionicons } from "@expo/vector-icons";
-
-if (
-  Platform.OS === "android" &&
-  UIManager.setLayoutAnimationEnabledExperimental
-) {
-  UIManager.setLayoutAnimationEnabledExperimental(true);
-}
-
-export type SelectionCallbackDataType = FlightSelection | RoomState[];
-
-export type SummaryBarProps = {
-  containerStyle?: StyleProp<ViewStyle>;
-  summaryTextStyle?: StyleProp<TextStyle>;
-  iconStyle?: StyleProp<TextStyle>;
-  onSelectionChange?: (selection: SelectionCallbackDataType) => void;
-  mode: "flight" | "hotel",
-  flightProps?: FlightSummaryProps;
-  hotelProps?: HotelSummaryProps;
-};
-
-// export type SummaryBarProps = FlightSummaryBarProps | HotelSummaryBarProps;
-
-const SummaryBar: React.FC<SummaryBarProps> = ({
-  mode,
-  containerStyle,
-  summaryTextStyle,
-  iconStyle,
-  onSelectionChange,
-  // initialSelection,
-  flightProps,
-  hotelProps,
-}) => {
-  const { theme } = useTheme();
-  const styles = useMemo(() => themedStyles(theme), [theme]);
-
-  const [isExpanded, setIsExpanded] = useState(false);
-
-  const [flightSelection, setFlightSelection] =
-    useState<FlightSelection | undefined>(
-      mode === "flight" ? flightProps?.selection : undefined
-    );
-  const [hotelSelection, setHotelSelection] = useState<RoomState[] | undefined>(
-    mode === "hotel" ? hotelProps?.selection : undefined
-  );
-
-  useEffect(() => {
-    if (mode === "flight" && flightSelection) {
-      onSelectionChange?.(flightSelection);
-    } else if (mode === "hotel" && hotelSelection) {
-      onSelectionChange?.(hotelSelection);
-    }
-  }, []);
-
-  const handlePress = useCallback(() => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-    setIsExpanded(!isExpanded);
-  }, [isExpanded]);
-
-  const handleInternalSelectionChange = useCallback(
-    (newSelection: FlightSelection | RoomState[]) => {
-      if (mode === "flight") {
-        if (
-          typeof newSelection === "object" &&
-          !Array.isArray(newSelection) &&
-          "flightType" in newSelection
-        ) {
-          setFlightSelection(newSelection as FlightSelection);
-          onSelectionChange?.(newSelection as FlightSelection);
-        }
-      } else if (mode === "hotel") {
-        if (Array.isArray(newSelection)) {
-          setHotelSelection(newSelection as RoomState[]);
-          onSelectionChange?.(newSelection as RoomState[]);
-        }
-      }
-    },
-    [mode, onSelectionChange]
-  );
-
-  const formattedSelectionText = useMemo((): string => {
-    if (mode === "flight") {
-      if (!flightSelection) return "Round trip, 1 passenger, Economy";
-      const passengersCount = Object.values(
-        flightSelection.passengers ?? {}
-      ).reduce((sum, count) => sum + count, 0);
-      const passengerText =
-        passengersCount === 1 ? "1 passenger" : `${passengersCount} passengers`;
-      return `${flightSelection.flightType}, ${passengerText}, ${flightSelection.flightClass}`;
-    } else if (mode === "hotel") {
-      if (!hotelSelection || hotelSelection.length === 0)
-        return "1 Room, 2 Guests";
-      const rooms = hotelSelection;
-      const guestConfig = hotelProps?.guestConfigData ?? undefined;
-      let totalGuests = 0;
-      if (guestConfig) {
-        totalGuests = rooms.reduce((sum, room) => {
-          let roomSum = 0;
-          guestConfig.forEach((guest) => {
-            roomSum += room[guest.key] ?? 0;
-          });
-          return sum + roomSum;
-        }, 0);
-      } else {
-        const totalAdults = rooms.reduce((sum, room) => sum + room.adults, 0);
-        const totalChildren = rooms.reduce(
-          (sum, room) => sum + room.children,
-          0
-        );
-        totalGuests = totalAdults + totalChildren;
-      }
-
-      const roomText = rooms.length === 1 ? "1 Room" : `${rooms.length} Rooms`;
-      const guestText =
-        totalGuests === 1 ? "1 Guest" : `${totalGuests} Guests`;
-      return `${roomText}, ${guestText}`;
-    }
-    return "Select details";
-  }, [flightSelection, hotelSelection, mode, hotelProps?.guestConfigData]);
-
-  return (
-    <View style={[styles.container, containerStyle]}>
-      <TouchableOpacity
-        style={[styles.summaryContainer, isExpanded && {backgroundColor: theme.surface}]}
-        onPress={handlePress}
-        activeOpacity={0.8}
-        accessibilityRole="button"
-        accessibilityState={{ expanded: isExpanded }}
-        accessibilityLabel={formattedSelectionText}
-        accessibilityHint={
-          isExpanded ? "Collapses content" : "Expands content"
-        }
-      >
-        <Text style={[styles.summaryText, summaryTextStyle]} numberOfLines={1}>
-          {formattedSelectionText}
-        </Text>
-        <Ionicons
-          name={isExpanded ? "chevron-up" : "chevron-down"}
-          size={22}
-          color={ theme.border}
-          style={iconStyle}
-        />
-      </TouchableOpacity>
-
-      {isExpanded && (
-        <ScrollView showsVerticalScrollIndicator={false} style={styles.contentContainer}>
-          {mode === "flight" && (
-            <FlightSummary
-              selection={flightSelection}
-              onSelectionChange={handleInternalSelectionChange}
-              {...flightProps}
-            />
-          )}
-          {mode === "hotel" && (
-            <HotelSummary
-              selection={hotelSelection}
-              onSelectionChange={handleInternalSelectionChange}
-              {...hotelProps}
-            />
-          )}
-        </ScrollView>
-      )}
-    </View>
-  );
-};
-
-const themedStyles = (theme: ThemeType) =>
-  StyleSheet.create({
-    container: {
-      backgroundColor: theme.surfaceVariant || theme.surface,
-      borderRadius: 8,
-      // overflow: "hidden",
-      // width: "auto",
-      alignSelf: "stretch",
-      position:"relative",
-      borderWidth: 1,
-      borderColor: theme.border,
-    },
-    summaryContainer: {
-      flexDirection: "row",
-      justifyContent: "space-between",
-      alignItems: "center",
-      paddingVertical: 14,
-      paddingHorizontal: 16,
-    },
-    summaryText: {
-      color: theme.onSurface,
-      fontSize: 15,
-      fontWeight: "500",
-      flex: 1,
-      marginRight: 10,
-    },
-    contentContainer: {
-      borderTopWidth: 1,
-      borderTopColor: theme.border,
-      width: "100%",
-      position: "absolute",
-      zIndex: 100,
-      top: 50,
-      maxHeight: 400,
-      shadowColor: "#000", // Typically black shadow
-      shadowOffset: {
-        width: 0, // Horizontal offset
-        height: 3, // Vertical offset (positive value pushes shadow down)
-      },
-      shadowOpacity: 0.15, // How visible the shadow is (0 to 1)
-      shadowRadius: 5, // How blurry the shadow is
-      // Android Shadow Property
-      elevation: 5, // Simulates shadow depth on Android (adjust value as needed)
-    },
-  });
-
-export default SummaryBar;
+// import React, { useState, useCallback, useMemo, useEffect } from "react";
+// import {
+//   LayoutAnimation,
+//   Platform,
+//   StyleSheet,
+//   Text,
+//   TouchableOpacity,
+//   UIManager,
+//   View,
+//   StyleProp,
+//   ViewStyle,
+//   TextStyle,
+//   ScrollView,
+//   Dimensions,
+// } from "react-native";
+// import FlightSummary, {
+//   FlightSelection,
+//   FlightSummaryProps as FlightChildProps,
+//   FlightSummaryProps,
+// } from "./FlightSummary";
+// import HotelSummary, {
+//   RoomState,
+//   HotelSummaryProps as HotelChildProps,
+//   HotelSummaryProps,
+// } from "./HotelSummary";
+// import { ThemeType, useTheme } from "../../theme";
+// import { Ionicons } from "@expo/vector-icons";
+
+// if (
+//   Platform.OS === "android" &&
+//   UIManager.setLayoutAnimationEnabledExperimental
+// ) {
+//   UIManager.setLayoutAnimationEnabledExperimental(true);
+// }
+
+// export type SelectionCallbackDataType = FlightSelection | RoomState[];
+
+// export type SummaryBarProps = {
+//   containerStyle?: StyleProp<ViewStyle>;
+//   summaryTextStyle?: StyleProp<TextStyle>;
+//   iconStyle?: StyleProp<TextStyle>;
+//   onSelectionChange?: (selection: SelectionCallbackDataType) => void;
+//   mode: "flight" | "hotel",
+//   flightProps?: FlightSummaryProps;
+//   hotelProps?: HotelSummaryProps;
+// };
+
+// // export type SummaryBarProps = FlightSummaryBarProps | HotelSummaryBarProps;
+
+// const SummaryBar: React.FC<SummaryBarProps> = ({
+//   mode,
+//   containerStyle,
+//   summaryTextStyle,
+//   iconStyle,
+//   onSelectionChange,
+//   // initialSelection,
+//   flightProps,
+//   hotelProps,
+// }) => {
+//   const { theme } = useTheme();
+//   const styles = useMemo(() => themedStyles(theme), [theme]);
+
+//   const [isExpanded, setIsExpanded] = useState(false);
+
+//   const [flightSelection, setFlightSelection] =
+//     useState<FlightSelection | undefined>(
+//       mode === "flight" ? flightProps?.selection : undefined
+//     );
+//   const [hotelSelection, setHotelSelection] = useState<RoomState[] | undefined>(
+//     mode === "hotel" ? hotelProps?.selection : undefined
+//   );
+
+//   useEffect(() => {
+//     if (mode === "flight" && flightSelection) {
+//       onSelectionChange?.(flightSelection);
+//     } else if (mode === "hotel" && hotelSelection) {
+//       onSelectionChange?.(hotelSelection);
+//     }
+//   }, []);
+
+//   const handlePress = useCallback(() => {
+//     LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+//     setIsExpanded(!isExpanded);
+//   }, [isExpanded]);
+
+//   const handleInternalSelectionChange = useCallback(
+//     (newSelection: FlightSelection | RoomState[]) => {
+//       if (mode === "flight") {
+//         if (
+//           typeof newSelection === "object" &&
+//           !Array.isArray(newSelection) &&
+//           "flightType" in newSelection
+//         ) {
+//           setFlightSelection(newSelection as FlightSelection);
+//           onSelectionChange?.(newSelection as FlightSelection);
+//         }
+//       } else if (mode === "hotel") {
+//         if (Array.isArray(newSelection)) {
+//           setHotelSelection(newSelection as RoomState[]);
+//           onSelectionChange?.(newSelection as RoomState[]);
+//         }
+//       }
+//     },
+//     [mode, onSelectionChange]
+//   );
+
+//   const formattedSelectionText = useMemo((): string => {
+//     if (mode === "flight") {
+//       if (!flightSelection) return "Round trip, 1 passenger, Economy";
+//       const passengersCount = Object.values(
+//         flightSelection.passengers ?? {}
+//       ).reduce((sum, count) => sum + count, 0);
+//       const passengerText =
+//         passengersCount === 1 ? "1 passenger" : `${passengersCount} passengers`;
+//       return `${flightSelection.flightType}, ${passengerText}, ${flightSelection.flightClass}`;
+//     } else if (mode === "hotel") {
+//       if (!hotelSelection || hotelSelection.length === 0)
+//         return "1 Room, 2 Guests";
+//       const rooms = hotelSelection;
+//       const guestConfig = hotelProps?.guestConfigData ?? undefined;
+//       let totalGuests = 0;
+//       if (guestConfig) {
+//         totalGuests = rooms.reduce((sum, room) => {
+//           let roomSum = 0;
+//           guestConfig.forEach((guest) => {
+//             roomSum += room[guest.key] ?? 0;
+//           });
+//           return sum + roomSum;
+//         }, 0);
+//       } else {
+//         const totalAdults = rooms.reduce((sum, room) => sum + room.adults, 0);
+//         const totalChildren = rooms.reduce(
+//           (sum, room) => sum + room.children,
+//           0
+//         );
+//         totalGuests = totalAdults + totalChildren;
+//       }
+
+//       const roomText = rooms.length === 1 ? "1 Room" : `${rooms.length} Rooms`;
+//       const guestText =
+//         totalGuests === 1 ? "1 Guest" : `${totalGuests} Guests`;
+//       return `${roomText}, ${guestText}`;
+//     }
+//     return "Select details";
+//   }, [flightSelection, hotelSelection, mode, hotelProps?.guestConfigData]);
+
+//   return (
+//     <View style={[styles.container, containerStyle]}>
+//       <TouchableOpacity
+//         style={[styles.summaryContainer, isExpanded && {backgroundColor: theme.surface}]}
+//         onPress={handlePress}
+//         activeOpacity={0.8}
+//         accessibilityRole="button"
+//         accessibilityState={{ expanded: isExpanded }}
+//         accessibilityLabel={formattedSelectionText}
+//         accessibilityHint={
+//           isExpanded ? "Collapses content" : "Expands content"
+//         }
+//       >
+//         <Text style={[styles.summaryText, summaryTextStyle]} numberOfLines={1}>
+//           {formattedSelectionText}
+//         </Text>
+//         <Ionicons
+//           name={isExpanded ? "chevron-up" : "chevron-down"}
+//           size={22}
+//           color={ theme.border}
+//           style={iconStyle}
+//         />
+//       </TouchableOpacity>
+
+//       {isExpanded && (
+//         <ScrollView showsVerticalScrollIndicator={false} style={styles.contentContainer}>
+//           {mode === "flight" && (
+//             <FlightSummary
+//               selection={flightSelection}
+//               onSelectionChange={handleInternalSelectionChange}
+//               {...flightProps}
+//             />
+//           )}
+//           {mode === "hotel" && (
+//             <HotelSummary
+//               selection={hotelSelection}
+//               onSelectionChange={handleInternalSelectionChange}
+//               {...hotelProps}
+//             />
+//           )}
+//         </ScrollView>
+//       )}
+//     </View>
+//   );
+// };
+
+// const themedStyles = (theme: ThemeType) =>
+//   StyleSheet.create({
+//     container: {
+//       backgroundColor: theme.surfaceVariant || theme.surface,
+//       borderRadius: 8,
+//       // overflow: "hidden",
+//       // width: "auto",
+//       alignSelf: "stretch",
+//       position:"relative",
+//       borderWidth: 1,
+//       borderColor: theme.border,
+//     },
+//     summaryContainer: {
+//       flexDirection: "row",
+//       justifyContent: "space-between",
+//       alignItems: "center",
+//       paddingVertical: 14,
+//       paddingHorizontal: 16,
+//     },
+//     summaryText: {
+//       color: theme.onSurface,
+//       fontSize: 15,
+//       fontWeight: "500",
+//       flex: 1,
+//       marginRight: 10,
+//     },
+//     contentContainer: {
+//       borderTopWidth: 1,
+//       borderTopColor: theme.border,
+//       width: "100%",
+//       position: "absolute",
+//       zIndex: 100,
+//       top: 50,
+//       maxHeight: 400,
+//       shadowColor: "#000", // Typically black shadow
+//       shadowOffset: {
+//         width: 0, // Horizontal offset
+//         height: 3, // Vertical offset (positive value pushes shadow down)
+//       },
+//       shadowOpacity: 0.15, // How visible the shadow is (0 to 1)
+//       shadowRadius: 5, // How blurry the shadow is
+//       // Android Shadow Property
+//       elevation: 5, // Simulates shadow depth on Android (adjust value as needed)
+//     },
+//   });
+
+// export default SummaryBar;