related-ui-components 2.5.2 → 2.5.4

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.
Files changed (20) hide show
  1. package/lib/module/app.js +86 -139
  2. package/lib/module/app.js.map +1 -1
  3. package/lib/module/components/Input/CountryPickerView.js +107 -0
  4. package/lib/module/components/Input/CountryPickerView.js.map +1 -0
  5. package/lib/module/components/Input/PhoneInput.js +41 -87
  6. package/lib/module/components/Input/PhoneInput.js.map +1 -1
  7. package/lib/module/index.js +4 -7
  8. package/lib/module/index.js.map +1 -1
  9. package/lib/typescript/src/app.d.ts +3 -1
  10. package/lib/typescript/src/app.d.ts.map +1 -1
  11. package/lib/typescript/src/components/Input/CountryPickerView.d.ts +14 -0
  12. package/lib/typescript/src/components/Input/CountryPickerView.d.ts.map +1 -0
  13. package/lib/typescript/src/components/Input/PhoneInput.d.ts.map +1 -1
  14. package/lib/typescript/src/index.d.ts +1 -0
  15. package/lib/typescript/src/index.d.ts.map +1 -1
  16. package/package.json +1 -1
  17. package/src/app.tsx +134 -134
  18. package/src/components/Input/CountryPickerView.tsx +114 -0
  19. package/src/components/Input/PhoneInput.tsx +63 -91
  20. package/src/index.ts +4 -4
package/lib/module/app.js CHANGED
@@ -1,142 +1,89 @@
1
- // import React, { useState } from "react";
2
- // import { SafeAreaView, StyleSheet, StatusBar } from "react-native";
3
- // import CarouselCardStack from "./components/CarouselCardStack/CarouselCardStack"; // Adjust path as needed
4
- // import { GestureHandlerRootView } from "react-native-gesture-handler";
5
- // import {
6
- // CarRentalForm,
7
- // DateRangePicker,
8
- // FlightForm,
9
- // FlightSummary,
10
- // HotelForm,
11
- // HotelSummary,
12
- // Filters,
13
- // } from "./components";
14
- // import { lightTheme, RelatedProvider, useTheme } from "./theme";
15
- // import CircularProgressBar from "./components/ProgressBar/CircularProgressBar";
16
- // import PhoneInput from "./components/Input/PhoneInput";
17
- // import { BottomSheetStackProvider } from "./contexts";
18
- // import { SafeAreaProvider } from "react-native-safe-area-context";
19
-
20
- // // Sample data - replace with your actual image URLs
21
- // const DUMMY_DATA = [
22
- // {
23
- // id: "1",
24
- // image:
25
- // "https://images.pexels.com/photos/3354648/pexels-photo-3354648.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
26
- // title: "Mountain Lake",
27
- // },
28
- // // {
29
- // // id: "2",
30
- // // image:
31
- // // "https://images.pexels.com/photos/163273/sunrise-speedboat-ocean-water-163273.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
32
- // // title: "Sunset Cruise",
33
- // // },
34
- // {
35
- // id: "3",
36
- // image:
37
- // "https://images.pexels.com/photos/1430677/pexels-photo-1430677.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
38
- // title: "Ocean Horizon",
39
- // },
40
- // {
41
- // id: "4",
42
- // image:
43
- // "https://images.pexels.com/photos/2387793/pexels-photo-2387793.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
44
- // title: "Forest Trail",
45
- // },
46
- // // {
47
- // // id: "5",
48
- // // image:
49
- // // "https://images.pexels.com/photos/302804/pexels-photo-302804.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
50
- // // title: "City Lights",
51
- // // },
52
- // ];
53
-
54
- // const App = () => {
55
- // const { theme } = useTheme();
56
-
57
- // const [departureDate, setDepartureDate] = useState<string | undefined>(
58
- // undefined
59
- // );
60
- // const [returnDate, setReturnDate] = useState<string | undefined>(undefined);
61
-
62
- // const [progress, setProgress] = useState(25);
63
- // const handleAnimate = () => {
64
- // // Set progress to a new random value between 0 and 100
65
- // const newProgress = Math.floor(Math.random() * 101);
66
- // setProgress(newProgress);
67
- // };
68
- // return (
69
- // <>
70
- // <SafeAreaProvider>
71
- // <GestureHandlerRootView style={{ flex: 1 }}>
72
- // <RelatedProvider theme={lightTheme}>
73
- // <BottomSheetStackProvider>
74
- // <StatusBar barStyle="light-content" />
75
- // <SafeAreaView style={styles.appContainer}>
76
- // {/* <CircularProgressBar
77
- // progress={5}
78
- // lineCap="round"
79
- // textFont={""}
80
- // /> */}
81
- // {/* <DateRangePicker
82
- // onDatesChange={(t) => {
83
- // setDepartureDate(t.departure);
84
- // setReturnDate(t.return);
85
- // }}
86
- // departureDate={departureDate}
87
- // // departureDisplayValue={departureDate}
88
- // returnDate={returnDate}
89
- // // returnDisplayValue={returnDate}
90
- // ></DateRangePicker> */}
91
- // {/* <Filters
92
- // bottomSheetBackgroundStyle={{
93
- // borderTopRightRadius: 30,
94
- // borderTopLeftRadius: 30,
95
- // padding: 10,
96
- // backgroundColor: "white",
97
- // }}
98
- // containerStyle={{
99
- // backgroundColor: "white",
100
- // borderTopRightRadius: 60,
101
- // borderTopLeftRadius: 60,
102
- // }}
103
- // resetTextStyle={{ color: theme.primary }}
104
- // sectionTitleStyle={{ color: "black" }}
105
- // titleStyle={{ color: "black" }}
106
- // onActionButtonPress={(result) => {
107
- // // setFiltersResult(result);
108
- // }}
109
- // sortOptions={[{ id: 1, name: "test", value: "test" }]}
110
- // // onClose={() => setDisplayFilters(false)}
111
- // applyButtonStyle={{ borderRadius: 8, backgroundColor: "black" }}
112
- // applyButtonTextStyle={{ color: theme.secondary }}
113
- // headerStyle={{ borderBottomWidth: 0 }}
114
- // ></Filters> */}
115
- // {/* <FlightSummary></FlightSummary> */}
116
- // {/* <FlightForm></FlightForm> */}
117
- // {/* <HotelSummary></HotelSummary> */}
118
- // {/* <HotelForm></HotelForm> */}
119
- // {/* <DateRangePicker onDatesChange={()=>{}} labelContainerStyle={{backgroundColor:"red"}}></DateRangePicker> */}
120
- // {/* <CarRentalForm onSelectionChange={console.log}></CarRentalForm> */}
121
- // {/* <CarouselCardStack data={DUMMY_DATA} /> */}
122
- // <PhoneInput value="" onChangeText={() => {}} inputContainerStyle={{height: 55}}></PhoneInput>
123
- // </SafeAreaView>
124
- // </BottomSheetStackProvider>
125
- // </RelatedProvider>
126
- // </GestureHandlerRootView>
127
- // </SafeAreaProvider>
128
- // </>
129
- // );
130
- // };
1
+ "use strict";
131
2
 
