-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(docs): pagination dx (#4062)
* refactor(docs): pagination dx * refactor(docs): pagination dx
- Loading branch information
Showing
35 changed files
with
446 additions
and
470 deletions.
There are no files selected for viewing
14 changes: 14 additions & 0 deletions
14
apps/docs/content/components/pagination/boundaries.raw.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import {Pagination} from "@nextui-org/react"; | ||
|
|
||
| export default function App() { | ||
| return ( | ||
| <div className="flex flex-col gap-5"> | ||
| <p>1 Boundary (default)</p> | ||
| <Pagination color="secondary" total={10} /> | ||
| <p>2 Boundaries</p> | ||
| <Pagination boundaries={2} color="secondary" total={10} /> | ||
| <p>3 Boundaries</p> | ||
| <Pagination boundaries={3} color="secondary" total={10} /> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import {Pagination} from "@nextui-org/react"; | ||
|
|
||
| export default function App() { | ||
| const colors = ["primary", "secondary", "success", "warning", "danger"]; | ||
|
|
||
| return ( | ||
| <div className="flex flex-wrap gap-4 items-center"> | ||
| {colors.map((color) => ( | ||
| <Pagination key={color} color={color} initialPage={1} total={10} /> | ||
| ))} | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import {Pagination} from "@nextui-org/react"; | ||
|
|
||
| export default function App() { | ||
| return <Pagination isCompact showControls initialPage={1} total={10} />; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
30 changes: 30 additions & 0 deletions
30
apps/docs/content/components/pagination/controlled.raw.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import {Pagination, Button} from "@nextui-org/react"; | ||
|
|
||
| export default function App() { | ||
| const [currentPage, setCurrentPage] = React.useState(1); | ||
|
|
||
| return ( | ||
| <div className="flex flex-col gap-5"> | ||
| <p className="text-small text-default-500">Selected Page: {currentPage}</p> | ||
| <Pagination color="secondary" page={currentPage} total={10} onChange={setCurrentPage} /> | ||
| <div className="flex gap-2"> | ||
| <Button | ||
| color="secondary" | ||
| size="sm" | ||
| variant="flat" | ||
| onPress={() => setCurrentPage((prev) => (prev > 1 ? prev - 1 : prev))} | ||
| > | ||
| Previous | ||
| </Button> | ||
| <Button | ||
| color="secondary" | ||
| size="sm" | ||
| variant="flat" | ||
| onPress={() => setCurrentPage((prev) => (prev < 10 ? prev + 1 : prev))} | ||
| > | ||
| Next | ||
| </Button> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import {Pagination} from "@nextui-org/react"; | ||
|
|
||
| export default function App() { | ||
| return <Pagination showControls initialPage={1} total={10} />; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
82 changes: 82 additions & 0 deletions
82
apps/docs/content/components/pagination/custom-impl.raw.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| import {usePagination, PaginationItemType} from "@nextui-org/react"; | ||
|
|
||
| export const ChevronIcon = (props) => { | ||
| return ( | ||
| <svg | ||
| aria-hidden="true" | ||
| fill="none" | ||
| focusable="false" | ||
| height="1em" | ||
| role="presentation" | ||
| viewBox="0 0 24 24" | ||
| width="1em" | ||
| {...props} | ||
| > | ||
| <path | ||
| d="M15.5 19l-7-7 7-7" | ||
| stroke="currentColor" | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| strokeWidth="1.5" | ||
| /> | ||
| </svg> | ||
| ); | ||
| }; | ||
|
|
||
| export default function App() { | ||
| const {activePage, range, setPage, onNext, onPrevious} = usePagination({ | ||
| total: 6, | ||
| showControls: true, | ||
| siblings: 10, | ||
| boundaries: 10, | ||
| }); | ||
|
|
||
| return ( | ||
| <div className="flex flex-col gap-2"> | ||
| <p>Active page: {activePage}</p> | ||
| <ul className="flex gap-2 items-center"> | ||
| {range.map((page) => { | ||
| if (page === PaginationItemType.NEXT) { | ||
| return ( | ||
| <li key={page} aria-label="next page" className="w-4 h-4"> | ||
| <button className="w-full h-full bg-default-200 rounded-full" onClick={onNext}> | ||
| <ChevronIcon className="rotate-180" /> | ||
| </button> | ||
| </li> | ||
| ); | ||
| } | ||
|
|
||
| if (page === PaginationItemType.PREV) { | ||
| return ( | ||
| <li key={page} aria-label="previous page" className="w-4 h-4"> | ||
| <button className="w-full h-full bg-default-200 rounded-full" onClick={onPrevious}> | ||
| <ChevronIcon /> | ||
| </button> | ||
| </li> | ||
| ); | ||
| } | ||
|
|
||
| if (page === PaginationItemType.DOTS) { | ||
| return ( | ||
| <li key={page} className="w-4 h-4"> | ||
| ... | ||
| </li> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <li key={page} aria-label={`page ${page}`} className="w-4 h-4"> | ||
| <button | ||
| className={cn( | ||
| "w-full h-full bg-default-300 rounded-full", | ||
| activePage === page && "bg-secondary", | ||
| )} | ||
| onClick={() => setPage(page)} | ||
| /> | ||
| </li> | ||
| ); | ||
| })} | ||
| </ul> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.