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 (
|
||||
(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(
|
||||
1,
|
||||
Number(e.target.value),
|
||||
Number(e.currentTarget.value),
|
||||
MediaListSort.UpdatedTimeDesc,
|
||||
).then((result) => {
|
||||
animePerPage.set(Number(e.target.value));
|
||||
animePerPage.set(Number(e.currentTarget.value));
|
||||
watchListPage.set(1);
|
||||
aniListWatchlist.set(result);
|
||||
aniListLoggedIn.set(true);
|
||||
@@ -82,7 +86,7 @@
|
||||
<li>
|
||||
<button
|
||||
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
|
||||
>
|
||||
</li>
|
||||
|
||||
Reference in New Issue
Block a user