react-simple-phone-input 1.1.8-beta → 3.0.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 +194 -1
- package/dist/cjs/index.js +75 -49
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/Helpers/hook.d.ts +2 -1
- package/dist/cjs/types/components/PhoneInput/PhoneInput.d.ts +1 -2
- package/dist/esm/index.js +75 -49
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/Helpers/hook.d.ts +2 -1
- package/dist/esm/types/components/PhoneInput/PhoneInput.d.ts +1 -2
- package/dist/index.d.ts +1 -1
- package/package.json +15 -5
package/README.md
CHANGED
|
@@ -1,4 +1,197 @@
|
|
|
1
1
|
React Simple Phone Input
|
|
2
2
|
==========
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
A simple and customizable react phone number dropdown component. It can mixed up with your designed theme and give a fluent vibeable dropdown area in your next project.
|
|
5
|
+
|
|
6
|
+
[](https://www.npmjs.com/package/react-simple-phone-input)
|
|
7
|
+
[](https://www.npmjs.com/package/react-simple-phone-input)
|
|
8
|
+
[](https://github.com/siamahnaf198/react-simple-phone-input)
|
|
9
|
+
[](https://github.com/siamahnaf198/react-simple-phone-input/blob/main/LICENSE)
|
|
10
|
+
|
|
11
|
+
## Installation
|
|
12
|
+
|
|
13
|
+
```shell-script
|
|
14
|
+
$ npm i react-simple-phone-input --save
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Installation
|
|
18
|
+
|
|
19
|
+
```jsx
|
|
20
|
+
import { PhoneInput } from "react-simple-phone-input";
|
|
21
|
+
//or
|
|
22
|
+
//const { PhoneInput } = require("react-simple-phone-input")
|
|
23
|
+
|
|
24
|
+
<PhoneInput
|
|
25
|
+
country="US"
|
|
26
|
+
placeholder="Add your phone"
|
|
27
|
+
onChange={(data) => console.log(data)}
|
|
28
|
+
/>
|
|
29
|
+
```
|
|
30
|
+
#### [See Demo](https://react-simple-phone-input.vercel.app/)
|
|
31
|
+
|
|
32
|
+
## Options
|
|
33
|
+
<table width="100%">
|
|
34
|
+
<tr>
|
|
35
|
+
<th> Name </th>
|
|
36
|
+
<th> Type </th>
|
|
37
|
+
<th width="30%"> Description </th>
|
|
38
|
+
<th> Is Required </th>
|
|
39
|
+
<th> Example </th>
|
|
40
|
+
</tr>
|
|
41
|
+
<tr>
|
|
42
|
+
<td> country </td>
|
|
43
|
+
<td> string </td>
|
|
44
|
+
<td> initial country </td>
|
|
45
|
+
<td> required </td>
|
|
46
|
+
<td> "BD" </td>
|
|
47
|
+
</tr>
|
|
48
|
+
<tr>
|
|
49
|
+
<td> placeholder </td>
|
|
50
|
+
<td> string </td>
|
|
51
|
+
<td> Input Field Placeholder Text </td>
|
|
52
|
+
<td> required </td>
|
|
53
|
+
<td> <code>Type your phone number</code> </td>
|
|
54
|
+
</tr>
|
|
55
|
+
<tr>
|
|
56
|
+
<td> value </td>
|
|
57
|
+
<td> string </td>
|
|
58
|
+
<td> Input field state value or default value </td>
|
|
59
|
+
<td> optional </td>
|
|
60
|
+
<td></td>
|
|
61
|
+
</tr>
|
|
62
|
+
|
|
63
|
+
<tr>
|
|
64
|
+
<td> iconComponent </td>
|
|
65
|
+
<td> ReactNode </td>
|
|
66
|
+
<td> Dropdown Icon component for changing default icon </td>
|
|
67
|
+
<td> optional </td>
|
|
68
|
+
<td><code> <Icon icon="icon-name" /> </cpde></td>
|
|
69
|
+
</tr>
|
|
70
|
+
|
|
71
|
+
<tr>
|
|
72
|
+
<td> inputProps </td>
|
|
73
|
+
<td> InputHTMLAttributes </td>
|
|
74
|
+
<td> Props to pass into the input field </td>
|
|
75
|
+
<td> optional </td>
|
|
76
|
+
<td> </td>
|
|
77
|
+
</tr>
|
|
78
|
+
|
|
79
|
+
<tr>
|
|
80
|
+
<td> onlyCountries </td>
|
|
81
|
+
<td> array </td>
|
|
82
|
+
<td> Show only country in dropdown menu with Country Codes </td>
|
|
83
|
+
<td> optional </td>
|
|
84
|
+
<td> ["BD", "US", "AF", "AL"] </td>
|
|
85
|
+
</tr>
|
|
86
|
+
|
|
87
|
+
<tr>
|
|
88
|
+
<td> excludeCountries </td>
|
|
89
|
+
<td> array </td>
|
|
90
|
+
<td> If you want to remove some country to the list. If you give <code>excludeCountries</code> then <code>onlyCountries</code> not works </td>
|
|
91
|
+
<td> optional </td>
|
|
92
|
+
<td> ["AF", "AL"] </td>
|
|
93
|
+
</tr>
|
|
94
|
+
|
|
95
|
+
<tr>
|
|
96
|
+
<td> preferredCountries </td>
|
|
97
|
+
<td> array </td>
|
|
98
|
+
<td> Country codes to show on the top of the dropdown menu </td>
|
|
99
|
+
<td> optional </td>
|
|
100
|
+
<td> ["BD", "US"] </td>
|
|
101
|
+
</tr>
|
|
102
|
+
|
|
103
|
+
<tr>
|
|
104
|
+
<td> searchPlaceholder </td>
|
|
105
|
+
<td> string </td>
|
|
106
|
+
<td> Search input field placeholder </td>
|
|
107
|
+
<td>optional</td>
|
|
108
|
+
<td></td>
|
|
109
|
+
</tr>
|
|
110
|
+
|
|
111
|
+
<tr>
|
|
112
|
+
<td> searchIconComponent </td>
|
|
113
|
+
<td> ReactNode </td>
|
|
114
|
+
<td> If <code>search</code> enabled, custom search icon to show on search bar </td>
|
|
115
|
+
<td> optional </td>
|
|
116
|
+
<td><code> <Icon icon="icon-name" /> </cpde></td>
|
|
117
|
+
</tr>
|
|
118
|
+
|
|
119
|
+
<tr>
|
|
120
|
+
<td> searchProps </td>
|
|
121
|
+
<td> InputHTMLAttributes </td>
|
|
122
|
+
<td> Props to pass into the search input field </td>
|
|
123
|
+
<td> optional </td>
|
|
124
|
+
<td> </td>
|
|
125
|
+
</tr>
|
|
126
|
+
|
|
127
|
+
<tr>
|
|
128
|
+
<td> searchNotFound </td>
|
|
129
|
+
<td> string </td>
|
|
130
|
+
<td> Error message when search result is empty! </td>
|
|
131
|
+
<td> optional </td>
|
|
132
|
+
<td> </td>
|
|
133
|
+
</tr>
|
|
134
|
+
</table>
|
|
135
|
+
|
|
136
|
+
## Other Options
|
|
137
|
+
|
|
138
|
+
<table>
|
|
139
|
+
<tr>
|
|
140
|
+
<th> Name </th>
|
|
141
|
+
<th> Default </th>
|
|
142
|
+
<th> Description </th>
|
|
143
|
+
</tr>
|
|
144
|
+
<tr>
|
|
145
|
+
<td> showDropdownIcon </td>
|
|
146
|
+
<td> true </td>
|
|
147
|
+
<td> Show or Hide dropdown icon </td>
|
|
148
|
+
</tr>
|
|
149
|
+
<tr>
|
|
150
|
+
<td> dialCodeInputField </td>
|
|
151
|
+
<td> false </td>
|
|
152
|
+
<td> Show calling code into into field or show beside country flag. For more, see <a href="https://react-simple-phone-input.vercel.app/">example</a> </td>
|
|
153
|
+
</tr>
|
|
154
|
+
<tr>
|
|
155
|
+
<td> search </td>
|
|
156
|
+
<td> true </td>
|
|
157
|
+
<td> Show or Hide search input field </td>
|
|
158
|
+
</tr>
|
|
159
|
+
<tr>
|
|
160
|
+
<td> showSearchIcon </td>
|
|
161
|
+
<td> true </td>
|
|
162
|
+
<td> Show or Hide search icon </td>
|
|
163
|
+
</tr>
|
|
164
|
+
</table>
|
|
165
|
+
|
|
166
|
+
## Event
|
|
167
|
+
|
|
168
|
+
<table>
|
|
169
|
+
<tr>
|
|
170
|
+
<th> Event Name </th>
|
|
171
|
+
<th> Description </th>
|
|
172
|
+
<th> Example </th>
|
|
173
|
+
</tr>
|
|
174
|
+
<tr>
|
|
175
|
+
<td> onChange </td>
|
|
176
|
+
<td> To get the value from component </td>
|
|
177
|
+
<td> <code>onChange={(data: string) => console.log(data)}</code> </td>
|
|
178
|
+
</tr>
|
|
179
|
+
</table>
|
|
180
|
+
|
|
181
|
+
## Contributing
|
|
182
|
+
- Code style changes not allowed
|
|
183
|
+
- Do not create issues about incorrect or missing country data
|
|
184
|
+
|
|
185
|
+
## Issues or correction
|
|
186
|
+
If you face any issues, missing data or wrong data about country, you are welcome to create an issue.
|
|
187
|
+
|
|
188
|
+
## Stay in touch
|
|
189
|
+
|
|
190
|
+
- Author - [Siam Ahnaf](https://www.siamahnaf.com/)
|
|
191
|
+
- Website - [https://www.siamahnaf.com/](https://www.siamahnaf.com/)
|
|
192
|
+
- Twitter - [https://twitter.com/siamahnaf198](https://twitter.com/siamahnaf198)
|
|
193
|
+
- Github - [https://github.com/siamahnaf198](https://github.com/siamahnaf198)
|
|
194
|
+
|
|
195
|
+
## License
|
|
196
|
+
|
|
197
|
+
[.
|
package/dist/cjs/index.js
CHANGED
|
@@ -1357,36 +1357,6 @@ function requireReactJsxRuntime_development () {
|
|
|
1357
1357
|
}
|
|
1358
1358
|
} (jsxRuntime));
|
|
1359
1359
|
|
|
1360
|
-
function styleInject(css, ref) {
|
|
1361
|
-
if ( ref === void 0 ) ref = {};
|
|
1362
|
-
var insertAt = ref.insertAt;
|
|
1363
|
-
|
|
1364
|
-
if (!css || typeof document === 'undefined') { return; }
|
|
1365
|
-
|
|
1366
|
-
var head = document.head || document.getElementsByTagName('head')[0];
|
|
1367
|
-
var style = document.createElement('style');
|
|
1368
|
-
style.type = 'text/css';
|
|
1369
|
-
|
|
1370
|
-
if (insertAt === 'top') {
|
|
1371
|
-
if (head.firstChild) {
|
|
1372
|
-
head.insertBefore(style, head.firstChild);
|
|
1373
|
-
} else {
|
|
1374
|
-
head.appendChild(style);
|
|
1375
|
-
}
|
|
1376
|
-
} else {
|
|
1377
|
-
head.appendChild(style);
|
|
1378
|
-
}
|
|
1379
|
-
|
|
1380
|
-
if (style.styleSheet) {
|
|
1381
|
-
style.styleSheet.cssText = css;
|
|
1382
|
-
} else {
|
|
1383
|
-
style.appendChild(document.createTextNode(css));
|
|
1384
|
-
}
|
|
1385
|
-
}
|
|
1386
|
-
|
|
1387
|
-
var css_248z = ".simple-phone-input-sri198-container {\r\n position: relative;\r\n}\r\n\r\n.simple-phone-input-sri198-main {\r\n display: flex;\r\n border: 1px solid rgba(0, 0, 0, 0.295);\r\n user-select: none;\r\n border-radius: 3px;\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown-container {\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n background: rgba(0, 0, 0, 0.144);\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown-container img {\r\n margin-right: 6px;\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown {\r\n background: white;\r\n list-style: none;\r\n padding: 0;\r\n margin: 0;\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n right: 0;\r\n height: 250px;\r\n overflow-y: auto;\r\n box-shadow: 0 0 20px rgb(180, 180, 180);\r\n display: none;\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown-container-button {\r\n display: flex;\r\n flex: 1;\r\n width: 92px;\r\n padding: 5px 2px 5px 7px;\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown-container-button.dial {\r\n width: unset;\r\n padding: 8px 3px 8px 8px;\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown.active {\r\n display: block;\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown li {\r\n margin: 3px 0;\r\n padding: 3px 8px;\r\n display: flex;\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown li.active {\r\n background: rgba(0, 0, 0, 0.116);\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown li img {\r\n margin-right: 6px;\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown-text {\r\n font-size: 15px;\r\n flex: 1;\r\n margin-top: 3px;\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown-country-code {\r\n opacity: 0.6;\r\n margin-top: 3px;\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown-icon svg {\r\n transition: 0.3s ease;\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown-icon.active svg {\r\n transform: rotate(-180deg)\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown li:hover {\r\n background: rgba(0, 0, 0, 0.116);\r\n}\r\n\r\n.simple-phone-input-sri198-selected-code {\r\n flex: 1;\r\n font-size: 14px;\r\n margin-top: 3px;\r\n}\r\n\r\n.simple-phone-input-sri198-input {\r\n width: 100%;\r\n border: none;\r\n padding: 0 10px;\r\n}\r\n\r\n.simple-phone-input-sri198-input:focus {\r\n outline: none;\r\n}\r\n\r\n.simple-phone-input-sri198-search-container {\r\n padding: 5px;\r\n position: relative;\r\n}\r\n\r\n.simple-phone-input-sri198-search-container input {\r\n border: 1px solid rgba(0, 0, 0, 0.116);\r\n padding: 8px 10px;\r\n width: 100%;\r\n font-size: 15px;\r\n border-radius: 2px;\r\n}\r\n\r\n.simple-phone-input-sri198-search-icon {\r\n position: absolute;\r\n right: 10px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n display: flex;\r\n pointer-events: none;\r\n}\r\n\r\n.simple-phone-input-sri198-not-found {\r\n text-align: center;\r\n margin-top: 10px;\r\n font-size: 15px;\r\n color: red;\r\n}\r\n\r\n.simple-phone-input-sri198-search-icon svg {\r\n font-size: 20px;\r\n}\r\n\r\n.simple-phone-input-sri198-search-container input:focus {\r\n outline: none;\r\n}";
|
|
1388
|
-
styleInject(css_248z);
|
|
1389
|
-
|
|
1390
1360
|
const countryData = [
|
|
1391
1361
|
{
|
|
1392
1362
|
country: "Afghanistan",
|
|
@@ -2570,17 +2540,19 @@ const countryData = [
|
|
|
2570
2540
|
}
|
|
2571
2541
|
];
|
|
2572
2542
|
|
|
2543
|
+
//Get default country function
|
|
2573
2544
|
const getDefaultCountry = (code) => {
|
|
2574
2545
|
const result = countryData.find((item) => item.countryCode === code);
|
|
2575
2546
|
return result;
|
|
2576
2547
|
};
|
|
2548
|
+
//Get country data by search
|
|
2577
2549
|
const getBySearch = (search, onlyCountry, excludeCountry) => {
|
|
2578
|
-
|
|
2550
|
+
let countries = [];
|
|
2579
2551
|
if (excludeCountry && excludeCountry.length > 0) {
|
|
2580
|
-
countries = countryData.filter((item) => excludeCountry?.
|
|
2552
|
+
countries = countryData.filter((item) => !excludeCountry?.includes(item.countryCode));
|
|
2581
2553
|
}
|
|
2582
2554
|
else if (onlyCountry && onlyCountry?.length > 0) {
|
|
2583
|
-
countries = countryData.filter((item) => onlyCountry?.
|
|
2555
|
+
countries = countryData.filter((item) => onlyCountry?.includes(item.countryCode));
|
|
2584
2556
|
}
|
|
2585
2557
|
else {
|
|
2586
2558
|
countries = countryData;
|
|
@@ -2592,22 +2564,24 @@ const getBySearch = (search, onlyCountry, excludeCountry) => {
|
|
|
2592
2564
|
});
|
|
2593
2565
|
return result;
|
|
2594
2566
|
};
|
|
2567
|
+
//Get country data by filter
|
|
2595
2568
|
const getCountryByFilter = (onlyCountry, excludeCountry, preferredCountry) => {
|
|
2596
|
-
|
|
2569
|
+
let countries = [];
|
|
2597
2570
|
if (excludeCountry && excludeCountry.length > 0) {
|
|
2598
|
-
countries = countryData.filter((item) => excludeCountry?.
|
|
2571
|
+
countries = countryData.filter((item) => !excludeCountry?.includes(item.countryCode));
|
|
2599
2572
|
}
|
|
2600
2573
|
else if (onlyCountry && onlyCountry?.length > 0) {
|
|
2601
|
-
countries = countryData.filter((item) => onlyCountry?.
|
|
2574
|
+
countries = countryData.filter((item) => onlyCountry?.includes(item.countryCode));
|
|
2602
2575
|
}
|
|
2603
2576
|
else {
|
|
2604
2577
|
countries = countryData;
|
|
2605
2578
|
}
|
|
2606
|
-
const result = countries.sort((a, b) => (Number(preferredCountry?.
|
|
2579
|
+
const result = countries.sort((a, b) => (Number(preferredCountry?.includes(b.countryCode)) - Number(preferredCountry?.includes(a.countryCode)))
|
|
2607
2580
|
|| (preferredCountry?.indexOf(a.countryCode) - preferredCountry?.indexOf(b.countryCode)));
|
|
2608
2581
|
return result;
|
|
2609
2582
|
};
|
|
2610
2583
|
|
|
2584
|
+
//Click out side hook
|
|
2611
2585
|
function useOnClickOutside(ref, handler) {
|
|
2612
2586
|
React.useEffect(() => {
|
|
2613
2587
|
const listener = (event) => {
|
|
@@ -2625,12 +2599,21 @@ function useOnClickOutside(ref, handler) {
|
|
|
2625
2599
|
}, [ref, handler]);
|
|
2626
2600
|
}
|
|
2627
2601
|
|
|
2602
|
+
//Component
|
|
2628
2603
|
const PhoneInput = ({ placeholder, country, onChange, value, iconComponent, inputProps, onlyCountries, excludeCountries, preferredCountries, showDropdownIcon = true, dialCodeInputField = false, search = true, searchPlaceholder = "Search country", showSearchIcon = true, searchIconComponent, searchProps, searchNotFound = "Not found" }) => {
|
|
2604
|
+
//State
|
|
2629
2605
|
const [selected, setSelected] = React.useState({});
|
|
2630
2606
|
const [isDropdown, setDropdown] = React.useState(false);
|
|
2631
2607
|
const [inputValue, setInputValue] = React.useState(value || "");
|
|
2632
2608
|
const [countryDataInfo, setCountryData] = React.useState(countryData);
|
|
2609
|
+
const [cursor, setCursor] = React.useState(0);
|
|
2610
|
+
//Ref
|
|
2611
|
+
const dropdownRef = React.useRef(null);
|
|
2612
|
+
const listRef = React.useRef(null);
|
|
2613
|
+
//Custom Hook Call
|
|
2614
|
+
useOnClickOutside(dropdownRef, () => setDropdown(false));
|
|
2633
2615
|
//Handler
|
|
2616
|
+
//---Input Onchange Handler//
|
|
2634
2617
|
const handleChange = (e) => {
|
|
2635
2618
|
const onlyNumber = e.target.value.replace(/\D/g, '');
|
|
2636
2619
|
if (dialCodeInputField) {
|
|
@@ -2642,13 +2625,13 @@ const PhoneInput = ({ placeholder, country, onChange, value, iconComponent, inpu
|
|
|
2642
2625
|
onChange(selected.callingCode + onlyNumber);
|
|
2643
2626
|
}
|
|
2644
2627
|
};
|
|
2645
|
-
//
|
|
2628
|
+
//---Search Input Onchange Handler//
|
|
2646
2629
|
const onSearchHandler = (e) => {
|
|
2647
2630
|
const search = e.target.value;
|
|
2648
2631
|
setCountryData(getBySearch(search, onlyCountries, excludeCountries));
|
|
2649
2632
|
};
|
|
2650
|
-
//
|
|
2651
|
-
const handleSelected = (item) => {
|
|
2633
|
+
//---Set Selected Handler//
|
|
2634
|
+
const handleSelected = (item, i) => {
|
|
2652
2635
|
if (dialCodeInputField) {
|
|
2653
2636
|
const result = inputValue?.replace(selected.callingCode, item.callingCode);
|
|
2654
2637
|
setInputValue(result.length > 0 ? result : item.callingCode);
|
|
@@ -2659,11 +2642,54 @@ const PhoneInput = ({ placeholder, country, onChange, value, iconComponent, inpu
|
|
|
2659
2642
|
}
|
|
2660
2643
|
setSelected(item);
|
|
2661
2644
|
setDropdown(false);
|
|
2645
|
+
setCursor(i);
|
|
2646
|
+
};
|
|
2647
|
+
//---Scroll To View Handler//
|
|
2648
|
+
const scrollIntoView = (position) => {
|
|
2649
|
+
if (search) {
|
|
2650
|
+
if (countryDataInfo.length > 0) {
|
|
2651
|
+
listRef.current?.scrollTo({
|
|
2652
|
+
top: position,
|
|
2653
|
+
behavior: "smooth"
|
|
2654
|
+
});
|
|
2655
|
+
}
|
|
2656
|
+
}
|
|
2657
|
+
};
|
|
2658
|
+
//---Keyboard Navigation//
|
|
2659
|
+
const keyBoardNav = (e) => {
|
|
2660
|
+
if (isDropdown) {
|
|
2661
|
+
if (e.key === "ArrowDown") {
|
|
2662
|
+
e.preventDefault();
|
|
2663
|
+
setCursor(c => (c < countryDataInfo.length - 1 ? c + 1 : c));
|
|
2664
|
+
}
|
|
2665
|
+
if (e.key === "ArrowUp") {
|
|
2666
|
+
e.preventDefault();
|
|
2667
|
+
setCursor(c => (c > 0 ? c - 1 : 0));
|
|
2668
|
+
}
|
|
2669
|
+
if (e.key === "Escape") {
|
|
2670
|
+
setDropdown(false);
|
|
2671
|
+
}
|
|
2672
|
+
if (e.key === "Enter" && cursor >= 0) {
|
|
2673
|
+
setSelected(countryDataInfo[cursor]);
|
|
2674
|
+
setDropdown(false);
|
|
2675
|
+
}
|
|
2676
|
+
}
|
|
2662
2677
|
};
|
|
2663
|
-
//
|
|
2664
|
-
|
|
2665
|
-
|
|
2666
|
-
|
|
2678
|
+
//React Hook
|
|
2679
|
+
//---Scroll to view hook//
|
|
2680
|
+
React.useEffect(() => {
|
|
2681
|
+
if (cursor < 0 || cursor > countryDataInfo.length || !listRef) {
|
|
2682
|
+
return () => {
|
|
2683
|
+
};
|
|
2684
|
+
}
|
|
2685
|
+
if (isDropdown && listRef) {
|
|
2686
|
+
if (countryDataInfo.length > 0) {
|
|
2687
|
+
let listItems = Array.from(listRef.current?.children);
|
|
2688
|
+
listItems[cursor] && scrollIntoView(listItems[cursor].offsetTop - 65);
|
|
2689
|
+
}
|
|
2690
|
+
}
|
|
2691
|
+
}, [cursor]);
|
|
2692
|
+
//---Dial Code Field Effect//
|
|
2667
2693
|
React.useMemo(() => {
|
|
2668
2694
|
if (dialCodeInputField) {
|
|
2669
2695
|
const result = inputValue?.replace(selected.callingCode, getDefaultCountry(country).callingCode);
|
|
@@ -2672,16 +2698,16 @@ const PhoneInput = ({ placeholder, country, onChange, value, iconComponent, inpu
|
|
|
2672
2698
|
}
|
|
2673
2699
|
setSelected(getDefaultCountry(country));
|
|
2674
2700
|
}, [country, dialCodeInputField]);
|
|
2675
|
-
//
|
|
2701
|
+
//---Country search hook//
|
|
2676
2702
|
React.useMemo(() => {
|
|
2677
2703
|
setCountryData(getCountryByFilter(onlyCountries, excludeCountries, preferredCountries));
|
|
2678
2704
|
}, [onlyCountries, excludeCountries, preferredCountries]);
|
|
2679
|
-
return (jsxRuntime.exports.jsx("div", { className: "simple-phone-input-sri198-container", children: jsxRuntime.exports.jsxs("div", { className: "simple-phone-input-sri198-main", children: [jsxRuntime.exports.jsxs("div", { className: "simple-phone-input-sri198-dropdown-container", ref:
|
|
2705
|
+
return (jsxRuntime.exports.jsx("div", { className: "simple-phone-input-sri198-container", onKeyDown: (e) => keyBoardNav(e), tabIndex: -1, children: jsxRuntime.exports.jsxs("div", { className: "simple-phone-input-sri198-main", children: [jsxRuntime.exports.jsxs("div", { className: "simple-phone-input-sri198-dropdown-container", ref: dropdownRef, children: [jsxRuntime.exports.jsxs("div", { onClick: () => setDropdown(!isDropdown), className: dialCodeInputField ? "simple-phone-input-sri198-dropdown-container-button dial" : "simple-phone-input-sri198-dropdown-container-button", children: [jsxRuntime.exports.jsx("img", { src: "https://cdn.jsdelivr.net/gh/siamahnaf198/country-flags@main/img/" + selected.countryCode + ".svg", alt: selected.country, width: "20px" }), !dialCodeInputField &&
|
|
2680
2706
|
jsxRuntime.exports.jsx("span", { className: "simple-phone-input-sri198-selected-code", children: selected.callingCode }), showDropdownIcon &&
|
|
2681
|
-
jsxRuntime.exports.jsx("div", { className: isDropdown ? "simple-phone-input-sri198-dropdown-icon" : "simple-phone-input-sri198-dropdown-icon active", children: iconComponent ? iconComponent : (jsxRuntime.exports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 24 24", children: jsxRuntime.exports.jsx("path", { fill: "currentColor", d: "m7 10l5 5l5-5z" }) })) })] }), jsxRuntime.exports.jsxs("ul", { className: isDropdown ? "simple-phone-input-sri198-dropdown active" : "simple-phone-input-sri198-dropdown", children: [search &&
|
|
2707
|
+
jsxRuntime.exports.jsx("div", { className: isDropdown ? "simple-phone-input-sri198-dropdown-icon" : "simple-phone-input-sri198-dropdown-icon active", children: iconComponent ? iconComponent : (jsxRuntime.exports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 24 24", children: jsxRuntime.exports.jsx("path", { fill: "currentColor", d: "m7 10l5 5l5-5z" }) })) })] }), jsxRuntime.exports.jsxs("ul", { className: isDropdown ? "simple-phone-input-sri198-dropdown active" : "simple-phone-input-sri198-dropdown", ref: listRef, children: [search &&
|
|
2682
2708
|
jsxRuntime.exports.jsxs("div", { className: "simple-phone-input-sri198-search-container", children: [jsxRuntime.exports.jsx("input", { placeholder: searchPlaceholder, ...searchProps, onChange: onSearchHandler }), showSearchIcon &&
|
|
2683
2709
|
jsxRuntime.exports.jsx("div", { className: "simple-phone-input-sri198-search-icon", children: searchIconComponent ?? (jsxRuntime.exports.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 48 48", children: [jsxRuntime.exports.jsxs("g", { fill: "#616161", children: [jsxRuntime.exports.jsx("path", { d: "m29.175 31.99l2.828-2.827l12.019 12.019l-2.828 2.827z" }), jsxRuntime.exports.jsx("circle", { cx: "20", cy: "20", r: "16" })] }), jsxRuntime.exports.jsx("path", { fill: "#37474F", d: "m32.45 35.34l2.827-2.828l8.696 8.696l-2.828 2.828z" }), jsxRuntime.exports.jsx("circle", { cx: "20", cy: "20", r: "13", fill: "#64B5F6" }), jsxRuntime.exports.jsx("path", { fill: "#BBDEFB", d: "M26.9 14.2c-1.7-2-4.2-3.2-6.9-3.2s-5.2 1.2-6.9 3.2c-.4.4-.3 1.1.1 1.4c.4.4 1.1.3 1.4-.1C16 13.9 17.9 13 20 13s4 .9 5.4 2.5c.2.2.5.4.8.4c.2 0 .5-.1.6-.2c.4-.4.4-1.1.1-1.5z" })] })) })] }), countryDataInfo.length === 0 &&
|
|
2684
|
-
jsxRuntime.exports.jsx("div", { className: "simple-phone-input-sri198-not-found", children: searchNotFound }), countryDataInfo.map((item, i) => (jsxRuntime.exports.jsxs("li", { onClick: () => handleSelected(item), className:
|
|
2710
|
+
jsxRuntime.exports.jsx("div", { className: "simple-phone-input-sri198-not-found", children: searchNotFound }), countryDataInfo.map((item, i) => (jsxRuntime.exports.jsxs("li", { onClick: () => handleSelected(item, i), className: i === cursor ? "active" : "", children: [jsxRuntime.exports.jsx("img", { src: "https://cdn.jsdelivr.net/gh/siamahnaf198/country-flags@main/img/" + item.countryCode + ".svg", alt: item.country, width: "20px" }), jsxRuntime.exports.jsx("span", { className: "simple-phone-input-sri198-dropdown-text", children: item.country }), jsxRuntime.exports.jsx("span", { className: "simple-phone-input-sri198-dropdown-country-code", children: item.callingCode })] }, i)))] })] }), jsxRuntime.exports.jsx("input", { className: "simple-phone-input-sri198-input", placeholder: placeholder, onChange: handleChange, type: "tel", onInput: (e) => {
|
|
2685
2711
|
if (dialCodeInputField) {
|
|
2686
2712
|
const oldVal = inputValue.slice(selected.callingCode.length);
|
|
2687
2713
|
if (e.target.value.startsWith(selected.callingCode)) {
|
|
@@ -2691,7 +2717,7 @@ const PhoneInput = ({ placeholder, country, onChange, value, iconComponent, inpu
|
|
|
2691
2717
|
e.target.value = selected.callingCode + oldVal;
|
|
2692
2718
|
}
|
|
2693
2719
|
}
|
|
2694
|
-
}, value: inputValue, ...inputProps })] }) }));
|
|
2720
|
+
}, onKeyDown: (e) => keyBoardNav(e), value: inputValue, ...inputProps })] }) }));
|
|
2695
2721
|
};
|
|
2696
2722
|
|
|
2697
2723
|
exports.PhoneInput = PhoneInput;
|