Skip to content
Snippets Groups Projects
Unverified Commit 92d2ba39 authored by Samuel Couillard's avatar Samuel Couillard Committed by GitHub
Browse files

Add disabled to Pagination button (#4104)

* Fix Pagination button

* esf

* Improve true/false logic
parent 5f8409b3
No related branches found
No related tags found
No related merge requests found
...@@ -217,6 +217,12 @@ input.search-bar { ...@@ -217,6 +217,12 @@ input.search-bar {
&:focus { &:focus {
box-shadow: 0 0 0 0.25rem var(--brand-color-light); box-shadow: 0 0 0 0.25rem var(--brand-color-light);
} }
&:disabled {
color: gray !important;
pointer-events: none !important;
cursor: not-allowed !important;
}
} }
.btn-brand-outline-color { .btn-brand-outline-color {
......
import React from 'react'; import React from 'react';
import { Pagination as PaginationSemanticUi } from 'semantic-ui-react'; import { Pagination as PaginationSemanticUi } from 'semantic-ui-react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import PaginationButton from './PaginationPrevButton'; import PaginationButton from './PaginationButton';
export default function Pagination({ export default function Pagination({
page, totalPages, setPage, page, totalPages, setPage,
}) { }) {
const handlePage = (e, { activePage }) => setPage(activePage); const handlePage = (e, { activePage }) => setPage(activePage);
const disabledPrevious = () => (page === 1);
const disabledNext = () => (page === totalPages);
if (totalPages > 1) { if (totalPages > 1) {
return ( return (
<div className="semantic-ui-pagination pagination-wrapper"> <div className="semantic-ui-pagination pagination-wrapper">
...@@ -18,12 +22,16 @@ export default function Pagination({ ...@@ -18,12 +22,16 @@ export default function Pagination({
onPageChange={handlePage} onPageChange={handlePage}
firstItem={null} firstItem={null}
lastItem={null} lastItem={null}
prevItem={{ prevItem={
content: <PaginationButton direction="Previous" />, {
disabled: disabledPrevious(),
content: <PaginationButton page={page} totalPages={totalPages} direction="Previous" />,
icon: true, icon: true,
}} }
}
nextItem={{ nextItem={{
content: <PaginationButton direction="Next" />, disabled: disabledNext(),
content: <PaginationButton page={page} totalPages={totalPages} direction="Next" />,
icon: true, icon: true,
}} }}
/> />
......
...@@ -4,10 +4,19 @@ import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline'; ...@@ -4,10 +4,19 @@ import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
export default function PaginationButton({ direction }) { export default function PaginationButton({ direction, page, totalPages }) {
const { t } = useTranslation(); const { t } = useTranslation();
if (direction === 'Previous') { if (direction === 'Previous') {
if (page === 1) {
return (
<Button variant="brand-outline" disabled>
<ArrowLeftIcon className="me-3 hi-s" />
{ t('previous') }
</Button>
);
}
return ( return (
<Button variant="brand-outline"> <Button variant="brand-outline">
<ArrowLeftIcon className="me-3 hi-s text-brand" /> <ArrowLeftIcon className="me-3 hi-s text-brand" />
...@@ -17,6 +26,15 @@ export default function PaginationButton({ direction }) { ...@@ -17,6 +26,15 @@ export default function PaginationButton({ direction }) {
} }
if (direction === 'Next') { if (direction === 'Next') {
if (page === totalPages) {
return (
<Button variant="brand-outline" disabled>
{ t('next') }
<ArrowRightIcon className="ms-3 hi-s" />
</Button>
);
}
return ( return (
<Button variant="brand-outline"> <Button variant="brand-outline">
{ t('next') } { t('next') }
...@@ -28,4 +46,6 @@ export default function PaginationButton({ direction }) { ...@@ -28,4 +46,6 @@ export default function PaginationButton({ direction }) {
PaginationButton.propTypes = { PaginationButton.propTypes = {
direction: PropTypes.string.isRequired, direction: PropTypes.string.isRequired,
page: PropTypes.number.isRequired,
totalPages: PropTypes.number.isRequired,
}; };
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment