Skip to content

Commit e4eace6

Browse files
orefaloorefalo
authored
Merge pull request #35 from tzezar/master
fix: enhance typings, update examples #32
2 parents e540d1f + beae202 commit e4eace6

File tree

4 files changed

+64
-52
lines changed

4 files changed

+64
-52
lines changed

‎src/lib/VirtualListNew.svelte‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,8 @@
4242
type SizingCalculatorFn,
4343
type VLRangeEvent,
4444
type VLScrollEvent,
45-
type VLSlotSignature
45+
type VLSlotSignature,
46+
type VariantScrollConfig
4647
} from '.';
4748
4849
import clsx from 'clsx';
@@ -139,7 +140,7 @@
139140
style?: string;
140141
141142
sizingCalculator?: SizingCalculatorFn;
142-
} = $props();
143+
} & VariantScrollConfig = $props();
143144
144145
// ======== VARIABLES ========
145146

‎src/lib/index.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,3 +42,24 @@ export enum ALIGNMENT {
4242
CENTER = 'center',
4343
END = 'end'
4444
}
45+
46+
47+
export type VariantScrollToIndex = {
48+
scrollToIndex: number;
49+
scrollToOffset?: undefined;
50+
};
51+
52+
export type VariantScrollToOffset = {
53+
scrollToIndex?: undefined;
54+
scrollToOffset: number;
55+
};
56+
57+
export type VariantScrollPositionUndefined = {
58+
scrollToIndex?: undefined;
59+
scrollToOffset?: undefined;
60+
};
61+
62+
export type VariantScrollConfig =
63+
| VariantScrollToIndex
64+
| VariantScrollToOffset
65+
| VariantScrollPositionUndefined;

‎src/routes/examples/events/code.svelte‎

