related-ui-components 2.5.1 → 2.5.3

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 (19) 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 +116 -0
  4. package/lib/module/components/Input/CountryPickerView.js.map +1 -0
  5. package/lib/module/components/Input/PhoneInput.js +43 -89
  6. package/lib/module/components/Input/PhoneInput.js.map +1 -1
  7. package/lib/module/contexts/BottomSheetStackProvider.js +1 -0
  8. package/lib/module/contexts/BottomSheetStackProvider.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/contexts/BottomSheetStackProvider.d.ts.map +1 -1
  15. package/package.json +1 -1
  16. package/src/app.tsx +134 -134
  17. package/src/components/Input/CountryPickerView.tsx +117 -0
  18. package/src/components/Input/PhoneInput.tsx +64 -94
  19. package/src/contexts/BottomSheetStackProvider.tsx +2 -0
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,mFAiHf,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,EAIT,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAoB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAQxD,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/contexts/BottomSheetStackProvider.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BottomSheetStackProvider.d.ts","sourceRoot":"","sources":["../../../../src/contexts/BottomSheetStackProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EACZ,SAAS,EAMV,MAAM,OAAO,CAAC;AASf,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,CA0GtE,CAAC"}
1
+ {"version":3,"file":"BottomSheetStackProvider.d.ts","sourceRoot":"","sources":["../../../../src/contexts/BottomSheetStackProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EACZ,SAAS,EAMV,MAAM,OAAO,CAAC;AASf,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,CA4GtE,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "related-ui-components",
3
- "version": "2.5.1",
3
+ "version": "2.5.3",
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,117 @@
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 { 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
+ // Defer rendering of the list until after the bottom sheet has animated in
38
+ useEffect(() => {
39
+ InteractionManager.runAfterInteractions(() => {
40
+ setIsReady(true);
41
+ });
42
+ }, []);
43
+
44
+ const renderCountry = ({ item }: { item: Country }) => (
45
+ <TouchableOpacity
46
+ style={styles.countryRow}
47
+ onPress={() => onSelectCountry(item)}
48
+ >
49
+ <Text style={styles.flag}> {iso2ToFlagEmoji(item.iso2)}</Text>
50
+ <View style={styles.countryText}>
51
+ <Text style={[styles.countryName, { color: theme.text }, countryNameStyle]}>
52
+ {item.name}
53
+ </Text>
54
+ <Text style={[styles.countryCode, countryCodeStyle]}>{item.code}</Text>
55
+ </View>
56
+ </TouchableOpacity>
57
+ );
58
+
59
+ return (
60
+ <View style={styles.popup}>
61
+ <Text style={[styles.popupTitle, listTitleStyle, { color: theme.text }]}>
62
+ {listTitle}
63
+ </Text>
64
+ {isReady ? (
65
+ <BottomSheetFlatList
66
+ data={countries}
67
+ keyExtractor={(c) => c.iso2} // Use a stable key like iso2
68
+ renderItem={renderCountry}
69
+ contentContainerStyle={{ paddingBottom: 16 }}
70
+ initialNumToRender={15} // Performance tuning
71
+ maxToRenderPerBatch={15} // Performance tuning
72
+ />
73
+ ) : (
74
+ // Show a loading spinner while interactions are completing
75
+ <View style={styles.loaderContainer}>
76
+ <ActivityIndicator size="large" color={theme.primary} />
77
+ </View>
78
+ )}
79
+ </View>
80
+ );
81
+ };
82
+
83
+ const styles = StyleSheet.create({
84
+ popup: {
85
+ flex: 1, // Ensure the view takes full height
86
+ width: "100%",
87
+ padding: 16,
88
+ },
89
+ loaderContainer: {
90
+ flex: 1,
91
+ alignItems: "center",
92
+ justifyContent: "center",
93
+ },
94
+ popupTitle: {
95
+ fontSize: 18,
96
+ fontWeight: "600",
97
+ marginBottom: 12,
98
+ },
99
+ countryRow: {
100
+ flexDirection: "row",
101
+ alignItems: "center",
102
+ paddingVertical: 10,
103
+ },
104
+ flag: {
105
+ fontSize: 18,
106
+ },
107
+ countryText: {
108
+ marginLeft: 12,
109
+ },
110
+ countryName: {
111
+ fontSize: 16,
112
+ },
113
+ countryCode: {
114
+ fontSize: 14,
115
+ color: "#666",
116
+ },
117
+ });
package/src/components/Input/PhoneInput.tsx CHANGED
@@ -1,28 +1,24 @@
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
- View,
6
5
  TouchableOpacity,
7
6
  StyleSheet,
8
- FlatList,
9
- TextInputProps,
10
7
  StyleProp,
11
8
  TextStyle,
12
9
  } from "react-native";
13
10
  import CustomInput, { CustomInputProps } from "./Input";
14
11
  import { useTheme } from "../../theme";
15
- import { Popup } from "../Popup";
16
12
  import { Ionicons } from "@expo/vector-icons";
17
13
  import { useBottomSheetStack } from "../../contexts";
18
- import { BottomSheetFlatList } from "@gorhom/bottom-sheet";
19
- import { allCountries } from 'country-telephone-data';
14
+ import { allCountries } from "country-telephone-data";
20
15
  import { iso2ToFlagEmoji } from "../../utils/flags";
16
+ import { CountryPickerView } from "./CountryPickerView";
21
17
 
22
18
  export type Country = {
23
- code: string;
19
+ code: string;
24
20
  iso2: string;
25
- name: string;
21
+ name: string;
26
22
  };
27
23
 
28
24
  export interface PhoneInputProps
@@ -41,15 +37,15 @@ export interface PhoneInputProps
41
37
  onSelectCountry?: (c: Country) => void;
42
38
  countries?: Country[];
43
39
 
44
- //styles
40
+ //styles
45
41
  countryNameStyle?: StyleProp<TextStyle>;
46
42
  countryCodeStyle?: StyleProp<TextStyle>;
47
43
  listTitleStyle?: StyleProp<TextStyle>;
48
44
 
49
- listTitle?: string
45
+ listTitle?: string;
50
46
  }
