From 0fc503db87d792ac4e5231abc1468cdb511f07f2 Mon Sep 17 00:00:00 2001
From: richard-loafle <44828666+richard-loafle@users.noreply.github.com>
Date: Thu, 23 Apr 2020 13:31:28 +0900
Subject: [PATCH] bug fixed

---
 .../components/list.section.component.ts      | 13 ++++++--
 .../group/components/list.section.strategy.ts | 31 +++++++++++++++++++
 2 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 src/app/sections/group/components/list.section.strategy.ts

diff --git a/src/app/sections/group/components/list.section.component.ts b/src/app/sections/group/components/list.section.component.ts
index 931bd05..b6657d8 100644
--- a/src/app/sections/group/components/list.section.component.ts
+++ b/src/app/sections/group/components/list.section.component.ts
@@ -1,12 +1,21 @@
+import { Observable } from 'rxjs';
+
 import { Component, OnInit, OnDestroy } from '@angular/core';
 
 import { LogService } from '@ucap/ng-logger';
 import {
   VirtualScrollStrategy,
   FixedSizeVirtualScrollStrategy,
-  VIRTUAL_SCROLL_STRATEGY
+  VIRTUAL_SCROLL_STRATEGY,
+  CdkVirtualScrollViewport
 } from '@angular/cdk/scrolling';
 
+export class GroupVirtualScrollStrategy extends FixedSizeVirtualScrollStrategy {
+  constructor() {
+    super(60, 150, 200); // (itemSize, minBufferPx, maxBufferPx)
+  }
+}
+
 @Component({
   selector: 'app-sections-group-list',
   templateUrl: './list.section.component.html',
@@ -14,7 +23,7 @@ import {
   providers: [
     {
       provide: VIRTUAL_SCROLL_STRATEGY,
-      useValue: new FixedSizeVirtualScrollStrategy(60, 3, 3)
+      useClass: GroupVirtualScrollStrategy
     }
   ]
 })
diff --git a/src/app/sections/group/components/list.section.strategy.ts b/src/app/sections/group/components/list.section.strategy.ts
new file mode 100644
index 0000000..cb565a2
--- /dev/null
+++ b/src/app/sections/group/components/list.section.strategy.ts
@@ -0,0 +1,31 @@
+import { Observable, Subject } from 'rxjs';
+
+import {
+  VirtualScrollStrategy,
+  CdkVirtualScrollViewport
+} from '@angular/cdk/scrolling';
+import { distinctUntilChanged } from 'rxjs/operators';
+
+export class GroupVirtualScrollStrategy implements VirtualScrollStrategy {
+  scrolledIndexChange: Observable<number>;
+
+  private indexSubject = new Subject<number>();
+  private viewport: CdkVirtualScrollViewport | null = null;
+
+  constructor() {
+    this.scrolledIndexChange = this.indexSubject.pipe(distinctUntilChanged());
+  }
+
+  attach(viewport: CdkVirtualScrollViewport): void {
+    this.viewport = viewport;
+  }
+  detach(): void {
+    this.indexSubject.complete();
+    this.viewport = null;
+  }
+  onContentScrolled(): void {}
+  onDataLengthChanged(): void {}
+  onContentRendered(): void {}
+  onRenderedOffsetChanged(): void {}
+  scrollToIndex(index: number, behavior: ScrollBehavior): void {}
+}