31 lines
962 B
Svelte
31 lines
962 B
Svelte
|
<script lang="ts" generics="T extends { id: string }">
|
||
|
|
import { VirtualList } from '$shared/ui';
|
||
|
|
import type { ComponentProps } from 'svelte';
|
||
|
|
import { appliedFontsManager } from '../../model/store/appliedFontsStore/appliedFontsStore.svelte';
|
||
|
|
|
||
|
|
interface Props extends Omit<ComponentProps<typeof VirtualList<T>>, 'onVisibleItemsChange'> {
|
||
|
|
onVisibleItemsChange?: (items: T[]) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
let { items, children, onVisibleItemsChange, ...rest }: Props = $props();
|
||
|
|
|
||
|
|
function handleInternalVisibleChange(visibleItems: T[]) {
|
||
|
|
// Auto-register fonts with the manager
|
||
|
|
const slugs = visibleItems.map(item => item.id);
|
||
|
|
appliedFontsManager.registerFonts(slugs);
|
||
|
|
|
||
|
|
// Forward the call to any external listener
|
||
|
|
onVisibleItemsChange?.(visibleItems);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<VirtualList
|
||
|
|
{items}
|
||
|
|
{...rest}
|
||
|
|
onVisibleItemsChange={handleInternalVisibleChange}
|
||
|
|
>
|
||
|
|
{#snippet children(scope)}
|
||
|
|
{@render children(scope)}
|
||
|
|
{/snippet}
|
||
|
|
</VirtualList>
|