51
47
 
52
- const DEFAULT_COUNTRIES: Country[] = allCountries.map(c => ({
48
+ const DEFAULT_COUNTRIES: Country[] = allCountries.map((c) => ({
53
49
  code: `+${c.dialCode}`,
54
50
  iso2: c.iso2,
55
51
  name: c.name,
@@ -81,7 +77,7 @@ const PhoneInput = forwardRef<TextInput, PhoneInputProps>(
81
77
  ref
82
78
  ) => {
83
79
  const { theme } = useTheme();
84
- const { push } = useBottomSheetStack();
80
+ const { push, clear } = useBottomSheetStack();
85
81
 
86
82
  const sel = useMemo(
87
83
  () =>
@@ -93,46 +89,43 @@ const PhoneInput = forwardRef<TextInput, PhoneInputProps>(
93
89
 
94
90
  const handleCountryPress = useCallback(
95
91
  (c: Country) => {
96
- onSelectCountry && onSelectCountry(c);
92
+ if (onSelectCountry) {
93
+ onSelectCountry(c);
94
+ clear();
95
+ }
97
96
  },
98
- [onSelectCountry]
97
+ [onSelectCountry, clear] // Add clear to dependency array
99
98
  );
100
99
 
101
- const renderCountry = ({ item }: { item: Country }) => (
102
- <TouchableOpacity
103
- style={styles.countryRow}
104
- onPress={() => handleCountryPress(item)}
105
- >
106
- <Text style={styles.flag}> {iso2ToFlagEmoji(item.iso2)}</Text>
107
- <View style={styles.countryText}>
108
- <Text style={[styles.countryName, countryNameStyle]}>{item.name}</Text>
109
- <Text style={[styles.countryCode, countryCodeStyle]}>{item.code}</Text>
110
- </View>
111
- </TouchableOpacity>
112
- );
100
+ const openCountryPicker = useCallback(() => {
101
+ push({
102
+ component: (
103
+ <CountryPickerView
104
+ countries={countries}
105
+ onSelectCountry={handleCountryPress}
106
+ listTitle={listTitle}
107
+ listTitleStyle={listTitleStyle}
108
+ countryNameStyle={countryNameStyle}
109
+ countryCodeStyle={countryCodeStyle}
110
+ />
111
+ ),
112
+ snapPoints: ["100%"],
113
+ });
114
+ }, [
115
+ push,
116
+ countries,
117
+ handleCountryPress,
118
+ listTitle,
119
+ listTitleStyle,
120
+ countryNameStyle,
121
+ countryCodeStyle,
122
+ ]);
113
123
 
114
124
  const leftIcon = (
115
125
  <TouchableOpacity
116
126
  style={[styles.selector, { backgroundColor: theme.inputBackground }]}
117
- hitSlop={{left: 30, top: 30, right: 30, bottom: 30}}
118
- onPress={() =>
119
- push({
120
- component: (
121
- <View style={styles.popup}>
122
- <Text style={[styles.popupTitle, listTitleStyle, { color: theme.text }]}>
123
- {listTitle}
124
- </Text>
125
- <BottomSheetFlatList
126
- data={countries}
127
- keyExtractor={(c, i) => i.toString()}
128
- renderItem={renderCountry}
129
- contentContainerStyle={{ paddingBottom: 16 }}
130
- />
131
- </View>
132
- ),
133
- snapPoints: ["100%"]
134
- })
135
- }
127
+ hitSlop={{ left: 30, top: 30, right: 30, bottom: 30 }}
128
+ onPress={openCountryPicker}
136
129
  activeOpacity={0.8}
137
130
  >
138
131
  <Text style={[styles.flag, { color: theme.inputText }]}>
@@ -141,31 +134,33 @@ const PhoneInput = forwardRef<TextInput, PhoneInputProps>(
141
134
  <Text style={[styles.code, { color: theme.inputText }]}>
142
135
  {sel.code}
143
136
  </Text>
144
- <Ionicons name="chevron-down" size={16} style={{marginHorizontal: 4}}></Ionicons>
137
+ <Ionicons
138
+ name="chevron-down"
139
+ size={16}
140
+ style={{ marginHorizontal: 4 }}
141
+ ></Ionicons>
145
142
  </TouchableOpacity>
146
143
  );
147
144
 
148
145
  return (
149
- <>
150
- <CustomInput
151
- ref={ref}
152
- label={label}
153
- value={value}
154
- onChangeText={onChangeText}
155
- keyboardType="phone-pad"
156
- placeholder="123 456 7890"
157
- leftIcon={leftIcon}
158
- containerStyle={containerStyle}
159
- inputContainerStyle={inputContainerStyle}
160
- inputStyle={inputStyle}
161
- labelStyle={labelStyle}
162
- error={error}
163
- errorStyle={errorStyle}
164
- helper={helper}
165
- helperStyle={helperStyle}
166
- {...rest}
167
- />
168
- </>
146
+ <CustomInput
147
+ ref={ref}
148
+ label={label}
149
+ value={value}
150
+ onChangeText={onChangeText}
151
+ keyboardType="phone-pad"
152
+ placeholder="123 456 7890"
153
+ leftIcon={leftIcon}
154
+ containerStyle={containerStyle}
155
+ inputContainerStyle={inputContainerStyle}
156
+ inputStyle={inputStyle}
157
+ labelStyle={labelStyle}
158
+ error={error}
159
+ errorStyle={errorStyle}
160
+ helper={helper}
161
+ helperStyle={helperStyle}
162
+ {...rest}
163
+ />
169
164
  );
170
165
  }
171
166
  );
@@ -175,7 +170,7 @@ const styles = StyleSheet.create({
175
170
  flexDirection: "row",
176
171
  alignItems: "center",
177
172
  borderRightWidth: 1,
178
- borderRightColor: "grey"
173
+ borderRightColor: "grey",
179
174
  },
180
175
  flag: {
181
176
  fontSize: 18,
@@ -184,31 +179,6 @@ const styles = StyleSheet.create({
184
179
  fontSize: 14,
185
180
  marginLeft: 4,
186
181
  },
187
- popup: {
188
- // maxHeight: 400,
189
- width: "100%",
190
- padding: 16,
191
- },
192
- popupTitle: {
193
- fontSize: 18,
194
- fontWeight: "600",
195
- marginBottom: 12,
196
- },
197
- countryRow: {
198
- flexDirection: "row",
199
- alignItems: "center",
200
- paddingVertical: 10,
201
- },
202
- countryText: {
203
- marginLeft: 12,
204
- },
205
- countryName: {
206
- fontSize: 16,
207
- },
208
- countryCode: {
209
- fontSize: 14,
210
- color: "#666",
211
- },
212
182
  });
213
183
 
214
- export default PhoneInput;
184
+ export default PhoneInput;
package/src/contexts/BottomSheetStackProvider.tsx CHANGED
@@ -90,6 +90,8 @@ export const BottomSheetStackProvider: React.FC<{ children: ReactNode }> = ({
90
90
  []
91
91
  );
92
92
 
93
+ console.log(stack, isOpen)
94
+
93
95
  return (
94
96
  <BottomSheetStackContext.Provider
95
97
  value={{ push, pop, replace, clear, canGoBack }}