related-ui-components 2.5.4 → 2.5.6
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/components/Input/CountryPickerView.js +62 -44
- package/lib/module/components/Input/CountryPickerView.js.map +1 -1
- package/lib/module/components/Input/PhoneInput.js +13 -18
- package/lib/module/components/Input/PhoneInput.js.map +1 -1
- package/lib/module/contexts/BottomSheetStackProvider.js +2 -1
- package/lib/module/contexts/BottomSheetStackProvider.js.map +1 -1
- package/lib/typescript/src/components/Input/CountryPickerView.d.ts.map +1 -1
- package/lib/typescript/src/components/Input/PhoneInput.d.ts.map +1 -1
- package/lib/typescript/src/contexts/BottomSheetStackProvider.d.ts.map +1 -1
- package/package.json +5 -2
- package/src/components/Input/CountryPickerView.tsx +67 -39
- package/src/components/Input/PhoneInput.tsx +34 -30
- package/src/contexts/BottomSheetStackProvider.tsx +3 -1
|
@@ -1,71 +1,86 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
import React, {
|
|
4
|
-
import { Text, View, TouchableOpacity, StyleSheet
|
|
5
|
-
import {
|
|
3
|
+
import React, { useCallback, useMemo } from "react";
|
|
4
|
+
import { Text, View, TouchableOpacity, StyleSheet } from "react-native";
|
|
5
|
+
import { BottomSheetFlatList } from "@gorhom/bottom-sheet";
|
|
6
6
|
import { useTheme } from "../../theme/index.js";
|
|
7
7
|
import { iso2ToFlagEmoji } from "../../utils/flags.js";
|
|
8
|
-
// Assuming you export this type
|
|
9
8
|
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
// ADDED: A memoized row component to ensure stability
|
|
10
|
+
const CountryRow = /*#__PURE__*/React.memo(({
|
|
11
|
+
item,
|
|
12
12
|
onSelectCountry,
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
countryNameStyle,
|
|
16
|
-
countryCodeStyle
|
|
13
|
+
nameStyle,
|
|
14
|
+
codeStyle
|
|
17
15
|
}) => {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
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, {
|
|
16
|
+
// This handler is now stable because onSelectCountry is stable
|
|
17
|
+
const handlePress = () => onSelectCountry(item);
|
|
18
|
+
return /*#__PURE__*/_jsxs(TouchableOpacity, {
|
|
30
19
|
style: styles.countryRow,
|
|
31
|
-
onPress:
|
|
20
|
+
onPress: handlePress,
|
|
32
21
|
children: [/*#__PURE__*/_jsxs(Text, {
|
|
33
22
|
style: styles.flag,
|
|
34
23
|
children: [" ", iso2ToFlagEmoji(item.iso2)]
|
|
35
24
|
}), /*#__PURE__*/_jsxs(View, {
|
|
36
25
|
style: styles.countryText,
|
|
37
26
|
children: [/*#__PURE__*/_jsx(Text, {
|
|
38
|
-
style:
|
|
39
|
-
color: theme.text
|
|
40
|
-
}, countryNameStyle],
|
|
27
|
+
style: nameStyle,
|
|
41
28
|
children: item.name
|
|
42
29
|
}), /*#__PURE__*/_jsx(Text, {
|
|
43
|
-
style:
|
|
30
|
+
style: codeStyle,
|
|
44
31
|
children: item.code
|
|
45
32
|
})]
|
|
46
33
|
})]
|
|
47
34
|
});
|
|
35
|
+
});
|
|
36
|
+
export const CountryPickerView = ({
|
|
37
|
+
countries,
|
|
38
|
+
onSelectCountry,
|
|
39
|
+
listTitle,
|
|
40
|
+
listTitleStyle,
|
|
41
|
+
countryNameStyle,
|
|
42
|
+
countryCodeStyle
|
|
43
|
+
}) => {
|
|
44
|
+
const {
|
|
45
|
+
theme
|
|
46
|
+
} = useTheme();
|
|
47
|
+
|
|
48
|
+
// ADDED: Memoize styles to pass them stably to the memoized row component
|
|
49
|
+
const memoizedNameStyle = useMemo(() => [styles.countryName, {
|
|
50
|
+
color: theme.text
|
|
51
|
+
}, countryNameStyle], [theme.text, countryNameStyle]);
|
|
52
|
+
const memoizedCodeStyle = useMemo(() => [styles.countryCode, {
|
|
53
|
+
color: theme.helper
|
|
54
|
+
}, countryCodeStyle],
|
|
55
|
+
// Use a different theme color for contrast
|
|
56
|
+
[theme.helper, countryCodeStyle]);
|
|
57
|
+
|
|
58
|
+
// CHANGED: renderCountry is now wrapped in useCallback
|
|
59
|
+
const renderCountry = useCallback(({
|
|
60
|
+
item
|
|
61
|
+
}) => /*#__PURE__*/_jsx(CountryRow, {
|
|
62
|
+
item: item,
|
|
63
|
+
onSelectCountry: onSelectCountry,
|
|
64
|
+
nameStyle: memoizedNameStyle,
|
|
65
|
+
codeStyle: memoizedCodeStyle
|
|
66
|
+
}), [onSelectCountry, memoizedNameStyle, memoizedCodeStyle]);
|
|
48
67
|
return /*#__PURE__*/_jsxs(View, {
|
|
49
68
|
style: styles.popup,
|
|
50
69
|
children: [/*#__PURE__*/_jsx(Text, {
|
|
51
|
-
style: [styles.popupTitle,
|
|
70
|
+
style: [styles.popupTitle, {
|
|
52
71
|
color: theme.text
|
|
53
|
-
}],
|
|
72
|
+
}, listTitleStyle],
|
|
54
73
|
children: listTitle
|
|
55
|
-
}),
|
|
74
|
+
}), /*#__PURE__*/_jsx(BottomSheetFlatList, {
|
|
56
75
|
data: countries,
|
|
57
76
|
keyExtractor: c => c.iso2,
|
|
58
77
|
renderItem: renderCountry,
|
|
59
78
|
contentContainerStyle: {
|
|
60
79
|
paddingBottom: 16
|
|
61
80
|
},
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
children: /*#__PURE__*/_jsx(ActivityIndicator, {
|
|
66
|
-
size: "large",
|
|
67
|
-
color: theme.primary
|
|
68
|
-
})
|
|
81
|
+
initialNumToRender: 10,
|
|
82
|
+
maxToRenderPerBatch: 10
|
|
83
|
+
// estimatedItemSize={56} // Provide a more accurate estimate
|
|
69
84
|
})]
|
|
70
85
|
});
|
|
71
86
|
};
|
|
@@ -73,7 +88,7 @@ const styles = StyleSheet.create({
|
|
|
73
88
|
popup: {
|
|
74
89
|
flex: 1,
|
|
75
90
|
width: "100%",
|
|
76
|
-
|
|
91
|
+
paddingHorizontal: 16
|
|
77
92
|
},
|
|
78
93
|
loaderContainer: {
|
|
79
94
|
flex: 1,
|
|
@@ -83,25 +98,28 @@ const styles = StyleSheet.create({
|
|
|
83
98
|
popupTitle: {
|
|
84
99
|
fontSize: 18,
|
|
85
100
|
fontWeight: "600",
|
|
86
|
-
marginBottom: 12
|
|
101
|
+
marginBottom: 12,
|
|
102
|
+
paddingTop: 16
|
|
87
103
|
},
|
|
88
104
|
countryRow: {
|
|
89
105
|
flexDirection: "row",
|
|
90
106
|
alignItems: "center",
|
|
91
|
-
paddingVertical:
|
|
107
|
+
paddingVertical: 12,
|
|
108
|
+
// Adjusted padding
|
|
109
|
+
height: 56 // Set a fixed height
|
|
92
110
|
},
|
|
93
111
|
flag: {
|
|
94
|
-
fontSize:
|
|
112
|
+
fontSize: 22
|
|
95
113
|
},
|
|
96
114
|
countryText: {
|
|
97
|
-
marginLeft: 12
|
|
115
|
+
marginLeft: 12,
|
|
116
|
+
flex: 1 // Allow text to take remaining space
|
|
98
117
|
},
|
|
99
118
|
countryName: {
|
|
100
119
|
fontSize: 16
|
|
101
120
|
},
|
|
102
121
|
countryCode: {
|
|
103
|
-
fontSize: 14
|
|
104
|
-
color: "#666"
|
|
122
|
+
fontSize: 14
|
|
105
123
|
}
|
|
106
124
|
});
|
|
107
125
|
//# sourceMappingURL=CountryPickerView.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","
|
|
1
|
+
{"version":3,"names":["React","useCallback","useMemo","Text","View","TouchableOpacity","StyleSheet","BottomSheetFlatList","useTheme","iso2ToFlagEmoji","jsxs","_jsxs","jsx","_jsx","CountryRow","memo","item","onSelectCountry","nameStyle","codeStyle","handlePress","style","styles","countryRow","onPress","children","flag","iso2","countryText","name","code","CountryPickerView","countries","listTitle","listTitleStyle","countryNameStyle","countryCodeStyle","theme","memoizedNameStyle","countryName","color","text","memoizedCodeStyle","countryCode","helper","renderCountry","popup","popupTitle","data","keyExtractor","c","renderItem","contentContainerStyle","paddingBottom","initialNumToRender","maxToRenderPerBatch","create","flex","width","paddingHorizontal","loaderContainer","alignItems","justifyContent","fontSize","fontWeight","marginBottom","paddingTop","flexDirection","paddingVertical","height","marginLeft"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Input/CountryPickerView.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,15 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import React, { forwardRef, useMemo, useCallback } from "react";
|
|
4
|
-
import { Text, TouchableOpacity, StyleSheet
|
|
5
|
-
// Remove FlatList, not needed here anymore
|
|
6
|
-
} from "react-native";
|
|
4
|
+
import { Text, TouchableOpacity, StyleSheet } from "react-native";
|
|
7
5
|
import CustomInput from "./Input.js";
|
|
8
6
|
import { useTheme } from "../../theme/index.js";
|
|
9
|
-
// Remove Popup, not used
|
|
10
7
|
import { Ionicons } from "@expo/vector-icons";
|
|
11
8
|
import { useBottomSheetStack } from "../../contexts/index.js";
|
|
12
|
-
// Remove BottomSheetFlatList and BottomSheetView
|
|
13
9
|
import { allCountries } from "country-telephone-data";
|
|
14
10
|
import { iso2ToFlagEmoji } from "../../utils/flags.js";
|
|
15
11
|
import { CountryPickerView } from "./CountryPickerView.js";
|
|
@@ -49,12 +45,9 @@ const PhoneInput = /*#__PURE__*/forwardRef(({
|
|
|
49
45
|
} = useBottomSheetStack();
|
|
50
46
|
const sel = useMemo(() => selectedCountry || countries.find(c => c.code === "+1") || countries[0], [selectedCountry, countries]);
|
|
51
47
|
const handleCountryPress = useCallback(c => {
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
}
|
|
56
|
-
}, [onSelectCountry, clear] // Add clear to dependency array
|
|
57
|
-
);
|
|
48
|
+
onSelectCountry?.(c);
|
|
49
|
+
clear();
|
|
50
|
+
}, [onSelectCountry, clear]);
|
|
58
51
|
const openCountryPicker = useCallback(() => {
|
|
59
52
|
push({
|
|
60
53
|
component: /*#__PURE__*/_jsx(CountryPickerView, {
|
|
@@ -68,9 +61,10 @@ const PhoneInput = /*#__PURE__*/forwardRef(({
|
|
|
68
61
|
snapPoints: ["80%"]
|
|
69
62
|
});
|
|
70
63
|
}, [push, countries, handleCountryPress, listTitle, listTitleStyle, countryNameStyle, countryCodeStyle]);
|
|
71
|
-
const leftIcon = /*#__PURE__*/_jsxs(TouchableOpacity, {
|
|
64
|
+
const leftIcon = useMemo(() => /*#__PURE__*/_jsxs(TouchableOpacity, {
|
|
72
65
|
style: [styles.selector, {
|
|
73
|
-
backgroundColor: theme.inputBackground
|
|
66
|
+
backgroundColor: theme.inputBackground,
|
|
67
|
+
borderRightColor: theme.border
|
|
74
68
|
}],
|
|
75
69
|
hitSlop: {
|
|
76
70
|
left: 30,
|
|
@@ -94,10 +88,11 @@ const PhoneInput = /*#__PURE__*/forwardRef(({
|
|
|
94
88
|
name: "chevron-down",
|
|
95
89
|
size: 16,
|
|
96
90
|
style: {
|
|
97
|
-
marginHorizontal: 4
|
|
91
|
+
marginHorizontal: 4,
|
|
92
|
+
color: theme.inputText
|
|
98
93
|
}
|
|
99
94
|
})]
|
|
100
|
-
});
|
|
95
|
+
}), [theme, sel, openCountryPicker]);
|
|
101
96
|
return /*#__PURE__*/_jsx(CustomInput, {
|
|
102
97
|
ref: ref,
|
|
103
98
|
label: label,
|
|
@@ -122,14 +117,14 @@ const styles = StyleSheet.create({
|
|
|
122
117
|
flexDirection: "row",
|
|
123
118
|
alignItems: "center",
|
|
124
119
|
borderRightWidth: 1,
|
|
125
|
-
|
|
120
|
+
paddingHorizontal: 8 // Add some padding
|
|
126
121
|
},
|
|
127
122
|
flag: {
|
|
128
|
-
fontSize:
|
|
123
|
+
fontSize: 22 // Slightly larger for better visibility
|
|
129
124
|
},
|
|
130
125
|
code: {
|
|
131
126
|
fontSize: 14,
|
|
132
|
-
marginLeft:
|
|
127
|
+
marginLeft: 6
|
|
133
128
|
}
|
|
134
129
|
});
|
|
135
130
|
export default PhoneInput;
|
|
@@ -1 +1 @@
|
|
|
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","
|
|
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","borderRightColor","border","hitSlop","left","top","right","bottom","onPress","activeOpacity","children","flag","color","inputText","size","marginHorizontal","keyboardType","placeholder","create","flexDirection","alignItems","borderRightWidth","paddingHorizontal","fontSize","marginLeft"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Input/PhoneInput.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -64,6 +64,7 @@ export const BottomSheetStackProvider = ({
|
|
|
64
64
|
appearsOnIndex: 0,
|
|
65
65
|
pressBehavior: "close"
|
|
66
66
|
}), []);
|
|
67
|
+
console.log(stack);
|
|
67
68
|
return /*#__PURE__*/_jsxs(BottomSheetStackContext.Provider, {
|
|
68
69
|
value: {
|
|
69
70
|
push,
|
|
@@ -76,7 +77,7 @@ export const BottomSheetStackProvider = ({
|
|
|
76
77
|
ref: sheetRef,
|
|
77
78
|
index: 0,
|
|
78
79
|
snapPoints: currentItem?.snapPoints || ["100%"],
|
|
79
|
-
enableDynamicSizing:
|
|
80
|
+
enableDynamicSizing: true,
|
|
80
81
|
enablePanDownToClose: true,
|
|
81
82
|
android_keyboardInputMode: "adjustResize",
|
|
82
83
|
enableBlurKeyboardOnGesture: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["BottomSheet","BottomSheetBackdrop","React","useCallback","useEffect","useMemo","useRef","useState","BackHandler","StyleSheet","Animated","FadeIn","FadeOut","useSafeAreaInsets","BottomSheetStackContext","jsx","_jsx","jsxs","_jsxs","BottomSheetStackProvider","children","stack","setStack","sheetRef","top","push","item","prev","clear","current","close","pop","length","slice","replace","currentItem","canGoBack","isOpen","snapToIndex","backHandlerSubscription","addEventListener","remove","AnimatedView","View","enteringAnimation","duration","exitingAnimation","renderBackdrop","props","disappearsOnIndex","style","backgroundColor","appearsOnIndex","pressBehavior","Provider","value","ref","index","snapPoints","enableDynamicSizing","
|
|
1
|
+
{"version":3,"names":["BottomSheet","BottomSheetBackdrop","React","useCallback","useEffect","useMemo","useRef","useState","BackHandler","StyleSheet","Animated","FadeIn","FadeOut","useSafeAreaInsets","BottomSheetStackContext","jsx","_jsx","jsxs","_jsxs","BottomSheetStackProvider","children","stack","setStack","sheetRef","top","push","item","prev","clear","current","close","pop","length","slice","replace","currentItem","canGoBack","isOpen","snapToIndex","backHandlerSubscription","addEventListener","remove","AnimatedView","View","enteringAnimation","duration","exitingAnimation","renderBackdrop","props","disappearsOnIndex","style","backgroundColor","appearsOnIndex","pressBehavior","console","log","Provider","value","ref","index","snapPoints","enableDynamicSizing","enablePanDownToClose","android_keyboardInputMode","enableBlurKeyboardOnGesture","keyboardBlurBehavior","keyboardBehavior","onClose","backdropComponent","topInset","handleIndicatorStyle","styles","sheetContainer","entering","exiting","animatedView","component","create","flex"],"sourceRoot":"..\\..\\..\\src","sources":["contexts/BottomSheetStackProvider.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CountryPickerView.d.ts","sourceRoot":"","sources":["../../../../../src/components/Input/CountryPickerView.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"CountryPickerView.d.ts","sourceRoot":"","sources":["../../../../../src/components/Input/CountryPickerView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AACzE,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;AA8BD,eAAO,MAAM,iBAAiB,GAAI,gGAO/B,sBAAsB,sBA2CxB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,EAMT,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,mFAuHf,CAAC;AAkBF,eAAe,UAAU,CAAC"}
|
|
@@ -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,
|
|
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.
|
|
3
|
+
"version": "2.5.6",
|
|
4
4
|
"main": "./src/index.ts",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"start": "expo start",
|
|
@@ -75,5 +75,8 @@
|
|
|
75
75
|
"eslintIgnore": [
|
|
76
76
|
"node_modules/",
|
|
77
77
|
"lib/"
|
|
78
|
-
]
|
|
78
|
+
],
|
|
79
|
+
"dependencies": {
|
|
80
|
+
"@shopify/flash-list": "^1.8.3"
|
|
81
|
+
}
|
|
79
82
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useState, useEffect } from "react";
|
|
1
|
+
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
|
2
2
|
import {
|
|
3
3
|
Text,
|
|
4
4
|
View,
|
|
@@ -12,7 +12,7 @@ import {
|
|
|
12
12
|
import { BottomSheetFlashList, BottomSheetFlatList } from "@gorhom/bottom-sheet";
|
|
13
13
|
import { useTheme } from "../../theme";
|
|
14
14
|
import { iso2ToFlagEmoji } from "../../utils/flags";
|
|
15
|
-
import { Country } from "./PhoneInput";
|
|
15
|
+
import { Country } from "./PhoneInput";
|
|
16
16
|
|
|
17
17
|
interface CountryPickerViewProps {
|
|
18
18
|
countries: Country[];
|
|
@@ -23,6 +23,34 @@ interface CountryPickerViewProps {
|
|
|
23
23
|
countryCodeStyle?: StyleProp<TextStyle>;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
+
// ADDED: A memoized row component to ensure stability
|
|
27
|
+
const CountryRow = React.memo(
|
|
28
|
+
({
|
|
29
|
+
item,
|
|
30
|
+
onSelectCountry,
|
|
31
|
+
nameStyle,
|
|
32
|
+
codeStyle,
|
|
33
|
+
}: {
|
|
34
|
+
item: Country;
|
|
35
|
+
onSelectCountry: (c: Country) => void;
|
|
36
|
+
nameStyle: StyleProp<TextStyle>;
|
|
37
|
+
codeStyle: StyleProp<TextStyle>;
|
|
38
|
+
}) => {
|
|
39
|
+
// This handler is now stable because onSelectCountry is stable
|
|
40
|
+
const handlePress = () => onSelectCountry(item);
|
|
41
|
+
|
|
42
|
+
return (
|
|
43
|
+
<TouchableOpacity style={styles.countryRow} onPress={handlePress}>
|
|
44
|
+
<Text style={styles.flag}> {iso2ToFlagEmoji(item.iso2)}</Text>
|
|
45
|
+
<View style={styles.countryText}>
|
|
46
|
+
<Text style={nameStyle}>{item.name}</Text>
|
|
47
|
+
<Text style={codeStyle}>{item.code}</Text>
|
|
48
|
+
</View>
|
|
49
|
+
</TouchableOpacity>
|
|
50
|
+
);
|
|
51
|
+
}
|
|
52
|
+
);
|
|
53
|
+
|
|
26
54
|
export const CountryPickerView = ({
|
|
27
55
|
countries,
|
|
28
56
|
onSelectCountry,
|
|
@@ -32,47 +60,45 @@ export const CountryPickerView = ({
|
|
|
32
60
|
countryCodeStyle,
|
|
33
61
|
}: CountryPickerViewProps) => {
|
|
34
62
|
const { theme } = useTheme();
|
|
35
|
-
const [isReady, setIsReady] = useState(false);
|
|
36
63
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
64
|
+
// ADDED: Memoize styles to pass them stably to the memoized row component
|
|
65
|
+
const memoizedNameStyle = useMemo(
|
|
66
|
+
() => [styles.countryName, { color: theme.text }, countryNameStyle],
|
|
67
|
+
[theme.text, countryNameStyle]
|
|
68
|
+
);
|
|
69
|
+
|
|
70
|
+
const memoizedCodeStyle = useMemo(
|
|
71
|
+
() => [styles.countryCode, { color: theme.helper }, countryCodeStyle], // Use a different theme color for contrast
|
|
72
|
+
[theme.helper, countryCodeStyle]
|
|
73
|
+
);
|
|
42
74
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
</View>
|
|
55
|
-
</TouchableOpacity>
|
|
75
|
+
// CHANGED: renderCountry is now wrapped in useCallback
|
|
76
|
+
const renderCountry = useCallback(
|
|
77
|
+
({ item }: { item: Country }) => (
|
|
78
|
+
<CountryRow
|
|
79
|
+
item={item}
|
|
80
|
+
onSelectCountry={onSelectCountry}
|
|
81
|
+
nameStyle={memoizedNameStyle}
|
|
82
|
+
codeStyle={memoizedCodeStyle}
|
|
83
|
+
/>
|
|
84
|
+
),
|
|
85
|
+
[onSelectCountry, memoizedNameStyle, memoizedCodeStyle]
|
|
56
86
|
);
|
|
57
87
|
|
|
58
88
|
return (
|
|
59
89
|
<View style={styles.popup}>
|
|
60
|
-
<Text style={[styles.popupTitle,
|
|
90
|
+
<Text style={[styles.popupTitle, { color: theme.text }, listTitleStyle]}>
|
|
61
91
|
{listTitle}
|
|
62
92
|
</Text>
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
<View style={styles.loaderContainer}>
|
|
73
|
-
<ActivityIndicator size="large" color={theme.primary} />
|
|
74
|
-
</View>
|
|
75
|
-
)}
|
|
93
|
+
<BottomSheetFlatList
|
|
94
|
+
data={countries}
|
|
95
|
+
keyExtractor={(c: Country) => c.iso2}
|
|
96
|
+
renderItem={renderCountry}
|
|
97
|
+
contentContainerStyle={{ paddingBottom: 16 }}
|
|
98
|
+
initialNumToRender={10}
|
|
99
|
+
maxToRenderPerBatch={10}
|
|
100
|
+
// estimatedItemSize={56} // Provide a more accurate estimate
|
|
101
|
+
/>
|
|
76
102
|
</View>
|
|
77
103
|
);
|
|
78
104
|
};
|
|
@@ -81,7 +107,7 @@ const styles = StyleSheet.create({
|
|
|
81
107
|
popup: {
|
|
82
108
|
flex: 1,
|
|
83
109
|
width: "100%",
|
|
84
|
-
|
|
110
|
+
paddingHorizontal: 16,
|
|
85
111
|
},
|
|
86
112
|
loaderContainer: {
|
|
87
113
|
flex: 1,
|
|
@@ -92,23 +118,25 @@ const styles = StyleSheet.create({
|
|
|
92
118
|
fontSize: 18,
|
|
93
119
|
fontWeight: "600",
|
|
94
120
|
marginBottom: 12,
|
|
121
|
+
paddingTop: 16,
|
|
95
122
|
},
|
|
96
123
|
countryRow: {
|
|
97
124
|
flexDirection: "row",
|
|
98
125
|
alignItems: "center",
|
|
99
|
-
paddingVertical:
|
|
126
|
+
paddingVertical: 12, // Adjusted padding
|
|
127
|
+
height: 56, // Set a fixed height
|
|
100
128
|
},
|
|
101
129
|
flag: {
|
|
102
|
-
fontSize:
|
|
130
|
+
fontSize: 22,
|
|
103
131
|
},
|
|
104
132
|
countryText: {
|
|
105
133
|
marginLeft: 12,
|
|
134
|
+
flex: 1, // Allow text to take remaining space
|
|
106
135
|
},
|
|
107
136
|
countryName: {
|
|
108
137
|
fontSize: 16,
|
|
109
138
|
},
|
|
110
139
|
countryCode: {
|
|
111
140
|
fontSize: 14,
|
|
112
|
-
color: "#666",
|
|
113
141
|
},
|
|
114
142
|
});
|
|
@@ -5,17 +5,14 @@ import {
|
|
|
5
5
|
View,
|
|
6
6
|
TouchableOpacity,
|
|
7
7
|
StyleSheet,
|
|
8
|
-
// Remove FlatList, not needed here anymore
|
|
9
8
|
TextInputProps,
|
|
10
9
|
StyleProp,
|
|
11
10
|
TextStyle,
|
|
12
11
|
} from "react-native";
|
|
13
12
|
import CustomInput, { CustomInputProps } from "./Input";
|
|
14
13
|
import { useTheme } from "../../theme";
|
|
15
|
-
// Remove Popup, not used
|
|
16
14
|
import { Ionicons } from "@expo/vector-icons";
|
|
17
15
|
import { useBottomSheetStack } from "../../contexts";
|
|
18
|
-
// Remove BottomSheetFlatList and BottomSheetView
|
|
19
16
|
import { allCountries } from "country-telephone-data";
|
|
20
17
|
import { iso2ToFlagEmoji } from "../../utils/flags";
|
|
21
18
|
import { CountryPickerView } from "./CountryPickerView";
|
|
@@ -94,12 +91,10 @@ const PhoneInput = forwardRef<TextInput, PhoneInputProps>(
|
|
|
94
91
|
|
|
95
92
|
const handleCountryPress = useCallback(
|
|
96
93
|
(c: Country) => {
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
clear();
|
|
100
|
-
}
|
|
94
|
+
onSelectCountry?.(c);
|
|
95
|
+
clear();
|
|
101
96
|
},
|
|
102
|
-
[onSelectCountry, clear]
|
|
97
|
+
[onSelectCountry, clear]
|
|
103
98
|
);
|
|
104
99
|
|
|
105
100
|
const openCountryPicker = useCallback(() => {
|
|
@@ -126,25 +121,34 @@ const PhoneInput = forwardRef<TextInput, PhoneInputProps>(
|
|
|
126
121
|
countryCodeStyle,
|
|
127
122
|
]);
|
|
128
123
|
|
|
129
|
-
const leftIcon = (
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
{
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
124
|
+
const leftIcon = useMemo(
|
|
125
|
+
() => (
|
|
126
|
+
<TouchableOpacity
|
|
127
|
+
style={[
|
|
128
|
+
styles.selector,
|
|
129
|
+
{
|
|
130
|
+
backgroundColor: theme.inputBackground,
|
|
131
|
+
borderRightColor: theme.border,
|
|
132
|
+
},
|
|
133
|
+
]}
|
|
134
|
+
hitSlop={{ left: 30, top: 30, right: 30, bottom: 30 }}
|
|
135
|
+
onPress={openCountryPicker}
|
|
136
|
+
activeOpacity={0.8}
|
|
137
|
+
>
|
|
138
|
+
<Text style={[styles.flag, { color: theme.inputText }]}>
|
|
139
|
+
{iso2ToFlagEmoji(sel.iso2)}
|
|
140
|
+
</Text>
|
|
141
|
+
<Text style={[styles.code, { color: theme.inputText }]}>
|
|
142
|
+
{sel.code}
|
|
143
|
+
</Text>
|
|
144
|
+
<Ionicons
|
|
145
|
+
name="chevron-down"
|
|
146
|
+
size={16}
|
|
147
|
+
style={{ marginHorizontal: 4, color: theme.inputText }}
|
|
148
|
+
/>
|
|
149
|
+
</TouchableOpacity>
|
|
150
|
+
),
|
|
151
|
+
[theme, sel, openCountryPicker]
|
|
148
152
|
);
|
|
149
153
|
|
|
150
154
|
return (
|
|
@@ -175,14 +179,14 @@ const styles = StyleSheet.create({
|
|
|
175
179
|
flexDirection: "row",
|
|
176
180
|
alignItems: "center",
|
|
177
181
|
borderRightWidth: 1,
|
|
178
|
-
|
|
182
|
+
paddingHorizontal: 8, // Add some padding
|
|
179
183
|
},
|
|
180
184
|
flag: {
|
|
181
|
-
fontSize:
|
|
185
|
+
fontSize: 22, // Slightly larger for better visibility
|
|
182
186
|
},
|
|
183
187
|
code: {
|
|
184
188
|
fontSize: 14,
|
|
185
|
-
marginLeft:
|
|
189
|
+
marginLeft: 6,
|
|
186
190
|
},
|
|
187
191
|
});
|
|
188
192
|
|
|
@@ -90,6 +90,8 @@ export const BottomSheetStackProvider: React.FC<{ children: ReactNode }> = ({
|
|
|
90
90
|
[]
|
|
91
91
|
);
|
|
92
92
|
|
|
93
|
+
console.log(stack)
|
|
94
|
+
|
|
93
95
|
return (
|
|
94
96
|
<BottomSheetStackContext.Provider
|
|
95
97
|
value={{ push, pop, replace, clear, canGoBack }}
|
|
@@ -99,7 +101,7 @@ export const BottomSheetStackProvider: React.FC<{ children: ReactNode }> = ({
|
|
|
99
101
|
ref={sheetRef}
|
|
100
102
|
index={0}
|
|
101
103
|
snapPoints={currentItem?.snapPoints || ["100%"]}
|
|
102
|
-
enableDynamicSizing={
|
|
104
|
+
enableDynamicSizing={true}
|
|
103
105
|
enablePanDownToClose
|
|
104
106
|
android_keyboardInputMode="adjustResize"
|
|
105
107
|
enableBlurKeyboardOnGesture
|