Skip to content

Commit b864c7a

Browse files
tractorsstractorss
committed
chore: pagination-standard-and-compact-migration
1 parent 9cce1a7 commit b864c7a

File tree

2 files changed

+114
-178
lines changed

2 files changed

+114
-178
lines changed

‎src/lib/pagination/compact.tsx‎

Lines changed: 48 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,29 @@
11
import React, { ReactNode } from "react";
2-
import styled from "styled-components";
32
import usePagination from "../../hooks/pagination/use-pagination";
43
import Arrow from "../../assets/svgs/arrows/circle-left.svg";
54
import SolidErrorIcon from "../../assets/svgs/status-icons/solid-error.svg";
6-
import { borderBox, button, small, svg } from "../../styles/common-style";
5+
import { cn } from "../../utils";
6+
import { Button, type ButtonProps } from "react-aria-components";
7+
import clsx from "clsx";
78

8-
const Wrapper = styled.div`
9-
${borderBox}
10-
display: flex;
11-
align-items: center;
12-
justify-content: end;
13-
`;
14-
15-
const StyledSVG = styled.svg``;
16-
17-
const ArrowButton = styled.button`
18-
${button}
19-
height: 24px;
20-
width: 24px;
21-
background: none;
22-
padding: 0;
23-
border-radius: 50%;
24-
25-
& ${StyledSVG} {
26-
${svg}
27-
height: 24px;
28-
width: 24px;
29-
fill: ${(props) =>
30-
props.disabled
31-
? props.theme.klerosUIComponentsStroke
32-
: props.theme.klerosUIComponentsPrimaryBlue};
33-
transition: fill ease
34-
${({ theme }) => theme.klerosUIComponentsTransitionSpeed};
35-
}
36-
37-
:hover:enabled {
38-
& ${StyledSVG} {
39-
fill: ${({ theme }) => theme.klerosUIComponentsSecondaryBlue};
40-
}
41-
}
42-
`;
43-
44-
const StyledLabel = styled.small`
45-
${small}
46-
color: ${(props) => props.theme.klerosUIComponentsPrimaryText};
47-
`;
48-
49-
const LeftArrow = styled(ArrowButton)`
50-
margin-left: 16px;
51-
`;
52-
53-
const RightArrow = styled(ArrowButton)`
54-
margin-left: 8px;
55-
56-
& ${StyledSVG} {
57-
transform: rotate(180deg);
58-
}
59-
`;
60-
61-
const CloseButton = styled(ArrowButton)`
62-
margin-left: 8px;
63-
64-
& ${StyledSVG} {
65-
fill: ${(props) => props.theme.klerosUIComponentsPrimaryBlue};
66-
}
67-
68-
:hover:enabled {
69-
& ${StyledSVG} {
70-
fill: ${({ theme }) => theme.klerosUIComponentsSecondaryBlue};
71-
}
72-
}
73-
`;
9+
const ArrowButton: React.FC<ButtonProps> = ({ className, ...props }) => {
10+
return (
11+
<Button
12+
className={cn(
13+
"h-6 w-6 rounded-full bg-none hover:enabled:cursor-pointer hover:disabled:cursor-default",
14+
"[&>svg]:ease-ease [&>svg]:h-6 [&>svg]:w-6 [&>svg]:transition-[fill]",
15+
":hover:enabled:[&>svg]:fill-klerosUIComponentsSecondaryBlue",
16+
props.isDisabled
17+
? ["[&>svg]:fill-klerosUIComponentsStroke"]
18+
: ["[&>svg]:fill-klerosUIComponentsPrimaryBlue"],
19+
className,
20+
)}
21+
{...props}
22+
>
23+
{props.children}
24+
</Button>
25+
);
26+
};
7427

