UNPKG

kg-react-phone-field

Version:

Este código define un componente React llamado `SelectPhoneNumber` que renderiza un menú desplegable para seleccionar un número de teléfono. El componente usa la biblioteca `react-select` si asi se desea para crear el menú desplegable. Toma varias propie

3 lines (2 loc) 2.61 kB
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react")),n=e(require("react-select")),r=e(require("react-select/animated")),a=require("react-phone-number-input"),u=e(require("react-phone-number-input/locale/es.json")),l=e(require("react-phone-number-input/locale/en.json")),o=function(e,t,n){void 0===t&&(t=506);var r=u;return"en"===n&&(r=l),"es"===n&&(r=u),function(e,t,n){var r=[];e.forEach((function(e){r.push({name:t[e],nameCodeNumber:t[e]+" +"+a.getCountryCallingCode(e),codeNumber:parseInt(a.getCountryCallingCode(e))})}));var u=r.find((function(e){return e.codeNumber===n})),l=r.filter((function(e){return e.codeNumber!==n})).sort((function(e,t){return e.name<t.name?-1:e.name>t.name?1:0}));return u&&l.unshift(u),l}(a.getCountries(),r,t).map((function(t){var n,r,a;if(!t)return{};switch(e.length){case 1:return(n={})[e[0]]=t.nameCodeNumber,n;case 2:return(r={})[e[0]]=t[e[0]],r[e[1]]=t[e[1]],r;case 3:return(a={})[e[0]]=t[e[0]],a[e[1]]=t[e[1]],a[e[2]]=t[e[2]],a}}))},c={width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center",borderRadius:"0.5rem",border:"1px solid #ccc",padding:"0.5rem",boxShadow:"0 0 0.5rem rgba(0, 0, 0, 0.1)"},i={width:"100%",height:"100%",fontSize:"1rem",border:"none",cursor:"pointer",outline:"none"};exports.SelectPhoneNumber=function(e){var a=e.defaultCountryNumber,u=e.onChange,l=e.value,s=e.listOfProperties,m=e.containerClassName,f=e.selectClassName,d=e.defaultStyles,p=void 0===d||d,h=e.language,b=void 0===h?"es":h,g=e.label,v=e.labelClassName,C=e.reactSelectCustomStyles,y=e.reactSelectDefaultValues,N=e.withReactSelect,S=void 0!==N&&N,E=o(s,a,b).map((function(e){return e?{label:e[s[0]],value:e}:null})),_=r();return S?t.createElement(n,{options:E,onChange:u,components:_,styles:C,defaultValue:y}):t.createElement("div",{style:p?c:{},className:m},t.createElement("label",{style:p?{fontSize:"1rem",fontWeight:"bold",lineHeight:"1.5rem"}:{},"react-select":!0,className:v},g,t.createElement("select",{style:p?i:{},className:f,value:l,onChange:function(e){"function"==typeof u&&u(e.target.value)}},o(s,a,b).map((function(e,n){if(!e)return null;switch(s.length){case 1:return t.createElement("option",{key:e[s[0]]+"__"+n,value:e[s[0]]},e[s[0]]);case 2:return t.createElement("option",{key:e[s[0]]+"__"+n,value:e[s[0]]},e[s[0]]," ( + ",e[s[1]]," )");case 3:return t.createElement("option",{key:e[s[0]]+"__"+n,value:e[s[0]]},e[s[0]]," (",e[s[1]],") +",e[s[2]])}})))))}; //# sourceMappingURL=kg-react-phone-field.cjs.production.min.js.map