From 9512124c834eb434b8391e90ee76f1551c76bb2e Mon Sep 17 00:00:00 2001 From: Michael Berger Date: Wed, 12 Apr 2023 16:36:12 +0200 Subject: [PATCH] feat(stream): enhance configuration token by keepValueOnLoading, lazyViewCreation and renderStrategy option #33 --- .../stream/src/lib/stream-directive-config.ts | 8 +++-- libs/stream/src/lib/stream.directive.ts | 33 +++++++++---------- 2 files changed, 22 insertions(+), 19 deletions(-) diff --git a/libs/stream/src/lib/stream-directive-config.ts b/libs/stream/src/lib/stream-directive-config.ts index 3dd25ce..b1d67db 100644 --- a/libs/stream/src/lib/stream-directive-config.ts +++ b/libs/stream/src/lib/stream-directive-config.ts @@ -1,10 +1,14 @@ -import { InjectionToken, Type } from '@angular/core'; -import { StreamDirectiveContext } from './types/stream-directive-context'; +import {InjectionToken, Type} from '@angular/core'; +import {StreamDirectiveContext} from './types/stream-directive-context'; +import {RenderStrategies} from "./types/render-strategies"; export interface StreamDirectiveConfig { loadingComponent?: Type; errorComponent?: Type; completeComponent?: Type; + keepValueOnLoading?: boolean; + lazyViewCreation?: boolean; + renderStrategy?: RenderStrategies; } export const STREAM_DIR_CONFIG = new InjectionToken('STREAM_DIR_CONFIG'); diff --git a/libs/stream/src/lib/stream.directive.ts b/libs/stream/src/lib/stream.directive.ts index 0551b52..6234ae9 100644 --- a/libs/stream/src/lib/stream.directive.ts +++ b/libs/stream/src/lib/stream.directive.ts @@ -33,8 +33,8 @@ import {coerceObservable} from './util/coerce-observable'; import {RenderContext} from './types/render-context'; import {StreamDirectiveContext} from './types/stream-directive-context'; import {setupOperator$} from './util/setup-operator'; -import {createIntersectionObserver} from "@angular-kit/rx/platform"; -import {supportsIntersectionObserver} from "./util/supports-intersection-observer"; +import {createIntersectionObserver} from '@angular-kit/rx/platform'; +import {supportsIntersectionObserver} from './util/supports-intersection-observer'; @Directive({ selector: '[stream]', @@ -44,7 +44,9 @@ export class StreamDirective implements OnInit, OnDestroy { private refreshEffect$$ = new ReplaySubject>(1); private loadingTemplate$$ = new ReplaySubject>>(1); private renderCallback$$: ReplaySubject> | undefined; - private renderStrategy$$ = new BehaviorSubject>(of({ type: 'default' })); + private renderStrategy$$ = new BehaviorSubject>( + of(this.config?.renderStrategy ?? { type: 'default' }) + ); private detach = true; @@ -123,7 +125,7 @@ export class StreamDirective implements OnInit, OnDestroy { * * Default: false */ - @Input() streamKeepValueOnLoading = false; + @Input() streamKeepValueOnLoading = this.config?.keepValueOnLoading ?? false; /** * @description * A flag to control if the view should be created lazily or not. @@ -131,7 +133,7 @@ export class StreamDirective implements OnInit, OnDestroy { * * Default: false */ - @Input() streamLazyViewCreation = false; + @Input() streamLazyViewCreation = this.config?.lazyViewCreation ?? false; private subscription: Unsubscribable = new Subscription(); private embeddedView!: EmbeddedViewRef>; @@ -147,7 +149,7 @@ export class StreamDirective implements OnInit, OnDestroy { readonly isViewPortStrategy$ = this.renderStrategy$$.pipe( mergeAll(), - map((strategy) => strategy.type === 'viewport'), + map((strategy) => strategy.type === 'viewport') ); readonly renderStrategyOperator$ = setupOperator$(this.renderStrategy$$); readonly source$ = this.source$$.pipe(distinctUntilChanged()); @@ -159,19 +161,19 @@ export class StreamDirective implements OnInit, OnDestroy { * * when switching to/from viewPort strategy emit a signal and end respective observables */ - viewPortObserver$: Observable = this.renderStrategy$$.pipe( + viewPortObserver$: Observable = this.renderStrategy$$.pipe( mergeAll(), switchMap((strategy) => { - if (isViewportRenderStrategy(strategy)){ - if (!supportsIntersectionObserver()){ + if (isViewportRenderStrategy(strategy)) { + if (!supportsIntersectionObserver()) { return of(null); } return createIntersectionObserver(this.viewContainerRef.element.nativeElement.parentElement, { threshold: strategy.threshold, rootMargin: strategy.rootMargin, root: strategy.root, - }) - /* .pipe( + }); + /* .pipe( takeUntil(this.renderStrategy$$.pipe(skip(1))) )*/ } @@ -179,8 +181,7 @@ export class StreamDirective implements OnInit, OnDestroy { return of(null); }) ); - visible$ = this.viewPortObserver$.pipe( - map((entries) => entries?.some((entry) => entry.isIntersecting))) + visible$ = this.viewPortObserver$.pipe(map((entries) => entries?.some((entry) => entry.isIntersecting))); readonly sourceWithOperator$ = this.renderStrategyOperator$.pipe( withLatestFrom(this.source$), @@ -194,7 +195,7 @@ export class StreamDirective implements OnInit, OnDestroy { */ switchMap(([o, source$]) => { return source$.pipe( - o, + o //takeUntil(this.renderStrategy$$.pipe(skip(1))) ); }) @@ -211,9 +212,7 @@ export class StreamDirective implements OnInit, OnDestroy { private readonly templateRef: TemplateRef>, private readonly viewContainerRef: ViewContainerRef, @Optional() @Inject(STREAM_DIR_CONFIG) private readonly config: StreamDirectiveConfig - ) { - - } + ) {} ngOnInit(): void { if (!this.embeddedView) {