Lines changed: 17 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,9 @@
11
<script lang="ts">
2-
import { ALIGNMENT, SCROLL_BEHAVIOR, type VLSlotSignature } from '$lib';
2+
import { ALIGNMENT, SCROLL_BEHAVIOR, type VariantScrollConfig, type VLSlotSignature } from '$lib';
33
import { VirtualList } from 'svelte-virtuallists';
44
55
const myModel = $state(new Array(10000));
66
7-
// on the UI
8-
let theScrollToIndex: number | undefined = $state();
9-
let theScrollOffet: number | undefined = $state();
10-
11-
// on the component
12-
let scrollToIndex: number | undefined = $state();
13-
let scrollToOffet: number | undefined = $state();
14-
157
let scrollToAlignment: ALIGNMENT = $state(ALIGNMENT.AUTO);
168
let scrollToBehaviour: SCROLL_BEHAVIOR = $state(SCROLL_BEHAVIOR.SMOOTH);
179
@@ -24,18 +16,17 @@
2416
console.log(prefix + JSON.stringify(event));
2517
}
2618
27-
// The two effects below are an elegant way to ensure only one fo the value is defined
28-
$effect(() => {
29-
// scrollToIndex and scrollOffset shall not be used together.
30-
scrollToIndex = undefined;
31-
scrollToOffet = theScrollOffet;
32-
});
19+
let scrollToProps: VariantScrollConfig = $state({});
3320
34-
$effect(() => {
35-
// scrollToIndex and scrollOffset shall not be used together.
36-
scrollToOffet = undefined;
37-
scrollToIndex = theScrollToIndex;
38-
});
21+
function updateScrollToProps(key: 'scrollToIndex' | 'scrollToOffset', value: number | undefined) {
22+
if (key === 'scrollToIndex') {
23+
scrollToProps.scrollToIndex = value;
24+
scrollToProps.scrollToOffset = undefined;
25+
} else if (key === 'scrollToOffset') {
26+
scrollToProps.scrollToOffset = value;
27+
scrollToProps.scrollToIndex = undefined;
28+
}
29+
}
3930
4031
function randomizeSize() {
4132
randSizes = new Array(myModel.length);
@@ -74,7 +65,8 @@
7465
type="number"
7566
placeholder="pick an index..."
7667
class="input"
77-
bind:value={theScrollToIndex} />
68+
value={scrollToProps.scrollToIndex}
69+
oninput={e => updateScrollToProps('scrollToIndex', Number(e.currentTarget.value))} />
7870
</span>
7971
</div>
8072
<div class="select">
@@ -85,7 +77,8 @@
8577
type="number"
8678
placeholder="pick an offset..."
8779
class="input"
88-
bind:value={theScrollOffet} />
80+
value={scrollToProps.scrollToOffset}
81+
oninput={e => updateScrollToProps('scrollToOffset', Number(e.currentTarget.value))} />
8982
</span>
9083
</div>
9184
<div class="select">
@@ -114,8 +107,7 @@
114107
<VirtualList
115108
items={myModel}
116109
style="height:500px"
117-
{scrollToIndex}
118-
scrollToOffset={scrollToOffet}
110+
{...scrollToProps}
119111
{scrollToAlignment}
120112
{scrollToBehaviour}
121113
sizingCalculator={szCalculator}
@@ -124,7 +116,7 @@
124116
{#snippet vl_slot({ index, item, size }: VLSlotSignature<(typeof myModel)[0]>)}
125117
<div
126118
style="border: 1px solid rgb(204, 204, 204); line-height: {size}px;"
127-
class:highlighted={index === scrollToIndex}>
119+
class:highlighted={index === scrollToProps.scrollToIndex}>
128120
#{index}
129121
{item.text}
130122
</div>

‎src/routes/examples/positioning/code.svelte‎

Lines changed: 23 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
<script lang="ts">
2-
import { ALIGNMENT, SCROLL_BEHAVIOR, type VLRangeEvent, type VLSlotSignature } from '$lib';
2+
import {
3+
ALIGNMENT,
4+
SCROLL_BEHAVIOR,
5+
type VariantScrollConfig,
6+
type VLRangeEvent,
7+
type VLSlotSignature
8+
} from '$lib';
39
import { VirtualList } from 'svelte-virtuallists';
410
511
const myModel = $state(new Array(10000));
@@ -8,14 +14,6 @@
814
let start = $state(0);
915
let end = $state(0);
1016
11-
// on the UI
12-
let theScrollToIndex: number | undefined = $state();
13-
let theScrollOffet: number | undefined = $state();
14-
15-
// on the component
16-
let scrollToIndex: number | undefined = $state();
17-
let scrollToOffet: number | undefined = $state();
18-
1917
let scrollToAlignment: ALIGNMENT = $state(ALIGNMENT.AUTO);
2018
let scrollToBehaviour: SCROLL_BEHAVIOR = $state(SCROLL_BEHAVIOR.SMOOTH);
2119
@@ -29,18 +27,17 @@
2927
end = event.end;
3028
}
3129
32-
// The two effects below are an elegant VLRangeEventensure only one fo the value is defined
33-
$effect(() => {
34-
// scrollToIndex and scrollOffset shall not be used together.
35-
scrollToIndex = undefined;
36-
scrollToOffet = theScrollOffet;
37-
});
30+
let scrollToProps: VariantScrollConfig = $state({});
3831
39-
$effect(() => {
40-
// scrollToIndex and scrollOffset shall not be used together.
41-
scrollToOffet = undefined;
42-
scrollToIndex = theScrollToIndex;
43-
});
32+
function updateScrollToProps(key: 'scrollToIndex' | 'scrollToOffset', value: number | undefined) {
33+
if (key === 'scrollToIndex') {
34+
scrollToProps.scrollToIndex = value;
35+
scrollToProps.scrollToOffset = undefined;
36+
} else if (key === 'scrollToOffset') {
37+
scrollToProps.scrollToOffset = value;
38+
scrollToProps.scrollToIndex = undefined;
39+
}
40+
}
4441
4542
function randomizeSize() {
4643
randSizes = new Array(myModel.length);
@@ -78,7 +75,8 @@
7875
type="number"
7976
placeholder="pick an index..."
8077
class="input"
81-
bind:value={theScrollToIndex} />
78+
value={scrollToProps.scrollToIndex}
79+
oninput={e => updateScrollToProps('scrollToIndex', Number(e.currentTarget.value))} />
8280
</span>
8381
</div>
8482
<div class="select">
@@ -89,7 +87,8 @@
8987
type="number"
9088
placeholder="pick an offset..."
9189
class="input"
92-
bind:value={theScrollOffet} />
90+
value={scrollToProps.scrollToOffset}
91+
oninput={e => updateScrollToProps('scrollToOffset', Number(e.currentTarget.value))} />
9392
</span>
9493
</div>
9594
<div class="select">
@@ -126,16 +125,15 @@
126125
<VirtualList
127126
items={myModel}
128127
style="height:500px"
129-
{scrollToIndex}
130-
scrollToOffset={scrollToOffet}
128+
{...scrollToProps}
131129
{scrollToAlignment}
132130
{scrollToBehaviour}
133131
sizingCalculator={szCalculator}
134132
onVisibleRangeUpdate={handleVisualRangeChange}>
135133
{#snippet vl_slot({ index, item, size }: VLSlotSignature<(typeof myModel)[0]>)}
136134
<div
137135
style="border: 1px solid rgb(204, 204, 204); line-height: {size}px;"
138-
class:highlighted={index === scrollToIndex}>
136+
class:highlighted={index === scrollToProps.scrollToIndex}>
139137
#{index}
140138
{item.text}
141139
</div>

0 commit comments

Comments
 (0)