mesa-react / frontend /src /components /ListPagination.jsx
Guilherme Silberfarb Costa
correcoes menores
16b6ec3
import React from 'react'
export default function ListPagination({
totalItems = 0,
currentPage = 1,
pageSize = 50,
onPageChange,
loading = false,
}) {
const total = Math.max(0, Number(totalItems) || 0)
const tamanhoPagina = Math.max(1, Number(pageSize) || 50)
const totalPages = Math.max(1, Math.ceil(total / tamanhoPagina))
const paginaAtual = Math.min(Math.max(1, Number(currentPage) || 1), totalPages)
const startIndex = total ? ((paginaAtual - 1) * tamanhoPagina) + 1 : 0
const endIndex = total ? Math.min(total, paginaAtual * tamanhoPagina) : 0
return (
<div className="logs-pagination">
<span>{total ? `Exibindo ${startIndex}-${endIndex} de ${total}` : 'Exibindo 0 de 0'}</span>
<div className="logs-pagination-actions">
<button
type="button"
className="logs-pagination-icon-btn"
onClick={() => onPageChange?.(1)}
disabled={loading || paginaAtual <= 1}
aria-label="Ir para a primeira página"
title="Primeira página"
>
«
</button>
<button
type="button"
className="logs-pagination-icon-btn"
onClick={() => onPageChange?.(Math.max(1, paginaAtual - 1))}
disabled={loading || paginaAtual <= 1}
aria-label="Ir para a página anterior"
title="Página anterior"
>
</button>
<span>Página {paginaAtual} de {totalPages}</span>
<button
type="button"
className="logs-pagination-icon-btn"
onClick={() => onPageChange?.(Math.min(totalPages, paginaAtual + 1))}
disabled={loading || paginaAtual >= totalPages}
aria-label="Ir para a próxima página"
title="Próxima página"
>
</button>
<button
type="button"
className="logs-pagination-icon-btn"
onClick={() => onPageChange?.(totalPages)}
disabled={loading || paginaAtual >= totalPages}
aria-label="Ir para a última página"
title="Última página"
>
»
</button>
</div>
</div>
)
}