react-phonenumber-text-input
Version:
an international phone number input component for React.
3 lines (2 loc) • 3.2 kB
JavaScript
;var e=require("react"),t=require("../../utils/getCountryCallingCode.js"),n=require("../../unicode-5b4d6798.js"),r=function(t){var n=e.useRef(null);return e.useLayoutEffect((function(){n.current&&-1!==t.activeIndex&&(n.current.scrollTop=32*t.activeIndex)}),[t.activeIndex]),e.createElement("div",{className:"react-phone-input__search-select__options-wrapper"},e.createElement("div",{className:"react-phonenumber__search-select__input-wrapper"},e.createElement("input",{onClick:function(e){return e.stopPropagation()},onChange:function(e){var n;return null===(n=t.onSearch)||void 0===n?void 0:n.call(t,e.target.value)},className:"react-phonenumber__search-select__input",placeholder:'search countries (e.g. "CN", "China" or "+86")'}),e.createElement("svg",{viewBox:"64 64 896 896",focusable:"false","data-icon":"search",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true"},e.createElement("path",{d:"M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"}))),e.createElement("div",{ref:n,className:"react-phonenumber__search-select__scroll"},t.children))},a=function(t){return e.createElement("div",{onClick:t.onClick,className:"react-phone-input__search-select__option ".concat(t.active?"react-phone-input__search-select__active":"","\n ").concat(t.className||"","\n "),style:t.style},e.createElement("div",null,t.content),t.active&&e.createElement("svg",{viewBox:"64 64 896 896",focusable:"false","data-icon":"check",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true"},e.createElement("path",{d:"M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"})))},c=new Intl.DisplayNames([navigator.language],{type:"region"}),o=new Intl.DisplayNames(["en"],{type:"region"});module.exports=function(i){var l=e.useState(""),s=l[0],u=l[1],d=e.useMemo((function(){if(!s)return i.countries;var e=s;return s.startsWith("+")&&(e=s.slice(1)),i.countries.filter((function(n){var r,a;return t.getCountryCallingCode(n).startsWith(e)||n.toLowerCase().startsWith(e.toLowerCase())||(null===(r=c.of(n))||void 0===r?void 0:r.toLowerCase().includes(e.toLowerCase()))||(null===(a=o.of(n))||void 0===a?void 0:a.toLowerCase().includes(e.toLowerCase()))}))}),[s,i.countries]);return e.createElement(r,{activeIndex:i.countries.findIndex((function(e){return e===i.activeCountry})),onSearch:u},d.map((function(r){return e.createElement(a,{key:r,content:e.createElement(e.Fragment,null,n.getCountryFlag(r)," +",t.getCountryCallingCode(r)," ",c.of(r)),active:r===i.activeCountry,onClick:function(e){e.stopPropagation(),i.onChooseCountry(r)}})})))};
//# sourceMappingURL=SelectOption.js.map