Librería componentes genéricos Red Única

Componentes React y archivos SASS genéricos de Red Única.

Instalación

  npm install --save @red-unica/libreria-componentes

Uso

  import React from 'react';
  import { Componente } from '@red-unica/libreria-componentes';

  const Ejemplo = () => {
    return (
      <Componente />}
    );
  };

Componentes

Pestanias

Para utilizar este componente se deben envíar las siguientes propiedades:

| Propiedad | Tipo de dato | Propiedad | Tipo de dato | Opcional | |-----------------|--------------|-------------|--------------|----------| | pestanias | Arreglo | | | | | | | valor | Numerico | No | | | | texto | Cadnena | No | | | | numero | Numerico | No | | | | activa | Booleano | No | | eventoClic | Función | | | No |

• pestanias: Arreglo que contiene la información personalizada de cada una de las pestañas.
  • valor: Valor numérico que indica el valor de cada pestaña.
  • texto: Cadena que contiene el texto que se mostrará en la pestaña.
  • numero: Valor numérico que se mostrará en la pestaña.
  • activa: Bandera booleana que indica si la pestaña debe mostrarse como activa/seleccionada.
• eventoClic: Función que se ejecuta al dar clic a una pestaña inactiva.

Área Texto

Para utilizar este componente se deben envíar las siguientes propiedades:

| Propiedad | Tipo de dato | Opcional | Valor por defecto | |-----------------------|--------------|----------|-------------------| | titulo | Cadena | No | N/A | | eventoCambio | Función | No | N/A | | tituloActivo | Cadena | si | cadena vacia | | caracteresMaximos | Numèrico | Si | 0 | | permiteEspeciales | Booleano | Si | false |

• titulo: Cadena que contiene el título que se mostrará en el área de texto.
• eventoCambio: Función que se ejecutará cada vez que se inserte/elimine una letra del área de texto.
• tituloActivo: Cadena que contiene el título que se mostrará en área de texto activa.
• caracteresMaximos: Número de letras/caracteres que se permitirán escribir en el área de texto.
• permiteEspeciales: Bandera para indicar ingreso de caracteres especiales en el área de texto.

Etiqueta Semana

Para utilizar este componente se debe envíar la siguiente propiedad:

| Propiedad | Tipo de dato | Opcional | Valor por defecto | |-----------------------------|--------------|----------|-------------------| | moverEtiquetaIzquierda | Booleano | Si | verdadero | | disenioDesplegable | Booleano | Si | falso | | eventoClic | Función | Si | N/A | | listaSemanas | Arreglo | Si | [] |

• moverEtiquetaIzquierda: Bandera que indica si se debe mover el componente hacia el lado izquierdo para poder alinearse.
• disenioDesplegable: Bandera que indica si se debe mostrar con el diseño de la lista desplegable (por defecto es falso).
• eventoClic: Función que se ejecuta cada que se de clic en algún elemento del combo de semanas.
• listaSemanas: Arreglo de objetos que se mostrarán dentro del combo de semanas. Estructura listado de objetos: { identificador: Número para identificar al elemento en el listado. numeroSemana: Cadena con el valor de la semana. titulo: Cadena que se muestra como titulo en la lista de semanas. descripcion: Cadena de descripción que se mostrará en el listado. }

PestaniasGenericas

Para utilizar este componente se deben envíar las siguientes propiedades:

| Propiedad | Tipo de dato | Propiedad | Tipo de dato | Opcional | Valor por defecto | |----------------------------|------------------|------------------------|--------------|----------|-------------------| | listaPestanias | Arreglo | | | | | | | | valor | Numerico | No | | | | | leyenda | Cadena | No | | | | | tamanio | Numerico | Si | N/A | | tamanioPestanias | | | Numerico | Si | 0 | | eventoClic | | | Funcion | No | | | altoPestanias | | | Numerico | Si | 30 | | anchoSeparacion | | | Numerico | Si | 0 | | altoBorde | | | Numerico | Si | 4 | | colorDelBorde | | | Numerico | Si | 0 | | iniciaPestania | | | Numerico | Si | 0 | | tamanioLetra | | | Numerico | Si | 0 | | separacionTextoBarra | | | Numerico | Si | 0 | | margenLateral | | | Numerico | Si | 0 |

