feat(template): add DataSource support for rx-virtual-for directive

friendlyAce · friendlyAce · commit b00b41d21080 · 2024-08-31T19:28:14.000+02:00
diff --git a/libs/template/experimental/virtual-scrolling/src/index.ts b/libs/template/experimental/virtual-scrolling/src/index.ts
@@ -1,4 +1,6 @@
 export {
+  CollectionViewer,
+  DataSource,
   ListRange,
   RxVirtualForViewContext,
   RxVirtualScrollElement,
diff --git a/libs/template/experimental/virtual-scrolling/src/lib/model.ts b/libs/template/experimental/virtual-scrolling/src/lib/model.ts
@@ -34,6 +34,17 @@ export interface ListRange {
   end: number;
 }
 
+export abstract class DataSource<T> {
+  abstract connect(
+    collectionViewer: CollectionViewer,
+  ): Observable<NgIterable<T>>;
+  abstract disconnect(collectionViewer: CollectionViewer): void;
+}
+
+export interface CollectionViewer {
+  viewChange: Observable<ListRange>;
+}
+
 /**
  * @Directive RxVirtualScrollStrategy
  *
diff --git a/libs/template/experimental/virtual-scrolling/src/lib/virtual-for.directive.ts b/libs/template/experimental/virtual-scrolling/src/lib/virtual-for.directive.ts
@@ -34,6 +34,7 @@ import { Promise } from '@rx-angular/cdk/zone-less/browser';
 import {
   combineLatest,
   concat,
+  ConnectableObservable,
   isObservable,
   MonoTypeOperatorFunction,
   NEVER,
@@ -55,6 +56,8 @@ import {
   tap,
 } from 'rxjs/operators';
 import {
+  CollectionViewer,
+  DataSource,
   ListRange,
   RxVirtualForViewContext,
   RxVirtualScrollStrategy,
@@ -241,6 +244,7 @@ export class RxVirtualFor<T, U extends NgIterable<T> = NgIterable<T>>
     potentialSignalOrObservable:
       | Observable<(U & NgIterable<T>) | undefined | null>
       | Signal<(U & NgIterable<T>) | undefined | null>
+      | DataSource<T>
       | (U & NgIterable<T>)
       | null
       | undefined,
@@ -251,6 +255,21 @@ export class RxVirtualFor<T, U extends NgIterable<T> = NgIterable<T>>
       this.observables$.next(
         toObservable(potentialSignalOrObservable, { injector: this.injector }),
       );
+    } else if (this.isDataSource(potentialSignalOrObservable)) {
+      this.staticValue = undefined;
+      this.renderStatic = false;
+
+      const collectionViewer: CollectionViewer = {
+        viewChange: this.scrollStrategy.renderedRange$,
+      };
+
+      this.observables$.next(
+        potentialSignalOrObservable.connect(collectionViewer),
+      );
+
+      this._destroy$.pipe(take(1)).subscribe(() => {
+        potentialSignalOrObservable.disconnect(collectionViewer);
+      });
     } else if (!isObservable(potentialSignalOrObservable)) {
       this.staticValue = potentialSignalOrObservable;
       this.renderStatic = true;
@@ -261,6 +280,24 @@ export class RxVirtualFor<T, U extends NgIterable<T> = NgIterable<T>>
     }
   }
 
+  /** @internal */
+  private isDataSource(
+    value:
+      | (U & NgIterable<T>)
+      | Observable<U & NgIterable<T>>
+      | DataSource<T>
+      | null
+      | undefined,
+  ): value is DataSource<T> {
+    return (
+      value !== null &&
+      value !== undefined &&
+      'connect' in value &&
+      typeof value.connect === 'function' &&
+      !(value instanceof ConnectableObservable)
+    );
+  }
+
   /**
    * @internal
    * A reference to the template that is created for each item in the iterable.
