Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 9eddb36

Browse files
hoebbelsBhoebbelsB
authored
feat(template): decouple scroll-element from viewport
* feat(template): decouple scroll-element from viewport * feat(template): introduce virtual window scroll * feat(demos): add demos for decoupled scroll elements * fix(template): don't schedule resize event * docs(template): add docs for custom scroll elements * test(template): implement tests for custom scroll element * chore: adjust index.ts * test(template): fix virtual scroll tests * test(template): adjust specs to new virtualFor API
1 parent ddf426a commit 9eddb36

21 files changed

+2231
-157
lines changed

‎apps/demos/src/app/features/template/rx-virtual-for/rx-virtual-for.menu.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,12 @@ export const RX_VIRTUAL_FOR_MENU_ITEMS = [
33
label: 'Feature Showcase',
44
link: 'showcase',
55
},
6+
{
7+
label: 'Custom Scrollcontainer',
8+
link: 'custom-scroll',
9+
},
10+
{
11+
label: 'Window Scroll',
12+
link: 'window-scrolling',
13+
},
614
];

‎apps/demos/src/app/features/template/rx-virtual-for/virtual-rendering/virtual-for-test.component.ts renamed to ‎apps/demos/src/app/features/template/rx-virtual-for/virtual-rendering/virtual-for-demo.component.ts

Lines changed: 23 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ import { TestItem } from '../../../../shared/debug-helper/value-provider/index';
3636
import { RxVirtualScrollViewportComponent } from '@rx-angular/template/experimental/virtual-scrolling';
3737

3838
@Component({
39-
selector: 'rxa-virtual-for-test',
39+
selector: 'rxa-virtual-for-feature-showcase',
4040
template: `
4141
<div class="container">
4242
<h1 class="mat-headline mt-2">Virtual Rendering</h1>
@@ -357,7 +357,7 @@ import { RxVirtualScrollViewportComponent } from '@rx-angular/template/experimen
357357
providers: [RxState],
358358
changeDetection: ChangeDetectionStrategy.OnPush,
359359
})
360-
export class VirtualForTestComponent implements OnInit, AfterViewInit {
360+
export class VirtualForDemoComponent implements OnInit, AfterViewInit {
361361
@ViewChild(ArrayProviderComponent)
362362
arrayProvider: ArrayProviderComponent;
363363

@@ -395,31 +395,11 @@ export class VirtualForTestComponent implements OnInit, AfterViewInit {
395395
renderedItems$ = this.rendered.pipe(
396396
map(
397397
() =>
398-
this.virtualViewport.scrollContainer().querySelectorAll('.item').length
398+
this.virtualViewport.getScrollElement().querySelectorAll('.item').length
399399
)
400400
);
401401

402-
data$ = defer(() =>
403-
this.afterViewInit$.pipe(
404-
switchMap(() =>
405-
this.arrayProvider.array$.pipe(
406-
map((values) =>
407-
values.map((item) => {
408-
let content = this.contentCache[item.id];
409-
if (!content) {
410-
content = this.randomContent();
411-
this.contentCache[item.id] = content;
412-
}
413-
return {
414-
...item,
415-
content,
416-
};
417-
})
418-
)
419-
)
420-
)
421-
)
422-
).pipe(shareReplay({ refCount: true, bufferSize: 1 }));
402+
data$ = this.state.select('data');
423403

424404
extractSize = (entries: ResizeObserverEntry) =>
425405
entries.borderBoxSize[0].blockSize;
@@ -455,6 +435,7 @@ export class VirtualForTestComponent implements OnInit, AfterViewInit {
455435

456436
constructor(
457437
public state: RxState<{
438+
data: any[];
458439
runwayItems: number;
459440
runwayItemsOpposite: number;
460441
scrollStrategy: 'fixed' | 'auto' | 'dynamic';
@@ -470,7 +451,24 @@ export class VirtualForTestComponent implements OnInit, AfterViewInit {
470451
ngOnInit() {}
471452

472453
ngAfterViewInit() {
473-
this.afterViewInit$.next();
454+
this.state.connect(
455+
'data',
456+
this.arrayProvider.array$.pipe(
457+
map((values) =>
458+
values.map((item) => {
459+
let content = this.contentCache[item.id];
460+
if (!content) {
461+
content = this.randomContent();
462+
this.contentCache[item.id] = content;
463+
}
464+
return {
465+
...item,
466+
content,
467+
};
468+
})
469+
)
470+
)
471+
);
474472
}
475473

476474
scrollToIndex(index: string): void {

‎apps/demos/src/app/features/template/rx-virtual-for/virtual-rendering/virtual-for-experiments.module.ts

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,20 +12,32 @@ import {
1212
FixedSizeVirtualScrollStrategy,
1313
RxVirtualScrollViewportComponent,
1414
RxVirtualFor,
15+
RxVirtualScrollWindowDirective,
16+
RxVirtualScrollElementDirective,
1517
} from '@rx-angular/template/experimental/virtual-scrolling';
1618
import { RxFor } from '@rx-angular/template/for';
1719
import { RxIf } from '@rx-angular/template/if';
1820
import { RxLet } from '@rx-angular/template/let';
1921
import { StrategySelectModule } from '../../../../shared/debug-helper/strategy-select/index';
2022
import { ValueProvidersModule } from '../../../../shared/debug-helper/value-provider/index';
21-
import { VirtualForTestComponent } from './virtual-for-test.component';
23+
import { VirtualForDemoComponent } from './virtual-for-demo.component';
24+
import { VirtualForScrollWindowDemoComponent } from './virtual-for-scroll-window-demo.component';
25+
import { VirtualForCustomScrollableDemoComponent } from './virtual-for-scrollable-demo.component';
2226

2327
@NgModule({
2428
imports: [
2529
RouterModule.forChild([
2630
{
2731
path: '',
28-
component: VirtualForTestComponent,
32+
component: VirtualForDemoComponent,
33+
},
34+
{
35+
path: 'custom-scroll',
36+
component: VirtualForCustomScrollableDemoComponent,
37+
},
38+
{
39+
path: 'window-scrolling',
40+
component: VirtualForScrollWindowDemoComponent,
2941
},
3042
]),
3143
ValueProvidersModule,
@@ -44,8 +56,14 @@ import { VirtualForTestComponent } from './virtual-for-test.component';
4456
RxIf,
4557
RxVirtualScrollViewportComponent,
4658
RxFor,
59+
RxVirtualScrollWindowDirective,
60+
RxVirtualScrollElementDirective,
61+
],
62+
declarations: [
63+
VirtualForDemoComponent,
64+
VirtualForCustomScrollableDemoComponent,
65+
VirtualForScrollWindowDemoComponent,
4766
],
48-
declarations: [VirtualForTestComponent],
4967
providers: [],
5068
})
5169
export class RxVirtualForModule {}

0 commit comments

Comments
 (0)