related-ui-components 2.5.4 → 2.5.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/module/components/Input/CountryPickerView.js +65 -34
- package/lib/module/components/Input/CountryPickerView.js.map +1 -1
- package/lib/module/components/Input/PhoneInput.js +16 -18
- package/lib/module/components/Input/PhoneInput.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/package.json +5 -2
- package/src/components/Input/CountryPickerView.tsx +65 -25
- package/src/components/Input/PhoneInput.tsx +35 -30
|
@@ -1,12 +1,38 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
import React, { useState, useEffect } from "react";
|
|
3
|
+
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
|
4
4
|
import { Text, View, TouchableOpacity, StyleSheet, InteractionManager, ActivityIndicator } from "react-native";
|
|
5
5
|
import { BottomSheetFlashList } 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";
|
|
9
|
+
// ADDED: A memoized row component to ensure stability
|
|
10
|
+
const CountryRow = /*#__PURE__*/React.memo(({
|
|
11
|
+
item,
|
|
12
|
+
onSelectCountry,
|
|
13
|
+
nameStyle,
|
|
14
|
+
codeStyle
|
|
15
|
+
}) => {
|
|
16
|
+
// This handler is now stable because onSelectCountry is stable
|
|
17
|
+
const handlePress = () => onSelectCountry(item);
|
|
18
|
+
return /*#__PURE__*/_jsxs(TouchableOpacity, {
|
|
19
|
+
style: styles.countryRow,
|
|
20
|
+
onPress: handlePress,
|
|
21
|
+
children: [/*#__PURE__*/_jsxs(Text, {
|
|
22
|
+
style: styles.flag,
|
|
23
|
+
children: [" ", iso2ToFlagEmoji(item.iso2)]
|
|
24
|
+
}), /*#__PURE__*/_jsxs(View, {
|
|
25
|
+
style: styles.countryText,
|
|
26
|
+
children: [/*#__PURE__*/_jsx(Text, {
|
|
27
|
+
style: nameStyle,
|
|
28
|
+
children: item.name
|
|
29
|
+
}), /*#__PURE__*/_jsx(Text, {
|
|
30
|
+
style: codeStyle,
|
|
31
|
+
children: item.code
|
|
32
|
+
})]
|
|
33
|
+
})]
|
|
34
|
+
});
|
|
35
|
+
});
|
|
10
36
|
export const CountryPickerView = ({
|
|
11
37
|
countries,
|
|
12
38
|
onSelectCountry,
|
|
@@ -20,46 +46,48 @@ export const CountryPickerView = ({
|
|
|
20
46
|
} = useTheme();
|
|
21
47
|
const [isReady, setIsReady] = useState(false);
|
|
22
48
|
useEffect(() => {
|
|
23
|
-
InteractionManager.runAfterInteractions(() => {
|
|
49
|
+
const task = InteractionManager.runAfterInteractions(() => {
|
|
24
50
|
setIsReady(true);
|
|
25
51
|
});
|
|
52
|
+
return () => task.cancel(); // Cleanup interaction
|
|
26
53
|
}, []);
|
|
27
|
-
|
|
54
|
+
|
|
55
|
+
// ADDED: Memoize styles to pass them stably to the memoized row component
|
|
56
|
+
const memoizedNameStyle = useMemo(() => [styles.countryName, {
|
|
57
|
+
color: theme.text
|
|
58
|
+
}, countryNameStyle], [theme.text, countryNameStyle]);
|
|
59
|
+
const memoizedCodeStyle = useMemo(() => [styles.countryCode, {
|
|
60
|
+
color: theme.helper
|
|
61
|
+
}, countryCodeStyle],
|
|
62
|
+
// Use a different theme color for contrast
|
|
63
|
+
[theme.helper, countryCodeStyle]);
|
|
64
|
+
|
|
65
|
+
// CHANGED: renderCountry is now wrapped in useCallback
|
|
66
|
+
const renderCountry = useCallback(({
|
|
28
67
|
item
|
|
29
|
-
}) => /*#__PURE__*/
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
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
|
-
});
|
|
68
|
+
}) => /*#__PURE__*/_jsx(CountryRow, {
|
|
69
|
+
item: item,
|
|
70
|
+
onSelectCountry: onSelectCountry,
|
|
71
|
+
nameStyle: memoizedNameStyle,
|
|
72
|
+
codeStyle: memoizedCodeStyle
|
|
73
|
+
}), [onSelectCountry, memoizedNameStyle, memoizedCodeStyle] // Dependencies are now stable
|
|
74
|
+
);
|
|
48
75
|
return /*#__PURE__*/_jsxs(View, {
|
|
49
76
|
style: styles.popup,
|
|
50
77
|
children: [/*#__PURE__*/_jsx(Text, {
|
|
51
|
-
style: [styles.popupTitle,
|
|
78
|
+
style: [styles.popupTitle, {
|
|
52
79
|
color: theme.text
|
|
53
|
-
}],
|
|
80
|
+
}, listTitleStyle],
|
|
54
81
|
children: listTitle
|
|
55
82
|
}), isReady ? /*#__PURE__*/_jsx(BottomSheetFlashList, {
|
|
56
83
|
data: countries,
|
|
57
84
|
keyExtractor: c => c.iso2,
|
|
58
|
-
renderItem: renderCountry
|
|
85
|
+
renderItem: renderCountry // This is now a stable function
|
|
86
|
+
,
|
|
59
87
|
contentContainerStyle: {
|
|
60
88
|
paddingBottom: 16
|
|
61
89
|
},
|
|
62
|
-
estimatedItemSize:
|
|
90
|
+
estimatedItemSize: 56 // Provide a more accurate estimate
|
|
63
91
|
}) : /*#__PURE__*/_jsx(View, {
|
|
64
92
|
style: styles.loaderContainer,
|
|
65
93
|
children: /*#__PURE__*/_jsx(ActivityIndicator, {
|
|
@@ -73,7 +101,7 @@ const styles = StyleSheet.create({
|
|
|
73
101
|
popup: {
|
|
74
102
|
flex: 1,
|
|
75
103
|
width: "100%",
|
|
76
|
-
|
|
104
|
+
paddingHorizontal: 16
|
|
77
105
|
},
|
|
78
106
|
loaderContainer: {
|
|
79
107
|
flex: 1,
|
|
@@ -83,25 +111,28 @@ const styles = StyleSheet.create({
|
|
|
83
111
|
popupTitle: {
|
|
84
112
|
fontSize: 18,
|
|
85
113
|
fontWeight: "600",
|
|
86
|
-
marginBottom: 12
|
|
114
|
+
marginBottom: 12,
|
|
115
|
+
paddingTop: 16
|
|
87
116
|
},
|
|
88
117
|
countryRow: {
|
|
89
118
|
flexDirection: "row",
|
|
90
119
|
alignItems: "center",
|
|
91
|
-
paddingVertical:
|
|
120
|
+
paddingVertical: 12,
|
|
121
|
+
// Adjusted padding
|
|
122
|
+
height: 56 // Set a fixed height
|
|
92
123
|
},
|
|
93
124
|
flag: {
|
|
94
|
-
fontSize:
|
|
125
|
+
fontSize: 22
|
|
95
126
|
},
|
|
96
127
|
countryText: {
|
|
97
|
-
marginLeft: 12
|
|
128
|
+
marginLeft: 12,
|
|
129
|
+
flex: 1 // Allow text to take remaining space
|
|
98
130
|
},
|
|
99
131
|
countryName: {
|
|
100
132
|
fontSize: 16
|
|
101
133
|
},
|
|
102
134
|
countryCode: {
|
|
103
|
-
fontSize: 14
|
|
104
|
-
color: "#666"
|
|
135
|
+
fontSize: 14
|
|
105
136
|
}
|
|
106
137
|
});
|
|
107
138
|
//# sourceMappingURL=CountryPickerView.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useState","useEffect","Text","View","TouchableOpacity","StyleSheet","InteractionManager","ActivityIndicator","BottomSheetFlashList","useTheme","iso2ToFlagEmoji","jsxs","_jsxs","jsx","_jsx","
|
|
1
|
+
{"version":3,"names":["React","useState","useEffect","useCallback","useMemo","Text","View","TouchableOpacity","StyleSheet","InteractionManager","ActivityIndicator","BottomSheetFlashList","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","isReady","setIsReady","task","runAfterInteractions","cancel","memoizedNameStyle","countryName","color","text","memoizedCodeStyle","countryCode","helper","renderCountry","popup","popupTitle","data","keyExtractor","c","renderItem","contentContainerStyle","paddingBottom","estimatedItemSize","loaderContainer","size","primary","create","flex","width","paddingHorizontal","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,12 @@ const PhoneInput = /*#__PURE__*/forwardRef(({
|
|
|
68
61
|
snapPoints: ["80%"]
|
|
69
62
|
});
|
|
70
63
|
}, [push, countries, handleCountryPress, listTitle, listTitleStyle, countryNameStyle, countryCodeStyle]);
|
|
71
|
-
|
|
64
|
+
|
|
65
|
+
// ADDED: Memoize the leftIcon element to prevent re-renders
|
|
66
|
+
const leftIcon = useMemo(() => /*#__PURE__*/_jsxs(TouchableOpacity, {
|
|
72
67
|
style: [styles.selector, {
|
|
73
|
-
backgroundColor: theme.inputBackground
|
|
68
|
+
backgroundColor: theme.inputBackground,
|
|
69
|
+
borderRightColor: theme.border // Use theme color
|
|
74
70
|
}],
|
|
75
71
|
hitSlop: {
|
|
76
72
|
left: 30,
|
|
@@ -94,10 +90,12 @@ const PhoneInput = /*#__PURE__*/forwardRef(({
|
|
|
94
90
|
name: "chevron-down",
|
|
95
91
|
size: 16,
|
|
96
92
|
style: {
|
|
97
|
-
marginHorizontal: 4
|
|
93
|
+
marginHorizontal: 4,
|
|
94
|
+
color: theme.inputText
|
|
98
95
|
}
|
|
99
96
|
})]
|
|
100
|
-
})
|
|
97
|
+
}), [theme, sel, openCountryPicker] // Dependencies for the memo
|
|
98
|
+
);
|
|
101
99
|
return /*#__PURE__*/_jsx(CustomInput, {
|
|
102
100
|
ref: ref,
|
|
103
101
|
label: label,
|
|
@@ -122,14 +120,14 @@ const styles = StyleSheet.create({
|
|
|
122
120
|
flexDirection: "row",
|
|
123
121
|
alignItems: "center",
|
|
124
122
|
borderRightWidth: 1,
|
|
125
|
-
|
|
123
|
+
paddingHorizontal: 8 // Add some padding
|
|
126
124
|
},
|
|
127
125
|
flag: {
|
|
128
|
-
fontSize:
|
|
126
|
+
fontSize: 22 // Slightly larger for better visibility
|
|
129
127
|
},
|
|
130
128
|
code: {
|
|
131
129
|
fontSize: 14,
|
|
132
|
-
marginLeft:
|
|
130
|
+
marginLeft: 6
|
|
133
131
|
}
|
|
134
132
|
});
|
|
135
133
|
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":";;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,EAAEC,WAAW,QAAQ,OAAO;AAC/D,SAEEC,IAAI,EAEJC,gBAAgB,EAChBC,UAAU,QAIL,cAAc;AACrB,OAAOC,WAAW,MAA4B,YAAS;AACvD,SAASC,QAAQ,QAAQ,sBAAa;AACtC,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,mBAAmB,QAAQ,yBAAgB;AACpD,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,eAAe,QAAQ,sBAAmB;AACnD,SAASC,iBAAiB,QAAQ,wBAAqB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAgCxD,MAAMC,iBAA4B,GAAGP,YAAY,CAACQ,GAAG,CAAEC,CAAC,KAAM;EAC5DC,IAAI,EAAE,IAAID,CAAC,CAACE,QAAQ,EAAE;EACtBC,IAAI,EAAEH,CAAC,CAACG,IAAI;EACZC,IAAI,EAAEJ,CAAC,CAACI;AACV,CAAC,CAAC,CAAC;AAEH,MAAMC,UAAU,gBAAGxB,UAAU,CAC3B,CACE;EACEyB,KAAK;EACLC,YAAY;EACZC,eAAe;EACfC,eAAe;EACfC,SAAS,GAAGZ,iBAAiB;EAC7Ba,cAAc;EACdC,mBAAmB;EACnBC,UAAU;EACVC,KAAK;EACLC,UAAU;EACVC,KAAK;EACLC,UAAU;EACVC,MAAM;EACNC,WAAW;EACXC,SAAS,GAAG,gBAAgB;EAC5BC,cAAc;EACdC,gBAAgB;EAChBC,gBAAgB;EAChB,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAM;IAAEC;EAAM,CAAC,GAAGtC,QAAQ,CAAC,CAAC;EAC5B,MAAM;IAAEuC,IAAI;IAAEC;EAAM,CAAC,GAAGtC,mBAAmB,CAAC,CAAC;EAE7C,MAAMuC,GAAG,GAAG/C,OAAO,CACjB,MACE0B,eAAe,IACfE,SAAS,CAACoB,IAAI,CAAE9B,CAAC,IAAKA,CAAC,CAACC,IAAI,KAAK,IAAI,CAAC,IACtCS,SAAS,CAAC,CAAC,CAAC,EACd,CAACF,eAAe,EAAEE,SAAS,CAC7B,CAAC;EAED,MAAMqB,kBAAkB,GAAGhD,WAAW,CACnCiB,CAAU,IAAK;IACdS,eAAe,GAAGT,CAAC,CAAC;IACpB4B,KAAK,CAAC,CAAC;EACT,CAAC,EACD,CAACnB,eAAe,EAAEmB,KAAK,CACzB,CAAC;EAED,MAAMI,iBAAiB,GAAGjD,WAAW,CAAC,MAAM;IAC1C4C,IAAI,CAAC;MACHM,SAAS,eACPtC,IAAA,CAACF,iBAAiB;QAChBiB,SAAS,EAAEA,SAAU;QACrBD,eAAe,EAAEsB,kBAAmB;QACpCX,SAAS,EAAEA,SAAU;QACrBC,cAAc,EAAEA,cAAe;QAC/BE,gBAAgB,EAAEA,gBAAiB;QACnCD,gBAAgB,EAAEA;MAAiB,CACpC,CACF;MACDY,UAAU,EAAE,CAAC,KAAK;IACpB,CAAC,CAAC;EACJ,CAAC,EAAE,CACDP,IAAI,EACJjB,SAAS,EACTqB,kBAAkB,EAClBX,SAAS,EACTC,cAAc,EACdE,gBAAgB,EAChBD,gBAAgB,CACjB,CAAC;;EAEF;EACA,MAAMa,QAAQ,GAAGrD,OAAO,CACtB,mBACEe,KAAA,CAACZ,gBAAgB;IACfmD,KAAK,EAAE,CACLC,MAAM,CAACC,QAAQ,EACf;MACEC,eAAe,EAAEb,KAAK,CAACc,eAAe;MACtCC,gBAAgB,EAAEf,KAAK,CAACgB,MAAM,CAAE;IAClC,CAAC,CACD;IACFC,OAAO,EAAE;MAAEC,IAAI,EAAE,EAAE;MAAEC,GAAG,EAAE,EAAE;MAAEC,KAAK,EAAE,EAAE;MAAEC,MAAM,EAAE;IAAG,CAAE;IACtDC,OAAO,EAAEhB,iBAAkB;IAC3BiB,aAAa,EAAE,GAAI;IAAAC,QAAA,gBAEnBvD,IAAA,CAACX,IAAI;MAACoD,KAAK,EAAE,CAACC,MAAM,CAACc,IAAI,EAAE;QAAEC,KAAK,EAAE1B,KAAK,CAAC2B;MAAU,CAAC,CAAE;MAAAH,QAAA,EACpD1D,eAAe,CAACqC,GAAG,CAAC1B,IAAI;IAAC,CACtB,CAAC,eACPR,IAAA,CAACX,IAAI;MAACoD,KAAK,EAAE,CAACC,MAAM,CAACpC,IAAI,EAAE;QAAEmD,KAAK,EAAE1B,KAAK,CAAC2B;MAAU,CAAC,CAAE;MAAAH,QAAA,EACpDrB,GAAG,CAAC5B;IAAI,CACL,CAAC,eACPN,IAAA,CAACN,QAAQ;MACPe,IAAI,EAAC,cAAc;MACnBkD,IAAI,EAAE,EAAG;MACTlB,KAAK,EAAE;QAAEmB,gBAAgB,EAAE,CAAC;QAAEH,KAAK,EAAE1B,KAAK,CAAC2B;MAAU;IAAE,CACxD,CAAC;EAAA,CACc,CACnB,EACD,CAAC3B,KAAK,EAAEG,GAAG,EAAEG,iBAAiB,CAAC,CAAC;EAClC,CAAC;EAED,oBACErC,IAAA,CAACR,WAAW;IACVsC,GAAG,EAAEA,GAAI;IACTX,KAAK,EAAEA,KAAM;IACbR,KAAK,EAAEA,KAAM;IACbC,YAAY,EAAEA,YAAa;IAC3BiD,YAAY,EAAC,WAAW;IACxBC,WAAW,EAAC,cAAc;IAC1BtB,QAAQ,EAAEA,QAAS;IACnBxB,cAAc,EAAEA,cAAe;IAC/BC,mBAAmB,EAAEA,mBAAoB;IACzCC,UAAU,EAAEA,UAAW;IACvBE,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAEA,KAAM;IACbC,UAAU,EAAEA,UAAW;IACvBC,MAAM,EAAEA,MAAO;IACfC,WAAW,EAAEA,WAAY;IAAA,GACrBK;EAAI,CACT,CAAC;AAEN,CACF,CAAC;AAED,MAAMa,MAAM,GAAGnD,UAAU,CAACwE,MAAM,CAAC;EAC/BpB,QAAQ,EAAE;IACRqB,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,gBAAgB,EAAE,CAAC;IACnBC,iBAAiB,EAAE,CAAC,CAAE;EACxB,CAAC;EACDX,IAAI,EAAE;IACJY,QAAQ,EAAE,EAAE,CAAE;EAChB,CAAC;EACD9D,IAAI,EAAE;IACJ8D,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE;EACd;AACF,CAAC,CAAC;AAEF,eAAe3D,UAAU","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,sBAuDxB,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,mFAwHf,CAAC;AAkBF,eAAe,UAAU,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.5",
|
|
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,
|
|
@@ -9,10 +9,10 @@ import {
|
|
|
9
9
|
StyleProp,
|
|
10
10
|
TextStyle,
|
|
11
11
|
} from "react-native";
|
|
12
|
-
import { BottomSheetFlashList
|
|
12
|
+
import { BottomSheetFlashList } 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,
|
|
@@ -35,38 +63,48 @@ export const CountryPickerView = ({
|
|
|
35
63
|
const [isReady, setIsReady] = useState(false);
|
|
36
64
|
|
|
37
65
|
useEffect(() => {
|
|
38
|
-
InteractionManager.runAfterInteractions(() => {
|
|
66
|
+
const task = InteractionManager.runAfterInteractions(() => {
|
|
39
67
|
setIsReady(true);
|
|
40
68
|
});
|
|
69
|
+
return () => task.cancel(); // Cleanup interaction
|
|
41
70
|
}, []);
|
|
42
71
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
72
|
+
// ADDED: Memoize styles to pass them stably to the memoized row component
|
|
73
|
+
const memoizedNameStyle = useMemo(
|
|
74
|
+
() => [styles.countryName, { color: theme.text }, countryNameStyle],
|
|
75
|
+
[theme.text, countryNameStyle]
|
|
76
|
+
);
|
|
77
|
+
|
|
78
|
+
const memoizedCodeStyle = useMemo(
|
|
79
|
+
() => [styles.countryCode, { color: theme.helper }, countryCodeStyle], // Use a different theme color for contrast
|
|
80
|
+
[theme.helper, countryCodeStyle]
|
|
81
|
+
);
|
|
82
|
+
|
|
83
|
+
// CHANGED: renderCountry is now wrapped in useCallback
|
|
84
|
+
const renderCountry = useCallback(
|
|
85
|
+
({ item }: { item: Country }) => (
|
|
86
|
+
<CountryRow
|
|
87
|
+
item={item}
|
|
88
|
+
onSelectCountry={onSelectCountry}
|
|
89
|
+
nameStyle={memoizedNameStyle}
|
|
90
|
+
codeStyle={memoizedCodeStyle}
|
|
91
|
+
/>
|
|
92
|
+
),
|
|
93
|
+
[onSelectCountry, memoizedNameStyle, memoizedCodeStyle] // Dependencies are now stable
|
|
56
94
|
);
|
|
57
95
|
|
|
58
96
|
return (
|
|
59
97
|
<View style={styles.popup}>
|
|
60
|
-
<Text style={[styles.popupTitle,
|
|
98
|
+
<Text style={[styles.popupTitle, { color: theme.text }, listTitleStyle]}>
|
|
61
99
|
{listTitle}
|
|
62
100
|
</Text>
|
|
63
101
|
{isReady ? (
|
|
64
102
|
<BottomSheetFlashList
|
|
65
103
|
data={countries}
|
|
66
|
-
keyExtractor={(c
|
|
67
|
-
renderItem={renderCountry}
|
|
104
|
+
keyExtractor={(c: Country) => c.iso2}
|
|
105
|
+
renderItem={renderCountry} // This is now a stable function
|
|
68
106
|
contentContainerStyle={{ paddingBottom: 16 }}
|
|
69
|
-
estimatedItemSize={
|
|
107
|
+
estimatedItemSize={56} // Provide a more accurate estimate
|
|
70
108
|
/>
|
|
71
109
|
) : (
|
|
72
110
|
<View style={styles.loaderContainer}>
|
|
@@ -81,7 +119,7 @@ const styles = StyleSheet.create({
|
|
|
81
119
|
popup: {
|
|
82
120
|
flex: 1,
|
|
83
121
|
width: "100%",
|
|
84
|
-
|
|
122
|
+
paddingHorizontal: 16,
|
|
85
123
|
},
|
|
86
124
|
loaderContainer: {
|
|
87
125
|
flex: 1,
|
|
@@ -92,23 +130,25 @@ const styles = StyleSheet.create({
|
|
|
92
130
|
fontSize: 18,
|
|
93
131
|
fontWeight: "600",
|
|
94
132
|
marginBottom: 12,
|
|
133
|
+
paddingTop: 16,
|
|
95
134
|
},
|
|
96
135
|
countryRow: {
|
|
97
136
|
flexDirection: "row",
|
|
98
137
|
alignItems: "center",
|
|
99
|
-
paddingVertical:
|
|
138
|
+
paddingVertical: 12, // Adjusted padding
|
|
139
|
+
height: 56, // Set a fixed height
|
|
100
140
|
},
|
|
101
141
|
flag: {
|
|
102
|
-
fontSize:
|
|
142
|
+
fontSize: 22,
|
|
103
143
|
},
|
|
104
144
|
countryText: {
|
|
105
145
|
marginLeft: 12,
|
|
146
|
+
flex: 1, // Allow text to take remaining space
|
|
106
147
|
},
|
|
107
148
|
countryName: {
|
|
108
149
|
fontSize: 16,
|
|
109
150
|
},
|
|
110
151
|
countryCode: {
|
|
111
152
|
fontSize: 14,
|
|
112
|
-
color: "#666",
|
|
113
153
|
},
|
|
114
154
|
});
|
|
@@ -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,35 @@ const PhoneInput = forwardRef<TextInput, PhoneInputProps>(
|
|
|
126
121
|
countryCodeStyle,
|
|
127
122
|
]);
|
|
128
123
|
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
{
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
124
|
+
// ADDED: Memoize the leftIcon element to prevent re-renders
|
|
125
|
+
const leftIcon = useMemo(
|
|
126
|
+
() => (
|
|
127
|
+
<TouchableOpacity
|
|
128
|
+
style={[
|
|
129
|
+
styles.selector,
|
|
130
|
+
{
|
|
131
|
+
backgroundColor: theme.inputBackground,
|
|
132
|
+
borderRightColor: theme.border, // Use theme color
|
|
133
|
+
},
|
|
134
|
+
]}
|
|
135
|
+
hitSlop={{ left: 30, top: 30, right: 30, bottom: 30 }}
|
|
136
|
+
onPress={openCountryPicker}
|
|
137
|
+
activeOpacity={0.8}
|
|
138
|
+
>
|
|
139
|
+
<Text style={[styles.flag, { color: theme.inputText }]}>
|
|
140
|
+
{iso2ToFlagEmoji(sel.iso2)}
|
|
141
|
+
</Text>
|
|
142
|
+
<Text style={[styles.code, { color: theme.inputText }]}>
|
|
143
|
+
{sel.code}
|
|
144
|
+
</Text>
|
|
145
|
+
<Ionicons
|
|
146
|
+
name="chevron-down"
|
|
147
|
+
size={16}
|
|
148
|
+
style={{ marginHorizontal: 4, color: theme.inputText }}
|
|
149
|
+
/>
|
|
150
|
+
</TouchableOpacity>
|
|
151
|
+
),
|
|
152
|
+
[theme, sel, openCountryPicker] // Dependencies for the memo
|
|
148
153
|
);
|
|
149
154
|
|
|
150
155
|
return (
|
|
@@ -175,14 +180,14 @@ const styles = StyleSheet.create({
|
|
|
175
180
|
flexDirection: "row",
|
|
176
181
|
alignItems: "center",
|
|
177
182
|
borderRightWidth: 1,
|
|
178
|
-
|
|
183
|
+
paddingHorizontal: 8, // Add some padding
|
|
179
184
|
},
|
|
180
185
|
flag: {
|
|
181
|
-
fontSize:
|
|
186
|
+
fontSize: 22, // Slightly larger for better visibility
|
|
182
187
|
},
|
|
183
188
|
code: {
|
|
184
189
|
fontSize: 14,
|
|
185
|
-
marginLeft:
|
|
190
|
+
marginLeft: 6,
|
|
186
191
|
},
|
|
187
192
|
});
|
|
188
193
|
|