🚧 add modal

This commit is contained in:
yanyongyu
2021-12-31 02:06:20 +08:00
parent 21a958ffd9
commit ab2c73856d
8 changed files with 286 additions and 5 deletions

View File

@ -1,9 +1,10 @@
import React, { useCallback } from "react";
import React, { useCallback, useRef } from "react";
import ReactPaginate from "react-paginate";
import { usePagination } from "react-use-pagination";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useContentWidth } from "../../libs/width";
import styles from "./styles.module.css";
export default function Paginate({
@ -11,6 +12,9 @@ export default function Paginate({
setPage,
currentPage,
}: ReturnType<typeof usePagination>): JSX.Element {
const ref = useRef<HTMLElement>();
const maxWidth = useContentWidth(ref.current?.parentElement ?? undefined);
const onPageChange = useCallback(
(selectedItem: { selected: number }) => {
setPage(selectedItem.selected);
@ -18,8 +22,9 @@ export default function Paginate({
[setPage]
);
// FIXME: responsive width
return (
<nav role="navigation" aria-label="Pagination Navigation">
<nav role="navigation" aria-label="Pagination Navigation" ref={ref}>
<ReactPaginate
pageCount={totalPages}
forcePage={currentPage}