132
- // const styles = StyleSheet.create({
133
- // appContainer: {
134
- // flex: 1,
135
- // backgroundColor: "#212121", // Match carousel background or choose another
136
- // justifyContent: "center", // Center the carousel vertically if it's the main content
137
- // },
138
- // });
3
+ import React, { useState } from "react";
4
+ import { SafeAreaView, StyleSheet, StatusBar } from "react-native";
5
+ // Adjust path as needed
6
+ import { GestureHandlerRootView } from "react-native-gesture-handler";
7
+ import { lightTheme, RelatedProvider, useTheme } from "./theme/index.js";
8
+ import PhoneInput from "./components/Input/PhoneInput.js";
9
+ import { BottomSheetStackProvider } from "./contexts/index.js";
10
+ import { SafeAreaProvider } from "react-native-safe-area-context";
139
11
 
140
- // export default App;
141
- "use strict";
12
+ // Sample data - replace with your actual image URLs
13
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
14
+ const DUMMY_DATA = [{
15
+ id: "1",
16
+ image: "https://images.pexels.com/photos/3354648/pexels-photo-3354648.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
17
+ title: "Mountain Lake"
18
+ },
19
+ // {
20
+ // id: "2",
21
+ // image:
22
+ // "https://images.pexels.com/photos/163273/sunrise-speedboat-ocean-water-163273.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
23
+ // title: "Sunset Cruise",
24
+ // },
25
+ {
26
+ id: "3",
27
+ image: "https://images.pexels.com/photos/1430677/pexels-photo-1430677.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
28
+ title: "Ocean Horizon"
29
+ }, {
30
+ id: "4",
31
+ image: "https://images.pexels.com/photos/2387793/pexels-photo-2387793.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
32
+ title: "Forest Trail"
33
+ }
34
+ // {
35
+ // id: "5",
36
+ // image:
37
+ // "https://images.pexels.com/photos/302804/pexels-photo-302804.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
38
+ // title: "City Lights",
39
+ // },
40
+ ];
41
+ const App = () => {
42
+ const {
43
+ theme
44
+ } = useTheme();
45
+ const [departureDate, setDepartureDate] = useState(undefined);
46
+ const [returnDate, setReturnDate] = useState(undefined);
47
+ const [progress, setProgress] = useState(25);
48
+ const handleAnimate = () => {
49
+ // Set progress to a new random value between 0 and 100
50
+ const newProgress = Math.floor(Math.random() * 101);
51
+ setProgress(newProgress);
52
+ };
53
+ return /*#__PURE__*/_jsx(_Fragment, {
54
+ children: /*#__PURE__*/_jsx(SafeAreaProvider, {
55
+ children: /*#__PURE__*/_jsx(GestureHandlerRootView, {
56
+ style: {
57
+ flex: 1
58
+ },
59
+ children: /*#__PURE__*/_jsx(RelatedProvider, {
60
+ theme: lightTheme,
61
+ children: /*#__PURE__*/_jsxs(BottomSheetStackProvider, {
62
+ children: [/*#__PURE__*/_jsx(StatusBar, {
63
+ barStyle: "light-content"
64
+ }), /*#__PURE__*/_jsx(SafeAreaView, {
65
+ style: styles.appContainer,
66
+ children: /*#__PURE__*/_jsx(PhoneInput, {
67
+ value: "",
68
+ onChangeText: () => {},
69
+ inputContainerStyle: {
70
+ height: 55
71
+ }
72
+ })
73
+ })]
74
+ })
75
+ })
76
+ })
77
+ })
78
+ });
79
+ };
80
+ const styles = StyleSheet.create({
81
+ appContainer: {
82
+ flex: 1,
83
+ backgroundColor: "#212121",
84
+ // Match carousel background or choose another
85
+ justifyContent: "center" // Center the carousel vertically if it's the main content
86
+ }
87
+ });
88
+ export default App;
142
89
  //# sourceMappingURL=app.js.map
