react-native-international-phone-number 0.4.0 → 0.4.1
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/README.md
CHANGED
|
@@ -452,6 +452,10 @@ export default function App() {
|
|
|
452
452
|
- `flagContainerStyle?:` StyleProp<[ViewStyle](https://reactnative.dev/docs/view-style-props)>;
|
|
453
453
|
- `inputStyle?:` StyleProp<[TextStyle](https://reactnative.dev/docs/text-style-props)>;
|
|
454
454
|
|
|
455
|
+
## Functions
|
|
456
|
+
|
|
457
|
+
- `getCountryByPhoneNumber:` (phoneNumber: string) => ICountry | undefined;
|
|
458
|
+
|
|
455
459
|
</br>
|
|
456
460
|
|
|
457
461
|
## Contributing
|
package/lib/index.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
ViewStyle,
|
|
6
6
|
} from 'react-native';
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
interface ICountry {
|
|
9
9
|
callingCode: string;
|
|
10
10
|
cca2: string;
|
|
11
11
|
flag: string;
|
|
@@ -27,6 +27,10 @@ interface PhoneInputProps extends TextInputProps {
|
|
|
27
27
|
onChangeSelectedCountry: (country: ICountry) => void;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
30
|
+
declare function PhoneInput(props: PhoneInputProps): JSX.Element;
|
|
31
|
+
|
|
32
|
+
declare function getCountryByPhoneNumber(
|
|
33
|
+
phoneNumber: string
|
|
34
|
+
): ICountry | undefined;
|
|
35
|
+
|
|
36
|
+
export { PhoneInput, ICountry, getCountryByPhoneNumber };
|
package/lib/index.js
CHANGED
|
@@ -10,10 +10,10 @@ import CountryPicker, {
|
|
|
10
10
|
DEFAULT_THEME,
|
|
11
11
|
} from 'react-native-country-picker-modal';
|
|
12
12
|
|
|
13
|
-
import
|
|
14
|
-
import
|
|
13
|
+
import getCountryByPhoneNumber from './utils/getCountryByPhoneNumber';
|
|
14
|
+
import phoneMask from './utils/inputMask';
|
|
15
15
|
|
|
16
|
-
|
|
16
|
+
function PhoneInput({
|
|
17
17
|
placeholder,
|
|
18
18
|
placeholderTextColor,
|
|
19
19
|
selectionColor,
|
|
@@ -58,17 +58,12 @@ export function PhoneInput({
|
|
|
58
58
|
useEffect(() => {
|
|
59
59
|
onChangePhoneNumber('');
|
|
60
60
|
if (defaultValue) {
|
|
61
|
-
const matchingCountry =
|
|
61
|
+
const matchingCountry = getCountryByPhoneNumber(defaultValue);
|
|
62
62
|
|
|
63
63
|
if (matchingCountry) {
|
|
64
64
|
setDefaultCca2(matchingCountry.cca2);
|
|
65
65
|
|
|
66
|
-
onChangeSelectedCountry(
|
|
67
|
-
name: matchingCountry.name,
|
|
68
|
-
cca2: matchingCountry.cca2,
|
|
69
|
-
flag: matchingCountry.flag,
|
|
70
|
-
callingCode: matchingCountry.callingCode,
|
|
71
|
-
});
|
|
66
|
+
onChangeSelectedCountry(matchingCountry);
|
|
72
67
|
} else {
|
|
73
68
|
onChangeSelectedCountry({
|
|
74
69
|
callingCode: '+55',
|
|
@@ -252,3 +247,5 @@ const styles = StyleSheet.create({
|
|
|
252
247
|
color: '#F3F3F3',
|
|
253
248
|
},
|
|
254
249
|
});
|
|
250
|
+
|
|
251
|
+
export { PhoneInput, getCountryByPhoneNumber };
|
|
@@ -1,11 +1,13 @@
|
|
|
1
|
-
import {countries} from './countries';
|
|
1
|
+
import { countries } from './countries';
|
|
2
2
|
|
|
3
|
-
export default function
|
|
3
|
+
export default function getCountryByPhoneNumber(phoneNumber) {
|
|
4
4
|
const matchingCountries = [];
|
|
5
5
|
const formattedPhoneNumber = phoneNumber.replace(/\s/g, '');
|
|
6
|
-
countries.forEach(item => {
|
|
6
|
+
countries.forEach((item) => {
|
|
7
7
|
if (
|
|
8
|
-
formattedPhoneNumber.startsWith(
|
|
8
|
+
formattedPhoneNumber.startsWith(
|
|
9
|
+
item.callingCode.replace(/[\s#]/g, '')
|
|
10
|
+
)
|
|
9
11
|
) {
|
|
10
12
|
matchingCountries.push(item);
|
|
11
13
|
}
|
|
@@ -17,10 +19,10 @@ export default function getMatchingCountry(phoneNumber) {
|
|
|
17
19
|
const callingCode = matchingCountries[0].callingCode;
|
|
18
20
|
|
|
19
21
|
for (let i = 0; i < matchingCountries.length; i++) {
|
|
20
|
-
matchingCountries[i].phoneMasks.map(item => {
|
|
22
|
+
matchingCountries[i].phoneMasks.map((item) => {
|
|
21
23
|
const areaCode = formattedPhoneNumber.substring(
|
|
22
24
|
callingCode.length,
|
|
23
|
-
item.replace(/\D/g, '').length + callingCode.length
|
|
25
|
+
item.replace(/\D/g, '').length + callingCode.length
|
|
24
26
|
);
|
|
25
27
|
if (
|
|
26
28
|
areaCode &&
|
|
@@ -46,5 +48,7 @@ export default function getMatchingCountry(phoneNumber) {
|
|
|
46
48
|
}
|
|
47
49
|
}
|
|
48
50
|
|
|
51
|
+
delete matchingCountry['phoneMasks'];
|
|
52
|
+
|
|
49
53
|
return matchingCountry;
|
|
50
54
|
}
|
package/lib/utils/inputMask.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { countries } from './countries';
|
|
2
2
|
|
|
3
|
-
export
|
|
3
|
+
export default function phoneMask(phoneNumber, callingCode, cca2) {
|
|
4
4
|
let matrix = '';
|
|
5
5
|
|
|
6
6
|
countries.forEach((item) => {
|
|
@@ -55,4 +55,4 @@ export const phoneMask = (phoneNumber, callingCode, cca2) => {
|
|
|
55
55
|
? ''
|
|
56
56
|
: a;
|
|
57
57
|
});
|
|
58
|
-
}
|
|
58
|
+
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-international-phone-number",
|
|
3
3
|
"author": "AstrOOnauta (https://github.com/AstrOOnauta)",
|
|
4
|
-
"version": "0.4.
|
|
4
|
+
"version": "0.4.1",
|
|
5
5
|
"description": "International mobile phone input component with mask for React Native",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"types": "lib/index.d.ts",
|