wiki-Horizontal-Scroll
Horizontal Scroll
HorizontalScroll es un componente de React que implementa un carrusel horizontal de opciones. Permite desplazarse entre los elementos de la lista mediante flechas y seleccionarlos. El componente es totalmente configurable y soporta renderización personalizada de las opciones.
Referencia de la API
| Prop | Tipo | Descripción |
|---|---|---|
| options | IHorizontalScrollOptionsProps[] (required) | Lista de opciones que se mostrarán en el carrusel. Cada opción debe tener un identificador único y una etiqueta que se muestre al usuario. |
| className | string (optional) | Clase CSS adicional para personalizar el estilo del componente. |
| onChange | Dispatch<SetStateAction<any>> | ((...args: any) => void) (optional) | Función que se ejecuta cuando se selecciona una opción. Recibe como argumento el id de la opción seleccionada. |
| value | number (optional) | Valor actual seleccionado, que corresponde al id de una opción. |
| style | CSSProperties (optional) | Estilos adicionales para el contenedor principal del carrusel. |
| onArrowBtnClicked | Dispatch<SetStateAction<any>> | ((...args: any) => void) (optional) | Función que se ejecuta cuando se hace clic en una de las flechas de desplazamiento. Recibe un objeto con la dirección del movimiento y el desplazamiento calculado. |
| offset | number (optional) | Desplazamiento inicial del carrusel en píxeles. |
| optionRender | (option?: IHorizontalScrollOptionsProps, options?: IHorizontalScrollOptionsProps[]) => JSX.Element (optional) | Función para renderizar una opción personalizada. Recibe la opción y todas las opciones disponibles. |
IHorizontalScrollOptionsProps
| Prop | Tipo | Descripción |
|---|---|---|
| id | `string | number` (required) |
| label | string (required) | Texto que se muestra como etiqueta de la opción. |
| data | any (optional) | Datos adicionales que pueden estar asociados con la opción. |
Comportamiento
El componente permite el desplazamiento horizontal de las opciones con las flechas "BACK" y "NEXT". La selección de una opción se realiza haciendo click sobre ella. El carrusel ajusta su desplazamiento al hacer click en las flechas, evitando que se desplace más allá de los límites de la lista de opciones.
Métodos Internos
| Método | Descripción |
|---|---|
translateXOffsetByChevron(direction: string) | Desplaza el carrusel en función de la dirección ('BACK' o 'NEXT'). |
getCurrentSelectorItem() | Devuelve el ancho de un ítem en el carrusel. |
calculateLeftRightLimit() | Calcula los límites izquierdo y derecho para el desplazamiento del carrusel. |
showRightArrow() | Determina si debe mostrarse la flecha derecha según la cantidad de elementos y el ancho visible. |
Ejemplo de uso
import { HorizontalScroll } from '@auravant/ui-kit';
const options = [
{ id: 1, label: 'Opción 1' },
{ id: 2, label: 'Opción 2' },
{ id: 3, label: 'Opción 3' },
];
export const HorizontalScrollExample = () => {
const handleChange = (selectedId: number) => {
console.log('Opción seleccionada:', selectedId);
};
return (
<HorizontalScroll
options={options}
value={2}
onChange={handleChange}
className="my-custom-class"
style={{ maxWidth: '500px' }}
/>
);
};