import { ContentViewAttributes , NSVElement , NSVViewFlags , NativeScriptProps , ViewAttributes , registerElement } from 'react-nativescript' ; import { Color , EventData , Image , Label , PropertyChangeData } from '@nativescript/core' ; import { warn } from 'react-nativescript/dist/shared/Logger' ; import { SelectedIndexChangedEventData } from '../tab-navigation-base' ; import { TabContentItem } from '../tab-content-item' ; import { TabStrip } from '../tab-strip' ; import { TabStripItem } from '../tab-strip-item' ; export type TabNavigationBaseAttributes = ViewAttributes & { android ? : any ; ios ? : any ; items ? : string | TabContentItem [ ] ; onItemsChange ? : ( args : PropertyChangeData ) => void ; onSelectedIndexChange ? : ( args : PropertyChangeData ) => void ; onSelectedIndexChanged ? : ( args : SelectedIndexChangedEventData ) => void ; onTabStripChange ? : ( args : PropertyChangeData ) => void ; selectedIndex ? : string | number ; tabStrip ? : string | TabStrip ; } ; export type TabContentItemAttributes = ContentViewAttributes & { canBeLoaded ? : false | true ; } ; export type TabStripAttributes = ViewAttributes & { highlightColor ? : string | Color ; iosIconRenderingMode ? : 'automatic' | 'alwaysOriginal' | 'alwaysTemplate' ; isIconSizeFixed ? : string | false | true ; items ? : string | TabStripItem [ ] ; onHighlightColorChange ? : ( args : PropertyChangeData ) => void ; onIosIconRenderingModeChange ? : ( args : PropertyChangeData ) => void ; onIsIconSizeFixedChange ? : ( args : PropertyChangeData ) => void ; onItemTap ? : ( args : EventData ) => void ; onItemsChange ? : ( args : PropertyChangeData ) => void ; onSelectedItemColorChange ? : ( args : PropertyChangeData ) => void ; onUnSelectedItemColorChange ? : ( args : PropertyChangeData ) => void ; selectedItemColor ? : string | Color ; unSelectedItemColor ? : string | Color ; } ; export type TabStripItemAttributes = ViewAttributes & { iconClass ? : string ; iconSource ? : string ; image ? : Image ; label ? : Label ; onTap ? : ( args : EventData ) => void ; title ? : string ; } ; declare global { module JSX { interface IntrinsicElements { tabStrip : NativeScriptProps < TabStripAttributes , TabStrip > ; tabStripItem : NativeScriptProps < TabStripItemAttributes , TabStripItem > ; tabContentItem : NativeScriptProps < TabContentItemAttributes , TabContentItem > ; } interface ElementChildrenAttribute { children : { } ; } } } let installed = false ; interface RegisterTabsOptions { enableDebugLogging ? : boolean ; } export function registerTabNavigationBase ( opts = { } ) { const { enableDebugLogging = false } = opts ; if ( installed ) { return ; } registerElement ( 'tabStrip' , ( ) => TabStrip , { nodeOps : { insert ( child , parent , atIndex ? ) { const tabStrip = parent . nativeView ; if ( child . nodeRole === 'items' ) { if ( child . nativeView instanceof TabStripItem === false ) { if ( enableDebugLogging ) { warn ( `Unable to add child "${ child . nativeView . constructor . name }" to the items of <tabStrip> as it is not an instance of TabStripItem.` ) ; } return ; } const items = tabStrip . items || [ ] ; if ( typeof atIndex === 'undefined' || atIndex === items . length ) { tabStrip . _addChildFromBuilder ( 'items' , child . nativeView as TabStripItem ) ; } else { const itemsClone = items . slice ( ) ; itemsClone . splice ( atIndex , 0 , child . nativeView as TabStripItem ) ; tabStrip . items = itemsClone ; } } else if ( child . nodeRole === 'item' ) { if ( enableDebugLogging ) { warn ( `Unable to add child "${ child . nativeView . constructor . name }" to <tabStrip> as it had the nodeRole "item"; please correct it to "items".` ) ; } } else { if ( enableDebugLogging ) { warn ( `Unable to add child "${ child . nativeView . constructor . name }" to <tabStrip> as it does not have a nodeRole specified; ` + 'please set a nodeRole of "tabStrip", or "items".' ) ; } } } , remove ( child , parent ) { const tabStrip = parent . nativeView ; if ( child . nodeRole === 'items' ) { tabStrip . items = ( tabStrip . items || [ ] ) . filter ( ( i ) => i !== child . nativeView ) ; } else if ( child . nodeRole === 'item' ) { if ( enableDebugLogging ) { warn ( `Unable to remove child "${ child . nativeView . constructor . name }" from <tabStrip> as it had the nodeRole "item"; please correct it to "items".` ) ; } } else { if ( enableDebugLogging ) { warn ( `Unable to remove child "${ child . nativeView . constructor . name }" from <tabStrip> as it does not have a nodeRole specified; ` + 'please set a nodeRole of "tabStrip", or "items"' ) ; } } } } } ) ; registerElement ( 'tabStripItem' , ( ) => TabStripItem , { nodeOps : { insert ( child , parent , atIndex ? ) { const tabStripItem = parent . nativeView ; if ( child . nodeRole === 'label' ) { console . log ( `[tabStripItem.insert] LABEL [${ parent } > ${ child } @${ atIndex }] => [${ parent . childNodes }]` ) ; if ( child . nativeView instanceof Label === false ) { if ( enableDebugLogging ) { warn ( `Unable to add child "${ child . nativeView . constructor . name }" to the items of <tabStripItem> as it is not an instance of Label.` ) ; } return ; } tabStripItem . label = child . nativeView as Label ; } else if ( child . nodeRole === 'image' ) { console . log ( `[tabStripItem.insert] IMAGE [${ parent } > ${ child } @${ atIndex }] => [${ parent . childNodes }]` ) ; if ( child . nativeView instanceof Image === false ) { if ( enableDebugLogging ) { warn ( `Unable to add child "${ child . nativeView . constructor . name }" to the items of <tabStripItem> as it is not an instance of Image.` ) ; } return ; } tabStripItem . image = child . nativeView as Image ; } else { console . log ( `[tabStripItem.insert] OTHER [${ parent } > ${ child } @${ atIndex }] => [${ parent . childNodes }]` ) ; if ( enableDebugLogging ) { warn ( `Unable to add child "${ child . nativeView . constructor . name }" to <tabStripItem> as it does not have a nodeRole specified; ` + 'please set a nodeRole of "label", or "image".' ) ; } } } , remove ( child , parent ) { const tabStripItem = parent . nativeView ; if ( child . nodeRole === 'label' ) { tabStripItem . label = null ; } else if ( child . nodeRole === 'image' ) { tabStripItem . image = null ; } else { if ( enableDebugLogging ) { warn ( `Unable to remove child "${ child . nativeView . constructor . name }" from <tabStripItem> as it does not have a nodeRole specified; ` + 'please set a nodeRole of "label", or "image"' ) ; } } } } } ) ; registerElement ( 'tabContentItem' , ( ) => TabContentItem , { viewFlags : NSVViewFlags . CONTENT_VIEW } ) ; installed = true ; }