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.

Sign up for GitHub

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

Jump to bottom

[@react-ui] Add initialSelectedPage to Pagination Component #815

Merged
merged 12 commits into from
Aug 29, 2023
Merged

[@react-ui] Add initialSelectedPage to Pagination Component #815

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
45fc315
feat(pagination): add initialSelectedPage
KristinaSpasevska Aug 23, 2023
34c4d93
chore(pagination): rename to initialPage
KristinaSpasevska Aug 23, 2023
a6fa5e3
chore(pagination): rename to initialSelectedPage prop
KristinaSpasevska Aug 23, 2023
17d6d8c
feat(pagination): add initialPage validation
KristinaSpasevska Aug 23, 2023
ffb2b0d
chore: add missing return type onclick
timoheddes Aug 24, 2023
8d55412
feat(pagination): add description to component and fields
KristinaSpasevska Aug 24, 2023
659b7a3
chore: run formatter
KristinaSpasevska Aug 24, 2023
0197e06
chore(pagination): change descriptions of fields
KristinaSpasevska Aug 24, 2023
d74fb5e
chore: run formatter
KristinaSpasevska Aug 24, 2023
03eb980
chore(pagination): change description text
KristinaSpasevska Aug 25, 2023
dd5c55c
chore: run formatter
KristinaSpasevska Aug 25, 2023
2adcabf
updating description
eileenmguo Aug 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 19 additions & 3 deletions packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,14 @@ const meta: Meta<
step: 1,
},
},
initialSelectedPage: {
control: {
type: 'number',
min: 1,
max: 20,
step: 1,
},
},
},
};

Expand All @@ -53,9 +61,14 @@ export const Controlled: Story = {
label: 'Label',
timoheddes marked this conversation as resolved.
Show resolved Hide resolved
totalPages: 10,
visiblePageLimit: 3,
initialSelectedPage: 2,
},
render: ({ totalPages, label, visiblePageLimit }) => {
const [page, setPage] = React.useState(1);
render: ({ totalPages, label, visiblePageLimit, initialSelectedPage }) => {
const validInitialSelectedPage =
initialSelectedPage && initialSelectedPage <= totalPages;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should also be greater than 0

const [page, setPage] = React.useState(
validInitialSelectedPage ? initialSelectedPage : 1,
);

return (
<Stack direction="column" gap="$4">
Expand All @@ -65,6 +78,7 @@ export const Controlled: Story = {
currentPage={page}
label={label}
visiblePageLimit={visiblePageLimit}
initialSelectedPage={initialSelectedPage}
onPageChange={setPage}
/>
</Stack>
Expand All @@ -77,13 +91,15 @@ export const Uncontrolled: Story = {
label: 'Label',
totalPages: 10,
visiblePageLimit: 3,
initialSelectedPage: 2,
},
render: ({ totalPages, label, visiblePageLimit }) => {
render: ({ totalPages, label, visiblePageLimit, initialSelectedPage }) => {
return (
<Pagination
totalPages={totalPages}
label={label}
visiblePageLimit={visiblePageLimit}
initialSelectedPage={initialSelectedPage}
onPageChange={() => console.log('Updating Page')}
/>
);
Expand Down
25 changes: 17 additions & 8 deletions packages/libs/react-ui/src/components/Pagination/Pagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export interface IPaginationProps {
currentPage?: number;
label: string;
visiblePageLimit?: number;
initialSelectedPage?: number;
onPageChange: (page: number) => void;
}

Expand All @@ -20,9 +21,15 @@ export const Pagination: FC<IPaginationProps> = ({
currentPage,
label,
visiblePageLimit = 3,
initialSelectedPage,
onPageChange,
}) => {
const [_page, setPage] = useState(1);
const validInitialSelectedPage =
initialSelectedPage && initialSelectedPage <= totalPages;

const [_page, setPage] = useState(
validInitialSelectedPage ? initialSelectedPage : 1,
);
const page = currentPage || _page;
const pages = paginate({
page,
Expand All @@ -32,7 +39,7 @@ export const Pagination: FC<IPaginationProps> = ({
const enablePrevious = page > 1;
const enableNext = page < totalPages;

const onClick = (page: number) => {
const onClick = (page: number): void => {
setPage(page);
onPageChange(page);
};
Expand All @@ -49,12 +56,14 @@ export const Pagination: FC<IPaginationProps> = ({
/>
</li>
{pages.map((pageNum) => (
<PageNum
key={pageNum}
number={pageNum}
current={pageNum === page}
onClick={() => onClick(pageNum)}
/>
<li key={pageNum}>
<PageNum
key={pageNum}
number={pageNum}
current={pageNum === page}
onClick={() => onClick(pageNum)}
/>
</li>
))}
<li>
<PageNav
Expand Down