Botones de desplazamiento horizontal

Implementación de Botones de Desplazamiento Horizontal en una Interfaz de Columnas

En el desarrollo de interfaces de usuario, especialmente cuando trabajamos con columnas dinámicas, es crucial brindar una experiencia fluida y eficiente al usuario. En este artículo, abordaremos un caso específico donde necesitamos gestionar la visualización de columnas en grupos de cuatro, con botones de desplazamiento horizontal que permiten al usuario navegar por diferentes vistas.

Estado Inicial y Variables

Primero, definimos el estado inicial y algunas constantes esenciales:

const [currentView, setCurrentView] = useState(0);
const columnsPerView = 4;
const totalViews = Math.ceil(allBomDocumentIds.length / columnsPerView);

Lógica de Desplazamiento

El objetivo es que, al agregar columnas, siempre se muestren las últimas cuatro columnas disponibles. Esto se logra mediante la siguiente lógica:

• Manipulación Dinámica de Columnas
  • Si tenemos 4 columnas y se agrega una nueva, se deben mostrar las columnas 2, 3, 4, y 5.
  • Similarmente, al aumentar el número de columnas, la lógica se ajusta para que siempre se muestren las últimas 4 columnas.

Navegación Entre Vistas

Implementamos funciones para manejar el desplazamiento anterior y siguiente:

const handleNextView = (): void => {
  setCurrentView((prev) => Math.min(prev + 1, totalViews - 1));
};

const handlePrevView = (): void => {
  setCurrentView((prev) => Math.max(prev - 1, 0));
};

Visualización de Columnas

Cada vez que se agrega una columna, debemos actualizar la vista actual para mostrar las columnas adecuadas. Esto se realiza utilizando useEffect:

useEffect(() => {
  if (allBomDocumentIds.length > columnsPerView) {
      setCurrentView(totalViews - 1);
  }
}, [allBomDocumentIds.length, totalViews]);

Renderizado de Columnas

Finalmente, para renderizar las columnas visibles en la interfaz, utilizamos el siguiente fragmento de código:

allBomDocumentIds
  .slice(currentView * columnsPerView, (currentView + 1) * columnsPerView)
  .map((bomDocumentId, index) => {
    const totalSelectedOptions = getTotalSelectedOptionsForColumn(bomDocumentId);     
    const areAllOptionsSelected = totalSelectedOptions === styleOptions.length;
  });

Conclusión

Con esta estructura, logramos una interfaz que permite añadir columnas y navegar a través de ellas de manera intuitiva. Al garantizar que siempre se muestren las últimas cuatro columnas y al emplear un sistema de paginación por grupos de cuatro, mejoramos la usabilidad de nuestra aplicación. Siguiendo estas directrices, puedes implementar un sistema eficaz de desplazamiento horizontal en tu interfaz de usuario.