Fix TypeScript type safety in Pagination event handlers
- Add proper type annotations to changePage function parameter using KeyboardEvent with HTMLInputElement currentTarget - Add proper type annotations to changeCountPerPage function parameter using Event with HTMLSelectElement currentTarget - Replace all e.target references with e.currentTarget to access properly typed DOM elements - Add hover state styling to active page button for better UI feedback This change resolves TypeScript errors where EventTarget type didn't have access to element-specific properties like 'value'. Using currentTarget instead of target provides the correct type since currentTarget refers to the element that has the event listener attached, ensuring type-safe access to input and select element properties.
This commit is contained in:
@@ -32,21 +32,25 @@
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function changePage(e): void {
|
function changePage(
|
||||||
|
e: KeyboardEvent & { currentTarget: HTMLInputElement },
|
||||||
|
): void {
|
||||||
if (
|
if (
|
||||||
(e.key === "Enter" || e.key === "Tab") &&
|
(e.key === "Enter" || e.key === "Tab") &&
|
||||||
Number(e.target.value) !== page
|
Number(e.currentTarget.value) !== page
|
||||||
)
|
)
|
||||||
ChangeWatchListPage(Number(e.target.value));
|
ChangeWatchListPage(Number(e.currentTarget.value));
|
||||||
}
|
}
|
||||||
|
|
||||||
function changeCountPerPage(e): void {
|
function changeCountPerPage(
|
||||||
|
e: Event & { currentTarget: HTMLSelectElement },
|
||||||
|
): void {
|
||||||
GetAniListUserWatchingList(
|
GetAniListUserWatchingList(
|
||||||
1,
|
1,
|
||||||
Number(e.target.value),
|
Number(e.currentTarget.value),
|
||||||
MediaListSort.UpdatedTimeDesc,
|
MediaListSort.UpdatedTimeDesc,
|
||||||
).then((result) => {
|
).then((result) => {
|
||||||
animePerPage.set(Number(e.target.value));
|
animePerPage.set(Number(e.currentTarget.value));
|
||||||
watchListPage.set(1);
|
watchListPage.set(1);
|
||||||
aniListWatchlist.set(result);
|
aniListWatchlist.set(result);
|
||||||
aniListLoggedIn.set(true);
|
aniListLoggedIn.set(true);
|
||||||
@@ -82,7 +86,7 @@
|
|||||||
<li>
|
<li>
|
||||||
<button
|
<button
|
||||||
on:click={() => ChangeWatchListPage(i + 1)}
|
on:click={() => ChangeWatchListPage(i + 1)}
|
||||||
class="flex items-center justify-center px-4 h-10 leading-tight border bg-gray-100 border-gray-700 bg-gray-700 text-white"
|
class="flex items-center justify-center px-4 h-10 leading-tight border hover:bg-gray-100 border-gray-700 bg-gray-700 text-white"
|
||||||
>{i + 1}</button
|
>{i + 1}</button
|
||||||
>
|
>
|
||||||
</li>
|
</li>
|
||||||
|
|||||||
Reference in New Issue
Block a user