kg-react-phone-field v0.0.6

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

<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

<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.