related-ui-components 1.3.3 → 1.3.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/app.js +39 -20
- package/lib/commonjs/app.js.map +1 -1
- package/lib/commonjs/components/DateRangePicker/DateRangePicker.js +358 -0
- package/lib/commonjs/components/DateRangePicker/DateRangePicker.js.map +1 -0
- package/lib/commonjs/components/DateRangePicker/index.js +4 -0
- package/lib/commonjs/components/DateRangePicker/index.js.map +1 -0
- package/lib/commonjs/components/Filters/Filters.js +1 -1
- package/lib/commonjs/components/Filters/Filters.js.map +1 -1
- package/lib/commonjs/components/Input/Input.js +2 -2
- package/lib/commonjs/components/Input/Input.js.map +1 -1
- package/lib/commonjs/components/NumericStepper/NumericStepper.js +103 -0
- package/lib/commonjs/components/NumericStepper/NumericStepper.js.map +1 -0
- package/lib/commonjs/components/NumericStepper/index.js +29 -0
- package/lib/commonjs/components/NumericStepper/index.js.map +1 -0
- package/lib/commonjs/components/SelectAmount/SelectAmount.js +189 -0
- package/lib/commonjs/components/SelectAmount/SelectAmount.js.map +1 -0
- package/lib/commonjs/components/SelectAmount/index.js +4 -0
- package/lib/commonjs/components/SelectAmount/index.js.map +1 -0
- package/lib/commonjs/components/Suggestions/SuggestionList.js +98 -0
- package/lib/commonjs/components/Suggestions/SuggestionList.js.map +1 -0
- package/lib/commonjs/components/TravelBooking/CarRentalForm.js +370 -0
- package/lib/commonjs/components/TravelBooking/CarRentalForm.js.map +1 -0
- package/lib/commonjs/components/TravelBooking/FlightForm.js +347 -0
- package/lib/commonjs/components/TravelBooking/FlightForm.js.map +1 -0
- package/lib/commonjs/components/TravelBooking/FlightSummary.js +257 -0
- package/lib/commonjs/components/TravelBooking/FlightSummary.js.map +1 -0
- package/lib/commonjs/components/TravelBooking/HotelForm.js +290 -0
- package/lib/commonjs/components/TravelBooking/HotelForm.js.map +1 -0
- package/lib/commonjs/components/TravelBooking/HotelSummary.js +246 -0
- package/lib/commonjs/components/TravelBooking/HotelSummary.js.map +1 -0
- package/lib/commonjs/components/TravelBooking/README.md +421 -0
- package/lib/commonjs/components/TravelBooking/SummaryBar.js +181 -0
- package/lib/commonjs/components/TravelBooking/SummaryBar.js.map +1 -0
- package/lib/commonjs/components/TravelBooking/TabSelector.js +115 -0
- package/lib/commonjs/components/TravelBooking/TabSelector.js.map +1 -0
- package/lib/commonjs/components/TravelBooking/TravelBooking.js +261 -0
- package/lib/commonjs/components/TravelBooking/TravelBooking.js.map +1 -0
- package/lib/commonjs/components/TravelBooking/index.js +22 -0
- package/lib/commonjs/components/TravelBooking/index.js.map +1 -0
- package/lib/commonjs/components/TravelBooking/types.js +15 -0
- package/lib/commonjs/components/TravelBooking/types.js.map +1 -0
- package/lib/commonjs/components/UnlockRewards/UnlockRewards.js +2 -2
- package/lib/commonjs/components/UnlockRewards/UnlockRewards.js.map +1 -1
- package/lib/commonjs/index.js +0 -5
- package/lib/commonjs/index.js.map +1 -1
- package/lib/module/app.js +43 -24
- package/lib/module/app.js.map +1 -1
- package/lib/module/components/DateRangePicker/DateRangePicker.js +350 -0
- package/lib/module/components/DateRangePicker/DateRangePicker.js.map +1 -0
- package/lib/module/components/DateRangePicker/index.js +4 -0
- package/lib/module/components/DateRangePicker/index.js.map +1 -0
- package/lib/module/components/Filters/Filters.js +1 -1
- package/lib/module/components/Filters/Filters.js.map +1 -1
- package/lib/module/components/Input/Input.js +2 -2
- package/lib/module/components/Input/Input.js.map +1 -1
- package/lib/module/components/NumericStepper/NumericStepper.js +96 -0
- package/lib/module/components/NumericStepper/NumericStepper.js.map +1 -0
- package/lib/module/components/NumericStepper/index.js +5 -0
- package/lib/module/components/NumericStepper/index.js.map +1 -0
- package/lib/module/components/SelectAmount/SelectAmount.js +184 -0
- package/lib/module/components/SelectAmount/SelectAmount.js.map +1 -0
- package/lib/module/components/SelectAmount/index.js +4 -0
- package/lib/module/components/SelectAmount/index.js.map +1 -0
- package/lib/module/components/Suggestions/SuggestionList.js +92 -0
- package/lib/module/components/Suggestions/SuggestionList.js.map +1 -0
- package/lib/module/components/TravelBooking/CarRentalForm.js +363 -0
- package/lib/module/components/TravelBooking/CarRentalForm.js.map +1 -0
- package/lib/module/components/TravelBooking/FlightForm.js +340 -0
- package/lib/module/components/TravelBooking/FlightForm.js.map +1 -0
- package/lib/module/components/TravelBooking/FlightSummary.js +254 -0
- package/lib/module/components/TravelBooking/FlightSummary.js.map +1 -0
- package/lib/module/components/TravelBooking/HotelForm.js +286 -0
- package/lib/module/components/TravelBooking/HotelForm.js.map +1 -0
- package/lib/module/components/TravelBooking/HotelSummary.js +239 -0
- package/lib/module/components/TravelBooking/HotelSummary.js.map +1 -0
- package/lib/module/components/TravelBooking/README.md +421 -0
- package/lib/module/components/TravelBooking/SummaryBar.js +174 -0
- package/lib/module/components/TravelBooking/SummaryBar.js.map +1 -0
- package/lib/module/components/TravelBooking/TabSelector.js +110 -0
- package/lib/module/components/TravelBooking/TabSelector.js.map +1 -0
- package/lib/module/components/TravelBooking/TravelBooking.js +243 -0
- package/lib/module/components/TravelBooking/TravelBooking.js.map +1 -0
- package/lib/module/components/TravelBooking/index.js +22 -0
- package/lib/module/components/TravelBooking/index.js.map +1 -0
- package/lib/module/components/TravelBooking/types.js +11 -0
- package/lib/module/components/TravelBooking/types.js.map +1 -0
- package/lib/module/components/UnlockRewards/UnlockRewards.js +2 -2
- package/lib/module/components/UnlockRewards/UnlockRewards.js.map +1 -1
- package/lib/module/index.js +7 -4
- package/lib/module/index.js.map +1 -1
- package/lib/typescript/commonjs/app.d.ts.map +1 -1
- package/lib/typescript/commonjs/components/DateRangePicker/DateRangePicker.d.ts +25 -0
- package/lib/typescript/commonjs/components/DateRangePicker/DateRangePicker.d.ts.map +1 -0
- package/lib/typescript/commonjs/components/DateRangePicker/index.d.ts +1 -0
- package/lib/typescript/commonjs/components/DateRangePicker/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/components/NumericStepper/NumericStepper.d.ts +19 -0
- package/lib/typescript/commonjs/components/NumericStepper/NumericStepper.d.ts.map +1 -0
- package/lib/typescript/commonjs/components/NumericStepper/index.d.ts +3 -0
- package/lib/typescript/commonjs/components/NumericStepper/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/components/SelectAmount/SelectAmount.d.ts +29 -0
- package/lib/typescript/commonjs/components/SelectAmount/SelectAmount.d.ts.map +1 -0
- package/lib/typescript/commonjs/components/SelectAmount/index.d.ts +1 -0
- package/lib/typescript/commonjs/components/SelectAmount/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/components/Suggestions/SuggestionList.d.ts +14 -0
- package/lib/typescript/commonjs/components/Suggestions/SuggestionList.d.ts.map +1 -0
- package/lib/typescript/commonjs/components/TravelBooking/CarRentalForm.d.ts +58 -0
- package/lib/typescript/commonjs/components/TravelBooking/CarRentalForm.d.ts.map +1 -0
- package/lib/typescript/commonjs/components/TravelBooking/FlightForm.d.ts +57 -0
- package/lib/typescript/commonjs/components/TravelBooking/FlightForm.d.ts.map +1 -0
- package/lib/typescript/commonjs/components/TravelBooking/FlightSummary.d.ts +41 -0
- package/lib/typescript/commonjs/components/TravelBooking/FlightSummary.d.ts.map +1 -0
- package/lib/typescript/commonjs/components/TravelBooking/HotelForm.d.ts +52 -0
- package/lib/typescript/commonjs/components/TravelBooking/HotelForm.d.ts.map +1 -0
- package/lib/typescript/commonjs/components/TravelBooking/HotelSummary.d.ts +44 -0
- package/lib/typescript/commonjs/components/TravelBooking/HotelSummary.d.ts.map +1 -0
- package/lib/typescript/commonjs/components/TravelBooking/SummaryBar.d.ts +17 -0
- package/lib/typescript/commonjs/components/TravelBooking/SummaryBar.d.ts.map +1 -0
- package/lib/typescript/commonjs/components/TravelBooking/TabSelector.d.ts +17 -0
- package/lib/typescript/commonjs/components/TravelBooking/TabSelector.d.ts.map +1 -0
- package/lib/typescript/commonjs/components/TravelBooking/TravelBooking.d.ts +84 -0
- package/lib/typescript/commonjs/components/TravelBooking/TravelBooking.d.ts.map +1 -0
- package/lib/typescript/commonjs/components/TravelBooking/index.d.ts +1 -0
- package/lib/typescript/commonjs/components/TravelBooking/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/components/TravelBooking/types.d.ts +26 -0
- package/lib/typescript/commonjs/components/TravelBooking/types.d.ts.map +1 -0
- package/lib/typescript/commonjs/index.d.ts +0 -1
- package/lib/typescript/commonjs/index.d.ts.map +1 -1
- package/lib/typescript/module/app.d.ts.map +1 -1
- package/lib/typescript/module/components/DateRangePicker/DateRangePicker.d.ts +25 -0
- package/lib/typescript/module/components/DateRangePicker/DateRangePicker.d.ts.map +1 -0
- package/lib/typescript/module/components/DateRangePicker/index.d.ts +1 -0
- package/lib/typescript/module/components/DateRangePicker/index.d.ts.map +1 -0
- package/lib/typescript/module/components/NumericStepper/NumericStepper.d.ts +19 -0
- package/lib/typescript/module/components/NumericStepper/NumericStepper.d.ts.map +1 -0
- package/lib/typescript/module/components/NumericStepper/index.d.ts +3 -0
- package/lib/typescript/module/components/NumericStepper/index.d.ts.map +1 -0
- package/lib/typescript/module/components/SelectAmount/SelectAmount.d.ts +29 -0
- package/lib/typescript/module/components/SelectAmount/SelectAmount.d.ts.map +1 -0
- package/lib/typescript/module/components/SelectAmount/index.d.ts +1 -0
- package/lib/typescript/module/components/SelectAmount/index.d.ts.map +1 -0
- package/lib/typescript/module/components/Suggestions/SuggestionList.d.ts +14 -0
- package/lib/typescript/module/components/Suggestions/SuggestionList.d.ts.map +1 -0
- package/lib/typescript/module/components/TravelBooking/CarRentalForm.d.ts +58 -0
- package/lib/typescript/module/components/TravelBooking/CarRentalForm.d.ts.map +1 -0
- package/lib/typescript/module/components/TravelBooking/FlightForm.d.ts +57 -0
- package/lib/typescript/module/components/TravelBooking/FlightForm.d.ts.map +1 -0
- package/lib/typescript/module/components/TravelBooking/FlightSummary.d.ts +41 -0
- package/lib/typescript/module/components/TravelBooking/FlightSummary.d.ts.map +1 -0
- package/lib/typescript/module/components/TravelBooking/HotelForm.d.ts +52 -0
- package/lib/typescript/module/components/TravelBooking/HotelForm.d.ts.map +1 -0
- package/lib/typescript/module/components/TravelBooking/HotelSummary.d.ts +44 -0
- package/lib/typescript/module/components/TravelBooking/HotelSummary.d.ts.map +1 -0
- package/lib/typescript/module/components/TravelBooking/SummaryBar.d.ts +17 -0
- package/lib/typescript/module/components/TravelBooking/SummaryBar.d.ts.map +1 -0
- package/lib/typescript/module/components/TravelBooking/TabSelector.d.ts +17 -0
- package/lib/typescript/module/components/TravelBooking/TabSelector.d.ts.map +1 -0
- package/lib/typescript/module/components/TravelBooking/TravelBooking.d.ts +84 -0
- package/lib/typescript/module/components/TravelBooking/TravelBooking.d.ts.map +1 -0
- package/lib/typescript/module/components/TravelBooking/index.d.ts +1 -0
- package/lib/typescript/module/components/TravelBooking/index.d.ts.map +1 -0
- package/lib/typescript/module/components/TravelBooking/types.d.ts +26 -0
- package/lib/typescript/module/components/TravelBooking/types.d.ts.map +1 -0
- package/lib/typescript/module/index.d.ts +0 -1
- package/lib/typescript/module/index.d.ts.map +1 -1
- package/package.json +12 -8
- package/src/app.tsx +77 -13
- package/src/components/DateRangePicker/DateRangePicker.tsx +410 -0
- package/src/components/DateRangePicker/index.ts +2 -0
- package/src/components/Filters/Filters.tsx +1 -1
- package/src/components/Input/Input.tsx +1 -1
- package/src/components/NumericStepper/NumericStepper.tsx +117 -0
- package/src/components/NumericStepper/index.ts +2 -0
- package/src/components/SelectAmount/SelectAmount.tsx +217 -0
- package/src/components/SelectAmount/index.ts +2 -0
- package/src/components/Suggestions/SuggestionList.tsx +106 -0
- package/src/components/TravelBooking/CarRentalForm.tsx +440 -0
- package/src/components/TravelBooking/FlightForm.tsx +452 -0
- package/src/components/TravelBooking/FlightSummary.tsx +388 -0
- package/src/components/TravelBooking/HotelForm.tsx +365 -0
- package/src/components/TravelBooking/HotelSummary.tsx +340 -0
- package/src/components/TravelBooking/README.md +421 -0
- package/src/components/TravelBooking/SummaryBar.tsx +239 -0
- package/src/components/TravelBooking/TabSelector.tsx +158 -0
- package/src/components/TravelBooking/TravelBooking.tsx +407 -0
- package/src/components/TravelBooking/index.ts +20 -0
- package/src/components/TravelBooking/types.ts +28 -0
- package/src/components/UnlockRewards/UnlockRewards.tsx +2 -2
- package/src/index.ts +4 -4
|
@@ -0,0 +1,421 @@
|
|
|
1
|
+
# TravelBooking
|
|
2
|
+
|
|
3
|
+
The `TravelBooking` component is a comprehensive travel booking solution that provides interfaces for flights, hotels, and car rentals. It offers customizable forms with search functionality, suggestions, date selection, and detailed summary options. The component is fully RTL-compatible and includes various styling options for seamless integration into any application design.
|
|
4
|
+
|
|
5
|
+

