Skip to content

Commit

Permalink
fix: check length only on unwrapped data
Browse files Browse the repository at this point in the history
  • Loading branch information
arturovt committed Apr 17, 2023
1 parent fc0f985 commit 74b9dd5
Showing 1 changed file with 38 additions and 20 deletions.
58 changes: 38 additions & 20 deletions libs/ngu/carousel/src/lib/ngu-carousel/ngu-carousel.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {
EventEmitter,
Inject,
Input,
isDevMode,
IterableChangeRecord,
IterableChanges,
IterableDiffer,
Expand Down Expand Up @@ -57,6 +56,14 @@ import { NguWindowScrollListener } from './ngu-window-scroll-listener';

type DirectionSymbol = '' | '-';

type NguCarouselDataSource = Observable<any[]> | any[] | null | undefined;

// This will be provided through Terser global definitions by Angular CLI.
// This is how Angular does tree-shaking internally.
declare const ngDevMode: boolean;

const NG_DEV_MODE = typeof ngDevMode === 'undefined' || ngDevMode;

@Component({
selector: 'ngu-carousel',
templateUrl: 'ngu-carousel.component.html',
Expand All @@ -81,16 +88,26 @@ export class NguCarousel<T>

private _arrayChanges: IterableChanges<{}> | null = null;

@Input('dataSource')
get dataSource(): any {
@Input()
get dataSource(): NguCarouselDataSource {
return this._dataSource;
}
set dataSource(data: any) {
set dataSource(data: NguCarouselDataSource) {
if (data) {
this._switchDataSource(data);
}
}
private _dataSource: any;
private _dataSource: NguCarouselDataSource = null;

/**
* `_dataSource` allows multiple values to be set considering nullable and
* observable values. We shouldn't try to get `_dataSource.length` since it
* might be `null|undefined` which will throw an error that property doesn't
* exist on `undefined`. It will also always equal `undefined` on observable.
* We should wait until the observable is unwrapped and then check the length
* of the actual unwrapped data.
*/
private _unwrappedData: any[] = [];

private _defaultNodeDef: NguCarouselDefDirective<any> | null;

Expand Down Expand Up @@ -156,7 +173,7 @@ export class NguCarousel<T>
return this._trackByFn;
}
set trackBy(fn: TrackByFunction<T>) {
if (isDevMode() && fn != null && typeof fn !== 'function' && console && console.warn) {
if (NG_DEV_MODE && fn != null && typeof fn !== 'function' && console?.warn) {
console.warn(`trackBy must be a function, but received ${JSON.stringify(fn)}.`);
}
this._trackByFn = fn;
Expand All @@ -181,13 +198,13 @@ export class NguCarousel<T>
}

ngOnInit() {
this._dataDiffer = this._differs.find([]).create((_i: number, item: any) => {
return this.trackBy ? this.trackBy(_i, item) : item;
});
this._dataDiffer = this._differs
.find([])
.create((index: number, item: any) => (this.trackBy ? this.trackBy(index, item) : item));
}

ngDoCheck() {
this._arrayChanges = this._dataDiffer.diff(this.dataSource)!;
this._arrayChanges = this._dataDiffer.diff(this._unwrappedData)!;
if (this._arrayChanges && this._defDirectives) {
this._observeRenderChanges();
}
Expand All @@ -210,8 +227,9 @@ export class NguCarousel<T>
}

dataStream
?.pipe(takeUntil(this._intervalController$), takeUntil(this._destroy$))
?.pipe(takeUntil(merge(this._intervalController$, this._destroy$)))
.subscribe(data => {
this._unwrappedData = data;
this.renderNodeChanges(data);
this.isLast = this._pointIndex === this.currentSlide;
});
Expand Down Expand Up @@ -331,8 +349,6 @@ export class NguCarousel<T>
ngOnDestroy() {
this._hammertime?.destroy();
this._destroy$.next();
this.carouselLoad.complete();
this.onMove.complete();
}

/** Get Touch input */
Expand Down Expand Up @@ -495,7 +511,7 @@ export class NguCarousel<T>

/** Init carousel point */
private _carouselPoint(): void {
const Nos = this.dataSource.length - (this.items - this.slideItems);
const Nos = this._unwrappedData.length - (this.items - this.slideItems);
this._pointIndex = Math.ceil(Nos / this.slideItems);
const pointers: number[] = [];

Expand Down Expand Up @@ -540,7 +556,7 @@ export class NguCarousel<T>
break;
case this._pointIndex - 1:
this._btnBoolean(0, 1);
slideremains = this.dataSource.length - this.items;
slideremains = this._unwrappedData.length - this.items;
break;
default:
this._btnBoolean(0, 0);
Expand Down Expand Up @@ -653,7 +669,7 @@ export class NguCarousel<T>
const MoveSlide = currentSlideD + this.slideItems;
this._btnBoolean(0, 1);
if (this.currentSlide === 0) {
currentSlide = this.dataSource.length - this.items;
currentSlide = this._unwrappedData.length - this.items;
itemSpeed = 400;
this._btnBoolean(0, 1);
} else if (this.slideItems >= MoveSlide) {
Expand All @@ -671,10 +687,10 @@ export class NguCarousel<T>
this._carouselScrollTwo(Btn, currentSlide, itemSpeed);
} else if (Btn === 1 && ((!this.loop && !this.isLast) || this.loop)) {
if (
this.dataSource.length <= this.currentSlide + this.items + this.slideItems &&
this._unwrappedData.length <= this.currentSlide + this.items + this.slideItems &&
!this.isLast
) {
currentSlide = this.dataSource.length - this.items;
currentSlide = this._unwrappedData.length - this.items;
this._btnBoolean(0, 1);
} else if (this.isLast) {
currentSlide = 0;
Expand Down Expand Up @@ -720,7 +736,7 @@ export class NguCarousel<T>
this._setStyle(this._nguItemsContainer.nativeElement, 'transition', ``);
}

this.itemLength = this.dataSource.length;
this.itemLength = this._unwrappedData.length;
this._transformStyle(currentSlide);
this.currentSlide = currentSlide;
this.onMove.emit(this);
Expand Down Expand Up @@ -773,7 +789,7 @@ export class NguCarousel<T>
/** this will trigger the carousel to load the items */
private _carouselLoadTrigger(): void {
if (typeof this.inputs.load === 'number') {
this.dataSource.length - this.load <= this.currentSlide + this.items &&
this._unwrappedData.length - this.load <= this.currentSlide + this.items &&
this.carouselLoad.emit(this.currentSlide);
}
}
Expand Down Expand Up @@ -944,4 +960,6 @@ export class NguCarousel<T>
})
);
}

static ngAcceptInputType_dataSource: NguCarouselDataSource;
}

0 comments on commit 74b9dd5

Please sign in to comment.