7528
interface CompactPaginationProps {
7629
currentPage: number;
@@ -93,21 +46,36 @@ const CompactPagination: React.FC<CompactPaginationProps> = ({
9346
usePagination(currentPage, numPages, callback, onCloseOnLastPage);
9447

9548
return (
96-
<Wrapper {...{ className }}>
97-
<StyledLabel>{label}</StyledLabel>
98-
<LeftArrow disabled={minPageReached} onClick={decrementPage}>
99-
<Arrow className={StyledSVG.styledComponentId} />
100-
</LeftArrow>
49+
<div className={cn("box-border flex items-center justify-end", className)}>
50+
<small className="text-klerosUIComponentsPrimaryText text-sm">
51+
{label}
52+
</small>
53+
<ArrowButton
54+
className="ml-4"
55+
isDisabled={minPageReached}
56+
onPress={decrementPage}
57+
>
58+
<Arrow />
59+
</ArrowButton>
10160
{currentPage === numPages && onCloseOnLastPage ? (
102-
<CloseButton onClick={onCloseOnLastPage}>
103-
<SolidErrorIcon className={StyledSVG.styledComponentId} />
104-
</CloseButton>
61+
<ArrowButton className="ml-2" onPress={onCloseOnLastPage}>
62+
<SolidErrorIcon
63+
className={clsx(
64+
"fill-klerosUIComponentsPrimaryBlue",
65+
"hover:enabled:fill-klerosUIComponentsSecondaryBlue",
66+
)}
67+
/>
68+
</ArrowButton>
10569
) : (
106-
<RightArrow disabled={maxPageReached} onClick={incrementPage}>
107-
<Arrow className={StyledSVG.styledComponentId} />
108-
</RightArrow>
70+
<ArrowButton
71+
className={"ml-2"}
72+
isDisabled={maxPageReached}
73+
onPress={incrementPage}
74+
>
75+
<Arrow className="rotate-180" />
76+
</ArrowButton>
10977
)}
110-
</Wrapper>
78+
</div>
11179
);
11280
};
11381

‎src/lib/pagination/standard.tsx‎

Lines changed: 66 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,39 @@
11
import React from "react";
2-
import styled from "styled-components";
32
import usePagination from "../../hooks/pagination/use-pagination";
43
import Arrow from "../../assets/svgs/arrows/light-left.svg";
5-
import { borderBox, button, svg } from "../../styles/common-style";
6-
7-
const Wrapper = styled.div`
8-
${borderBox}
9-
display: flex;
10-
align-items: center;
11-
justify-content: center;
12-
`;
13-
14-
const PageButton = styled.button<{ selected?: boolean }>`
15-
${button}
16-
height: 32px;
17-
width: 32px;
18-
margin: 4px;
19-
background: ${(props) =>
20-
props.selected
21-
? props.theme.klerosUIComponentsLightBlue
22-
: props.theme.klerosUIComponentsWhiteBackground};
23-
border: 1px solid
24-
${(props) =>
25-
props.selected
26-
? props.theme.klerosUIComponentsPrimaryBlue
27-
: props.theme.klerosUIComponentsStroke};
28-
border-radius: 3px;
29-
display: flex;
30-
align-items: center;
31-
justify-content: center;
32-
33-
font-size: 14px;
34-
color: ${(props) =>
35-
props.selected
36-
? props.theme.klerosUIComponentsPrimaryBlue
37-
: props.theme.klerosUIComponentsPrimaryText};
38-
39-
:hover:enabled {
40-
background: ${(props) =>
41-
props.selected
42-
? props.theme.klerosUIComponentsWhiteBackground
43-
: props.theme.klerosUIComponentsLightBlue};
44-
border: 1px solid
45-
${(props) =>
46-
props.selected
47-
? props.theme.klerosUIComponentsPrimaryBlue
48-
: props.theme.klerosUIComponentsSecondaryBlue};
49-
color: ${(props) =>
50-
props.selected
51-
? props.theme.klerosUIComponentsPrimaryBlue
52-
: props.theme.klerosUIComponentsSecondaryBlue};
53-
}
54-
55-
:hover:disabled {
56-
cursor: default;
57-
}
58-
`;
59-
60-
const StyledArrow = styled.svg``;
61-
62-
const ArrowButton = styled(PageButton)`
63-
& ${StyledArrow} {
64-
${svg}
65-
fill: ${(props) =>
66-
props.disabled
67-
? props.theme.klerosUIComponentsStroke
68-
: props.theme.klerosUIComponentsPrimaryText};
69-
transition: fill ease
70-
${({ theme }) => theme.klerosUIComponentsTransitionSpeed};
71-
}
72-
73-
:hover:enabled {
74-
& ${StyledArrow} {
75-
fill: ${({ theme }) => theme.klerosUIComponentsSecondaryBlue};
76-
}
77-
}
78-
`;
79-
80-
const LeftArrow = styled(ArrowButton)`
81-
& ${StyledArrow} {
82-
padding-right: 1px;
83-
}
84-
`;
85-
86-
const RightArrow = styled(ArrowButton)`
87-
& ${StyledArrow} {
88-
padding-left: 1px;
89-
transform: rotate(180deg);
90-
}
91-
`;
4+
import { cn } from "../../utils";
5+
import { Button, type ButtonProps } from "react-aria-components";
6+
import clsx from "clsx";
927

8+
const PageButton: React.FC<ButtonProps & { selected?: boolean }> = ({
9+
children,
10+
selected,
11+
className,
12+
...props
13+
}) => (
14+
<Button
15+
{...props}
16+
className={cn(
17+
"rounded-base m-1 h-8 w-8 border",
18+
"flex items-center justify-center text-sm",
19+
"hover:cursor-pointer hover:disabled:cursor-default",
20+
selected
21+
? [
22+
"bg-klerosUIComponentsLightBlue hover:enabled:bg-klerosUIComponentsWhiteBackground",
23+
"border-klerosUIComponentsPrimaryBlue hover:enabled:border-klerosUIComponentsPrimaryBlue",
24+
"text-klerosUIComponentsPrimaryBlue hover:enabled:text-klerosUIComponentsPrimaryBlue",
25+
]
26+
: [
27+
"bg-klerosUIComponentsWhiteBackground hover:enabled:bg-klerosUIComponentsLightBlue",
28+
"border-klerosUIComponentsStroke hover:enabled:border-klerosUIComponentsSecondaryBlue",
29+
"text-klerosUIComponentsPrimaryText hover:enabled:text-klerosUIComponentsSecondaryBlue",
30+
],
31+
className,
32+
)}
33+
>
34+
{children}
35+
</Button>
36+
);
9337
interface StandardPaginationProps {
9438
currentPage: number;
9539
numPages: number;
@@ -119,25 +63,49 @@ const StandardPagination: React.FC<StandardPaginationProps> = ({
11963
] = usePagination(currentPage, numPages, callback);
12064

12165
return (
122-
<Wrapper {...{ className }}>
123-
<LeftArrow disabled={minPageReached} onClick={decrementPage}>
124-
<Arrow className={StyledArrow.styledComponentId} />
125-
</LeftArrow>
66+
<div
67+
className={cn("box-border flex items-center justify-center", className)}
68+
>
69+
<PageButton
70+
isDisabled={minPageReached}
71+
onPress={decrementPage}
72+
className="hover:enabled:[&>svg]:fill-klerosUIComponentsSecondaryBlue"
73+
>
74+
<Arrow
75+
className={clsx(
76+
"ease-ease pr-0.25 transition-[fill]",
77+
minPageReached
78+
? ["fill-klerosUIComponentsStroke"]
79+
: ["fill-klerosUIComponentsPrimaryText"],
80+
)}
81+
/>
82+
</PageButton>
12683
{!hideNumbers &&
12784
getPageRange().map((i) => (
12885
<PageButton
12986
key={i}
13087
selected={currentPage === i}
131-
onClick={() => goToPage(i)}
132-
disabled={disableNumbers}
88+
onPress={() => goToPage(i)}
89+
isDisabled={disableNumbers}
13390
>
13491
{i}
13592
</PageButton>
13693
))}
137-
<RightArrow disabled={maxPageReached} onClick={incrementPage}>
138-
<Arrow className={StyledArrow.styledComponentId} />
139-
</RightArrow>
140-
</Wrapper>
94+
<PageButton
95+
isDisabled={maxPageReached}
96+
onPress={incrementPage}
97+
className="hover:enabled:[&>svg]:fill-klerosUIComponentsSecondaryBlue"
98+
>
99+
<Arrow
100+
className={cn(
101+
"ease-ease rotate-180 pl-0.25 transition-[fill]",
102+
maxPageReached
103+
? ["fill-klerosUIComponentsStroke"]
104+
: ["fill-klerosUIComponentsPrimaryText"],
105+
)}
106+
/>
107+
</PageButton>
108+
</div>
141109
);
142110
};
143111

0 commit comments

Comments
 (0)