feat(VirtualList): add proximity and isVisible props
This commit is contained in:
@@ -52,7 +52,7 @@ interface Props {
|
|||||||
*
|
*
|
||||||
* @template T - The type of items in the list
|
* @template T - The type of items in the list
|
||||||
*/
|
*/
|
||||||
children: Snippet<[{ item: T; index: number }]>;
|
children: Snippet<[{ item: T; index: number; isVisible: boolean; proximity: number }]>;
|
||||||
}
|
}
|
||||||
|
|
||||||
let { items, itemHeight = 80, overscan = 5, class: className, onVisibleItemsChange, children }:
|
let { items, itemHeight = 80, overscan = 5, class: className, onVisibleItemsChange, children }:
|
||||||
@@ -76,8 +76,13 @@ $effect(() => {
|
|||||||
class={cn(
|
class={cn(
|
||||||
'relative overflow-auto rounded-md bg-background',
|
'relative overflow-auto rounded-md bg-background',
|
||||||
'h-150 w-full',
|
'h-150 w-full',
|
||||||
|
'scroll-smooth',
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
|
onfocusin={(e => {
|
||||||
|
// Prevent the browser from jumping the scroll when an inner element gets focus
|
||||||
|
e.preventDefault();
|
||||||
|
})}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
style:height="{virtualizer.totalSize}px"
|
style:height="{virtualizer.totalSize}px"
|
||||||
@@ -92,7 +97,12 @@ $effect(() => {
|
|||||||
class="absolute top-0 left-0 w-full"
|
class="absolute top-0 left-0 w-full"
|
||||||
style:transform="translateY({item.start}px)"
|
style:transform="translateY({item.start}px)"
|
||||||
>
|
>
|
||||||
{@render children({ item: items[item.index], index: item.index })}
|
{@render children({
|
||||||
|
item: items[item.index],
|
||||||
|
index: item.index,
|
||||||
|
isVisible: item.isVisible,
|
||||||
|
proximity: item.proximity,
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user