wiki-List

Ver en Git

---

List

Componente List

El componente List es una lista dinámica y altamente configurable que soporta carga perezosa (lazy loading) tanto en el cliente como en el servidor. También admite opciones de estilo personalizadas y tamaños predefinidos.

Referencia de la API

Propiedades Comunes

Propiedad	Tipo	Descripción	Valor por defecto
children	ReactNode o ReactNode[]	Elementos secundarios (hijos) de la lista.	[]
style	CSSProperties	Estilos adicionales aplicados al contenedor de la lista.	-
className	string	Clase CSS personalizada para el contenedor de la lista.	-
id	string	ID único para la lista.	-
size	'small' o 'normal' o 'big'	Tamaño de la lista.	'normal'
bordered	boolean	Indica si la lista debe tener bordes.	false
aura-test	string	Identificador para pruebas automatizadas.	'list'
customLoading	ReactNode	Componente personalizado para indicar el estado de carga.	-
virtualScrolling	undefined o false	Placeholder para virtual scrolling (pendiente de implementación).	undefined

Propiedades para Lazy Loading en el Servidor

Propiedad	Tipo	Descripción	Valor por defecto
lazyLoading	'server'	Indica que se utiliza lazy loading desde el servidor.	-
fetchStateCallback	Dispatch<SetStateAction<any[]>> o (el: any) => void	Función para actualizar el estado con los datos cargados.	-
url	string	URL del endpoint para cargar los datos.	-
baseUrl	string	Base URL opcional para concatenar con url.	-
finished	boolean	Indica si se han cargado todos los datos.	-
dataFetchOptions	RequestInit	Opciones de configuración para la solicitud de datos (fetch).	-

Propiedades para Lazy Loading Normal o en el Cliente

Propiedad	Tipo	Descripción	Valor por defecto
lazyLoading	undefined o 'client'	Indica si se utiliza lazy loading en el cliente o no se utiliza.	undefined

Ejemplo de Uso

Lista Normal

import { List, ListItem } from '@auravant/ui-kit';

export const ListExample = () => (
 <List size="normal" bordered>
 <ListItem>Item 1</ListItem>
 <ListItem>Item 2</ListItem>
 <ListItem>Item 3</ListItem>
 </List>
);

Lista con Lazy Loading desde el Servidor

import { useState } from 'react';
import { List, ListItem } from '@auravant/ui-kit';

const data = [
 { name: 'John Doe' },
 { name: 'John Smith' },
 { name: 'John Johnson' },
];

export const ServerLazyLoadingListExample = () => {
 const [items, setItems] = useState(data);
 const [finished, setFinished] = useState(false);

 return (
 <List
 lazyLoading="server"
 fetchStateCallback={setItems}
 url="https://api.example.com/data"
 finished={finished}
 size="big"
 bordered
 >
 {items.map((item, index) => (
 <ListItem key={index}>{item.name}</ListItem>
 ))}
 </List>
 );
};

Notas

• El componente soporta lazyLoading en el cliente y servidor. La implementación de virtual scrolling está pendiente.
• Si se especifica customLoading, este componente será renderizado en lugar del cargador por defecto.
• Los tamaños disponibles (small, normal, big) afectan las clases CSS aplicadas.
• Para listas grandes con datos dinámicos, se recomienda utilizar lazyLoading para optimizar el rendimiento.