react-phonenumber-text-input/dist/esm/components/SearchSelect/SelectOption.js

an international phone number input component for React.

import e,{useState as t,useMemo as n,useLayoutEffect as r}from"react";import{getCountryCallingCode as a}from"../../utils/getCountryCallingCode.js";import{g as c}from"../../unicode-e614313e.js";var o=function(t){var n=e.useRef(null);return r((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))},i=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"})))},l=new Intl.DisplayNames([navigator.language],{type:"region"}),s=new Intl.DisplayNames(["en"],{type:"region"}),u=function(r){var u=t(""),h=u[0],m=u[1],p=n((function(){if(!h)return r.countries;var e=h;return h.startsWith("+")&&(e=h.slice(1)),r.countries.filter((function(t){var n,r;return a(t).startsWith(e)||t.toLowerCase().startsWith(e.toLowerCase())||(null===(n=l.of(t))||void 0===n?void 0:n.toLowerCase().includes(e.toLowerCase()))||(null===(r=s.of(t))||void 0===r?void 0:r.toLowerCase().includes(e.toLowerCase()))}))}),[h,r.countries]);return e.createElement(o,{activeIndex:r.countries.findIndex((function(e){return e===r.activeCountry})),onSearch:m},p.map((function(t){return e.createElement(i,{key:t,content:e.createElement(e.Fragment,null,c(t),"   +",a(t)," ",l.of(t)),active:t===r.activeCountry,onClick:function(e){e.stopPropagation(),r.onChooseCountry(t)}})})))};export{u as default};
//# sourceMappingURL=SelectOption.js.map