diff --git a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.ts b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.ts index 5df21182..ad5f1b2b 100644 --- a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.ts +++ b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.ts @@ -15,7 +15,7 @@ import { import { ucapAnimations } from '@ucap-webmessenger/ui'; import { GroupDetailData, UserInfo } from '@ucap-webmessenger/protocol-sync'; -import { MatAccordion, MatTreeFlattener, MatTree } from '@angular/material'; +import { MatTreeFlattener, MatTree } from '@angular/material'; import { ExpansionPanelItemDirective } from '../directives/expansion-panel-item.directive'; import { UserInfoSS, @@ -26,8 +26,6 @@ import { NGXLogger } from 'ngx-logger'; import { VirtualScrollTreeFlatDataSource } from '@ucap-webmessenger/ui'; import { FlatTreeControl } from '@angular/cdk/tree'; import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling'; -import { fromEvent, Subject } from 'rxjs'; -import { debounceTime, takeUntil } from 'rxjs/operators'; enum NodeType { None = 'None', @@ -161,8 +159,6 @@ export class ExpansionPanelComponent @ViewChild('cvsvGroup', { static: false }) cvsvGroup: CdkVirtualScrollViewport; - private readonly destroySubject = new Subject(); - NodeType = NodeType; profileNodes: GroupNode[] = []; @@ -208,16 +204,9 @@ export class ExpansionPanelComponent ); } - ngOnInit() { - fromEvent(window, 'resize') - .pipe(debounceTime(10), takeUntil(this.destroySubject)) - .subscribe(() => this.cvsvGroup.checkViewportSize()); - } + ngOnInit() {} - ngOnDestroy(): void { - this.destroySubject.next(); - this.destroySubject.complete(); - } + ngOnDestroy(): void {} ngAfterViewInit(): void { this.dataSource.cdkVirtualScrollViewport = this.cvsvGroup; diff --git a/projects/ucap-webmessenger-ui/src/lib/directives/cdk-virtual-scroll-viewport-patch.directive.ts b/projects/ucap-webmessenger-ui/src/lib/directives/cdk-virtual-scroll-viewport-patch.directive.ts new file mode 100644 index 00000000..849879a6 --- /dev/null +++ b/projects/ucap-webmessenger-ui/src/lib/directives/cdk-virtual-scroll-viewport-patch.directive.ts @@ -0,0 +1,30 @@ +import { Directive, OnInit, OnDestroy, Self, Inject } from '@angular/core'; +import { Subject, fromEvent } from 'rxjs'; +import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling'; +import { debounceTime, takeUntil } from 'rxjs/operators'; + +@Directive({ + // tslint:disable-next-line: directive-selector + selector: 'cdk-virtual-scroll-viewport' +}) +export class CdkVirtualScrollViewportPatchDirective + implements OnInit, OnDestroy { + protected readonly destroySubject = new Subject(); + + constructor( + @Self() + @Inject(CdkVirtualScrollViewport) + private readonly viewportComponent: CdkVirtualScrollViewport + ) {} + + ngOnInit() { + fromEvent(window, 'resize') + .pipe(debounceTime(10), takeUntil(this.destroySubject)) + .subscribe(() => this.viewportComponent.checkViewportSize()); + } + + ngOnDestroy() { + this.destroySubject.next(); + this.destroySubject.complete(); + } +} diff --git a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts b/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts index faff4a6c..1af06f5e 100644 --- a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts +++ b/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts @@ -34,6 +34,7 @@ import { SnackBarService } from './services/snack-bar.service'; import { ClickOutsideDirective } from './directives/click-outside.directive'; import { FileUploadForDirective } from './directives/file-upload-for.directive'; import { ImageDirective } from './directives/image.directive'; +import { CdkVirtualScrollViewportPatchDirective } from './directives/cdk-virtual-scroll-viewport-patch.directive'; import { AlertDialogComponent } from './dialogs/alert.dialog.component'; import { ConfirmDialogComponent } from './dialogs/confirm.dialog.component'; @@ -62,7 +63,8 @@ const DIALOGS = [AlertDialogComponent, ConfirmDialogComponent]; const DIRECTIVES = [ ClickOutsideDirective, FileUploadForDirective, - ImageDirective + ImageDirective, + CdkVirtualScrollViewportPatchDirective ]; const PIPES = [ BytesPipe,