Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(bridge-ui): correct display of forward arrow and handling of invalid pagination input #16485

Merged
merged 6 commits into from
Mar 21, 2024
34 changes: 19 additions & 15 deletions packages/bridge-ui/src/components/Paginator/Paginator.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -7,31 +7,38 @@
export let totalItems = 0;
export let pageSize = 5;

$: totalPages = Math.ceil(totalItems / pageSize);
$: totalPages = Math.max(1, Math.ceil(totalItems / pageSize));

const dispatch = createEventDispatcher<{ pageChange: number }>();

function goToPage(page: number) {
currentPage = page;
currentPage = Math.min(totalPages, Math.max(1, page));
dispatch('pageChange', page);
}

function handleKeydown(event: KeyboardEvent) {
if (event.key === 'Enter') {
goToPage(currentPage);
const nextPage = parseInt((event.target as HTMLInputElement).value, 10);

// Check if input is within the valid range, otherwise do nothing
if (nextPage > 0 && nextPage <= totalPages) {
goToPage(nextPage);
}
}
}

const btnClass = 'btn btn-xs btn-ghost';

// Computed flags for first and last page
$: isFirstPage = currentPage === 1;
$: isLastPage = currentPage === totalPages;
</script>

{#if totalPages > 1}
<!--
We only want to show the buttons if we actually need them.
If we can fit all the items in one page, there is no need.
-->
<!-- Show pagination buttons if needed -->
<div class="pagination btn-group pt-4">
{#if currentPage !== 1}
{#if !isFirstPage}
<!-- Button to go to previous page -->
<button class={btnClass} on:click={() => goToPage(currentPage - 1)}> <Icon type="chevron-left" /></button>
{/if}
Page
Expand All @@ -44,9 +51,10 @@
on:keydown={handleKeydown}
on:blur={() => goToPage(currentPage)} />
of {totalPages}
<button
class={btnClass + (currentPage === totalPages ? ' invisible' : '')}
on:click={() => goToPage(currentPage + 1)}><Icon type="chevron-right" /></button>
<!-- Button to go to next page -->
{#if !isLastPage}
<button class={btnClass} on:click={() => goToPage(currentPage + 1)}><Icon type="chevron-right" /></button>
{/if}
</div>
{/if}

Expand All @@ -58,8 +66,4 @@
display: flex;
align-items: center;
}
.invisible {
opacity: 0;
pointer-events: none;
}
</style>
Loading