Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: make component generic + fix isDisabled #15

Merged
merged 1 commit into from
Oct 21, 2024
Merged

fix: make component generic + fix isDisabled #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 14 additions & 19 deletions src/lib/VirtualListNew.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,15 +30,15 @@
})();
</script>

<script lang="ts">
import { onMount, onDestroy, type Snippet } from 'svelte';
<script lang="ts" generics="ItemType">
import { onDestroy, onMount, type Snippet } from 'svelte';
import {
ALIGNMENT,
SCROLL_BEHAVIOR,
type VLScrollEvent,
type SizingCalculatorFn,
type VLSlotSignature,
type VLRangeEvent
type VLRangeEvent,
type VLScrollEvent,
type VLSlotSignature
} from '.';

import clsx from 'clsx';
Expand Down Expand Up @@ -103,7 +103,7 @@
// calculates the size of a given index
sizingCalculator
}: {
items: any[];
items: ItemType[];

Check failure on line 106 in src/lib/VirtualListNew.svelte

View workflow job for this annotation

GitHub Actions / tests 

'ItemType' is not defined

isDisabled?: boolean;
isHorizontal?: boolean;
Expand All @@ -122,7 +122,7 @@
// snippets
header?: Snippet;
// size is passed when a sizingCalculator is defined
vl_slot: Snippet<[VLSlotSignature]>;
vl_slot: Snippet<[VLSlotSignature<ItemType>]>;

Check failure on line 125 in src/lib/VirtualListNew.svelte

View workflow job for this annotation

GitHub Actions / tests 

'ItemType' is not defined
footer?: Snippet;

// events
Expand Down Expand Up @@ -201,11 +201,11 @@
return p;
});

const visibleItemsInfo: VLSlotSignature[] = $derived.by(() => {
const visibleItemsInfo: VLSlotSignature<ItemType>[] = $derived.by(() => {

Check failure on line 204 in src/lib/VirtualListNew.svelte

View workflow job for this annotation

GitHub Actions / tests 

'ItemType' is not defined
if (!items || isDisabled) {
return [];
}
const r: VLSlotSignature[] = [];
const r: VLSlotSignature<ItemType>[] = [];

Check failure on line 208 in src/lib/VirtualListNew.svelte

View workflow job for this annotation

GitHub Actions / tests 

'ItemType' is not defined
for (let index = startIdx; index <= end2; index++) {
const item = items[index];
if (item) {
Expand Down Expand Up @@ -342,12 +342,7 @@
function onscroll(event: Event): void {
const offset = getScroll(listContainer);

if (
event.target !== listContainer ||
offset < 0 ||
curState.offset === offset
)
return;
if (event.target !== listContainer || offset < 0 || curState.offset === offset) return;

curState = {
offset,
Expand Down Expand Up @@ -656,8 +651,8 @@
{/if}
<tbody>
{#if isDisabled}
{#each items as item}
{@render vl_slot(item)}
{#each items as item, index}
{@render vl_slot({ index, item })}
{/each}
{:else}
{#each visibleItemsInfo as item}
Expand All @@ -675,8 +670,8 @@
{@render header()}
{/if}
{#if isDisabled}
{#each items as item}
{@render vl_slot(item)}
{#each items as item, index}
{@render vl_slot({ index, item })}
{/each}
{:else}
{#each visibleItemsInfo as item}
Expand Down
4 changes: 2 additions & 2 deletions src/lib/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ export { default as VirtualList } from './VirtualListNew.svelte';
export type SizingCalculatorFn = (index: number, item: unknown) => number;

// used by the vl_slot() snippet
export interface VLSlotSignature {
export interface VLSlotSignature<ItemType> {
// The row's index being rendered, from the original dataset
// The index is a string if the IDs are processed via the getKey() function
index: number | string;

// the item being rendered
item: any;
item: ItemType;

// only present if there a custom sizing calculator configured, holds calculated size in pixels
size?: number;
Expand Down
Loading