bugfix :: disable cursor when pagination icons are disabled (#2867)

This commit is contained in:
Olaleye Blessing 2022-04-21 11:05:46 +01:00 committed by GitHub
parent dae2cc3379
commit 1ee27bb004
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -47,11 +47,19 @@ export const Pagination = function Pagination({
return (
<div className="pagination">
{!serverSide && (
<button className="btn btn-sm btn-light mx-2" onClick={() => gotoPage(1)}>
<button
className={`btn btn-sm btn-light mx-2 ${pageIndex === 1 ? 'cursor-not-allowed' : ''}`}
onClick={() => gotoPage(1)}
disabled={pageIndex === 1}
>
{'<<'}
</button>
)}
<button className="btn btn-light btn-sm" onClick={() => goToPreviousPage()} disabled={pageIndex === 1}>
<button
className={`btn btn-sm btn-light ${pageIndex === 1 ? 'cursor-not-allowed' : ''}`}
onClick={() => goToPreviousPage()}
disabled={pageIndex === 1}
>
{'<'}
</button>{' '}
<small className="p-1 mx-2">
@ -63,14 +71,18 @@ export const Pagination = function Pagination({
)}
</small>
<button
className="btn btn-light btn-sm"
className={`btn btn-light btn-sm ${!autoCanNextPage && !serverSide ? 'cursor-not-allowed' : ''}`}
onClick={() => goToNextPage()}
disabled={!autoCanNextPage && !serverSide}
>
{'>'}
</button>{' '}
{!serverSide && (
<button className="btn btn-light btn-sm mx-2" onClick={() => gotoPage(pageCount)}>
<button
className={`btn btn-light btn-sm mx-2 ${!autoCanNextPage && !serverSide ? 'cursor-not-allowed' : ''}`}
onClick={() => gotoPage(pageCount)}
disabled={!autoCanNextPage && !serverSide}
>
{'>>'}
</button>
)}