package/lib/module/app.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":[],"sourceRoot":"..\\..\\src","sources":["app.tsx"],"mappings":"AAAA;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;;AAEA;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;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;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAAA","ignoreList":[]}
1
+ {"version":3,"names":["React","useState","SafeAreaView","StyleSheet","StatusBar","GestureHandlerRootView","lightTheme","RelatedProvider","useTheme","PhoneInput","BottomSheetStackProvider","SafeAreaProvider","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","DUMMY_DATA","id","image","title","App","theme","departureDate","setDepartureDate","undefined","returnDate","setReturnDate","progress","setProgress","handleAnimate","newProgress","Math","floor","random","children","style","flex","barStyle","styles","appContainer","value","onChangeText","inputContainerStyle","height","create","backgroundColor","justifyContent"],"sourceRoot":"..\\..\\src","sources":["app.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,YAAY,EAAEC,UAAU,EAAEC,SAAS,QAAQ,cAAc;AACgB;AAClF,SAASC,sBAAsB,QAAQ,8BAA8B;AAUrE,SAASC,UAAU,EAAEC,eAAe,EAAEC,QAAQ,QAAQ,kBAAS;AAE/D,OAAOC,UAAU,MAAM,kCAA+B;AACtD,SAASC,wBAAwB,QAAQ,qBAAY;AACrD,SAASC,gBAAgB,QAAQ,gCAAgC;;AAEjE;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AACA,MAAMC,UAAU,GAAG,CACjB;EACEC,EAAE,EAAE,GAAG;EACPC,KAAK,EACH,iHAAiH;EACnHC,KAAK,EAAE;AACT,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;EACEF,EAAE,EAAE,GAAG;EACPC,KAAK,EACH,iHAAiH;EACnHC,KAAK,EAAE;AACT,CAAC,EACD;EACEF,EAAE,EAAE,GAAG;EACPC,KAAK,EACH,iHAAiH;EACnHC,KAAK,EAAE;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AAAA,CACD;AAED,MAAMC,GAAG,GAAGA,CAAA,KAAM;EAChB,MAAM;IAAEC;EAAM,CAAC,GAAGf,QAAQ,CAAC,CAAC;EAE5B,MAAM,CAACgB,aAAa,EAAEC,gBAAgB,CAAC,GAAGxB,QAAQ,CAChDyB,SACF,CAAC;EACD,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAG3B,QAAQ,CAAqByB,SAAS,CAAC;EAE3E,MAAM,CAACG,QAAQ,EAAEC,WAAW,CAAC,GAAG7B,QAAQ,CAAC,EAAE,CAAC;EAC5C,MAAM8B,aAAa,GAAGA,CAAA,KAAM;IAC1B;IACA,MAAMC,WAAW,GAAGC,IAAI,CAACC,KAAK,CAACD,IAAI,CAACE,MAAM,CAAC,CAAC,GAAG,GAAG,CAAC;IACnDL,WAAW,CAACE,WAAW,CAAC;EAC1B,CAAC;EACD,oBACEnB,IAAA,CAAAI,SAAA;IAAAmB,QAAA,eACAvB,IAAA,CAACF,gBAAgB;MAAAyB,QAAA,eACfvB,IAAA,CAACR,sBAAsB;QAACgC,KAAK,EAAE;UAAEC,IAAI,EAAE;QAAE,CAAE;QAAAF,QAAA,eACzCvB,IAAA,CAACN,eAAe;UAACgB,KAAK,EAAEjB,UAAW;UAAA8B,QAAA,eACjCrB,KAAA,CAACL,wBAAwB;YAAA0B,QAAA,gBACvBvB,IAAA,CAACT,SAAS;cAACmC,QAAQ,EAAC;YAAe,CAAE,CAAC,eACtC1B,IAAA,CAACX,YAAY;cAACmC,KAAK,EAAEG,MAAM,CAACC,YAAa;cAAAL,QAAA,eA+CvCvB,IAAA,CAACJ,UAAU;gBAACiC,KAAK,EAAC,EAAE;gBAACC,YAAY,EAAEA,CAAA,KAAM,CAAC,CAAE;gBAACC,mBAAmB,EAAE;kBAACC,MAAM,EAAE;gBAAE;cAAE,CAAa;YAAC,CACjF,CAAC;UAAA,CACS;QAAC,CACZ;MAAC,CACI;IAAC,CACP;EAAC,CACnB,CAAC;AAEP,CAAC;AAED,MAAML,MAAM,GAAGrC,UAAU,CAAC2C,MAAM,CAAC;EAC/BL,YAAY,EAAE;IACZH,IAAI,EAAE,CAAC;IACPS,eAAe,EAAE,SAAS;IAAE;IAC5BC,cAAc,EAAE,QAAQ,CAAE;EAC5B;AACF,CAAC,CAAC;AAEF,eAAe1B,GAAG","ignoreList":[]}
package/lib/module/components/Input/CountryPickerView.js ADDED
@@ -0,0 +1,107 @@
1
+ "use strict";
2
+
3
+ import React, { useState, useEffect } from "react";
4
+ import { Text, View, TouchableOpacity, StyleSheet, InteractionManager, ActivityIndicator } from "react-native";
5
+ import { BottomSheetFlashList } from "@gorhom/bottom-sheet";
6
+ import { useTheme } from "../../theme/index.js";
7
+ import { iso2ToFlagEmoji } from "../../utils/flags.js";
8
+ // Assuming you export this type
9
+ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
10
+ export const CountryPickerView = ({
11
+ countries,
12
+ onSelectCountry,
13
+ listTitle,
14
+ listTitleStyle,
15
+ countryNameStyle,
16
+ countryCodeStyle
17
+ }) => {
18
+ const {
19
+ theme
20
+ } = useTheme();
21
+ const [isReady, setIsReady] = useState(false);
22
+ useEffect(() => {
23
+ InteractionManager.runAfterInteractions(() => {
24
+ setIsReady(true);
25
+ });
26
+ }, []);
27
+ const renderCountry = ({
28
+ item
29
+ }) => /*#__PURE__*/_jsxs(TouchableOpacity, {
30
+ style: styles.countryRow,
31
+ onPress: () => onSelectCountry(item),
32
+ children: [/*#__PURE__*/_jsxs(Text, {
33
+ style: styles.flag,
34
+ children: [" ", iso2ToFlagEmoji(item.iso2)]
35
+ }), /*#__PURE__*/_jsxs(View, {
36
+ style: styles.countryText,
37
+ children: [/*#__PURE__*/_jsx(Text, {
38
+ style: [styles.countryName, {
39
+ color: theme.text
40
+ }, countryNameStyle],
41
+ children: item.name
42
+ }), /*#__PURE__*/_jsx(Text, {
43
+ style: [styles.countryCode, countryCodeStyle],
44
+ children: item.code
45
+ })]
46
+ })]
47
+ });
48
+ return /*#__PURE__*/_jsxs(View, {
49
+ style: styles.popup,
50
+ children: [/*#__PURE__*/_jsx(Text, {
51
+ style: [styles.popupTitle, listTitleStyle, {
52
+ color: theme.text
53
+ }],
54
+ children: listTitle
55
+ }), isReady ? /*#__PURE__*/_jsx(BottomSheetFlashList, {
56
+ data: countries,
57
+ keyExtractor: c => c.iso2,
58
+ renderItem: renderCountry,
59
+ contentContainerStyle: {
60
+ paddingBottom: 16
61
+ },
62
+ estimatedItemSize: 100
63
+ }) : /*#__PURE__*/_jsx(View, {
64
+ style: styles.loaderContainer,
65
+ children: /*#__PURE__*/_jsx(ActivityIndicator, {
66
+ size: "large",
67
+ color: theme.primary
68
+ })
69
+ })]
70
+ });
71
+ };
72
+ const styles = StyleSheet.create({
73
+ popup: {
74
+ flex: 1,
75
+ width: "100%",
76
+ padding: 16
77
+ },
78
+ loaderContainer: {
79
+ flex: 1,
80
+ alignItems: "center",
81
+ justifyContent: "center"
82
+ },
83
+ popupTitle: {
84
+ fontSize: 18,
85
+ fontWeight: "600",
86
+ marginBottom: 12
87
+ },
88
+ countryRow: {
89
+ flexDirection: "row",
90
+ alignItems: "center",
91
+ paddingVertical: 10
92
+ },
93
+ flag: {
94
+ fontSize: 18
95
+ },
96
+ countryText: {
97
+ marginLeft: 12
98
+ },
99
+ countryName: {
100
+ fontSize: 16
101
+ },
102
+ countryCode: {
103
+ fontSize: 14,
104
+ color: "#666"
105
+ }
106
+ });
107
+ //# sourceMappingURL=CountryPickerView.js.map
package/lib/module/components/Input/CountryPickerView.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"names":["React","useState","useEffect","Text","View","TouchableOpacity","StyleSheet","InteractionManager","ActivityIndicator","BottomSheetFlashList","useTheme","iso2ToFlagEmoji","jsxs","_jsxs","jsx","_jsx","CountryPickerView","countries","onSelectCountry","listTitle","listTitleStyle","countryNameStyle","countryCodeStyle","theme","isReady","setIsReady","runAfterInteractions","renderCountry","item","style","styles","countryRow","onPress","children","flag","iso2","countryText","countryName","color","text","name","countryCode","code","popup","popupTitle","data","keyExtractor","c","renderItem","contentContainerStyle","paddingBottom","estimatedItemSize","loaderContainer","size","primary","create","flex","width","padding","alignItems","justifyContent","fontSize","fontWeight","marginBottom","flexDirection","paddingVertical","marginLeft"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Input/CountryPickerView.tsx"],"mappings":"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","ignoreList":[]}
package/lib/module/components/Input/PhoneInput.js CHANGED
@@ -1,15 +1,19 @@
1
1
  "use strict";
2
2
 
3
3
  import React, { forwardRef, useMemo, useCallback } from "react";
4
- import { Text, View, TouchableOpacity, StyleSheet } from "react-native";
4
+ import { Text, TouchableOpacity, StyleSheet
5
+ // Remove FlatList, not needed here anymore
6
+ } from "react-native";
5
7
  import CustomInput from "./Input.js";
6
8
  import { useTheme } from "../../theme/index.js";
9
+ // Remove Popup, not used
7
10
  import { Ionicons } from "@expo/vector-icons";
8
11
  import { useBottomSheetStack } from "../../contexts/index.js";
9
- import { BottomSheetFlatList, BottomSheetView } from "@gorhom/bottom-sheet";
10
- import { allCountries } from 'country-telephone-data';
12
+ // Remove BottomSheetFlatList and BottomSheetView
13
+ import { allCountries } from "country-telephone-data";
11
14
  import { iso2ToFlagEmoji } from "../../utils/flags.js";
12
- import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
15
+ import { CountryPickerView } from "./CountryPickerView.js";
16
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
17
  const DEFAULT_COUNTRIES = allCountries.map(c => ({
14
18
  code: `+${c.dialCode}`,
15
19
  iso2: c.iso2,
@@ -49,26 +53,21 @@ const PhoneInput = /*#__PURE__*/forwardRef(({
49
53
  onSelectCountry(c);
50
54
  clear();
51
55
  }
52
- }, [onSelectCountry]);
53
- const renderCountry = ({
54
- item
55
- }) => /*#__PURE__*/_jsxs(TouchableOpacity, {
56
- style: styles.countryRow,
57
- onPress: () => handleCountryPress(item),
58
- children: [/*#__PURE__*/_jsxs(Text, {
59
- style: styles.flag,
60
- children: [" ", iso2ToFlagEmoji(item.iso2)]
61
- }), /*#__PURE__*/_jsxs(View, {
62
- style: styles.countryText,
63
- children: [/*#__PURE__*/_jsx(Text, {
64
- style: [styles.countryName, countryNameStyle],
65
- children: item.name
66
- }), /*#__PURE__*/_jsx(Text, {
67
- style: [styles.countryCode, countryCodeStyle],
68
- children: item.code
69
- })]
70
- })]
71
- });
56
+ }, [onSelectCountry, clear] // Add clear to dependency array
57
+ );
58
+ const openCountryPicker = useCallback(() => {
59
+ push({
60
+ component: /*#__PURE__*/_jsx(CountryPickerView, {
61
+ countries: countries,
62
+ onSelectCountry: handleCountryPress,
63
+ listTitle: listTitle,
64
+ listTitleStyle: listTitleStyle,
65
+ countryNameStyle: countryNameStyle,
66
+ countryCodeStyle: countryCodeStyle
67
+ }),
68
+ snapPoints: ["80%"]
69
+ });
70
+ }, [push, countries, handleCountryPress, listTitle, listTitleStyle, countryNameStyle, countryCodeStyle]);
72
71
  const leftIcon = /*#__PURE__*/_jsxs(TouchableOpacity, {
73
72
  style: [styles.selector, {
74
73
  backgroundColor: theme.inputBackground
@@ -79,25 +78,7 @@ const PhoneInput = /*#__PURE__*/forwardRef(({
79
78
  right: 30,
80
79
  bottom: 30
81
80
  },
82
- onPress: () => push({
83
- component: /*#__PURE__*/_jsxs(BottomSheetView, {
84
- style: styles.popup,
85
- children: [/*#__PURE__*/_jsx(Text, {
86
- style: [styles.popupTitle, listTitleStyle, {
87
- color: theme.text
88
- }],
89
- children: listTitle
90
- }), /*#__PURE__*/_jsx(BottomSheetFlatList, {
91
- data: countries,
92
- keyExtractor: (c, i) => i.toString(),
93
- renderItem: renderCountry,
94
- contentContainerStyle: {
95
- paddingBottom: 16
96
- }
97
- })]
98
- }),
99
- snapPoints: ["100%"]
100
- }),
81
+ onPress: openCountryPicker,
101
82
  activeOpacity: 0.8,
102
83
  children: [/*#__PURE__*/_jsx(Text, {
103
84
  style: [styles.flag, {
@@ -117,25 +98,23 @@ const PhoneInput = /*#__PURE__*/forwardRef(({
117
98
  }
118
99
  })]
119
100
  });
120
- return /*#__PURE__*/_jsx(_Fragment, {
121
- children: /*#__PURE__*/_jsx(CustomInput, {
122
- ref: ref,
123
- label: label,
124
- value: value,
125
- onChangeText: onChangeText,
126
- keyboardType: "phone-pad",
127
- placeholder: "123 456 7890",
128
- leftIcon: leftIcon,
129
- containerStyle: containerStyle,
130
- inputContainerStyle: inputContainerStyle,
131
- inputStyle: inputStyle,
132
- labelStyle: labelStyle,
133
- error: error,
134
- errorStyle: errorStyle,
135
- helper: helper,
136
- helperStyle: helperStyle,
137
- ...rest
138
- })
101
+ return /*#__PURE__*/_jsx(CustomInput, {
102
+ ref: ref,
103
+ label: label,
104
+ value: value,
105
+ onChangeText: onChangeText,
106
+ keyboardType: "phone-pad",
107
+ placeholder: "123 456 7890",
108
+ leftIcon: leftIcon,
109
+ containerStyle: containerStyle,
110
+ inputContainerStyle: inputContainerStyle,
111
+ inputStyle: inputStyle,
112
+ labelStyle: labelStyle,
113
+ error: error,
114
+ errorStyle: errorStyle,
115
+ helper: helper,
116
+ helperStyle: helperStyle,
117
+ ...rest
139
118
  });
140
119
  });
141
120
  const styles = StyleSheet.create({
@@ -151,31 +130,6 @@ const styles = StyleSheet.create({
151
130
  code: {
152
131
  fontSize: 14,
153
132
  marginLeft: 4
154
- },
155
- popup: {
156
- // maxHeight: 400,
157
- width: "100%",
158
- padding: 16
159
- },
160
- popupTitle: {
161
- fontSize: 18,
162
- fontWeight: "600",
163
- marginBottom: 12
164
- },
165
- countryRow: {
166
- flexDirection: "row",
167
- alignItems: "center",
168
- paddingVertical: 10
169
- },
170
- countryText: {
171
- marginLeft: 12
172
- },
173
- countryName: {
174
- fontSize: 16
175
- },
176
- countryCode: {
177
- fontSize: 14,
178
- color: "#666"
179
133
  }
180
134
  });
181
135
  export default PhoneInput;
package/lib/module/components/Input/PhoneInput.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["React","forwardRef","useMemo","useCallback","Text","View","TouchableOpacity","StyleSheet","CustomInput","useTheme","Ionicons","useBottomSheetStack","BottomSheetFlatList","BottomSheetView","allCountries","iso2ToFlagEmoji","jsxs","_jsxs","jsx","_jsx","Fragment","_Fragment","DEFAULT_COUNTRIES","map","c","code","dialCode","iso2","name","PhoneInput","value","onChangeText","selectedCountry","onSelectCountry","countries","containerStyle","inputContainerStyle","inputStyle","label","labelStyle","error","errorStyle","helper","helperStyle","listTitle","listTitleStyle","countryCodeStyle","countryNameStyle","rest","ref","theme","push","clear","sel","find","handleCountryPress","renderCountry","item","style","styles","countryRow","onPress","children","flag","countryText","countryName","countryCode","leftIcon","selector","backgroundColor","inputBackground","hitSlop","left","top","right","bottom","component","popup","popupTitle","color","text","data","keyExtractor","i","toString","renderItem","contentContainerStyle","paddingBottom","snapPoints","activeOpacity","inputText","size","marginHorizontal","keyboardType","placeholder","create","flexDirection","alignItems","borderRightWidth","borderRightColor","fontSize","marginLeft","width","padding","fontWeight","marginBottom","paddingVertical"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Input/PhoneInput.tsx"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["React","forwardRef","useMemo","useCallback","Text","TouchableOpacity","StyleSheet","CustomInput","useTheme","Ionicons","useBottomSheetStack","allCountries","iso2ToFlagEmoji","CountryPickerView","jsx","_jsx","jsxs","_jsxs","DEFAULT_COUNTRIES","map","c","code","dialCode","iso2","name","PhoneInput","value","onChangeText","selectedCountry","onSelectCountry","countries","containerStyle","inputContainerStyle","inputStyle","label","labelStyle","error","errorStyle","helper","helperStyle","listTitle","listTitleStyle","countryCodeStyle","countryNameStyle","rest","ref","theme","push","clear","sel","find","handleCountryPress","openCountryPicker","component","snapPoints","leftIcon","style","styles","selector","backgroundColor","inputBackground","hitSlop","left","top","right","bottom","onPress","activeOpacity","children","flag","color","inputText","size","marginHorizontal","keyboardType","placeholder","create","flexDirection","alignItems","borderRightWidth","borderRightColor","fontSize","marginLeft"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Input/PhoneInput.tsx"],"mappings":"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","ignoreList":[]}
package/lib/module/index.js CHANGED
@@ -1,12 +1,9 @@
1
1
  "use strict";
2
2
 
3
- // import { registerRootComponent } from 'expo';
4
- // import "react-native-reanimated";
5
-
6
- // import App from "./app";
7
-
8
- // registerRootComponent(App);
9
-
3
+ import { registerRootComponent } from 'expo';
4
+ import "react-native-reanimated";
5
+ import App from "./app.js";
6
+ registerRootComponent(App);
10
7
  export * from "./theme/index.js";
11
8
  export * from "./components/index.js";
12
9
  export * from "./contexts/index.js";
package/lib/module/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":[],"sourceRoot":"..\\..\\src","sources":["index.ts"],"mappings":";;AAAA;AACA;;AAGA;;AAEA;;AAEA,cAAc,kBAAS;AACvB,cAAc,uBAAc;AAC5B,cAAc,qBAAY","ignoreList":[]}
1
+ {"version":3,"names":["registerRootComponent","App"],"sourceRoot":"..\\..\\src","sources":["index.ts"],"mappings":";;AAAA,SAASA,qBAAqB,QAAQ,MAAM;AAC5C,OAAO,yBAAyB;AAGhC,OAAOC,GAAG,MAAM,UAAO;AAEvBD,qBAAqB,CAACC,GAAG,CAAC;AAE1B,cAAc,kBAAS;AACvB,cAAc,uBAAc;AAC5B,cAAc,qBAAY","ignoreList":[]}
package/lib/typescript/src/app.d.ts CHANGED
@@ -1,2 +1,4 @@
1
- export {};
1
+ import React from "react";
2
+ declare const App: () => React.JSX.Element;
3
+ export default App;
2
4
  //# sourceMappingURL=app.d.ts.map
package/lib/typescript/src/app.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../../src/app.tsx"],"names":[],"mappings":""}
1
+ {"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../../src/app.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAqDxC,QAAA,MAAM,GAAG,yBA4ER,CAAC;AAUF,eAAe,GAAG,CAAC"}
package/lib/typescript/src/components/Input/CountryPickerView.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ import React from "react";
2
+ import { StyleProp, TextStyle } from "react-native";
3
+ import { Country } from "./PhoneInput";
4
+ interface CountryPickerViewProps {
5
+ countries: Country[];
6
+ onSelectCountry: (c: Country) => void;
7
+ listTitle: string;
8
+ listTitleStyle?: StyleProp<TextStyle>;
9
+ countryNameStyle?: StyleProp<TextStyle>;
10
+ countryCodeStyle?: StyleProp<TextStyle>;
11
+ }
12
+ export declare const CountryPickerView: ({ countries, onSelectCountry, listTitle, listTitleStyle, countryNameStyle, countryCodeStyle, }: CountryPickerViewProps) => React.JSX.Element;
13
+ export {};
14
+ //# sourceMappingURL=CountryPickerView.d.ts.map
package/lib/typescript/src/components/Input/CountryPickerView.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CountryPickerView.d.ts","sourceRoot":"","sources":["../../../../../src/components/Input/CountryPickerView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAOL,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAItB,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,UAAU,sBAAsB;IAC9B,SAAS,EAAE,OAAO,EAAE,CAAC;IACrB,eAAe,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACzC;AAED,eAAO,MAAM,iBAAiB,GAAI,gGAO/B,sBAAsB,sBA6CxB,CAAC"}
package/lib/typescript/src/components/Input/PhoneInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/Input/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAC1E,OAAO,EACL,SAAS,EAOT,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAoB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AASxD,MAAM,MAAM,OAAO,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,eACf,SAAQ,IAAI,CACV,gBAAgB,EACd,UAAU,GACV,WAAW,GACX,kBAAkB,GAClB,cAAc,GACd,OAAO,GACP,sBAAsB,CACzB;IACD,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,OAAO,EAAE,CAAC;IAGtB,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAEtC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAQD,QAAA,MAAM,UAAU,mFAoHf,CAAC;AA2CF,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/Input/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,EACL,SAAS,EAOT,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAoB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAUxD,MAAM,MAAM,OAAO,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,eACf,SAAQ,IAAI,CACV,gBAAgB,EACd,UAAU,GACV,WAAW,GACX,kBAAkB,GAClB,cAAc,GACd,OAAO,GACP,sBAAsB,CACzB;IACD,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,OAAO,EAAE,CAAC;IAGtB,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAEtC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD,QAAA,MAAM,UAAU,mFAgHf,CAAC;AAkBF,eAAe,UAAU,CAAC"}
package/lib/typescript/src/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import "react-native-reanimated";
1
2
  export * from "./theme";
2
3
  export * from "./components";
3
4
  export * from "./contexts";
package/lib/typescript/src/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAQA,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,yBAAyB,CAAC;AAOjC,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "related-ui-components",
3
- "version": "2.5.2",
3
+ "version": "2.5.4",
4
4
  "main": "./src/index.ts",
5
5
  "scripts": {
6
6
  "start": "expo start",
package/src/app.tsx CHANGED
@@ -1,140 +1,140 @@
1
- // import React, { useState } from "react";
2
- // import { SafeAreaView, StyleSheet, StatusBar } from "react-native";
3
- // import CarouselCardStack from "./components/CarouselCardStack/CarouselCardStack"; // Adjust path as needed
4
- // import { GestureHandlerRootView } from "react-native-gesture-handler";
5
- // import {
6
- // CarRentalForm,
7
- // DateRangePicker,
8
- // FlightForm,
9
- // FlightSummary,
10
- // HotelForm,
11
- // HotelSummary,
12
- // Filters,
13
- // } from "./components";
14
- // import { lightTheme, RelatedProvider, useTheme } from "./theme";
15
- // import CircularProgressBar from "./components/ProgressBar/CircularProgressBar";
16
- // import PhoneInput from "./components/Input/PhoneInput";
17
- // import { BottomSheetStackProvider } from "./contexts";
18
- // import { SafeAreaProvider } from "react-native-safe-area-context";
1
+ import React, { useState } from "react";
2
+ import { SafeAreaView, StyleSheet, StatusBar } from "react-native";
3
+ import CarouselCardStack from "./components/CarouselCardStack/CarouselCardStack"; // Adjust path as needed
4
+ import { GestureHandlerRootView } from "react-native-gesture-handler";
5
+ import {
6
+ CarRentalForm,
7
+ DateRangePicker,
8
+ FlightForm,
9
+ FlightSummary,
10
+ HotelForm,
11
+ HotelSummary,
12
+ Filters,
13
+ } from "./components";
14
+ import { lightTheme, RelatedProvider, useTheme } from "./theme";
15
+ import CircularProgressBar from "./components/ProgressBar/CircularProgressBar";
16
+ import PhoneInput from "./components/Input/PhoneInput";
17
+ import { BottomSheetStackProvider } from "./contexts";
18
+ import { SafeAreaProvider } from "react-native-safe-area-context";
19
19
 
20
- // // Sample data - replace with your actual image URLs
21
- // const DUMMY_DATA = [
22
- // {
23
- // id: "1",
24
- // image:
25
- // "https://images.pexels.com/photos/3354648/pexels-photo-3354648.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
26
- // title: "Mountain Lake",
27
- // },
28
- // // {
29
- // // id: "2",
30
- // // image:
31
- // // "https://images.pexels.com/photos/163273/sunrise-speedboat-ocean-water-163273.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
32
- // // title: "Sunset Cruise",
33
- // // },
34
- // {
35
- // id: "3",
36
- // image:
37
- // "https://images.pexels.com/photos/1430677/pexels-photo-1430677.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
38
- // title: "Ocean Horizon",
39
- // },
40
- // {
41
- // id: "4",
42
- // image:
43
- // "https://images.pexels.com/photos/2387793/pexels-photo-2387793.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
44
- // title: "Forest Trail",
45
- // },
46
- // // {
47
- // // id: "5",
48
- // // image:
49
- // // "https://images.pexels.com/photos/302804/pexels-photo-302804.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
50
- // // title: "City Lights",
51
- // // },
52
- // ];
20
+ // Sample data - replace with your actual image URLs
21
+ const DUMMY_DATA = [
22
+ {
23
+ id: "1",
24
+ image:
25
+ "https://images.pexels.com/photos/3354648/pexels-photo-3354648.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
26
+ title: "Mountain Lake",
27
+ },
28
+ // {
29
+ // id: "2",
30
+ // image:
31
+ // "https://images.pexels.com/photos/163273/sunrise-speedboat-ocean-water-163273.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
32
+ // title: "Sunset Cruise",
33
+ // },
34
+ {
35
+ id: "3",
36
+ image:
37
+ "https://images.pexels.com/photos/1430677/pexels-photo-1430677.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
38
+ title: "Ocean Horizon",
39
+ },
40
+ {
41
+ id: "4",
42
+ image:
43
+ "https://images.pexels.com/photos/2387793/pexels-photo-2387793.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
44
+ title: "Forest Trail",
45
+ },
46
+ // {
47
+ // id: "5",
48
+ // image:
49
+ // "https://images.pexels.com/photos/302804/pexels-photo-302804.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
50
+ // title: "City Lights",
51
+ // },
52
+ ];
53
53
 
54
- // const App = () => {
55
- // const { theme } = useTheme();
54
+ const App = () => {
55
+ const { theme } = useTheme();
56
56
 
57
- // const [departureDate, setDepartureDate] = useState<string | undefined>(
58
- // undefined
59
- // );
60
- // const [returnDate, setReturnDate] = useState<string | undefined>(undefined);
57
+ const [departureDate, setDepartureDate] = useState<string | undefined>(
58
+ undefined
59
+ );
60
+ const [returnDate, setReturnDate] = useState<string | undefined>(undefined);
61
61
 
62
- // const [progress, setProgress] = useState(25);
63
- // const handleAnimate = () => {
64
- // // Set progress to a new random value between 0 and 100
65
- // const newProgress = Math.floor(Math.random() * 101);
66
- // setProgress(newProgress);
67
- // };
68
- // return (
69
- // <>
70
- // <SafeAreaProvider>
71
- // <GestureHandlerRootView style={{ flex: 1 }}>
72
- // <RelatedProvider theme={lightTheme}>
73
- // <BottomSheetStackProvider>
74
- // <StatusBar barStyle="light-content" />
75
- // <SafeAreaView style={styles.appContainer}>
76
- // {/* <CircularProgressBar
77
- // progress={5}
78
- // lineCap="round"
79
- // textFont={""}
80
- // /> */}
81
- // {/* <DateRangePicker
82
- // onDatesChange={(t) => {
83
- // setDepartureDate(t.departure);
84
- // setReturnDate(t.return);
85
- // }}
86
- // departureDate={departureDate}
87
- // // departureDisplayValue={departureDate}
88
- // returnDate={returnDate}
89
- // // returnDisplayValue={returnDate}
90
- // ></DateRangePicker> */}
91
- // {/* <Filters
92
- // bottomSheetBackgroundStyle={{
93
- // borderTopRightRadius: 30,
94
- // borderTopLeftRadius: 30,
95
- // padding: 10,
96
- // backgroundColor: "white",
97
- // }}
98
- // containerStyle={{
99
- // backgroundColor: "white",
100
- // borderTopRightRadius: 60,
101
- // borderTopLeftRadius: 60,
102
- // }}
103
- // resetTextStyle={{ color: theme.primary }}
104
- // sectionTitleStyle={{ color: "black" }}
105
- // titleStyle={{ color: "black" }}
106
- // onActionButtonPress={(result) => {
107
- // // setFiltersResult(result);
108
- // }}
109
- // sortOptions={[{ id: 1, name: "test", value: "test" }]}
110
- // // onClose={() => setDisplayFilters(false)}
111
- // applyButtonStyle={{ borderRadius: 8, backgroundColor: "black" }}
112
- // applyButtonTextStyle={{ color: theme.secondary }}
113
- // headerStyle={{ borderBottomWidth: 0 }}
114
- // ></Filters> */}
115
- // {/* <FlightSummary></FlightSummary> */}
116
- // {/* <FlightForm></FlightForm> */}
117
- // {/* <HotelSummary></HotelSummary> */}
118
- // {/* <HotelForm></HotelForm> */}
119
- // {/* <DateRangePicker onDatesChange={()=>{}} labelContainerStyle={{backgroundColor:"red"}}></DateRangePicker> */}
120
- // {/* <CarRentalForm onSelectionChange={console.log}></CarRentalForm> */}
121
- // {/* <CarouselCardStack data={DUMMY_DATA} /> */}
122
- // <PhoneInput value="" onChangeText={() => {}} inputContainerStyle={{height: 55}}></PhoneInput>
123
- // </SafeAreaView>
124
- // </BottomSheetStackProvider>
125
- // </RelatedProvider>
126
- // </GestureHandlerRootView>
127
- // </SafeAreaProvider>
128
- // </>
129
- // );
130
- // };
62
+ const [progress, setProgress] = useState(25);
63
+ const handleAnimate = () => {
64
+ // Set progress to a new random value between 0 and 100
65
+ const newProgress = Math.floor(Math.random() * 101);
66
+ setProgress(newProgress);
67
+ };
68
+ return (
69
+ <>
70
+ <SafeAreaProvider>
71
+ <GestureHandlerRootView style={{ flex: 1 }}>
72
+ <RelatedProvider theme={lightTheme}>
73
+ <BottomSheetStackProvider>
74
+ <StatusBar barStyle="light-content" />
75
+ <SafeAreaView style={styles.appContainer}>
76
+ {/* <CircularProgressBar
77
+ progress={5}
78
+ lineCap="round"
79
+ textFont={""}
80
+ /> */}
81
+ {/* <DateRangePicker
82
+ onDatesChange={(t) => {
83
+ setDepartureDate(t.departure);
84
+ setReturnDate(t.return);
85
+ }}
86
+ departureDate={departureDate}
87
+ // departureDisplayValue={departureDate}
88
+ returnDate={returnDate}
89
+ // returnDisplayValue={returnDate}
90
+ ></DateRangePicker> */}
91
+ {/* <Filters
92
+ bottomSheetBackgroundStyle={{
93
+ borderTopRightRadius: 30,
94
+ borderTopLeftRadius: 30,
95
+ padding: 10,
96
+ backgroundColor: "white",
97
+ }}
98
+ containerStyle={{
99
+ backgroundColor: "white",
100
+ borderTopRightRadius: 60,
101
+ borderTopLeftRadius: 60,
102
+ }}
103
+ resetTextStyle={{ color: theme.primary }}
104
+ sectionTitleStyle={{ color: "black" }}
105
+ titleStyle={{ color: "black" }}
106
+ onActionButtonPress={(result) => {
107
+ // setFiltersResult(result);
108
+ }}
109
+ sortOptions={[{ id: 1, name: "test", value: "test" }]}
110
+ // onClose={() => setDisplayFilters(false)}
111
+ applyButtonStyle={{ borderRadius: 8, backgroundColor: "black" }}
112
+ applyButtonTextStyle={{ color: theme.secondary }}
113
+ headerStyle={{ borderBottomWidth: 0 }}
114
+ ></Filters> */}
115
+ {/* <FlightSummary></FlightSummary> */}
116
+ {/* <FlightForm></FlightForm> */}
117
+ {/* <HotelSummary></HotelSummary> */}
118
+ {/* <HotelForm></HotelForm> */}
119
+ {/* <DateRangePicker onDatesChange={()=>{}} labelContainerStyle={{backgroundColor:"red"}}></DateRangePicker> */}
120
+ {/* <CarRentalForm onSelectionChange={console.log}></CarRentalForm> */}
121
+ {/* <CarouselCardStack data={DUMMY_DATA} /> */}
122
+ <PhoneInput value="" onChangeText={() => {}} inputContainerStyle={{height: 55}}></PhoneInput>
123
+ </SafeAreaView>
124
+ </BottomSheetStackProvider>
125
+ </RelatedProvider>
126
+ </GestureHandlerRootView>
127
+ </SafeAreaProvider>
128
+ </>
129
+ );
130
+ };
131
131
 
132
- // const styles = StyleSheet.create({
133
- // appContainer: {
134
- // flex: 1,
135
- // backgroundColor: "#212121", // Match carousel background or choose another
136
- // justifyContent: "center", // Center the carousel vertically if it's the main content
137
- // },
138
- // });
132
+ const styles = StyleSheet.create({
133
+ appContainer: {
134
+ flex: 1,
135
+ backgroundColor: "#212121", // Match carousel background or choose another
136
+ justifyContent: "center", // Center the carousel vertically if it's the main content
137
+ },
138
+ });
139
139
 
140
- // export default App;
140
+ export default App;
package/src/components/Input/CountryPickerView.tsx ADDED
@@ -0,0 +1,114 @@
1
+ import React, { useState, useEffect } from "react";
2
+ import {
3
+ Text,
4
+ View,
5
+ TouchableOpacity,
6
+ StyleSheet,
7
+ InteractionManager,
8
+ ActivityIndicator,
9
+ StyleProp,
10
+ TextStyle,
11
+ } from "react-native";
12
+ import { BottomSheetFlashList, BottomSheetFlatList } from "@gorhom/bottom-sheet";
13
+ import { useTheme } from "../../theme";
14
+ import { iso2ToFlagEmoji } from "../../utils/flags";
15
+ import { Country } from "./PhoneInput"; // Assuming you export this type
16
+
17
+ interface CountryPickerViewProps {
18
+ countries: Country[];
19
+ onSelectCountry: (c: Country) => void;
20
+ listTitle: string;
21
+ listTitleStyle?: StyleProp<TextStyle>;
22
+ countryNameStyle?: StyleProp<TextStyle>;
23
+ countryCodeStyle?: StyleProp<TextStyle>;
24
+ }
25
+
26
+ export const CountryPickerView = ({
27
+ countries,
28
+ onSelectCountry,
29
+ listTitle,
30
+ listTitleStyle,
31
+ countryNameStyle,
32
+ countryCodeStyle,
33
+ }: CountryPickerViewProps) => {
34
+ const { theme } = useTheme();
35
+ const [isReady, setIsReady] = useState(false);
36
+
37
+ useEffect(() => {
38
+ InteractionManager.runAfterInteractions(() => {
39
+ setIsReady(true);
40
+ });
41
+ }, []);
42
+
43
+ const renderCountry = ({ item }: { item: Country }) => (
44
+ <TouchableOpacity
45
+ style={styles.countryRow}
46
+ onPress={() => onSelectCountry(item)}
47
+ >
48
+ <Text style={styles.flag}> {iso2ToFlagEmoji(item.iso2)}</Text>
49
+ <View style={styles.countryText}>
50
+ <Text style={[styles.countryName, { color: theme.text }, countryNameStyle]}>
51
+ {item.name}
52
+ </Text>
53
+ <Text style={[styles.countryCode, countryCodeStyle]}>{item.code}</Text>
54
+ </View>
55
+ </TouchableOpacity>
56
+ );
57
+
58
+ return (
59
+ <View style={styles.popup}>
60
+ <Text style={[styles.popupTitle, listTitleStyle, { color: theme.text }]}>
61
+ {listTitle}
62
+ </Text>
63
+ {isReady ? (
64
+ <BottomSheetFlashList
65
+ data={countries}
66
+ keyExtractor={(c : Country) => c.iso2}
67
+ renderItem={renderCountry}
68
+ contentContainerStyle={{ paddingBottom: 16 }}
69
+ estimatedItemSize={100}
70
+ />
71
+ ) : (
72
+ <View style={styles.loaderContainer}>
73
+ <ActivityIndicator size="large" color={theme.primary} />
74
+ </View>
75
+ )}
76
+ </View>
77
+ );
78
+ };
79
+
80
+ const styles = StyleSheet.create({
81
+ popup: {
82
+ flex: 1,
83
+ width: "100%",
84
+ padding: 16,
85
+ },
86
+ loaderContainer: {
87
+ flex: 1,
88
+ alignItems: "center",
89
+ justifyContent: "center",
90
+ },
91
+ popupTitle: {
92
+ fontSize: 18,
93
+ fontWeight: "600",
94
+ marginBottom: 12,
95
+ },
96
+ countryRow: {
97
+ flexDirection: "row",
98
+ alignItems: "center",
99
+ paddingVertical: 10,
100
+ },
101
+ flag: {
102
+ fontSize: 18,
103
+ },
104
+ countryText: {
105
+ marginLeft: 12,
106
+ },
107
+ countryName: {
108
+ fontSize: 16,
109
+ },
110
+ countryCode: {
111
+ fontSize: 14,
112
+ color: "#666",
113
+ },
114
+ });
package/src/components/Input/PhoneInput.tsx CHANGED
@@ -1,28 +1,29 @@
1
- import React, { forwardRef, useState, useMemo, useCallback } from "react";
1
+ import React, { forwardRef, useMemo, useCallback } from "react";
2
2
  import {
3
3
  TextInput,
4
4
  Text,
5
5
  View,
6
6
  TouchableOpacity,
7
7
  StyleSheet,
8
- FlatList,
8
+ // Remove FlatList, not needed here anymore
9
9
  TextInputProps,
10
10
  StyleProp,
11
11
  TextStyle,
12
12
  } from "react-native";
13
13
  import CustomInput, { CustomInputProps } from "./Input";
14
14
  import { useTheme } from "../../theme";
15
- import { Popup } from "../Popup";
15
+ // Remove Popup, not used
16
16
  import { Ionicons } from "@expo/vector-icons";
17
17
  import { useBottomSheetStack } from "../../contexts";
18
- import { BottomSheetFlatList, BottomSheetView } from "@gorhom/bottom-sheet";
19
- import { allCountries } from 'country-telephone-data';
18
+ // Remove BottomSheetFlatList and BottomSheetView
19
+ import { allCountries } from "country-telephone-data";
20
20
  import { iso2ToFlagEmoji } from "../../utils/flags";
21
+ import { CountryPickerView } from "./CountryPickerView";
21
22
 
22
23
  export type Country = {
23
- code: string;
24
+ code: string;
24
25
  iso2: string;
25
- name: string;
26
+ name: string;
26
27
  };
27
28
 
28
29
  export interface PhoneInputProps
@@ -41,15 +42,15 @@ export interface PhoneInputProps
41
42
  onSelectCountry?: (c: Country) => void;
42
43
  countries?: Country[];
43
44
 
44
- //styles
45
+ //styles
45
46
  countryNameStyle?: StyleProp<TextStyle>;
46
47
  countryCodeStyle?: StyleProp<TextStyle>;
47
48
  listTitleStyle?: StyleProp<TextStyle>;
48
49
 
49
- listTitle?: string
50
+ listTitle?: string;
50
51
  }
51
52
 
52
- const DEFAULT_COUNTRIES: Country[] = allCountries.map(c => ({
53
+ const DEFAULT_COUNTRIES: Country[] = allCountries.map((c) => ({
53
54
  code: `+${c.dialCode}`,
54
55
  iso2: c.iso2,
55
56
  name: c.name,
@@ -81,7 +82,7 @@ const PhoneInput = forwardRef<TextInput, PhoneInputProps>(
81
82
  ref
82
83
  ) => {
83
84
  const { theme } = useTheme();
84
- const { push, clear} = useBottomSheetStack();
85
+ const { push, clear } = useBottomSheetStack();
85
86
 
86
87
  const sel = useMemo(
87
88
  () =>
@@ -98,44 +99,38 @@ const PhoneInput = forwardRef<TextInput, PhoneInputProps>(
98
99
  clear();
99
100
  }
100
101
  },
101
- [onSelectCountry]
102
+ [onSelectCountry, clear] // Add clear to dependency array
102
103
  );
103
104
 
104
- const renderCountry = ({ item }: { item: Country }) => (
105
- <TouchableOpacity
106
- style={styles.countryRow}
107
- onPress={() => handleCountryPress(item)}
108
- >
109
- <Text style={styles.flag}> {iso2ToFlagEmoji(item.iso2)}</Text>
110
- <View style={styles.countryText}>
111
- <Text style={[styles.countryName, countryNameStyle]}>{item.name}</Text>
112
- <Text style={[styles.countryCode, countryCodeStyle]}>{item.code}</Text>
113
- </View>
114
- </TouchableOpacity>
115
- );
105
+ const openCountryPicker = useCallback(() => {
106
+ push({
107
+ component: (
108
+ <CountryPickerView
109
+ countries={countries}
110
+ onSelectCountry={handleCountryPress}
111
+ listTitle={listTitle}
112
+ listTitleStyle={listTitleStyle}
113
+ countryNameStyle={countryNameStyle}
114
+ countryCodeStyle={countryCodeStyle}
115
+ />
116
+ ),
117
+ snapPoints: ["80%"],
118
+ });
119
+ }, [
120
+ push,
121
+ countries,
122
+ handleCountryPress,
123
+ listTitle,
124
+ listTitleStyle,
125
+ countryNameStyle,
126
+ countryCodeStyle,
127
+ ]);
116
128
 
117
129
  const leftIcon = (
118
130
  <TouchableOpacity
119
131
  style={[styles.selector, { backgroundColor: theme.inputBackground }]}
120
- hitSlop={{left: 30, top: 30, right: 30, bottom: 30}}
121
- onPress={() =>
122
- push({
123
- component: (
124
- <BottomSheetView style={styles.popup}>
125
- <Text style={[styles.popupTitle, listTitleStyle, { color: theme.text }]}>
126
- {listTitle}
127
- </Text>
128
- <BottomSheetFlatList
129
- data={countries}
130
- keyExtractor={(c, i) => i.toString()}
131
- renderItem={renderCountry}
132
- contentContainerStyle={{ paddingBottom: 16 }}
133
- />
134
- </BottomSheetView>
135
- ),
136
- snapPoints: ["100%"]
137
- })
138
- }
132
+ hitSlop={{ left: 30, top: 30, right: 30, bottom: 30 }}
133
+ onPress={openCountryPicker}
139
134
  activeOpacity={0.8}
140
135
  >
141
136
  <Text style={[styles.flag, { color: theme.inputText }]}>
@@ -144,31 +139,33 @@ const PhoneInput = forwardRef<TextInput, PhoneInputProps>(
144
139
  <Text style={[styles.code, { color: theme.inputText }]}>
145
140
  {sel.code}
146
141
  </Text>
147
- <Ionicons name="chevron-down" size={16} style={{marginHorizontal: 4}}></Ionicons>
142
+ <Ionicons
143
+ name="chevron-down"
144
+ size={16}
145
+ style={{ marginHorizontal: 4 }}
146
+ ></Ionicons>
148
147
  </TouchableOpacity>
149
148
  );
150
149
 
151
150
  return (
152
- <>
153
- <CustomInput
154
- ref={ref}
155
- label={label}
156
- value={value}
157
- onChangeText={onChangeText}
158
- keyboardType="phone-pad"
159
- placeholder="123 456 7890"
160
- leftIcon={leftIcon}
161
- containerStyle={containerStyle}
162
- inputContainerStyle={inputContainerStyle}
163
- inputStyle={inputStyle}
164
- labelStyle={labelStyle}
165
- error={error}
166
- errorStyle={errorStyle}
167
- helper={helper}
168
- helperStyle={helperStyle}
169
- {...rest}
170
- />
171
- </>
151
+ <CustomInput
152
+ ref={ref}
153
+ label={label}
154
+ value={value}
155
+ onChangeText={onChangeText}
156
+ keyboardType="phone-pad"
157
+ placeholder="123 456 7890"
158
+ leftIcon={leftIcon}
159
+ containerStyle={containerStyle}
160
+ inputContainerStyle={inputContainerStyle}
161
+ inputStyle={inputStyle}
162
+ labelStyle={labelStyle}
163
+ error={error}
164
+ errorStyle={errorStyle}
165
+ helper={helper}
166
+ helperStyle={helperStyle}
167
+ {...rest}
168
+ />
172
169
  );
173
170
  }
174
171
  );
@@ -178,7 +175,7 @@ const styles = StyleSheet.create({
178
175
  flexDirection: "row",
179
176
  alignItems: "center",
180
177
  borderRightWidth: 1,
181
- borderRightColor: "grey"
178
+ borderRightColor: "grey",
182
179
  },
183
180
  flag: {
184
181
  fontSize: 18,
@@ -187,31 +184,6 @@ const styles = StyleSheet.create({
187
184
  fontSize: 14,
188
185
  marginLeft: 4,
189
186
  },
190
- popup: {
191
- // maxHeight: 400,
192
- width: "100%",
193
- padding: 16,
194
- },
195
- popupTitle: {
196
- fontSize: 18,
197
- fontWeight: "600",
198
- marginBottom: 12,
199
- },
200
- countryRow: {
201
- flexDirection: "row",
202
- alignItems: "center",
203
- paddingVertical: 10,
204
- },
205
- countryText: {
206
- marginLeft: 12,
207
- },
208
- countryName: {
209
- fontSize: 16,
210
- },
211
- countryCode: {
212
- fontSize: 14,
213
- color: "#666",
214
- },
215
187
  });
216
188
 
217
- export default PhoneInput;
189
+ export default PhoneInput;
package/src/index.ts CHANGED
@@ -1,10 +1,10 @@
1
- // import { registerRootComponent } from 'expo';
2
- // import "react-native-reanimated";
1
+ import { registerRootComponent } from 'expo';
2
+ import "react-native-reanimated";
3
3
 
4
4
 
5
- // import App from "./app";
5
+ import App from "./app";
6
6
 
7
- // registerRootComponent(App);
7
+ registerRootComponent(App);
8
8
 
9
9
  export * from "./theme"
10
10
  export * from "./components";