react-simple-phone-input 1.1.5-beta → 1.1.8-beta
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/dist/cjs/index.js +41 -17
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +41 -17
- package/dist/esm/index.js.map +1 -1
- package/package.json +1 -1
package/dist/esm/index.js
CHANGED
|
@@ -2575,10 +2575,10 @@ const getDefaultCountry = (code) => {
|
|
|
2575
2575
|
const getBySearch = (search, onlyCountry, excludeCountry) => {
|
|
2576
2576
|
var countries = [];
|
|
2577
2577
|
if (excludeCountry && excludeCountry.length > 0) {
|
|
2578
|
-
countries = countryData.filter((item) =>
|
|
2578
|
+
countries = countryData.filter((item) => excludeCountry?.indexOf(item.countryCode) === -1);
|
|
2579
2579
|
}
|
|
2580
|
-
else if (onlyCountry &&
|
|
2581
|
-
countries = countryData.filter((item) =>
|
|
2580
|
+
else if (onlyCountry && onlyCountry?.length > 0) {
|
|
2581
|
+
countries = countryData.filter((item) => onlyCountry?.indexOf(item.countryCode) !== -1);
|
|
2582
2582
|
}
|
|
2583
2583
|
else {
|
|
2584
2584
|
countries = countryData;
|
|
@@ -2593,19 +2593,36 @@ const getBySearch = (search, onlyCountry, excludeCountry) => {
|
|
|
2593
2593
|
const getCountryByFilter = (onlyCountry, excludeCountry, preferredCountry) => {
|
|
2594
2594
|
var countries = [];
|
|
2595
2595
|
if (excludeCountry && excludeCountry.length > 0) {
|
|
2596
|
-
countries = countryData.filter((item) =>
|
|
2596
|
+
countries = countryData.filter((item) => excludeCountry?.indexOf(item.countryCode) === -1);
|
|
2597
2597
|
}
|
|
2598
|
-
else if (onlyCountry &&
|
|
2599
|
-
countries = countryData.filter((item) =>
|
|
2598
|
+
else if (onlyCountry && onlyCountry?.length > 0) {
|
|
2599
|
+
countries = countryData.filter((item) => onlyCountry?.indexOf(item.countryCode) !== -1);
|
|
2600
2600
|
}
|
|
2601
2601
|
else {
|
|
2602
2602
|
countries = countryData;
|
|
2603
2603
|
}
|
|
2604
|
-
const result = countries.sort((a, b) => (Number(preferredCountry
|
|
2605
|
-
|| (
|
|
2604
|
+
const result = countries.sort((a, b) => (Number(preferredCountry?.indexOf(b.countryCode)) - Number(preferredCountry?.indexOf(a.countryCode)))
|
|
2605
|
+
|| (preferredCountry?.indexOf(a.countryCode) - preferredCountry?.indexOf(b.countryCode)));
|
|
2606
2606
|
return result;
|
|
2607
2607
|
};
|
|
2608
2608
|
|
|
2609
|
+
function useOnClickOutside(ref, handler) {
|
|
2610
|
+
React.useEffect(() => {
|
|
2611
|
+
const listener = (event) => {
|
|
2612
|
+
if (!ref.current || ref.current.contains(event.target)) {
|
|
2613
|
+
return;
|
|
2614
|
+
}
|
|
2615
|
+
handler(event);
|
|
2616
|
+
};
|
|
2617
|
+
document.addEventListener("mousedown", listener);
|
|
2618
|
+
document.addEventListener("touchstart", listener);
|
|
2619
|
+
return () => {
|
|
2620
|
+
document.removeEventListener("mousedown", listener);
|
|
2621
|
+
document.removeEventListener("touchstart", listener);
|
|
2622
|
+
};
|
|
2623
|
+
}, [ref, handler]);
|
|
2624
|
+
}
|
|
2625
|
+
|
|
2609
2626
|
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" }) => {
|
|
2610
2627
|
const [selected, setSelected] = React.useState({});
|
|
2611
2628
|
const [isDropdown, setDropdown] = React.useState(false);
|
|
@@ -2623,13 +2640,15 @@ const PhoneInput = ({ placeholder, country, onChange, value, iconComponent, inpu
|
|
|
2623
2640
|
onChange(selected.callingCode + onlyNumber);
|
|
2624
2641
|
}
|
|
2625
2642
|
};
|
|
2643
|
+
//
|
|
2626
2644
|
const onSearchHandler = (e) => {
|
|
2627
2645
|
const search = e.target.value;
|
|
2628
2646
|
setCountryData(getBySearch(search, onlyCountries, excludeCountries));
|
|
2629
2647
|
};
|
|
2648
|
+
//
|
|
2630
2649
|
const handleSelected = (item) => {
|
|
2631
2650
|
if (dialCodeInputField) {
|
|
2632
|
-
const result = inputValue
|
|
2651
|
+
const result = inputValue?.replace(selected.callingCode, item.callingCode);
|
|
2633
2652
|
setInputValue(result.length > 0 ? result : item.callingCode);
|
|
2634
2653
|
onChange(result.length > 0 ? result : item.callingCode);
|
|
2635
2654
|
}
|
|
@@ -2639,23 +2658,28 @@ const PhoneInput = ({ placeholder, country, onChange, value, iconComponent, inpu
|
|
|
2639
2658
|
setSelected(item);
|
|
2640
2659
|
setDropdown(false);
|
|
2641
2660
|
};
|
|
2661
|
+
//Custom Hook
|
|
2662
|
+
const ref = React.useRef();
|
|
2663
|
+
useOnClickOutside(ref, () => setDropdown(false));
|
|
2664
|
+
//Effects
|
|
2642
2665
|
React.useMemo(() => {
|
|
2643
2666
|
if (dialCodeInputField) {
|
|
2644
|
-
const result = inputValue
|
|
2667
|
+
const result = inputValue?.replace(selected.callingCode, getDefaultCountry(country).callingCode);
|
|
2645
2668
|
console.log(result);
|
|
2646
2669
|
setInputValue(result.length > 0 ? result : getDefaultCountry(country).callingCode);
|
|
2647
2670
|
}
|
|
2648
2671
|
setSelected(getDefaultCountry(country));
|
|
2649
2672
|
}, [country, dialCodeInputField]);
|
|
2673
|
+
//
|
|
2650
2674
|
React.useMemo(() => {
|
|
2651
2675
|
setCountryData(getCountryByFilter(onlyCountries, excludeCountries, preferredCountries));
|
|
2652
2676
|
}, [onlyCountries, excludeCountries, preferredCountries]);
|
|
2653
|
-
return (jsxRuntime.exports.jsx("div",
|
|
2654
|
-
jsxRuntime.exports.jsx("span",
|
|
2655
|
-
jsxRuntime.exports.jsx("div",
|
|
2656
|
-
jsxRuntime.exports.jsxs("div",
|
|
2657
|
-
jsxRuntime.exports.jsx("div",
|
|
2658
|
-
jsxRuntime.exports.jsx("div",
|
|
2677
|
+
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: ref, 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 &&
|
|
2678
|
+
jsxRuntime.exports.jsx("span", { className: "simple-phone-input-sri198-selected-code", children: selected.callingCode }), showDropdownIcon &&
|
|
2679
|
+
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 &&
|
|
2680
|
+
jsxRuntime.exports.jsxs("div", { className: "simple-phone-input-sri198-search-container", children: [jsxRuntime.exports.jsx("input", { placeholder: searchPlaceholder, ...searchProps, onChange: onSearchHandler }), showSearchIcon &&
|
|
2681
|
+
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 &&
|
|
2682
|
+
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: item.countryCode === selected.countryCode ? "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) => {
|
|
2659
2683
|
if (dialCodeInputField) {
|
|
2660
2684
|
const oldVal = inputValue.slice(selected.callingCode.length);
|
|
2661
2685
|
if (e.target.value.startsWith(selected.callingCode)) {
|
|
@@ -2665,7 +2689,7 @@ const PhoneInput = ({ placeholder, country, onChange, value, iconComponent, inpu
|
|
|
2665
2689
|
e.target.value = selected.callingCode + oldVal;
|
|
2666
2690
|
}
|
|
2667
2691
|
}
|
|
2668
|
-
}, value: inputValue
|
|
2692
|
+
}, value: inputValue, ...inputProps })] }) }));
|
|
2669
2693
|
};
|
|
2670
2694
|
|
|
2671
2695
|
export { PhoneInput };
|