dequelabs / dequelabs/cauldron

Pagination: Overload statusLabel to be used as a formatter for better i18n support

Open
#733 0 comments 0 reactions 1 assignee Claimed by @longmatthewh View on GitHub
enhancement internationalization
Dominant language
TypeScript
Stars
127
Forks
31
Avg merge
2d 12h
Merged PRs (30d)
8

Description

In support of i18n `Pagination` has a handful of overrides for various phrases/labels. However, the status text IMO is a bit unique. I’m referring to the “Showing 1 to 10 of 15” text, which can be overridden by the `statusLabel` prop. There are 3 pieces of data this text uses:
- `totalItems` - provided
- `itemStart` - calculated
- `itemEnd` - calculated

Because, both `itemStart` and `itemEnd` are calculated, if I wanted to internationalize the status text, I’d have to duplicate these calculations outside of `Pagination`. To avoid this…

**I’d like to propose** overloading the `statusLabel` property on `Pagination` where it can either be a `ReactNode` or a function that gets passed `totalItems`, `itemStart`, and `itemEnd` and returns a `ReactNode`.

It is important to note that using the `usePagination` exposes this data to me via `pageStatus.pageStart` and `pageStatus.pageEnd`, but if I’m not using the hook, I don’t have access to the calculated data, and the change I’m proposing is still useful.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.