related-ui-components 2.7.5 → 2.7.7
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/module/app.js +17 -57
- package/lib/module/app.js.map +1 -1
- package/lib/module/components/CarouselCardStack/CarouselCardStack.js +99 -81
- package/lib/module/components/CarouselCardStack/CarouselCardStack.js.map +1 -1
- package/lib/module/components/TravelBooking/FlightSummary.js +219 -112
- package/lib/module/components/TravelBooking/FlightSummary.js.map +1 -1
- package/lib/module/components/TravelBooking/HotelSummary.js +168 -37
- package/lib/module/components/TravelBooking/HotelSummary.js.map +1 -1
- package/lib/module/components/TravelBooking/SummaryBar.js +239 -172
- package/lib/module/components/TravelBooking/SummaryBar.js.map +1 -1
- package/lib/module/components/TravelBooking/TravelBooking.js +407 -241
- package/lib/module/components/TravelBooking/TravelBooking.js.map +1 -1
- package/lib/module/components/TravelBooking/index.js +5 -4
- package/lib/module/components/TravelBooking/index.js.map +1 -1
- package/lib/typescript/src/app.d.ts.map +1 -1
- package/lib/typescript/src/components/CarouselCardStack/CarouselCardStack.d.ts.map +1 -1
- package/lib/typescript/src/components/TravelBooking/FlightSummary.d.ts +25 -11
- package/lib/typescript/src/components/TravelBooking/FlightSummary.d.ts.map +1 -1
- package/lib/typescript/src/components/TravelBooking/HotelSummary.d.ts +14 -0
- package/lib/typescript/src/components/TravelBooking/HotelSummary.d.ts.map +1 -1
- package/lib/typescript/src/components/TravelBooking/SummaryBar.d.ts +1 -16
- package/lib/typescript/src/components/TravelBooking/SummaryBar.d.ts.map +1 -1
- package/lib/typescript/src/components/TravelBooking/TravelBooking.d.ts +1 -83
- package/lib/typescript/src/components/TravelBooking/TravelBooking.d.ts.map +1 -1
- package/lib/typescript/src/components/TravelBooking/index.d.ts +0 -4
- package/lib/typescript/src/components/TravelBooking/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/app.tsx +18 -39
- package/src/components/CarouselCardStack/CarouselCardStack.tsx +130 -120
- package/src/components/TravelBooking/FlightSummary.tsx +264 -164
- package/src/components/TravelBooking/HotelSummary.tsx +243 -76
- package/src/components/TravelBooking/SummaryBar.tsx +239 -239
- package/src/components/TravelBooking/TravelBooking.tsx +407 -407
- package/src/components/TravelBooking/index.ts +4 -4
- package/src/index.ts +1 -1
|
@@ -1,174 +1,241 @@
|
|
|
1
|
-
|
|
1
|
+
// import React, { useState, useCallback, useMemo, useEffect } from "react";
|
|
2
|
+
// import {
|
|
3
|
+
// LayoutAnimation,
|
|
4
|
+
// Platform,
|
|
5
|
+
// StyleSheet,
|
|
6
|
+
// Text,
|
|
7
|
+
// TouchableOpacity,
|
|
8
|
+
// UIManager,
|
|
9
|
+
// View,
|
|
10
|
+
// StyleProp,
|
|
11
|
+
// ViewStyle,
|
|
12
|
+
// TextStyle,
|
|
13
|
+
// ScrollView,
|
|
14
|
+
// Dimensions,
|
|
15
|
+
// } from "react-native";
|
|
16
|
+
// import FlightSummary, {
|
|
17
|
+
// FlightSelection,
|
|
18
|
+
// FlightSummaryProps as FlightChildProps,
|
|
19
|
+
// FlightSummaryProps,
|
|
20
|
+
// } from "./FlightSummary";
|
|
21
|
+
// import HotelSummary, {
|
|
22
|
+
// RoomState,
|
|
23
|
+
// HotelSummaryProps as HotelChildProps,
|
|
24
|
+
// HotelSummaryProps,
|
|
25
|
+
// } from "./HotelSummary";
|
|
26
|
+
// import { ThemeType, useTheme } from "../../theme";
|
|
27
|
+
// import { Ionicons } from "@expo/vector-icons";
|
|
28
|
+
|
|
29
|
+
// if (
|
|
30
|
+
// Platform.OS === "android" &&
|
|
31
|
+
// UIManager.setLayoutAnimationEnabledExperimental
|
|
32
|
+
// ) {
|
|
33
|
+
// UIManager.setLayoutAnimationEnabledExperimental(true);
|
|
34
|
+
// }
|
|
35
|
+
|
|
36
|
+
// export type SelectionCallbackDataType = FlightSelection | RoomState[];
|
|
37
|
+
|
|
38
|
+
// export type SummaryBarProps = {
|
|
39
|
+
// containerStyle?: StyleProp<ViewStyle>;
|
|
40
|
+
// summaryTextStyle?: StyleProp<TextStyle>;
|
|
41
|
+
// iconStyle?: StyleProp<TextStyle>;
|
|
42
|
+
// onSelectionChange?: (selection: SelectionCallbackDataType) => void;
|
|
43
|
+
// mode: "flight" | "hotel",
|
|
44
|
+
// flightProps?: FlightSummaryProps;
|
|
45
|
+
// hotelProps?: HotelSummaryProps;
|
|
46
|
+
// };
|
|
47
|
+
|
|
48
|
+
// // export type SummaryBarProps = FlightSummaryBarProps | HotelSummaryBarProps;
|
|
49
|
+
|
|
50
|
+
// const SummaryBar: React.FC<SummaryBarProps> = ({
|
|
51
|
+
// mode,
|
|
52
|
+
// containerStyle,
|
|
53
|
+
// summaryTextStyle,
|
|
54
|
+
// iconStyle,
|
|
55
|
+
// onSelectionChange,
|
|
56
|
+
// // initialSelection,
|
|
57
|
+
// flightProps,
|
|
58
|
+
// hotelProps,
|
|
59
|
+
// }) => {
|
|
60
|
+
// const { theme } = useTheme();
|
|
61
|
+
// const styles = useMemo(() => themedStyles(theme), [theme]);
|
|
62
|
+
|
|
63
|
+
// const [isExpanded, setIsExpanded] = useState(false);
|
|
64
|
+
|
|
65
|
+
// const [flightSelection, setFlightSelection] =
|
|
66
|
+
// useState<FlightSelection | undefined>(
|
|
67
|
+
// mode === "flight" ? flightProps?.selection : undefined
|
|
68
|
+
// );
|
|
69
|
+
// const [hotelSelection, setHotelSelection] = useState<RoomState[] | undefined>(
|
|
70
|
+
// mode === "hotel" ? hotelProps?.selection : undefined
|
|
71
|
+
// );
|
|
72
|
+
|
|
73
|
+
// useEffect(() => {
|
|
74
|
+
// if (mode === "flight" && flightSelection) {
|
|
75
|
+
// onSelectionChange?.(flightSelection);
|
|
76
|
+
// } else if (mode === "hotel" && hotelSelection) {
|
|
77
|
+
// onSelectionChange?.(hotelSelection);
|
|
78
|
+
// }
|
|
79
|
+
// }, []);
|
|
2
80
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
if (
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
//
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
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;
|
|
81
|
+
// const handlePress = useCallback(() => {
|
|
82
|
+
// LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
|
|
83
|
+
// setIsExpanded(!isExpanded);
|
|
84
|
+
// }, [isExpanded]);
|
|
85
|
+
|
|
86
|
+
// const handleInternalSelectionChange = useCallback(
|
|
87
|
+
// (newSelection: FlightSelection | RoomState[]) => {
|
|
88
|
+
// if (mode === "flight") {
|
|
89
|
+
// if (
|
|
90
|
+
// typeof newSelection === "object" &&
|
|
91
|
+
// !Array.isArray(newSelection) &&
|
|
92
|
+
// "flightType" in newSelection
|
|
93
|
+
// ) {
|
|
94
|
+
// setFlightSelection(newSelection as FlightSelection);
|
|
95
|
+
// onSelectionChange?.(newSelection as FlightSelection);
|
|
96
|
+
// }
|
|
97
|
+
// } else if (mode === "hotel") {
|
|
98
|
+
// if (Array.isArray(newSelection)) {
|
|
99
|
+
// setHotelSelection(newSelection as RoomState[]);
|
|
100
|
+
// onSelectionChange?.(newSelection as RoomState[]);
|
|
101
|
+
// }
|
|
102
|
+
// }
|
|
103
|
+
// },
|
|
104
|
+
// [mode, onSelectionChange]
|
|
105
|
+
// );
|
|
106
|
+
|
|
107
|
+
// const formattedSelectionText = useMemo((): string => {
|
|
108
|
+
// if (mode === "flight") {
|
|
109
|
+
// if (!flightSelection) return "Round trip, 1 passenger, Economy";
|
|
110
|
+
// const passengersCount = Object.values(
|
|
111
|
+
// flightSelection.passengers ?? {}
|
|
112
|
+
// ).reduce((sum, count) => sum + count, 0);
|
|
113
|
+
// const passengerText =
|
|
114
|
+
// passengersCount === 1 ? "1 passenger" : `${passengersCount} passengers`;
|
|
115
|
+
// return `${flightSelection.flightType}, ${passengerText}, ${flightSelection.flightClass}`;
|
|
116
|
+
// } else if (mode === "hotel") {
|
|
117
|
+
// if (!hotelSelection || hotelSelection.length === 0)
|
|
118
|
+
// return "1 Room, 2 Guests";
|
|
119
|
+
// const rooms = hotelSelection;
|
|
120
|
+
// const guestConfig = hotelProps?.guestConfigData ?? undefined;
|
|
121
|
+
// let totalGuests = 0;
|
|
122
|
+
// if (guestConfig) {
|
|
123
|
+
// totalGuests = rooms.reduce((sum, room) => {
|
|
124
|
+
// let roomSum = 0;
|
|
125
|
+
// guestConfig.forEach((guest) => {
|
|
126
|
+
// roomSum += room[guest.key] ?? 0;
|
|
127
|
+
// });
|
|
128
|
+
// return sum + roomSum;
|
|
129
|
+
// }, 0);
|
|
130
|
+
// } else {
|
|
131
|
+
// const totalAdults = rooms.reduce((sum, room) => sum + room.adults, 0);
|
|
132
|
+
// const totalChildren = rooms.reduce(
|
|
133
|
+
// (sum, room) => sum + room.children,
|
|
134
|
+
// 0
|
|
135
|
+
// );
|
|
136
|
+
// totalGuests = totalAdults + totalChildren;
|
|
137
|
+
// }
|
|
138
|
+
|
|
139
|
+
// const roomText = rooms.length === 1 ? "1 Room" : `${rooms.length} Rooms`;
|
|
140
|
+
// const guestText =
|
|
141
|
+
// totalGuests === 1 ? "1 Guest" : `${totalGuests} Guests`;
|
|
142
|
+
// return `${roomText}, ${guestText}`;
|
|
143
|
+
// }
|
|
144
|
+
// return "Select details";
|
|
145
|
+
// }, [flightSelection, hotelSelection, mode, hotelProps?.guestConfigData]);
|
|
146
|
+
|
|
147
|
+
// return (
|
|
148
|
+
// <View style={[styles.container, containerStyle]}>
|
|
149
|
+
// <TouchableOpacity
|
|
150
|
+
// style={[styles.summaryContainer, isExpanded && {backgroundColor: theme.surface}]}
|
|
151
|
+
// onPress={handlePress}
|
|
152
|
+
// activeOpacity={0.8}
|
|
153
|
+
// accessibilityRole="button"
|
|
154
|
+
// accessibilityState={{ expanded: isExpanded }}
|
|
155
|
+
// accessibilityLabel={formattedSelectionText}
|
|
156
|
+
// accessibilityHint={
|
|
157
|
+
// isExpanded ? "Collapses content" : "Expands content"
|
|
158
|
+
// }
|
|
159
|
+
// >
|
|
160
|
+
// <Text style={[styles.summaryText, summaryTextStyle]} numberOfLines={1}>
|
|
161
|
+
// {formattedSelectionText}
|
|
162
|
+
// </Text>
|
|
163
|
+
// <Ionicons
|
|
164
|
+
// name={isExpanded ? "chevron-up" : "chevron-down"}
|
|
165
|
+
// size={22}
|
|
166
|
+
// color={ theme.border}
|
|
167
|
+
// style={iconStyle}
|
|
168
|
+
// />
|
|
169
|
+
// </TouchableOpacity>
|
|
170
|
+
|
|
171
|
+
// {isExpanded && (
|
|
172
|
+
// <ScrollView showsVerticalScrollIndicator={false} style={styles.contentContainer}>
|
|
173
|
+
// {mode === "flight" && (
|
|
174
|
+
// <FlightSummary
|
|
175
|
+
// selection={flightSelection}
|
|
176
|
+
// onSelectionChange={handleInternalSelectionChange}
|
|
177
|
+
// {...flightProps}
|
|
178
|
+
// />
|
|
179
|
+
// )}
|
|
180
|
+
// {mode === "hotel" && (
|
|
181
|
+
// <HotelSummary
|
|
182
|
+
// selection={hotelSelection}
|
|
183
|
+
// onSelectionChange={handleInternalSelectionChange}
|
|
184
|
+
// {...hotelProps}
|
|
185
|
+
// />
|
|
186
|
+
// )}
|
|
187
|
+
// </ScrollView>
|
|
188
|
+
// )}
|
|
189
|
+
// </View>
|
|
190
|
+
// );
|
|
191
|
+
// };
|
|
192
|
+
|
|
193
|
+
// const themedStyles = (theme: ThemeType) =>
|
|
194
|
+
// StyleSheet.create({
|
|
195
|
+
// container: {
|
|
196
|
+
// backgroundColor: theme.surfaceVariant || theme.surface,
|
|
197
|
+
// borderRadius: 8,
|
|
198
|
+
// // overflow: "hidden",
|
|
199
|
+
// // width: "auto",
|
|
200
|
+
// alignSelf: "stretch",
|
|
201
|
+
// position:"relative",
|
|
202
|
+
// borderWidth: 1,
|
|
203
|
+
// borderColor: theme.border,
|
|
204
|
+
// },
|
|
205
|
+
// summaryContainer: {
|
|
206
|
+
// flexDirection: "row",
|
|
207
|
+
// justifyContent: "space-between",
|
|
208
|
+
// alignItems: "center",
|
|
209
|
+
// paddingVertical: 14,
|
|
210
|
+
// paddingHorizontal: 16,
|
|
211
|
+
// },
|
|
212
|
+
// summaryText: {
|
|
213
|
+
// color: theme.onSurface,
|
|
214
|
+
// fontSize: 15,
|
|
215
|
+
// fontWeight: "500",
|
|
216
|
+
// flex: 1,
|
|
217
|
+
// marginRight: 10,
|
|
218
|
+
// },
|
|
219
|
+
// contentContainer: {
|
|
220
|
+
// borderTopWidth: 1,
|
|
221
|
+
// borderTopColor: theme.border,
|
|
222
|
+
// width: "100%",
|
|
223
|
+
// position: "absolute",
|
|
224
|
+
// zIndex: 100,
|
|
225
|
+
// top: 50,
|
|
226
|
+
// maxHeight: 400,
|
|
227
|
+
// shadowColor: "#000", // Typically black shadow
|
|
228
|
+
// shadowOffset: {
|
|
229
|
+
// width: 0, // Horizontal offset
|
|
230
|
+
// height: 3, // Vertical offset (positive value pushes shadow down)
|
|
231
|
+
// },
|
|
232
|
+
// shadowOpacity: 0.15, // How visible the shadow is (0 to 1)
|
|
233
|
+
// shadowRadius: 5, // How blurry the shadow is
|
|
234
|
+
// // Android Shadow Property
|
|
235
|
+
// elevation: 5, // Simulates shadow depth on Android (adjust value as needed)
|
|
236
|
+
// },
|
|
237
|
+
// });
|
|
238
|
+
|
|
239
|
+
// export default SummaryBar;
|
|
240
|
+
"use strict";
|
|
174
241
|
//# sourceMappingURL=SummaryBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/TravelBooking/SummaryBar.tsx"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAAA","ignoreList":[]}
|