kg-react-phone-field/README.md

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

## Resumen
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 propiedades, incluyendo el número de teléfono del país predeterminado, una lista de propiedades a mostrar en las opciones del menú desplegable y opciones de estilo y personalización opcionales.

## Ejemplo de uso con `react-select`
```javascript
<SelectPhoneNumber
  defaultCountryNumber={506}
  listOfProperties={['nameCodeNumber']}
  language="es"
  label="Seleccionar país"
  withReactSelect={true}
  reactSelectCustomStyles={{ color: 'blue' }}
  reactSelectDefaultValues={{ label: 'Predeterminado', value: 'default' }}
/>
```

## Ejemplo de uso con un elemento select regular
```javascript
<SelectPhoneNumber
  defaultCountryNumber={506}
  listOfProperties={['nameCodeNumber']}
  language="es"
  label="Seleccionar país"
  withReactSelect={false}
/>
```

## Arreglo de propiedades que acepta el componente
* `['name']` - Nombre del país en el idioma especificado.
* `['name', 'codeNumber']` - Nombre del país en el idioma especificado y código numérico del país. 
* `['nameCodeNumber', 'codeNumber']` - Código de país y código numérico del país.
* `['name', 'codeNumber', 'nameCodeNumber']` - Nombre del país en el idioma especificado, código numérico del país y código de país.
### Entradas

* `defaultCountryNumber` (número): El número de teléfono del país predeterminado a mostrar en el menú desplegable.
* `onChange` (función): Una función de devolución de llamada que se llamará cuando el valor seleccionado cambie.
* `value` (string): El valor actualmente seleccionado.
* `listOfProperties` (array): Una matriz de nombres de propiedades a mostrar en las opciones del menú desplegable.
* `containerClassName` (string): Nombre de clase CSS para el elemento del contenedor.
* `selectClassName` (string): Nombre de clase CSS para el elemento select.
* `defaultStyles` (boolean): Indica si se deben aplicar estilos predeterminados a los elementos del contenedor y select.
* `language` (string): El idioma a utilizar para los nombres de los países.
* `label` (string): La etiqueta a mostrar encima del menú desplegable.
* `labelClassName` (string): Nombre de clase CSS para el elemento de etiqueta.
* `reactSelectCustomStyles` (object): Estilos personalizados a aplicar al componente `react-select`.
* `reactSelectDefaultValues` (object): Valores predeterminados para el componente `react-select`.
* `withReactSelect` (boolean): Indica si se debe usar el componente `react-select` en lugar de un elemento select regular.

### Flujo

1. Se llama a la función `listCountriesCodes` para generar una lista de códigos de país basados en las propiedades, el número de teléfono del país predeterminado y el idioma proporcionados.
2. La lista de códigos de país se mapea a una matriz de objetos de opciones con propiedades `label` y `value`.
3. Si `withReactSelect` es verdadero, se renderiza el componente `Select` de `react-select` con las opciones generadas, la devolución de llamada de cambio y los estilos personalizados.
4. Si `withReactSelect` es falso, se renderiza un elemento select regular con las opciones generadas y otras propiedades.
5. El componente devuelve el componente `Select` o el elemento select regular, según el valor de `withReactSelect`.

### Salidas

La salida del componente `SelectPhoneNumber` es el componente `Select` de `react-select` o un elemento select regular, según el valor de la propiedad `withReactSelect`. El valor seleccionado se puede obtener a través de la devolución de llamada de cambio `onChange` o accediendo a la propiedad `value`.

Espero que esta traducción te sea útil.