|
|
6
|
+

|
|
7
|
+
|
|
8
|
+
## Usage
|
|
9
|
+
|
|
10
|
+
```tsx
|
|
11
|
+
import { TravelBooking } from "@/components/TravelBooking";
|
|
12
|
+
import { useTheme } from "@/theme";
|
|
13
|
+
|
|
14
|
+
const MyBookingScreen = () => {
|
|
15
|
+
const { theme } = useTheme();
|
|
16
|
+
|
|
17
|
+
const handleSearch = (details) => {
|
|
18
|
+
console.log("Search details:", details);
|
|
19
|
+
// Handle search logic
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
const handleTabChange = (tab) => {
|
|
23
|
+
console.log("Selected tab:", tab);
|
|
24
|
+
// Handle tab change logic
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
return (
|
|
28
|
+
<TravelBooking
|
|
29
|
+
tabs={["Flights", "Hotels", "Car Rentals"]}
|
|
30
|
+
initialTab="Flights"
|
|
31
|
+
onTabChange={handleTabChange}
|
|
32
|
+
onSearch={handleSearch}
|
|
33
|
+
flightFormProps={{
|
|
34
|
+
fromLabel: "FROM",
|
|
35
|
+
toLabel: "TO",
|
|
36
|
+
departureLabel: "DEPARTURE",
|
|
37
|
+
returnLabel: "RETURN"
|
|
38
|
+
}}
|
|
39
|
+
hotelFormProps={{
|
|
40
|
+
destinationLabel: "DESTINATION",
|
|
41
|
+
checkinLabel: "CHECK-IN",
|
|
42
|
+
checkoutLabel: "CHECK-OUT"
|
|
43
|
+
}}
|
|
44
|
+
searchButtonStyle={{ backgroundColor: theme.primary }}
|
|
45
|
+
labelStyle={{ color: theme.labelText }}
|
|
46
|
+
/>
|
|
47
|
+
);
|
|
48
|
+
};
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## Core Components
|
|
52
|
+
|
|
53
|
+
The TravelBooking component integrates several specialized components:
|
|
54
|
+
|
|
55
|
+
### TabSelector
|
|
56
|
+
Allows users to switch between different booking types (flights, hotels, car rentals).
|
|
57
|
+
|
|
58
|
+
### FlightForm
|
|
59
|
+
A complete form for flight bookings with location inputs, date selection, and search functionality.
|
|
60
|
+
|
|
61
|
+
### HotelForm
|
|
62
|
+
A form for hotel bookings with destination input, date selection, and nationality picker.
|
|
63
|
+
|
|
64
|
+
### CarRentalForm
|
|
65
|
+
A form for car rentals with location inputs, date selection, and driver age selection.
|
|
66
|
+
|
|
67
|
+
### SummaryBar
|
|
68
|
+
A collapsible bar that displays booking summaries and allows for additional configuration.
|
|
69
|
+
|
|
70
|
+
### FlightSummary
|
|
71
|
+
Displays and manages flight details including passenger counts and class selection.
|
|
72
|
+
|
|
73
|
+
### HotelSummary
|
|
74
|
+
Displays and manages hotel booking details including room and guest configurations.
|
|
75
|
+
|
|
76
|
+
## TravelBooking Props
|
|
77
|
+
|
|
78
|
+
### Core Props
|
|
79
|
+
|
|
80
|
+
| Prop | Type | Default | Description |
|
|
81
|
+
|------|------|---------|-------------|
|
|
82
|
+
| `tabs` | `string[]` | `["Flights", "Hotels", "Car Rentals"]` | Array of tab names to display |
|
|
83
|
+
| `initialTab` | `string` | First tab in the `tabs` array | The initially selected tab |
|
|
84
|
+
| `onTabChange` | `(tab: string) => void` | `undefined` | Callback when the selected tab changes |
|
|
85
|
+
| `onSearch` | `(details: any) => void` | `undefined` | Callback when the search button is pressed |
|
|
86
|
+
| `onInputFocus` | `(input: FormInputType) => void` | `undefined` | Callback when any form input gains focus |
|
|
87
|
+
| `onTextChange` | `(text: string) => void` | `undefined` | Callback when text changes in location inputs |
|
|
88
|
+
|
|
89
|
+
### Selection Props
|
|
90
|
+
|
|
91
|
+
| Prop | Type | Default | Description |
|
|
92
|
+
|------|------|---------|-------------|
|
|
93
|
+
| `initialFlightSelection` | `FlightSelection` | `undefined` | Initial selection state for flight options |
|
|
94
|
+
| `initialHotelSelection` | `RoomState[]` | `undefined` | Initial selection state for hotel options |
|
|
95
|
+
| `onSummarySelectionChange` | `(selection: SelectionCallbackDataType) => void` | `undefined` | Callback when selection changes |
|
|
96
|
+
|
|
97
|
+
### Suggestion Data Props
|
|
98
|
+
|
|
99
|
+
| Prop | Type | Default | Description |
|
|
100
|
+
|------|------|---------|-------------|
|
|
101
|
+
| `flightSuggestionData` | `FlightSuggestions[]` | Default mock data | Suggestion data for flight locations |
|
|
102
|
+
| `hotelSuggestionData` | `HotelSuggestions[]` | Default mock data | Suggestion data for hotel destinations |
|
|
103
|
+
| `carSuggestionData` | `CarSuggestions[]` | Default mock data | Suggestion data for car rental locations |
|
|
104
|
+
|
|
105
|
+
### Style Props
|
|
106
|
+
|
|
107
|
+
| Prop | Type | Default | Description |
|
|
108
|
+
|------|------|---------|-------------|
|
|
109
|
+
| `formContainerStyle` | `StyleProp<ViewStyle>` | `undefined` | Style for the root container of each form |
|
|
110
|
+
| `labelStyle` | `StyleProp<TextStyle>` | `undefined` | Style for input labels |
|
|
111
|
+
| `inputStyle` | `StyleProp<ViewStyle>` | `undefined` | Style for the CustomInput's TextInput component |
|
|
112
|
+
| `inputTouchableStyle` | `StyleProp<ViewStyle>` | `undefined` | Style for the touchable wrapper around date displays |
|
|
113
|
+
| `inputTextStyle` | `StyleProp<TextStyle>` | `undefined` | Style for the text inside inputs or date displays |
|
|
114
|
+
| `dateSearchRowStyle` | `StyleProp<ViewStyle>` | `undefined` | Style for the container holding date picker(s) and search button |
|
|
115
|
+
| `dateInputGroupStyle` | `StyleProp<ViewStyle>` | `undefined` | Style for individual date display groups |
|
|
116
|
+
| `searchButtonStyle` | `StyleProp<ViewStyle>` | `undefined` | Style for the search button |
|
|
117
|
+
| `searchIconStyle` | `StyleProp<TextStyle>` | `undefined` | Style for the search icon |
|
|
118
|
+
| `calendarThemeOverrides` | `object` | `{}` | Theme overrides for the calendar component |
|
|
119
|
+
| `calendarContainerStyle` | `StyleProp<ViewStyle>` | `undefined` | Style for the container wrapping the calendar |
|
|
120
|
+
| `swapButtonContainerStyle` | `StyleProp<ViewStyle>` | `undefined` | Style for the container wrapping the swap button |
|
|
121
|
+
| `swapButtonStyle` | `StyleProp<ViewStyle>` | `undefined` | Style for the swap button itself |
|
|
122
|
+
| `swapIconStyle` | `StyleProp<TextStyle>` | `undefined` | Style for the swap icon |
|
|
123
|
+
| `inputGroupContainerStyle` | `StyleProp<ViewStyle>` | `undefined` | Style for the container wrapping input fields |
|
|
124
|
+
|
|
125
|
+
### Child Component Props
|
|
126
|
+
|
|
127
|
+
| Prop | Type | Default | Description |
|
|
128
|
+
|------|------|---------|-------------|
|
|
129
|
+
| `tabSelectorProps` | `Partial<TabSelectorProps>` | `undefined` | Props to pass to the TabSelector component |
|
|
130
|
+
| `summaryBarProps` | `Partial<SummaryBarProps>` | `undefined` | Props to pass to the SummaryBar component |
|
|
131
|
+
| `flightSummaryProps` | `Partial<FlightSummaryProps>` | `undefined` | Props to pass to the FlightSummary component |
|
|
132
|
+
| `hotelSummaryProps` | `Partial<HotelSummaryProps>` | `undefined` | Props to pass to the HotelSummary component |
|
|
133
|
+
| `flightFormProps` | `Partial<FlightFormProps>` | `undefined` | Props to pass to the FlightForm component |
|
|
134
|
+
| `hotelFormProps` | `Partial<HotelFormProps>` | `undefined` | Props to pass to the HotelForm component |
|
|
135
|
+
| `carRentalFormProps` | `Partial<CarRentalFormProps>` | `undefined` | Props to pass to the CarRentalForm component |
|
|
136
|
+
|
|
137
|
+
## FlightForm Props
|
|
138
|
+
|
|
139
|
+
| Prop | Type | Default | Description |
|
|
140
|
+
|------|------|---------|-------------|
|
|
141
|
+
| `initialFromLocation` | `string` | `"Beirut, Beirut Intl Arpt - BEY"` | Initial from location |
|
|
142
|
+
| `initialToLocation` | `string` | `"Dubai, Dubai Intl Arpt - DXB"` | Initial to location |
|
|
143
|
+
| `initialDepartureDate` | `string` | `undefined` | Initial departure date (YYYY-MM-DD) |
|
|
144
|
+
| `initialReturnDate` | `string` | `undefined` | Initial return date (YYYY-MM-DD) |
|
|
145
|
+
| `fromLabel` | `string` | `"FROM"` | Label for the from location input |
|
|
146
|
+
| `toLabel` | `string` | `"TO"` | Label for the to location input |
|
|
147
|
+
| `departureLabel` | `string` | `"DEPARTURE"` | Label for the departure date picker |
|
|
148
|
+
| `returnLabel` | `string` | `"RETURN"` | Label for the return date picker |
|
|
149
|
+
| `isOneWay` | `boolean` | `undefined` | If true, only departure date is required |
|
|
150
|
+
| `suggestionData` | `FlightSuggestions[]` | `undefined` | Suggestion data for locations |
|
|
151
|
+
|
|
152
|
+
## HotelForm Props
|
|
153
|
+
|
|
154
|
+
| Prop | Type | Default | Description |
|
|
155
|
+
|------|------|---------|-------------|
|
|
156
|
+
| `initialDestination` | `string` | `undefined` | Initial destination |
|
|
157
|
+
| `initialCheckinDate` | `string` | `undefined` | Initial check-in date (YYYY-MM-DD) |
|
|
158
|
+
| `initialCheckoutDate` | `string` | `undefined` | Initial check-out date (YYYY-MM-DD) |
|
|
159
|
+
| `initialNationality` | `string` | `undefined` | Initial nationality selection |
|
|
160
|
+
| `destinationLabel` | `string` | `"DESTINATION"` | Label for the destination input |
|
|
161
|
+
| `checkinLabel` | `string` | `"CHECK-IN"` | Label for the check-in date picker |
|
|
162
|
+
| `checkoutLabel` | `string` | `"CHECK-OUT"` | Label for the check-out date picker |
|
|
163
|
+
| `nationalityLabel` | `string` | `"NATIONALITY"` | Label for the nationality picker |
|
|
164
|
+
| `suggestionData` | `HotelSuggestions[]` | `undefined` | Suggestion data for destinations |
|
|
165
|
+
| `nationalityData` | `{ label: string; value: string }[]` | Default nationalities | Data for nationality picker |
|
|
166
|
+
|
|
167
|
+
## CarRentalForm Props
|
|
168
|
+
|
|
169
|
+
| Prop | Type | Default | Description |
|
|
170
|
+
|------|------|---------|-------------|
|
|
171
|
+
| `initialFromLocation` | `string` | `undefined` | Initial pick-up location |
|
|
172
|
+
| `initialToLocation` | `string` | `undefined` | Initial drop-off location |
|
|
173
|
+
| `initialPickupDate` | `string` | `undefined` | Initial pick-up date (YYYY-MM-DD) |
|
|
174
|
+
| `initialDropoffDate` | `string` | `undefined` | Initial drop-off date (YYYY-MM-DD) |
|
|
175
|
+
| `fromLabel` | `string` | `"PICK-UP"` | Label for the pick-up location input |
|
|
176
|
+
| `toLabel` | `string` | `"DROP-OFF"` | Label for the drop-off location input |
|
|
177
|
+
| `pickupLabel` | `string` | `"PICK-UP DATE"` | Label for the pick-up date picker |
|
|
178
|
+
| `dropoffLabel` | `string` | `"DROP-OFF DATE"` | Label for the drop-off date picker |
|
|
179
|
+
| `isOneWay` | `boolean` | `undefined` | If true, drop-off location can differ from pick-up |
|
|
180
|
+
| `suggestionData` | `CarSuggestions[]` | `undefined` | Suggestion data for locations |
|
|
181
|
+
|
|
182
|
+
## SummaryBar Props
|
|
183
|
+
|
|
184
|
+
| Prop | Type | Default | Description |
|
|
185
|
+
|------|------|---------|-------------|
|
|
186
|
+
| `containerStyle` | `StyleProp<ViewStyle>` | `undefined` | Style for the container |
|
|
187
|
+
| `summaryTextStyle` | `StyleProp<TextStyle>` | `undefined` | Style for the summary text |
|
|
188
|
+
| `iconStyle` | `StyleProp<TextStyle>` | `undefined` | Style for the icon |
|
|
189
|
+
| `onSelectionChange` | `(selection: SelectionCallbackDataType) => void` | `undefined` | Callback when selection changes |
|
|
190
|
+
| `mode` | `"flight" \| "hotel"` | Required | The mode of the summary bar |
|
|
191
|
+
| `flightProps` | `FlightSummaryProps` | `undefined` | Props for the FlightSummary component |
|
|
192
|
+
| `hotelProps` | `HotelSummaryProps` | `undefined` | Props for the HotelSummary component |
|
|
193
|
+
|
|
194
|
+
## Type Definitions
|
|
195
|
+
|
|
196
|
+
### FormInputType
|
|
197
|
+
```typescript
|
|
198
|
+
enum FormInputType {
|
|
199
|
+
FLIGHT_FROM = "flightFrom",
|
|
200
|
+
FLIGHT_TO = "flightTo",
|
|
201
|
+
HOTEL_DEST = "hotelDest",
|
|
202
|
+
CAR_PICKUP = "carPickup",
|
|
203
|
+
CAR_DROP_OFF = "carDropoff",
|
|
204
|
+
}
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
### FlightSuggestions
|
|
208
|
+
```typescript
|
|
209
|
+
interface FlightSuggestions {
|
|
210
|
+
id: string | number;
|
|
211
|
+
city: string;
|
|
212
|
+
value: string;
|
|
213
|
+
airports: string[];
|
|
214
|
+
}
|
|
215
|
+
```
|
|
216
|
+
|
|
217
|
+
### HotelSuggestions
|
|
218
|
+
```typescript
|
|
219
|
+
interface HotelSuggestions {
|
|
220
|
+
id: string | number;
|
|
221
|
+
city: string;
|
|
222
|
+
country: string;
|
|
223
|
+
value: string;
|
|
224
|
+
}
|
|
225
|
+
```
|
|
226
|
+
|
|
227
|
+
### CarSuggestions
|
|
228
|
+
```typescript
|
|
229
|
+
interface CarSuggestions {
|
|
230
|
+
id: string | number;
|
|
231
|
+
city: string;
|
|
232
|
+
country: string;
|
|
233
|
+
value: string;
|
|
234
|
+
}
|
|
235
|
+
```
|
|
236
|
+
|
|
237
|
+
### FlightSelection
|
|
238
|
+
```typescript
|
|
239
|
+
interface FlightSelection {
|
|
240
|
+
flightType: string;
|
|
241
|
+
flightClass: string;
|
|
242
|
+
passengers: Record<string, number>;
|
|
243
|
+
}
|
|
244
|
+
```
|
|
245
|
+
|
|
246
|
+
### RoomState
|
|
247
|
+
```typescript
|
|
248
|
+
interface RoomState {
|
|
249
|
+
id: string;
|
|
250
|
+
[key: string]: any; // Typically includes adults, children counts
|
|
251
|
+
}
|
|
252
|
+
```
|
|
253
|
+
|
|
254
|
+
## Advanced Usage
|
|
255
|
+
|
|
256
|
+
### Complete Example with Customization
|
|
257
|
+
|
|
258
|
+
```tsx
|
|
259
|
+
import { TravelBooking } from "@/components/TravelBooking";
|
|
260
|
+
import { useTheme } from "@/theme";
|
|
261
|
+
import { Ionicons } from "@expo/vector-icons";
|
|
262
|
+
import { useState } from "react";
|
|
263
|
+
|
|
264
|
+
const AdvancedBookingScreen = () => {
|
|
265
|
+
const { theme, isRTL } = useTheme();
|
|
266
|
+
const [currentTab, setCurrentTab] = useState("Flights");
|
|
267
|
+
|
|
268
|
+
// Custom flight suggestions
|
|
269
|
+
const customFlightSuggestions = [
|
|
270
|
+
{
|
|
271
|
+
id: 1,
|
|
272
|
+
city: "Paris",
|
|
273
|
+
value: "Paris, France",
|
|
274
|
+
airports: ["Charles de Gaulle (CDG)", "Orly (ORY)"]
|
|
275
|
+
},
|
|
276
|
+
{
|
|
277
|
+
id: 2,
|
|
278
|
+
city: "Tokyo",
|
|
279
|
+
value: "Tokyo, Japan",
|
|
280
|
+
airports: ["Narita (NRT)", "Haneda (HND)"]
|
|
281
|
+
}
|
|
282
|
+
];
|
|
283
|
+
|
|
284
|
+
// Handle search submission
|
|
285
|
+
const handleSearch = (details) => {
|
|
286
|
+
if (currentTab === "Flights") {
|
|
287
|
+
// Process flight search
|
|
288
|
+
const { from, to, departure, return: returnDate } = details;
|
|
289
|
+
console.log("Flight search:", { from, to, departure, returnDate });
|
|
290
|
+
} else if (currentTab === "Hotels") {
|
|
291
|
+
// Process hotel search
|
|
292
|
+
const { destination, checkin, checkout, nationality } = details;
|
|
293
|
+
console.log("Hotel search:", { destination, checkin, checkout, nationality });
|
|
294
|
+
} else if (currentTab === "Car Rentals") {
|
|
295
|
+
// Process car rental search
|
|
296
|
+
const { from, to, pickup, dropoff, driverAge } = details;
|
|
297
|
+
console.log("Car rental search:", { from, to, pickup, dropoff, driverAge });
|
|
298
|
+
}
|
|
299
|
+
};
|
|
300
|
+
|
|
301
|
+
return (
|
|
302
|
+
<TravelBooking
|
|
303
|
+
tabs={["Flights", "Hotels", "Car Rentals"]}
|
|
304
|
+
initialTab={currentTab}
|
|
305
|
+
onTabChange={setCurrentTab}
|
|
306
|
+
onSearch={handleSearch}
|
|
307
|
+
onInputFocus={(input) => console.log("Focus on:", input)}
|
|
308
|
+
|
|
309
|
+
// Custom flight form configuration
|
|
310
|
+
flightFormProps={{
|
|
311
|
+
fromLabel: "DEPARTURE CITY",
|
|
312
|
+
toLabel: "ARRIVAL CITY",
|
|
313
|
+
departureLabel: "OUTBOUND",
|
|
314
|
+
returnLabel: "INBOUND",
|
|
315
|
+
swapIconName: "repeat"
|
|
316
|
+
}}
|
|
317
|
+
|
|
318
|
+
// Custom hotel form configuration
|
|
319
|
+
hotelFormProps={{
|
|
320
|
+
destinationPlaceholder: "Where are you going?",
|
|
321
|
+
nationalityData: [
|
|
322
|
+
{ label: "Select Country", value: undefined },
|
|
323
|
+
{ label: "United States", value: "US" },
|
|
324
|
+
{ label: "Japan", value: "JP" }
|
|
325
|
+
]
|
|
326
|
+
}}
|
|
327
|
+
|
|
328
|
+
// Custom styling
|
|
329
|
+
labelStyle={{
|
|
330
|
+
color: theme.primary,
|
|
331
|
+
fontWeight: "bold",
|
|
332
|
+
textTransform: "uppercase"
|
|
333
|
+
}}
|
|
334
|
+
searchButtonStyle={{
|
|
335
|
+
backgroundColor: theme.accent,
|
|
336
|
+
borderRadius: 25
|
|
337
|
+
}}
|
|
338
|
+
searchIconStyle={{ color: "white" }}
|
|
339
|
+
|
|
340
|
+
// Custom data
|
|
341
|
+
flightSuggestionData={customFlightSuggestions}
|
|
342
|
+
|
|
343
|
+
// Flight summary customization
|
|
344
|
+
flightSummaryProps={{
|
|
345
|
+
flightTypesData: ["Round trip", "One way", "Multi-city"],
|
|
346
|
+
flightClassesData: ["Economy", "Premium Economy", "Business", "First"]
|
|
347
|
+
}}
|
|
348
|
+
|
|
349
|
+
// RTL support
|
|
350
|
+
tabSelectorProps={{
|
|
351
|
+
tabTextStyle: { textAlign: isRTL ? "right" : "left" }
|
|
352
|
+
}}
|
|
353
|
+
/>
|
|
354
|
+
);
|
|
355
|
+
};
|
|
356
|
+
```
|
|
357
|
+
|
|
358
|
+
### Using the Summary Bar
|
|
359
|
+
|
|
360
|
+
The SummaryBar component allows users to view and modify their selections without having to interact with the main form. It's especially useful for complex bookings.
|
|
361
|
+
|
|
362
|
+
```tsx
|
|
363
|
+
import { SummaryBar } from "@/components/TravelBooking";
|
|
364
|
+
import { useTheme } from "@/theme";
|
|
365
|
+
|
|
366
|
+
const SummaryBarExample = () => {
|
|
367
|
+
const { theme } = useTheme();
|
|
368
|
+
|
|
369
|
+
const handleSelectionChange = (selection) => {
|
|
370
|
+
console.log("Selection updated:", selection);
|
|
371
|
+
};
|
|
372
|
+
|
|
373
|
+
// Example for Flight Summary
|
|
374
|
+
return (
|
|
375
|
+
<SummaryBar
|
|
376
|
+
mode="flight"
|
|
377
|
+
onSelectionChange={handleSelectionChange}
|
|
378
|
+
containerStyle={{
|
|
379
|
+
borderRadius: 8,
|
|
380
|
+
marginBottom: 16
|
|
381
|
+
}}
|
|
382
|
+
summaryTextStyle={{
|
|
383
|
+
color: theme.onSurface,
|
|
384
|
+
fontWeight: "500"
|
|
385
|
+
}}
|
|
386
|
+
flightProps={{
|
|
387
|
+
passengersData: [
|
|
388
|
+
{
|
|
389
|
+
key: "adults",
|
|
390
|
+
name: "Adults",
|
|
391
|
+
description: "12+ years",
|
|
392
|
+
defaultValue: 2,
|
|
393
|
+
minValue: 1,
|
|
394
|
+
maxValue: 9
|
|
395
|
+
},
|
|
396
|
+
{
|
|
397
|
+
key: "children",
|
|
398
|
+
name: "Children",
|
|
399
|
+
description: "2-11 years",
|
|
400
|
+
defaultValue: 0,
|
|
401
|
+
minValue: 0,
|
|
402
|
+
maxValue: 6
|
|
403
|
+
}
|
|
404
|
+
],
|
|
405
|
+
selection: {
|
|
406
|
+
flightType: "Round trip",
|
|
407
|
+
flightClass: "Economy",
|
|
408
|
+
passengers: { adults: 2, children: 0, infants: 0 }
|
|
409
|
+
}
|
|
410
|
+
}}
|
|
411
|
+
/>
|
|
412
|
+
);
|
|
413
|
+
};
|
|
414
|
+
```
|
|
415
|
+
|
|
416
|
+
## Related Components
|
|
417
|
+
|
|
418
|
+
- `DateRangePicker`: Used for selecting date ranges in travel forms
|
|
419
|
+
- `CustomInput`: Used for text input fields throughout the forms
|
|
420
|
+
- `NumericStepper`: Used for incrementing/decrementing passenger and room counts
|
|
421
|
+
- `SuggestionList`: Used for displaying location suggestions
|
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import React, { useState, useCallback, useMemo, useEffect } from "react";
|
|
4
|
+
import { LayoutAnimation, Platform, StyleSheet, Text, TouchableOpacity, UIManager, View, ScrollView } from "react-native";
|
|
5
|
+
import FlightSummary from "./FlightSummary.js";
|
|
6
|
+
import HotelSummary from "./HotelSummary.js";
|
|
7
|
+
import { useTheme } from "@/theme";
|
|
8
|
+
import { Ionicons } from "@expo/vector-icons";
|
|
9
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
10
|
+
if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
|
|
11
|
+
UIManager.setLayoutAnimationEnabledExperimental(true);
|
|
12
|
+
}
|
|
13
|
+
// export type SummaryBarProps = FlightSummaryBarProps | HotelSummaryBarProps;
|
|
14
|
+
|
|
15
|
+
const SummaryBar = ({
|
|
16
|
+
mode,
|
|
17
|
+
containerStyle,
|
|
18
|
+
summaryTextStyle,
|
|
19
|
+
iconStyle,
|
|
20
|
+
onSelectionChange,
|
|
21
|
+
// initialSelection,
|
|
22
|
+
flightProps,
|
|
23
|
+
hotelProps
|
|
24
|
+
}) => {
|
|
25
|
+
const {
|
|
26
|
+
theme
|
|
27
|
+
} = useTheme();
|
|
28
|
+
const styles = useMemo(() => themedStyles(theme), [theme]);
|
|
29
|
+
const [isExpanded, setIsExpanded] = useState(false);
|
|
30
|
+
const [flightSelection, setFlightSelection] = useState(mode === "flight" ? flightProps?.selection : undefined);
|
|
31
|
+
const [hotelSelection, setHotelSelection] = useState(mode === "hotel" ? hotelProps?.selection : undefined);
|
|
32
|
+
useEffect(() => {
|
|
33
|
+
if (mode === "flight" && flightSelection) {
|
|
34
|
+
onSelectionChange?.(flightSelection);
|
|
35
|
+
} else if (mode === "hotel" && hotelSelection) {
|
|
36
|
+
onSelectionChange?.(hotelSelection);
|
|
37
|
+
}
|
|
38
|
+
}, []);
|
|
39
|
+
const handlePress = useCallback(() => {
|
|
40
|
+
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
|
|
41
|
+
setIsExpanded(!isExpanded);
|
|
42
|
+
}, [isExpanded]);
|
|
43
|
+
const handleInternalSelectionChange = useCallback(newSelection => {
|
|
44
|
+
if (mode === "flight") {
|
|
45
|
+
if (typeof newSelection === "object" && !Array.isArray(newSelection) && "flightType" in newSelection) {
|
|
46
|
+
setFlightSelection(newSelection);
|
|
47
|
+
onSelectionChange?.(newSelection);
|
|
48
|
+
}
|
|
49
|
+
} else if (mode === "hotel") {
|
|
50
|
+
if (Array.isArray(newSelection)) {
|
|
51
|
+
setHotelSelection(newSelection);
|
|
52
|
+
onSelectionChange?.(newSelection);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}, [mode, onSelectionChange]);
|
|
56
|
+
const formattedSelectionText = useMemo(() => {
|
|
57
|
+
if (mode === "flight") {
|
|
58
|
+
if (!flightSelection) return "Round trip, 1 passenger, Economy";
|
|
59
|
+
const passengersCount = Object.values(flightSelection.passengers ?? {}).reduce((sum, count) => sum + count, 0);
|
|
60
|
+
const passengerText = passengersCount === 1 ? "1 passenger" : `${passengersCount} passengers`;
|
|
61
|
+
return `${flightSelection.flightType}, ${passengerText}, ${flightSelection.flightClass}`;
|
|
62
|
+
} else if (mode === "hotel") {
|
|
63
|
+
if (!hotelSelection || hotelSelection.length === 0) return "1 Room, 2 Guests";
|
|
64
|
+
const rooms = hotelSelection;
|
|
65
|
+
const guestConfig = hotelProps?.guestConfigData ?? undefined;
|
|
66
|
+
let totalGuests = 0;
|
|
67
|
+
if (guestConfig) {
|
|
68
|
+
totalGuests = rooms.reduce((sum, room) => {
|
|
69
|
+
let roomSum = 0;
|
|
70
|
+
guestConfig.forEach(guest => {
|
|
71
|
+
roomSum += room[guest.key] ?? 0;
|
|
72
|
+
});
|
|
73
|
+
return sum + roomSum;
|
|
74
|
+
}, 0);
|
|
75
|
+
} else {
|
|
76
|
+
const totalAdults = rooms.reduce((sum, room) => sum + room.adults, 0);
|
|
77
|
+
const totalChildren = rooms.reduce((sum, room) => sum + room.children, 0);
|
|
78
|
+
totalGuests = totalAdults + totalChildren;
|
|
79
|
+
}
|
|
80
|
+
const roomText = rooms.length === 1 ? "1 Room" : `${rooms.length} Rooms`;
|
|
81
|
+
const guestText = totalGuests === 1 ? "1 Guest" : `${totalGuests} Guests`;
|
|
82
|
+
return `${roomText}, ${guestText}`;
|
|
83
|
+
}
|
|
84
|
+
return "Select details";
|
|
85
|
+
}, [flightSelection, hotelSelection, mode, hotelProps?.guestConfigData]);
|
|
86
|
+
return /*#__PURE__*/_jsxs(View, {
|
|
87
|
+
style: [styles.container, containerStyle],
|
|
88
|
+
children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
|
|
89
|
+
style: [styles.summaryContainer, isExpanded && {
|
|
90
|
+
backgroundColor: theme.surface
|
|
91
|
+
}],
|
|
92
|
+
onPress: handlePress,
|
|
93
|
+
activeOpacity: 0.8,
|
|
94
|
+
accessibilityRole: "button",
|
|
95
|
+
accessibilityState: {
|
|
96
|
+
expanded: isExpanded
|
|
97
|
+
},
|
|
98
|
+
accessibilityLabel: formattedSelectionText,
|
|
99
|
+
accessibilityHint: isExpanded ? "Collapses content" : "Expands content",
|
|
100
|
+
children: [/*#__PURE__*/_jsx(Text, {
|
|
101
|
+
style: [styles.summaryText, summaryTextStyle],
|
|
102
|
+
numberOfLines: 1,
|
|
103
|
+
children: formattedSelectionText
|
|
104
|
+
}), /*#__PURE__*/_jsx(Ionicons, {
|
|
105
|
+
name: isExpanded ? "chevron-up" : "chevron-down",
|
|
106
|
+
size: 22,
|
|
107
|
+
color: theme.secondaryText || theme.border,
|
|
108
|
+
style: iconStyle
|
|
109
|
+
})]
|
|
110
|
+
}), isExpanded && /*#__PURE__*/_jsxs(ScrollView, {
|
|
111
|
+
showsVerticalScrollIndicator: false,
|
|
112
|
+
style: styles.contentContainer,
|
|
113
|
+
children: [mode === "flight" && /*#__PURE__*/_jsx(FlightSummary, {
|
|
114
|
+
selection: flightSelection,
|
|
115
|
+
onSelectionChange: handleInternalSelectionChange,
|
|
116
|
+
...flightProps
|
|
117
|
+
}), mode === "hotel" && /*#__PURE__*/_jsx(HotelSummary, {
|
|
118
|
+
selection: hotelSelection,
|
|
119
|
+
onSelectionChange: handleInternalSelectionChange,
|
|
120
|
+
...hotelProps
|
|
121
|
+
})]
|
|
122
|
+
})]
|
|
123
|
+
});
|
|
124
|
+
};
|
|
125
|
+
const themedStyles = theme => StyleSheet.create({
|
|
126
|
+
container: {
|
|
127
|
+
backgroundColor: theme.surfaceVariant || theme.surface,
|
|
128
|
+
borderRadius: 8,
|
|
129
|
+
// overflow: "hidden",
|
|
130
|
+
// width: "auto",
|
|
131
|
+
alignSelf: "stretch",
|
|
132
|
+
position: "relative",
|
|
133
|
+
borderWidth: 1,
|
|
134
|
+
borderColor: theme.border
|
|
135
|
+
},
|
|
136
|
+
summaryContainer: {
|
|
137
|
+
flexDirection: "row",
|
|
138
|
+
justifyContent: "space-between",
|
|
139
|
+
alignItems: "center",
|
|
140
|
+
paddingVertical: 14,
|
|
141
|
+
paddingHorizontal: 16
|
|
142
|
+
},
|
|
143
|
+
summaryText: {
|
|
144
|
+
color: theme.onSurfaceVariant || theme.onSurface,
|
|
145
|
+
fontSize: 15,
|
|
146
|
+
fontWeight: "500",
|
|
147
|
+
flex: 1,
|
|
148
|
+
marginRight: 10
|
|
149
|
+
},
|
|
150
|
+
contentContainer: {
|
|
151
|
+
borderTopWidth: 1,
|
|
152
|
+
borderTopColor: theme.border,
|
|
153
|
+
width: "100%",
|
|
154
|
+
position: "absolute",
|
|
155
|
+
zIndex: 100,
|
|
156
|
+
top: 50,
|
|
157
|
+
maxHeight: 400,
|
|
158
|
+
shadowColor: "#000",
|
|
159
|
+
// Typically black shadow
|
|
160
|
+
shadowOffset: {
|
|
161
|
+
width: 0,
|
|
162
|
+
// Horizontal offset
|
|
163
|
+
height: 3 // Vertical offset (positive value pushes shadow down)
|
|
164
|
+
},
|
|
165
|
+
shadowOpacity: 0.15,
|
|
166
|
+
// How visible the shadow is (0 to 1)
|
|
167
|
+
shadowRadius: 5,
|
|
168
|
+
// How blurry the shadow is
|
|
169
|
+
// Android Shadow Property
|
|
170
|
+
elevation: 5 // Simulates shadow depth on Android (adjust value as needed)
|
|
171
|
+
}
|
|
172
|
+
});
|
|
173
|
+
export default SummaryBar;
|
|
174
|
+
//# sourceMappingURL=SummaryBar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","useState","useCallback","useMemo","useEffect","LayoutAnimation","Platform","StyleSheet","Text","TouchableOpacity","UIManager","View","ScrollView","FlightSummary","HotelSummary","useTheme","Ionicons","jsx","_jsx","jsxs","_jsxs","OS","setLayoutAnimationEnabledExperimental","SummaryBar","mode","containerStyle","summaryTextStyle","iconStyle","onSelectionChange","flightProps","hotelProps","theme","styles","themedStyles","isExpanded","setIsExpanded","flightSelection","setFlightSelection","selection","undefined","hotelSelection","setHotelSelection","handlePress","configureNext","Presets","easeInEaseOut","handleInternalSelectionChange","newSelection","Array","isArray","formattedSelectionText","passengersCount","Object","values","passengers","reduce","sum","count","passengerText","flightType","flightClass","length","rooms","guestConfig","guestConfigData","totalGuests","room","roomSum","forEach","guest","key","totalAdults","adults","totalChildren","children","roomText","guestText","style","container","summaryContainer","backgroundColor","surface","onPress","activeOpacity","accessibilityRole","accessibilityState","expanded","accessibilityLabel","accessibilityHint","summaryText","numberOfLines","name","size","color","secondaryText","border","showsVerticalScrollIndicator","contentContainer","create","surfaceVariant","borderRadius","alignSelf","position","borderWidth","borderColor","flexDirection","justifyContent","alignItems","paddingVertical","paddingHorizontal","onSurfaceVariant","onSurface","fontSize","fontWeight","flex","marginRight","borderTopWidth","borderTopColor","width","zIndex","top","maxHeight","shadowColor","shadowOffset","height","shadowOpacity","shadowRadius","elevation"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/TravelBooking/SummaryBar.tsx"],"mappings":"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","ignoreList":[]}
|