Lightemerald/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2026-01-18 08:43:57 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: duplications

Browse Source
This commit is contained in:
Moyasee
2025-10-26 19:49:15 +02:00
parent cb3e52de34
commit fee3a4522a
1 changed files with 63 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
src/renderer/src/pages/catalogue/pagination.tsx
View File

@@ -2,6 +2,7 @@ import { Button } from "@renderer/components/button/button";
import { ChevronLeftIcon, ChevronRightIcon } from "@primer/octicons-react";
import { useFormat } from "@renderer/hooks/use-format";
import { useEffect, useRef, useState } from "react";
import type { ChangeEvent, KeyboardEvent } from "react";
import "./pagination.scss";
interface PaginationProps {
@@ -44,6 +45,66 @@ export function Pagination({
startPage = Math.max(1, endPage - visiblePages + 1);
}
const onJumpChange = (e: ChangeEvent<HTMLInputElement>) => {
const val = e.target.value;
if (val === "") {
setJumpValue("");
return;
}
const num = Number(val);
if (Number.isNaN(num)) {
return;
}
if (num < 1) {
setJumpValue("1");
return;
}
if (num > totalPages) {
setJumpValue(String(totalPages));
return;
}
setJumpValue(val);
};
const onJumpKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
if (e.key === "Enter") {
if (jumpValue.trim() === "") return;
const parsed = Number(jumpValue);
if (Number.isNaN(parsed)) return;
const target = Math.max(1, Math.min(totalPages, parsed));
onPageChange(target);
setIsJumpOpen(false);
} else if (e.key === "Escape") {
setIsJumpOpen(false);
}
};
const JumpControl = () =>
isJumpOpen ? (
<input
ref={jumpInputRef}
type="number"
min={1}
max={totalPages}
className="pagination__page-input"
value={jumpValue}
onChange={onJumpChange}
onKeyDown={onJumpKeyDown}
onBlur={() => {
setIsJumpOpen(false);
}}
aria-label="Go to page"
/>
) : (
<Button
theme="outline"
className="pagination__button"
onClick={() => setIsJumpOpen(true)}
>
...
</Button>
);
return (
<div className="pagination">
{startPage > 1 && (
@@ -77,60 +138,7 @@ export function Pagination({
>
{formatNumber(1)}
</Button>
{isJumpOpen ? (
<input
ref={jumpInputRef}
type="number"
min={1}
max={totalPages}
className="pagination__page-input"
value={jumpValue}
onChange={(e) => {
const val = e.target.value;
if (val === "") {
setJumpValue("");
return;
}
const num = Number(val);
if (Number.isNaN(num)) {
return;
}
if (num < 1) {
setJumpValue("1");
return;
}
if (num > totalPages) {
setJumpValue(String(totalPages));
return;
}
setJumpValue(val);
}}
onKeyDown={(e) => {
if (e.key === "Enter") {
if (jumpValue.trim() === "") return;
const parsed = Number(jumpValue);
if (Number.isNaN(parsed)) return;
const target = Math.max(1, Math.min(totalPages, parsed));
onPageChange(target);
setIsJumpOpen(false);
} else if (e.key === "Escape") {
setIsJumpOpen(false);
}
}}
onBlur={() => {
setIsJumpOpen(false);
}}
aria-label="Go to page"
/>
) : (
<Button
theme="outline"
className="pagination__button"
onClick={() => setIsJumpOpen(true)}
>
...
</Button>
)}
<JumpControl />
</>
)}
@@ -150,60 +158,7 @@ export function Pagination({
{!isLastThree && page < totalPages - 1 && (
<>
{isJumpOpen ? (
<input
ref={jumpInputRef}
type="number"
min={1}
max={totalPages}
className="pagination__page-input"
value={jumpValue}
onChange={(e) => {
const val = e.target.value;
if (val === "") {
setJumpValue("");
return;
}
const num = Number(val);
if (Number.isNaN(num)) {
return;
}
if (num < 1) {
setJumpValue("1");
return;
}
if (num > totalPages) {
setJumpValue(String(totalPages));
return;
}
setJumpValue(val);
}}
onKeyDown={(e) => {
if (e.key === "Enter") {
if (jumpValue.trim() === "") return;
const parsed = Number(jumpValue);
if (Number.isNaN(parsed)) return;
const target = Math.max(1, Math.min(totalPages, parsed));
onPageChange(target);
setIsJumpOpen(false);
} else if (e.key === "Escape") {
setIsJumpOpen(false);
}
}}
onBlur={() => {
setIsJumpOpen(false);
}}
aria-label="Go to page"
/>
) : (
<Button
theme="outline"
className="pagination__button"
onClick={() => setIsJumpOpen(true)}
>
...
</Button>
)}
<JumpControl />
<Button
theme="outline"