Fixed scroll buttons

This commit is contained in:
Adina Țeudan 2021-09-27 21:37:12 +03:00
parent b55e3bf0dd
commit 666cb3158c

View File

@ -1,7 +1,7 @@
import { ChangeDetectionStrategy, Component, HostListener, Input, OnInit } from '@angular/core';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { concatMap, delay, distinctUntilChanged, map, startWith } from 'rxjs/operators';
import { Observable, of } from 'rxjs';
import { delay, distinctUntilChanged, map, startWith } from 'rxjs/operators';
import { combineLatest, fromEvent, Observable } from 'rxjs';
import { Required } from '../../utils';
const ButtonTypes = {
@ -34,11 +34,14 @@ export class ScrollButtonComponent implements OnInit {
const showScrollUp = () => scrollIsNeeded() && !reachedEnd(ButtonTypes.top);
const showScrollDown = () => scrollIsNeeded() && !reachedEnd(ButtonTypes.bottom);
const scroll$ = this.scrollViewport.elementScrolled().pipe(
startWith(''),
/** Delay first value so that we can wait for items to be rendered in viewport and get correct values */
concatMap((value, index) => (index === 0 ? of(value).pipe(delay(0)) : of(value)))
);
/** Force an initial emit, so combineLatest works */
const scrolled$ = this.scrollViewport.elementScrolled().pipe(startWith(null));
const resized$ = fromEvent(window, 'resize').pipe(startWith(null));
const rangeChange$ = this.scrollViewport.renderedRangeStream.pipe(startWith(null));
/** Delay so that we can wait for items to be rendered in viewport and get correct values */
const scroll$ = combineLatest([scrolled$, resized$, rangeChange$]).pipe(delay(0));
this.showScrollUp$ = scroll$.pipe(map(showScrollUp), distinctUntilChanged());
this.showScrollDown$ = scroll$.pipe(map(showScrollDown), distinctUntilChanged());
}