import { CSSType , CoercibleProperty , Color , CssProperty , EventData , ImageSource , Property , Style , View , booleanConverter } from '@nativescript/core' ; import { cssProperty } from '@nativescript-community/ui-material-core' ; export interface extends EventData export interface TabPressedEventData extends EventData { index : number ; } export interface extends EventData export interface TabSelectedEventData extends EventData { oldIndex : number ; newIndex : number ; } export interface extends EventData export interface TabReselectedEventData extends EventData { index : number ; } export enum { number } export enum TitleVisibility { selected = 0 , always = 1 , never = 2 } export const selectedTabIndexProperty = new CoercibleProperty < BottomNavigationBarBase , number > ( { name : 'selectedTabIndex' , defaultValue : - 1 , affectsLayout : global . isIOS , valueChanged : ( target , oldValue , newValue ) => { target . onSelectedTabIndexChanged ( oldValue , newValue ) ; } , coerceValue : ( target , value ) => { const items = target . items ; if ( items ) { const max = items . length - 1 ; if ( value < 0 ) { value = 0 ; } if ( value > max ) { value = max ; } } else { value = - 1 ; } return value ; } , valueConverter : ( v ) => parseInt ( v , 10 ) } ) ; @ CSSType ( 'BottomNavigationBar' ) export abstract class BottomNavigationBarBase extends View { static tabPressedEvent = 'tabPressed' ; static tabSelectedEvent = 'tabSelected' ; static tabReselectedEvent = 'tabReselected' ; @ cssProperty activeColor : Color ; @ cssProperty inactiveColor : Color ; @ cssProperty badgeColor : Color ; @ cssProperty badgeTextColor : Color ; selectedTabIndex : number ; titleVisibility : TitleVisibility = TitleVisibility . always ; autoClearBadge : boolean ; protected _items : BottomNavigationTabBase [ ] = [ ] ; get items ( ) : BottomNavigationTabBase [ ] { return this . _items ; } onLoaded ( ) { super . onLoaded ( ) ; this . _items . forEach ( ( child ) => { this . loadView ( child ) ; return true ; } ) ; } selectTab ( index ) { if ( index === this . selectedTabIndex ) { return ; } this . selectTabNative ( index ) ; } _emitTabPressed ( index ) { const eventData = { eventName : BottomNavigationBarBase . tabPressedEvent , object : this , index } ; this . notify ( eventData ) ; if ( this . autoClearBadge ) { this . removeBadge ( index ) ; } } _emitTabSelected ( index ) { this . onSelectedTabIndexChanged ( this . selectedTabIndex , index ) ; if ( this . autoClearBadge ) { this . removeBadge ( index ) ; } } _emitTabReselected ( index ) { const eventData = { eventName : BottomNavigationBarBase . tabReselectedEvent , object : this , index } ; this . notify ( eventData ) ; } _addChildFromBuilder ( name , value ) { if ( value instanceof BottomNavigationTabBase ) { if ( ! this . _items ) { this . _items = [ ] ; } this . _items . push ( value ) ; } } showBadge ( index , value ? ) { this . _items [ index ] && this . _items [ index ] . showBadge ( value ) ; } removeBadge ( index ) { this . _items [ index ] && this . _items [ index ] . removeBadge ( ) ; } [ selectedTabIndexProperty . setNative ] ( value ) { this . selectTab ( value ) ; } protected abstract selectTabNative ( index ) ; protected abstract createTabs ( tabs ) ; public onSelectedTabIndexChanged ( oldIndex , newIndex ) { this . selectedTabIndex = newIndex ; this . notify ( { eventName : BottomNavigationBarBase . tabSelectedEvent , object : this , oldIndex , newIndex } as TabSelectedEventData ) ; } } export const tabsProperty = new Property < BottomNavigationBarBase , BottomNavigationTabBase [ ] > ( { name : 'tabs' , affectsLayout : true } ) ; tabsProperty . register ( BottomNavigationBarBase ) ; export const titleVisibilityProperty = new Property < BottomNavigationBarBase , TitleVisibility > ( { name : 'titleVisibility' , equalityComparer : ( x , y ) => x === y , affectsLayout : true , valueConverter : ( v ) => ( typeof v === 'string' ? TitleVisibility [ v . toLowerCase ( ) ] : v ) } ) ; titleVisibilityProperty . register ( BottomNavigationBarBase ) ; export const autoClearBadgeProperty = new Property < BottomNavigationBarBase , boolean > ( { name : 'autoClearBadge' , defaultValue : true , valueConverter : booleanConverter } ) ; autoClearBadgeProperty . register ( BottomNavigationBarBase ) ; export const activeColorCssProperty = new CssProperty < Style , Color > ( { name : 'activeColor' , cssName : 'active-color' , equalityComparer : Color . equals , valueConverter : ( v ) => new Color ( v ) } ) ; activeColorCssProperty . register ( Style ) ; export const inactiveColorCssProperty = new CssProperty < Style , Color > ( { name : 'inactiveColor' , cssName : 'inactive-color' , equalityComparer : Color . equals , valueConverter : ( v ) => new Color ( v ) } ) ; inactiveColorCssProperty . register ( Style ) ; export const badgeColorCssProperty = new CssProperty < Style , Color > ( { name : 'badgeColor' , cssName : 'badge-color' , equalityComparer : Color . equals , valueConverter : ( v ) => new Color ( v ) } ) ; badgeColorCssProperty . register ( Style ) ; export const badgeTextColorCssProperty = new CssProperty < Style , Color > ( { name : 'badgeTextColor' , cssName : 'badge-text-color' , equalityComparer : Color . equals , valueConverter : ( v ) => new Color ( v ) } ) ; badgeTextColorCssProperty . register ( Style ) ; selectedTabIndexProperty . register ( BottomNavigationBarBase ) ; interface BottomNavigationTabProps { title : string ; icon : string | ImageSource ; isSelectable ? : boolean ; } @ CSSType ( 'BottomNavigationTab' ) export abstract class BottomNavigationTabBase extends View implements BottomNavigationTabProps { @ cssProperty title : string ; @ cssProperty icon : string | ImageSource ; isSelectable ? : boolean ; @ cssProperty activeColor : Color ; @ cssProperty inactiveColor : Color ; abstract showBadge ( value ? ) ; abstract removeBadge ( ) ; } export const isSelectableProperty = new Property < BottomNavigationTabBase , boolean > ( { name : 'isSelectable' , defaultValue : true , valueConverter : booleanConverter } ) ; isSelectableProperty . register ( BottomNavigationTabBase ) ; export const iconProperty = new Property < BottomNavigationTabBase , ImageSource > ( { name : 'icon' , affectsLayout : true } ) ; iconProperty . register ( BottomNavigationTabBase ) ;