react-simple-phone-input 1.1.5-beta → 3.0.0
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 +100 -50
- 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 +100 -50
- 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
|
+
react-simple-phone-input [MIT licensed](LICENSE).
|
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) =>
|
|
2552
|
+
countries = countryData.filter((item) => !excludeCountry?.includes(item.countryCode));
|
|
2581
2553
|
}
|
|
2582
|
-
else if (onlyCountry &&
|
|
2583
|
-
countries = countryData.filter((item) =>
|
|
2554
|
+
else if (onlyCountry && onlyCountry?.length > 0) {
|
|
2555
|
+
countries = countryData.filter((item) => onlyCountry?.includes(item.countryCode));
|
|
2584
2556
|
}
|
|
2585
2557
|
else {
|
|
2586
2558
|
countries = countryData;
|
|
@@ -2592,28 +2564,56 @@ 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) =>
|
|
2571
|
+
countries = countryData.filter((item) => !excludeCountry?.includes(item.countryCode));
|
|
2599
2572
|
}
|
|
2600
|
-
else if (onlyCountry &&
|
|
2601
|
-
countries = countryData.filter((item) =>
|
|
2573
|
+
else if (onlyCountry && onlyCountry?.length > 0) {
|
|
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
|
|
2607
|
-
|| (
|
|
2579
|
+
const result = countries.sort((a, b) => (Number(preferredCountry?.includes(b.countryCode)) - Number(preferredCountry?.includes(a.countryCode)))
|
|
2580
|
+
|| (preferredCountry?.indexOf(a.countryCode) - preferredCountry?.indexOf(b.countryCode)));
|
|
2608
2581
|
return result;
|
|
2609
2582
|
};
|
|
2610
2583
|
|
|
2584
|
+
//Click out side hook
|
|
2585
|
+
function useOnClickOutside(ref, handler) {
|
|
2586
|
+
React.useEffect(() => {
|
|
2587
|
+
const listener = (event) => {
|
|
2588
|
+
if (!ref.current || ref.current.contains(event.target)) {
|
|
2589
|
+
return;
|
|
2590
|
+
}
|
|
2591
|
+
handler(event);
|
|
2592
|
+
};
|
|
2593
|
+
document.addEventListener("mousedown", listener);
|
|
2594
|
+
document.addEventListener("touchstart", listener);
|
|
2595
|
+
return () => {
|
|
2596
|
+
document.removeEventListener("mousedown", listener);
|
|
2597
|
+
document.removeEventListener("touchstart", listener);
|
|
2598
|
+
};
|
|
2599
|
+
}, [ref, handler]);
|
|
2600
|
+
}
|
|
2601
|
+
|
|
2602
|
+
//Component
|
|
2611
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
|
|
2612
2605
|
const [selected, setSelected] = React.useState({});
|
|
2613
2606
|
const [isDropdown, setDropdown] = React.useState(false);
|
|
2614
2607
|
const [inputValue, setInputValue] = React.useState(value || "");
|
|
2615
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));
|
|
2616
2615
|
//Handler
|
|
2616
|
+
//---Input Onchange Handler//
|
|
2617
2617
|
const handleChange = (e) => {
|
|
2618
2618
|
const onlyNumber = e.target.value.replace(/\D/g, '');
|
|
2619
2619
|
if (dialCodeInputField) {
|
|
@@ -2625,13 +2625,15 @@ const PhoneInput = ({ placeholder, country, onChange, value, iconComponent, inpu
|
|
|
2625
2625
|
onChange(selected.callingCode + onlyNumber);
|
|
2626
2626
|
}
|
|
2627
2627
|
};
|
|
2628
|
+
//---Search Input Onchange Handler//
|
|
2628
2629
|
const onSearchHandler = (e) => {
|
|
2629
2630
|
const search = e.target.value;
|
|
2630
2631
|
setCountryData(getBySearch(search, onlyCountries, excludeCountries));
|
|
2631
2632
|
};
|
|
2632
|
-
|
|
2633
|
+
//---Set Selected Handler//
|
|
2634
|
+
const handleSelected = (item, i) => {
|
|
2633
2635
|
if (dialCodeInputField) {
|
|
2634
|
-
const result = inputValue
|
|
2636
|
+
const result = inputValue?.replace(selected.callingCode, item.callingCode);
|
|
2635
2637
|
setInputValue(result.length > 0 ? result : item.callingCode);
|
|
2636
2638
|
onChange(result.length > 0 ? result : item.callingCode);
|
|
2637
2639
|
}
|
|
@@ -2640,24 +2642,72 @@ const PhoneInput = ({ placeholder, country, onChange, value, iconComponent, inpu
|
|
|
2640
2642
|
}
|
|
2641
2643
|
setSelected(item);
|
|
2642
2644
|
setDropdown(false);
|
|
2645
|
+
setCursor(i);
|
|
2643
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
|
+
}
|
|
2677
|
+
};
|
|
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//
|
|
2644
2693
|
React.useMemo(() => {
|
|
2645
2694
|
if (dialCodeInputField) {
|
|
2646
|
-
const result = inputValue
|
|
2695
|
+
const result = inputValue?.replace(selected.callingCode, getDefaultCountry(country).callingCode);
|
|
2647
2696
|
console.log(result);
|
|
2648
2697
|
setInputValue(result.length > 0 ? result : getDefaultCountry(country).callingCode);
|
|
2649
2698
|
}
|
|
2650
2699
|
setSelected(getDefaultCountry(country));
|
|
2651
2700
|
}, [country, dialCodeInputField]);
|
|
2701
|
+
//---Country search hook//
|
|
2652
2702
|
React.useMemo(() => {
|
|
2653
2703
|
setCountryData(getCountryByFilter(onlyCountries, excludeCountries, preferredCountries));
|
|
2654
2704
|
}, [onlyCountries, excludeCountries, preferredCountries]);
|
|
2655
|
-
return (jsxRuntime.exports.jsx("div",
|
|
2656
|
-
jsxRuntime.exports.jsx("span",
|
|
2657
|
-
jsxRuntime.exports.jsx("div",
|
|
2658
|
-
jsxRuntime.exports.jsxs("div",
|
|
2659
|
-
jsxRuntime.exports.jsx("div",
|
|
2660
|
-
jsxRuntime.exports.jsx("div",
|
|
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 &&
|
|
2706
|
+
jsxRuntime.exports.jsx("span", { className: "simple-phone-input-sri198-selected-code", children: selected.callingCode }), showDropdownIcon &&
|
|
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 &&
|
|
2708
|
+
jsxRuntime.exports.jsxs("div", { className: "simple-phone-input-sri198-search-container", children: [jsxRuntime.exports.jsx("input", { placeholder: searchPlaceholder, ...searchProps, onChange: onSearchHandler }), showSearchIcon &&
|
|
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 &&
|
|
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) => {
|
|
2661
2711
|
if (dialCodeInputField) {
|
|
2662
2712
|
const oldVal = inputValue.slice(selected.callingCode.length);
|
|
2663
2713
|
if (e.target.value.startsWith(selected.callingCode)) {
|
|
@@ -2667,7 +2717,7 @@ const PhoneInput = ({ placeholder, country, onChange, value, iconComponent, inpu
|
|
|
2667
2717
|
e.target.value = selected.callingCode + oldVal;
|
|
2668
2718
|
}
|
|
2669
2719
|
}
|
|
2670
|
-
}, value: inputValue
|
|
2720
|
+
}, onKeyDown: (e) => keyBoardNav(e), value: inputValue, ...inputProps })] }) }));
|
|
2671
2721
|
};
|
|
2672
2722
|
|
|
2673
2723
|
exports.PhoneInput = PhoneInput;
|