ProjectHentai/nonebot2
6
0
Fork 0
mirror of https://github.com/nonebot/nonebot2.git synced 2025-11-04 08:56:42 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

🐛 fix pagination display error

Browse Source
This commit is contained in:
yanyongyu
2022-01-09 20:27:43 +08:00
parent 95415659ce
commit 8674d18543
1 changed files with 12 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
website/src/components/Paginate/index.tsx
View File

@@ -1,5 +1,5 @@
import clsx from "clsx"; import clsx from "clsx";
import React, { useCallback, useRef } from "react"; import React, { useCallback, useState } from "react";
import { usePagination } from "react-use-pagination"; import { usePagination } from "react-use-pagination";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -16,19 +16,22 @@ export default function Paginate({
previousEnabled, previousEnabled,
nextEnabled, nextEnabled,
}: ReturnType<typeof usePagination>): JSX.Element { }: ReturnType<typeof usePagination>): JSX.Element {
const ref = useRef<HTMLElement>(); const [containerElement, setContainerElement] = useState<HTMLElement | null>(
const maxWidth = useContentWidth(ref.current?.parentElement ?? undefined); null
);
const ref = useCallback((element: HTMLElement | null) => {
setContainerElement(element);
}, []);
const maxWidth = useContentWidth(
containerElement?.parentElement ?? undefined
);
const maxLength = Math.min( const maxLength = Math.min(
(maxWidth && Math.floor(maxWidth / 50) - 2) || totalPages, (maxWidth && Math.floor(maxWidth / 50) - 2) || totalPages,
totalPages totalPages
); );
const onPageChange = useCallback(
(selectedItem: { selected: number }) => {
setPage(selectedItem.selected);
},
[setPage]
);
const range = useCallback((start: number, end: number) => { const range = useCallback((start: number, end: number) => {
const result = []; const result = [];
start = start > 0 ? start : 1; start = start > 0 ? start : 1;
@@ -38,7 +41,6 @@ export default function Paginate({
return result; return result;
}, []); }, []);
// FIXME: responsive width
const pages: (React.ReactNode | number)[] = []; const pages: (React.ReactNode | number)[] = [];
const ellipsis = <FontAwesomeIcon icon="ellipsis-h" />; const ellipsis = <FontAwesomeIcon icon="ellipsis-h" />;