Skip to content

Commit 22e78be

Browse files
SupakornNetsuwanSupakornNetsuwan
committed
feat: fix pagination hierarchy.
1 parent 7a7d498 commit 22e78be

3 files changed

Lines changed: 36 additions & 83 deletions

File tree

‎examples/ui-playground/src/app/playground/shadcn/pagination-section.tsx‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -41,14 +41,13 @@ function DefaultPagination() {
4141
{[...Array(3).keys()].map((i) => {
4242
const page = i + 1
4343
return (
44-
<PaginationItem key={page}>
44+
<PaginationItem key={page} isActive={currentPage === page}>
4545
<PaginationLink
4646
href="#"
4747
onClick={(e) => {
4848
e.preventDefault()
4949
setCurrentPage(page)
5050
}}
51-
isActive={currentPage === page}
5251
>
5352
{page}
5453
</PaginationLink>
@@ -86,14 +85,13 @@ function CustomizedPagination() {
8685
const page = i + 1
8786
const isActive = currentPage === page
8887
return (
89-
<PaginationItem key={page}>
88+
<PaginationItem key={page} isActive={currentPage === page}>
9089
<PaginationLink
9190
href="#"
9291
onClick={(e) => {
9392
e.preventDefault()
9493
setCurrentPage(page)
9594
}}
96-
isActive={currentPage === page}
9795
className={cn(
9896
'gap-2',
9997
isActive && 'border-none',
@@ -142,14 +140,13 @@ function FirstLastPagination() {
142140
const page = i + 1
143141

144142
return (
145-
<PaginationItem key={page}>
143+
<PaginationItem key={page} isActive={currentPage === page}>
146144
<PaginationLink
147145
href="#"
148146
onClick={(e) => {
149147
e.preventDefault()
150148
setCurrentPage(page)
151149
}}
152-
isActive={currentPage === page}
153150
>
154151
{page}
155152
</PaginationLink>
@@ -210,14 +207,13 @@ function WithEllipsisPagination() {
210207

211208
{showStartEllipsis && (
212209
<>
213-
<PaginationItem>
210+
<PaginationItem isActive={currentPage === 1}>
214211
<PaginationLink
215212
href="#"
216213
onClick={(e) => {
217214
e.preventDefault()
218215
setCurrentPage(1)
219216
}}
220-
isActive={currentPage === 1}
221217
>
222218
1
223219
</PaginationLink>
@@ -231,14 +227,13 @@ function WithEllipsisPagination() {
231227
)}
232228

233229
{visiblePages.map((page) => (
234-
<PaginationItem key={page}>
230+
<PaginationItem key={page} isActive={currentPage === page}>
235231
<PaginationLink
236232
href="#"
237233
onClick={(e) => {
238234
e.preventDefault()
239235
setCurrentPage(page)
240236
}}
241-
isActive={currentPage === page}
242237
>
243238
{page}
244239
</PaginationLink>
@@ -252,14 +247,13 @@ function WithEllipsisPagination() {
252247
<PaginationEllipsis />
253248
</PaginationLink>
254249
</PaginationItem>
255-
<PaginationItem>
250+
<PaginationItem isActive={currentPage === totalPages}>
256251
<PaginationLink
257252
href="#"
258253
onClick={(e) => {
259254
e.preventDefault()
260255
setCurrentPage(totalPages)
261256
}}
262-
isActive={currentPage === totalPages}
263257
>
264258
{totalPages}
265259
</PaginationLink>

‎examples/ui-playground/src/app/playground/shadcn/table/page.tsx‎

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -500,28 +500,18 @@ function BasicStickyColumnTable() {
500500
<PaginationBarContainer>
501501
<Pagination>
502502
<PaginationContent>
503-
<PaginationItem>
504-
<PaginationPrevious
505-
disabled={firstLage}
506-
onClick={(e) => setPageIndex((prev) => prev - 1)}
507-
/>
503+
<PaginationItem disabled={firstLage}>
504+
<PaginationPrevious onClick={(e) => setPageIndex((prev) => prev - 1)} />
508505
</PaginationItem>
509506
{[...Array(Math.ceil(users.length / pageSize)).keys()].map((index) => (
510-
<PaginationItem key={index}>
511-
<PaginationLink
512-
onClick={() => setPageIndex(index)}
513-
isActive={index === pageIndex}
514-
href="#"
515-
>
507+
<PaginationItem key={index} isActive={index === pageIndex}>
508+
<PaginationLink onClick={() => setPageIndex(index)} href="#">
516509
{index + 1}
517510
</PaginationLink>
518511
</PaginationItem>
519512
))}
520-
<PaginationItem>
521-
<PaginationNext
522-
disabled={lastPage}
523-
onClick={(e) => setPageIndex((prev) => prev + 1)}
524-
/>
513+
<PaginationItem disabled={lastPage}>
514+
<PaginationNext onClick={(e) => setPageIndex((prev) => prev + 1)} />
525515
</PaginationItem>
526516
</PaginationContent>
527517
</Pagination>

‎packages/ui/src/components/primitives/pagination.tsx‎

Lines changed: 24 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -41,83 +41,52 @@ function PaginationContent({ className, ...props }: React.ComponentProps<typeof
4141
)
4242
}
4343

44-
function PaginationItem({ ...props }: React.ComponentProps<typeof Slot>) {
45-
return <Slot data-slot="pagination-item" {...props} />
46-
}
47-
48-
type PaginationLinkProps = {
49-
isActive?: boolean
50-
} & Pick<React.ComponentProps<typeof Button>, 'size' | 'disabled'> &
51-
React.ComponentProps<'a'>
52-
53-
function PaginationLink({
44+
function PaginationItem({
5445
className,
55-
isActive,
46+
variant = 'outline',
5647
size = 'icon',
57-
asChild,
48+
isActive,
5849
...props
59-
}: { asChild?: boolean } & PaginationLinkProps) {
60-
const Comp = asChild ? Slot : 'a'
61-
50+
}: { isActive?: boolean } & React.ComponentProps<typeof Button>) {
6251
return (
63-
<Comp
64-
aria-current={isActive ? 'page' : undefined}
65-
data-slot="pagination-link"
66-
data-active={isActive}
52+
<Slot
53+
{...props}
6754
className={cn(
6855
buttonVariants({
69-
variant: 'outline',
56+
variant,
7057
size,
7158
}),
7259
isActive && 'bg-surface-button-outline-hover',
7360
className
7461
)}
75-
{...props}
62+
data-slot="pagination-item"
63+
aria-current={isActive ? 'page' : undefined}
64+
data-active={isActive}
7665
/>
7766
)
7867
}
7968

80-
function PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {
69+
type PaginationLinkProps = React.ComponentProps<'a'>
70+
71+
function PaginationLink({ asChild, ...props }: { asChild?: boolean } & PaginationLinkProps) {
72+
const Comp = asChild ? Slot : 'a'
73+
74+
return <Comp data-slot="pagination-link" {...props} />
75+
}
76+
77+
function PaginationPrevious(props: React.ComponentProps<typeof PaginationLink>) {
8178
return (
82-
<PaginationLink
83-
asChild
84-
aria-label="Go to previous page"
85-
size="md"
86-
className={cn(
87-
// Strict width since sizing does not enforce the width
88-
'w-18',
89-
{
90-
'w-16': props.size === 'sm',
91-
'w-20': props.size === 'lg',
92-
},
93-
className
94-
)}
95-
{...props}
96-
>
79+
<PaginationLink asChild aria-label="Go to previous page" {...props}>
9780
<button>
9881
<ArrowLeftIcon />
9982
</button>
10083
</PaginationLink>
10184
)
10285
}
10386

104-
function PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {
87+
function PaginationNext(props: React.ComponentProps<typeof PaginationLink>) {
10588
return (
106-
<PaginationLink
107-
asChild
108-
aria-label="Go to next page"
109-
size="md"
110-
className={cn(
111-
// Strict width since sizing does not enforce the width
112-
'w-18',
113-
{
114-
'w-16': props.size === 'sm',
115-
'w-20': props.size === 'lg',
116-
},
117-
className
118-
)}
119-
{...props}
120-
>
89+
<PaginationLink asChild aria-label="Go to next page" {...props}>
12190
<button>
12291
<ArrowRightIcon />
12392
</button>
@@ -128,10 +97,10 @@ function PaginationNext({ className, ...props }: React.ComponentProps<typeof Pag
12897
function PaginationEllipsis({ className, ...props }: React.ComponentProps<'span'>) {
12998
return (
13099
<span
100+
{...props}
101+
className={cn('flex size-18 items-center justify-center', className)}
131102
aria-hidden
132103
data-slot="pagination-ellipsis"
133-
className={cn('flex size-18 items-center justify-center', className)}
134-
{...props}
135104
>
136105
<DotsThreeIcon className="size-8" />
137106
<span className="sr-only">More pages</span>

0 commit comments

Comments
 (0)