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