feat(VirtualList): add auto-pagination and correct scrollbar height
- Add 'total' prop to VirtualList for accurate scrollbar height in pagination scenarios - Add 'onNearBottom' callback to trigger auto-loading when user scrolls near end - Update FontVirtualList to forward the new props - Implement auto-pagination in SuggestedFonts component (remove manual Load More button) - Display loading indicator when fetching next batch - Show accurate font count (e.g., "Showing 150 of 1920 fonts") Key changes: - VirtualList now uses total count for height calculation instead of items.length - Auto-fetches next page when user scrolls within 5 items of the end - Only fetches if hasMore is true and not already fetching - Backward compatible: total defaults to items.length when not provided
This commit is contained in:
@@ -10,9 +10,10 @@ import { appliedFontsManager } from '../../model';
|
||||
|
||||
interface Props extends Omit<ComponentProps<typeof VirtualList<T>>, 'onVisibleItemsChange'> {
|
||||
onVisibleItemsChange?: (items: T[]) => void;
|
||||
onNearBottom?: (lastVisibleIndex: number) => void;
|
||||
}
|
||||
|
||||
let { items, children, onVisibleItemsChange, ...rest }: Props = $props();
|
||||
let { items, children, onVisibleItemsChange, onNearBottom, ...rest }: Props = $props();
|
||||
|
||||
function handleInternalVisibleChange(visibleItems: T[]) {
|
||||
// Auto-register fonts with the manager
|
||||
@@ -22,12 +23,18 @@ function handleInternalVisibleChange(visibleItems: T[]) {
|
||||
// Forward the call to any external listener
|
||||
onVisibleItemsChange?.(visibleItems);
|
||||
}
|
||||
|
||||
function handleNearBottom(lastVisibleIndex: number) {
|
||||
// Forward the call to any external listener
|
||||
onNearBottom?.(lastVisibleIndex);
|
||||
}
|
||||
</script>
|
||||
|
||||
<VirtualList
|
||||
{items}
|
||||
{...rest}
|
||||
onVisibleItemsChange={handleInternalVisibleChange}
|
||||
onNearBottom={handleNearBottom}
|
||||
>
|
||||
{#snippet children(scope)}
|
||||
{@render children(scope)}
|
||||
|
||||
Reference in New Issue
Block a user