• listaPestanias: Arreglo que contiene los datos para el numero pestanias y leyendas que mostraran.
  • valor: Numerico que indica el valor de la pestaña.
  • leyenda: Cadena que contiene la leyenda que se mostrara en la pestaña.
  • tamanio: Numerico que indica el tamaño de la pestaña.
• tamanioPestanias: Numero que indica el ancho de las pestañas de acuerdo a la division del numero de pestañas.
• eventoClic: Función que se ejecutará al hacer clic en la pestaña.
• altoPestanias: Numero que indica la altura de las pestañas.
• anchoSeparacion: Numero que indica el ancho de la separacion de las pestañas.
• altoBorde: Numero que indica la altura del borde inferior de la pestaña.
• colorDelBorde: Numero que indica el color que se asignara al borde.
  • 0 - sin color.
  • 1 - Borde de color visualizacion de datos cuatro.
  • 2 - Borde de color primario seis.
• iniciaPestania: Numero de pestaña que estara activa.
• tamanioLetra: Numero que indica el tamaño de la letra que se mostrara en la pestaña.
  • 0 - Tamaño de letra 10, clase "etiqueta-2".
  • 1 - Tamaño de letra 12, clase "etiqueta-1".
  • 2 - Tamaño de letra 14, clase "cuerpo-3".
  • 3 - Tamaño de letra 16, clase "cuerpo-2".
  • 4 - Tamaño de letra 18, clase "cuerpo-1".
• separacionTextoBarra: Numero que indica la separacion del borde y la leyenda de la pestaña.
• margenLateral: Numero que indica los margenes laterales en las pestañas.

PiePagina

No se necesitan propiedades para poder utilizar este componente.

PiePaginaEkt

No se necesitan propiedades para poder utilizar este componente.

Botón Pestaña

Para utilizar este componente se debe envíar la siguiente propiedad:

| Propiedad | Tipo de dato | Opcional | Valor por defecto | |-----------------|---------------|----------|-------------------------| | leyenda | Cadena | No | N/A | | activo | Booleano | No | N/A | | eventoClic | Función | No | N/A | | estilo | Numérico | Si | 0 |

• leyenda: Cadena que contiene el texto que se mostrará dentro del botón.
• activo: Bandera booleana que indica si el botón debe mostrarse como activo o inactivo.
• eventoClic: Función que se ejecuta al dar clic sobre el botón.
• estilo: Valor númerico para definir el estilo de la pestaña que se mostrará, por defecto es 0. Valores permitidos:
  • 0: Estilo de pestaña activa que se muestra la leyenda en dos renglones y la inactiva esta en negritas.
  • 1: Estilo de pestaña activa que se muestra la leyenda en un renglón y la inactiva no esta en negritas.

Buscador

Para utilizar este componente se deben enviar las siguientes propiedades:

| Propiedad | Tipo de dato | Opcional | Valor por defecto | |------------------------|--------------|----------|-------------------------| | eventoCambio | Función | Si | N/A | | leyenda | Cadena | No | N/A | | validaNumerico | Booleano | Si | false | | validaLetras | Booleano | Si | false | | mostrarFiltro | Booleano | Si | false | | listadoFiltro | Objeto | Si | {titulo:'', listado:[]} | | eventoCambioFiltro | Función | Si | N/A | | estilo | Numérico | Si | 0 | | eventoClic | Función | Si | N/A | | limpiar | Booleano | Si | false |

