import { ItemEventData , LayoutBase , StackLayout , View , } from "@nativescript/core" ; import { NativeViewElementNode , TemplateElement , ViewNode , createElement , registerElement , } from "svelte-native/dom" ; import { flush } from "svelte/internal" ; import { Pager } from "../pager" ; declare module "@nativescript/core/ui/core/view-base" { interface ViewBase { __SvelteComponent__ ? : any ; __SvelteComponentBuilder__ ? : any ; __CollectionViewCurrentIndex__ ? : number ; } } class SvelteKeyedTemplate { key : string ; _templateEl : TemplateElement ; constructor ( key , templateEl ) { this . key = key ; this . _templateEl = templateEl ; } get component ( ) { return this . _templateEl . component ; } createView ( ) { const wrapper = createElement ( "StackLayout" ) as NativeViewElementNode < View > ; const nativeEl = wrapper . nativeView ; ( nativeEl as any ) . __SvelteComponentBuilder__ = ( parentView , props ) => { ( nativeEl as any ) . __SvelteComponent__ = new this . component ( { target : parentView , props , } ) ; } ; return nativeEl ; } } export default class PagerViewElement extends NativeViewElementNode < Pager > { constructor ( ) { super ( "pager" , Pager ) ; const nativeView = this . nativeView ; nativeView . itemViewLoader = ( viewType ) : View => this . loadView ( viewType ) ; this . nativeView . on ( Pager . itemLoadingEvent , this . updateListItem , this ) ; } private loadView ( viewType ) { if ( Array . isArray ( this . nativeElement . _itemTemplatesInternal ) ) { const keyedTemplate = this . nativeElement . _itemTemplatesInternal . find ( ( t ) => t . key === "default" ) ; if ( keyedTemplate ) { return keyedTemplate . createView ( ) ; } } const componentClass = this . getComponentForView ( viewType ) ; if ( ! componentClass ) return null ; const wrapper = createElement ( "StackLayout" ) as NativeViewElementNode < View > ; const nativeEl = wrapper . nativeView ; const builder = ( parentView , props ) => { ( nativeEl as any ) . __SvelteComponent__ = new componentClass ( { target : parentView , props , } ) ; } ; ( nativeEl as any ) . __SvelteComponentBuilder__ = builder ; return nativeEl ; } setAttribute ( fullkey , value ) { if ( fullkey . toLowerCase ( ) === "itemtemplateselector" ) { fullkey = "itemTemplateSelector" ; } super . setAttribute ( fullkey , value ) ; } private getComponentForView ( viewType ) { const normalizedViewType = viewType . toLowerCase ( ) ; const templateEl = this . childNodes . find ( ( n ) => n . tagName === "template" && String ( n . getAttribute ( "type" ) ) . toLowerCase ( ) === normalizedViewType ) as any ; if ( ! templateEl ) return null ; return templateEl . component ; } onInsertedChild ( childNode , index ) { super . onInsertedChild ( childNode , index ) ; if ( childNode instanceof TemplateElement ) { const key = childNode . getAttribute ( "key" ) || "default" ; const templateIndex = this . nativeView . _itemTemplatesInternal . findIndex ( ( t ) => t . key === key ) ; if ( templateIndex >= 0 ) { this . nativeView . _itemTemplatesInternal . splice ( templateIndex , 1 , new SvelteKeyedTemplate ( key , childNode ) as any ) ; } else { this . nativeView . _itemTemplatesInternal = this . nativeView . _itemTemplatesInternal . concat ( new SvelteKeyedTemplate ( key , childNode ) as any ) ; } } } onRemovedChild ( childNode ) { super . onRemovedChild ( childNode ) ; if ( childNode instanceof TemplateElement ) { const key = childNode . getAttribute ( "key" ) || "default" ; if ( this . nativeView . _itemTemplatesInternal && typeof this . nativeView . _itemTemplatesInternal !== "string" ) { this . nativeView . _itemTemplatesInternal = this . nativeView . _itemTemplatesInternal . filter ( ( t ) => t . key !== key ) ; } } } private updateListItem ( args ) { const _view = ( args . view as StackLayout ) . getChildAt ( 0 ) ; const props = { item : args . bindingContext , index : args . index } ; const componentInstance = _view . __SvelteComponent__ ; if ( ! componentInstance ) { if ( _view . __SvelteComponentBuilder__ ) { const dummy = createElement ( "fragment" ) ; _view . __SvelteComponentBuilder__ ( dummy , props ) ; _view . __SvelteComponentBuilder__ = null ; _view . __CollectionViewCurrentIndex__ = args . index ; const nativeEl = ( dummy . firstElement ( ) as NativeViewElementNode < View > ) . nativeView ; ( _view as LayoutBase ) . addChild ( nativeEl ) ; } } else { _view . __CollectionViewCurrentIndex__ = args . index ; componentInstance . $set ( props ) ; flush ( ) ; } } static register ( ) { registerElement ( "pager" , ( ) => new PagerViewElement ( ) ) ; } }