kg-react-phone-field/dist/kg-react-phone-field.esm.js

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

import React from 'react';
import Select from 'react-select';
import makeAnimated from 'react-select/animated';
import { getCountries, getCountryCallingCode } from 'react-phone-number-input';
import es from 'react-phone-number-input/locale/es.json';
import en from 'react-phone-number-input/locale/en.json';

var sortedCountries = function sortedCountries(countries, labels, CountryNumber) {
  // Aquí ordenamos los países por orden alfabético
  // y firstCountry va de primero
  var listOfCountries = [];
  countries.forEach(function (country) {
    listOfCountries.push({
      name: labels[country],
      nameCodeNumber: labels[country] + " +" + getCountryCallingCode(country),
      codeNumber: parseInt(getCountryCallingCode(country))
    });
  });
  // firstCountry first
  var firstCountry = listOfCountries.find(function (country) {
    return country.codeNumber === CountryNumber;
  });
  var filteredCountries = listOfCountries.filter(function (country) {
    return country.codeNumber !== CountryNumber;
  });
  // Ordenar sin Lodash
  var sortedCountries = filteredCountries.sort(function (a, b) {
    if (a.name < b.name) return -1;
    if (a.name > b.name) return 1;
    return 0;
  });
  if (firstCountry) sortedCountries.unshift(firstCountry);
  return sortedCountries;
};
var listCountriesCodes = function listCountriesCodes(listToReturn, CountryNumber, lang) {
  if (CountryNumber === void 0) {
    CountryNumber = 506;
  }
  var langToUse = es;
  if (lang === "en") langToUse = en;
  if (lang === "es") langToUse = es;
  return sortedCountries(getCountries(), langToUse, CountryNumber).map(function (country) {
    var _ref, _ref2, _ref3;
    if (country) {
      switch (listToReturn.length) {
        case 1:
          return _ref = {}, _ref[listToReturn[0]] = country.nameCodeNumber, _ref;
        case 2:
          return _ref2 = {}, _ref2[listToReturn[0]] = country[listToReturn[0]], _ref2[listToReturn[1]] = country[listToReturn[1]], _ref2;
        case 3:
          return _ref3 = {}, _ref3[listToReturn[0]] = country[listToReturn[0]], _ref3[listToReturn[1]] = country[listToReturn[1]], _ref3[listToReturn[2]] = country[listToReturn[2]], _ref3;
      }
    } else {
      return {};
    }
  });
};

var stylesContainer = {
  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)'
};
var stylesSelect = {
  width: '100%',
  height: '100%',
  fontSize: '1rem',
  border: 'none',
  cursor: 'pointer',
  outline: 'none'
};
var SelectPhoneNumber = function SelectPhoneNumber(_ref) {
  var defaultCountryNumber = _ref.defaultCountryNumber,
    _onChange = _ref.onChange,
    value = _ref.value,
    listOfProperties = _ref.listOfProperties,
    containerClassName = _ref.containerClassName,
    selectClassName = _ref.selectClassName,
    _ref$defaultStyles = _ref.defaultStyles,
    defaultStyles = _ref$defaultStyles === void 0 ? true : _ref$defaultStyles,
    _ref$language = _ref.language,
    language = _ref$language === void 0 ? 'es' : _ref$language,
    label = _ref.label,
    labelClassName = _ref.labelClassName,
    reactSelectCustomStyles = _ref.reactSelectCustomStyles,
    reactSelectDefaultValues = _ref.reactSelectDefaultValues,
    _ref$withReactSelect = _ref.withReactSelect,
    withReactSelect = _ref$withReactSelect === void 0 ? false : _ref$withReactSelect;
  var list = listCountriesCodes(listOfProperties, defaultCountryNumber, language);
  var options = list.map(function (country) {
    if (country) return {
      label: country[listOfProperties[0]],
      value: country
    };else return null;
  });
  var animatedComponents = makeAnimated();
  if (withReactSelect) {
    return React.createElement(Select, {
      options: options,
      onChange: _onChange,
      components: animatedComponents,
      styles: reactSelectCustomStyles,
      defaultValue: reactSelectDefaultValues
    });
  } else {
    return React.createElement("div", {
      style: defaultStyles ? stylesContainer : {},
      className: containerClassName
    }, React.createElement("label", {
      style: defaultStyles ? {
        fontSize: '1rem',
        fontWeight: 'bold',
        lineHeight: '1.5rem'
      } : {},
      "react-select": true,
      className: labelClassName
    }, label, React.createElement("select", {
      style: defaultStyles ? stylesSelect : {},
      className: selectClassName,
      value: value,
      onChange: function onChange(e) {
        if (typeof _onChange === 'function') _onChange(e.target.value);
      }
    }, listCountriesCodes(listOfProperties, defaultCountryNumber, language).map(function (country, index) {
      if (country) {
        switch (listOfProperties.length) {
          case 1:
            return React.createElement("option", {
              key: country[listOfProperties[0]] + "__" + index,
              value: country[listOfProperties[0]]
            }, country[listOfProperties[0]]);
          case 2:
            return React.createElement("option", {
              key: country[listOfProperties[0]] + "__" + index,
              value: country[listOfProperties[0]]
            }, country[listOfProperties[0]], " ( + ", country[listOfProperties[1]], " )");
          case 3:
            return React.createElement("option", {
              key: country[listOfProperties[0]] + "__" + index,
              value: country[listOfProperties[0]]
            }, country[listOfProperties[0]], " (", country[listOfProperties[1]], ") +", country[listOfProperties[2]]);
        }
      } else return null;
    }))));
  }
};

export { SelectPhoneNumber };
//# sourceMappingURL=kg-react-phone-field.esm.js.map