• eventoCambio: Función que se ejecutará cada vez que se inserte/elimine una letra en el "Buscador".
• leyenda: Cadena que contiene el título que se mostrará en el "Buscador".
• validaNumerico: Bandera para indicar ingreso de solo números en el "Buscador".
• validaLetras: Bandera para indicar ingreso de solo letras en el "Buscador".
• mostrarFiltro: Bandera para habilitar filtro en el "Buscador".
• listadoFiltro: Objeto que contiene el título y listado de elementos a mostrar en el filtro. Estructura listado de elementos: { identificador : Número para identificar al elemento en el filtro. leyenda : Cadena con el valor de la descripción a mostrar en el elemento del filtro. cantidad : Número con el valor de la cantidad a mostrar en el elemento del filtro. }
• eventoCambioFiltro: Función que se ejecutará al seleccionar un elemento del filtro.
• estilo: Valor númerico para mostrar el estilo del buscador diferente, su valor por defecto es 0. Valores permitidos:
  • 0: Valor 0 ícono de la lupa se muestra de lado izquierdo.
  • 1: Valor 1 ícono de la lupa se muestra del lado derecho.
• eventoClic: Función que se ejecutaŕa al presionar el ícono de lupa.
• limpiar: Bandera para indicar si se limpiara el campo de texto, por defecto es falso.

Botón Terciario

Para utilizar este componente se deben enviar las siguientes propiedades:

| Propiedad | Tipo de dato | Opcional | Valor por defecto | |-----------------------|--------------|----------|-------------------| | eventoClic | Función | No | N/A | | leyenda | Cadena | No | N/A | | conBorde | Boleano | Si | false |

• eventoClic: Función que se ejecutará cada vez que se registre clic en el botón
• leyenda: Cadena que se muestra en el botón.
• conBorde: Bandera que indica si el botón terciario incluirá borde y fondo de color primario dos.

FotografiaAsesor

Para utilizar este componente se deben enviar las siguientes propiedades:

| Propiedad | Tipo de dato | Opcional | Valor por defecto | |-----------------------|--------------|----------|-------------------| | numeroAsesor | Cadena | No | N/A | | numeroMicrofront | Numérico | No | 0 |

• numeroAsesor: Cadena que contiene el número del asesor a mostrar su fotografía.
• numeroMicrofront: Número del microfront que implementa el componente "FotografiaAsesor". Valores permitidos:
  • 0: Indica que se implementa desde el microfront frontend-desempenio-gerente.
  • 1: Indica que se implementa desde el microfront frontend-desempenio-pantallas-genericas. Nota: Se debe adicionar en microfront la variable "REACT_APP_EYD_URL_FOTOGRAFIA_ASESOR".

PedidosClasificacionVentas

No se necesitan propiedades para poder utilizar este componente.

Etiqueta Uno

Para utilizar este componente se debe envíar la siguiente propiedad:

| Propiedad | Tipo de dato | Opcional | |-----------------|---------------|----------| | leyenda | Cadena | No |

• leyenda: Cadena que contiene el texto que se mostrará dentro de la etiqueta.

Botón Uno

Para utilizar este componente se debe envíar las siguientes propiedades:

| Propiedad | Tipo de dato | Opcional | Valor por defecto | |-----------------|---------------|----------|-------------------| | leyenda | Cadena | No | N/A | | eventoClic | Función | Si | N/A | | inactivo | Boleano | Si | true | | cursor | Boleano | Si | true |

• leyenda: Cadena que contiene el texto que se mostrará dentro del botón.
• eventoClic: Función que se ejecuta al dar clic sobre el botón.
• inactivo: Bandera para mostrar o quitar opacidad.
• cursor: Bandera para mostrar o quitar el cursor y ejecutar o no función eventoClic.

Version mínima de NodeJS

• Node: "16.15.0"

Version mínima de React

• Node: "17.0.0"

Dependencias

• "@red-unica/libreria-funciones-genericas": "1.40.0"
• "@red-unica/libreria-svg": "1.43.5
• "@red-unica/libreria-estilos-desempenio": "1.2.3

License

ISC ©