From 6b562fa8e403982d6adfae6130497c1cf841ea78 Mon Sep 17 00:00:00 2001 From: Vlad Date: Wed, 18 Aug 2021 15:45:21 +0300 Subject: [PATCH] feat(angular): better typing --- .../angular/src/app/home/home.component.ts | 13 +-- src/angular/src/swiper.component.ts | 85 +++++++++++-------- src/angular/src/utils/get-params.ts | 12 ++- src/angular/src/utils/utils.ts | 6 +- src/types/swiper-events.d.ts | 4 +- 5 files changed, 67 insertions(+), 53 deletions(-) diff --git a/playground/angular/src/app/home/home.component.ts b/playground/angular/src/app/home/home.component.ts index f249f607d..74d4ab7f6 100644 --- a/playground/angular/src/app/home/home.component.ts +++ b/playground/angular/src/app/home/home.component.ts @@ -1,4 +1,5 @@ import { ChangeDetectorRef, Component, NgZone, ViewChild } from '@angular/core'; +import Swiper from 'build/swiper'; import { BehaviorSubject } from 'rxjs'; import { SwiperComponent } from 'src/angular/src/public-api'; import SwiperCore, { @@ -42,12 +43,12 @@ export class HomePage { this.slides$.next(Array.from({ length: 600 }).map((el, index) => `Slide ${index + 1}`)); } - thumbsSwiper: any; - setThumbsSwiper(swiper) { + thumbsSwiper: Swiper; + setThumbsSwiper(swiper: Swiper) { this.thumbsSwiper = swiper; } - controlledSwiper: any; - setControlledSwiper(swiper) { + controlledSwiper: Swiper; + setControlledSwiper(swiper: Swiper) { this.controlledSwiper = swiper; } @@ -91,7 +92,7 @@ export class HomePage { slides = Array.from({ length: 5 }).map((el, index) => `Slide ${index + 1}`); virtualSlides = Array.from({ length: 600 }).map((el, index) => `Slide ${index + 1}`); - log(string) { + log(log: string) { // console.log(string); } @@ -107,7 +108,7 @@ export class HomePage { slidesEx = ['first', 'second']; - onSlideChange(swiper) { + onSlideChange(swiper: Swiper) { if (swiper.isEnd) { // all swiper events are run outside of ngzone, so use ngzone.run or detectChanges to update the view. this.ngZone.run(() => { diff --git a/src/angular/src/swiper.component.ts b/src/angular/src/swiper.component.ts index 358635819..9ffbf6333 100644 --- a/src/angular/src/swiper.component.ts +++ b/src/angular/src/swiper.component.ts @@ -17,7 +17,6 @@ import { ViewChild, ViewEncapsulation, } from '@angular/core'; -// @ts-ignore import Swiper from 'swiper'; import { Observable, of, Subject } from 'rxjs'; import { getParams } from './utils/get-params'; @@ -438,15 +437,17 @@ export class SwiperComponent implements OnInit { } get zoomContainerClass() { - return typeof this.zoom !== 'boolean' ? this.zoom.containerClass : 'swiper-zoom-container'; + return this.zoom && typeof this.zoom !== 'boolean' + ? this.zoom.containerClass + : 'swiper-zoom-container'; } - @HostBinding('class') containerClasses = 'swiper'; + @HostBinding('class') containerClasses: string = 'swiper'; constructor( private _ngZone: NgZone, private elementRef: ElementRef, private _changeDetectorRef: ChangeDetectorRef, - @Inject(PLATFORM_ID) private _platformId, + @Inject(PLATFORM_ID) private _platformId: Object, ) {} private _setElement(el: ElementRef, ref: any, update: string, key = 'el') { @@ -459,7 +460,7 @@ export class SwiperComponent implements OnInit { } ref[key] = el.nativeElement; } - const updateObj = {}; + const updateObj: { [key: string]: boolean } = {}; updateObj[update] = true; this.updateInitSwiper(updateObj); } @@ -484,15 +485,17 @@ export class SwiperComponent implements OnInit { private slidesChanges = (val: QueryList) => { this.slides = val.map((slide: SwiperSlideDirective, index: number) => { slide.slideIndex = index; - slide.classNames = this.slideClass; + slide.classNames = this.slideClass || ''; return slide; }); if (this.loop && !this.loopedSlides) { this.calcLoopedSlides(); } if (!this.virtual) { - this.prependSlides = of(this.slides.slice(this.slides.length - this.loopedSlides)); - this.appendSlides = of(this.slides.slice(0, this.loopedSlides)); + if (this.loopedSlides) { + this.prependSlides = of(this.slides.slice(this.slides.length - this.loopedSlides)); + this.appendSlides = of(this.slides.slice(0, this.loopedSlides)); + } } else if (this.swiperRef && this.swiperRef.virtual) { this._ngZone.runOutsideAngular(() => { this.swiperRef.virtual.slides = this.slides; @@ -514,35 +517,42 @@ export class SwiperComponent implements OnInit { if (!swiperParams.virtual) { swiperParams.observer = true; } - swiperParams.onAny = (event, ...args) => { - const emitter = this[`s_${event}`] as EventEmitter; + const getKeyValue = + (key: U) => + (obj: T) => + obj[key]; + swiperParams.onAny = (eventName: keyof SwiperComponent, ...args: any[]) => { + const emitter = this[('s_' + eventName) as keyof SwiperComponent] as EventEmitter; if (emitter) { emitter.emit(...args); } }; - Object.assign(swiperParams.on, { - _containerClasses(swiper, classes) { - this.containerClasses = classes; - }, - _slideClasses: (_, updated) => { - updated.forEach(({ slideEl, classNames }, index) => { - const slideIndex = parseInt(slideEl.getAttribute('data-swiper-slide-index')) || index; - if (this.virtual) { - const virtualSlide = this.slides.find((item) => { - return item.virtualIndex && item.virtualIndex === slideIndex; - }); - if (virtualSlide) { - virtualSlide.classNames = classNames; - return; - } + const _slideClasses: SwiperEvents['_slideClasses'] = (_, updated) => { + updated.forEach(({ slideEl, classNames }, index) => { + const dataIndex = slideEl.getAttribute('data-swiper-slide-index'); + const slideIndex = dataIndex ? parseInt(dataIndex) : index; + if (this.virtual) { + const virtualSlide = this.slides.find((item) => { + return item.virtualIndex && item.virtualIndex === slideIndex; + }); + if (virtualSlide) { + virtualSlide.classNames = classNames; + return; } + } - if (this.slides[slideIndex]) { - this.slides[slideIndex].classNames = classNames; - } - }); - this._changeDetectorRef.detectChanges(); - }, + if (this.slides[slideIndex]) { + this.slides[slideIndex].classNames = classNames; + } + }); + this._changeDetectorRef.detectChanges(); + }; + const _containerClasses: SwiperEvents['_containerClasses'] = (_, classes) => { + this.containerClasses = classes; + }; + Object.assign(swiperParams.on, { + _containerClasses, + _slideClasses, }); const swiperRef = new Swiper(swiperParams); swiperRef.loopCreate = () => {}; @@ -616,7 +626,7 @@ export class SwiperComponent implements OnInit { this._changeDetectorRef.detectChanges(); } - updateInitSwiper(changedParams) { + updateInitSwiper(changedParams: any) { if (!(changedParams && this.swiperRef && !this.swiperRef.destroyed)) { return; } @@ -758,9 +768,14 @@ export class SwiperComponent implements OnInit { return this.slides.length; } let loopedSlides = this.loopedSlides || slidesPerViewParams; + if (!loopedSlides) { + // ? + return; + } - loopedSlides += this.loopAdditionalSlides; - + if (this.loopAdditionalSlides) { + loopedSlides += this.loopAdditionalSlides; + } if (loopedSlides > this.slides.length) { loopedSlides = this.slides.length; } @@ -768,7 +783,7 @@ export class SwiperComponent implements OnInit { return loopedSlides; } - updateParameter(key, value) { + updateParameter(key: string, value: any) { if (!(this.swiperRef && !this.swiperRef.destroyed)) { return; } diff --git a/src/angular/src/utils/get-params.ts b/src/angular/src/utils/get-params.ts index 8e6f9eaac..1f1bfa5fd 100644 --- a/src/angular/src/utils/get-params.ts +++ b/src/angular/src/utils/get-params.ts @@ -1,22 +1,20 @@ // eslint-disable-next-line import { isObject, extend } from './utils'; import { paramsList } from './params-list'; -import { SwiperOptions } from 'swiper/types'; -// @ts-ignore import Swiper from 'swiper'; export const allowedParams = paramsList.map((key) => key.replace(/_/, '')); -export function getParams(obj = {}) { - const params: SwiperOptions = { +export function getParams(obj: any = {}) { + const params: any = { on: {}, }; - const passedParams = {}; + const passedParams: any = {}; extend(params, Swiper.defaults); extend(params, Swiper.extendedDefaults); params._emitClasses = true; - const rest = {}; - Object.keys(obj).forEach((key) => { + const rest: any = {}; + Object.keys(obj).forEach((key: string) => { const _key = key.replace(/^_/, ''); if (typeof obj[_key] === 'undefined') return; if (allowedParams.indexOf(_key) >= 0) { diff --git a/src/angular/src/utils/utils.ts b/src/angular/src/utils/utils.ts index bdd3452fe..06d946461 100644 --- a/src/angular/src/utils/utils.ts +++ b/src/angular/src/utils/utils.ts @@ -1,4 +1,4 @@ -export function isObject(o) { +export function isObject(o: any): boolean { return ( typeof o === 'object' && o !== null && @@ -7,7 +7,7 @@ export function isObject(o) { ); } -export function isShowEl(val, obj, el) { +export function isShowEl(val: any, obj: any, el: any): boolean { return ( (coerceBooleanProperty(val) === true && obj && !obj.el) || !( @@ -18,7 +18,7 @@ export function isShowEl(val, obj, el) { ); } -export function extend(target, src) { +export function extend(target: any, src: any) { const noExtend = ['__proto__', 'constructor', 'prototype']; Object.keys(src) .filter((key) => noExtend.indexOf(key) < 0) diff --git a/src/types/swiper-events.d.ts b/src/types/swiper-events.d.ts index 2b2c965b3..54bba290d 100644 --- a/src/types/swiper-events.d.ts +++ b/src/types/swiper-events.d.ts @@ -227,14 +227,14 @@ export interface SwiperEvents { /** * !INTERNAL: Event will fired after setting CSS classes on swiper slide element */ - _slideClass?: (swiper: Swiper, el: HTMLElement, classNames: string) => void; + _slideClass?: (swiper: Swiper, slideEl: HTMLElement, classNames: string) => void; /** * !INTERNAL: Event will fired after setting CSS classes on all swiper slides */ _slideClasses?: ( swiper: Swiper, - slides: { el: HTMLElement; classNames: string; index: number }[], + slides: { slideEl: HTMLElement; classNames: string; index: number }[], ) => void; /**