import { themer } from '@nativescript-community/ui-material-core' ; import { Application , Color , ImageSource , Screen , Utils , backgroundColorProperty } from '@nativescript/core' ; import { BottomNavigationBarBase , BottomNavigationTabBase , TitleVisibility , activeColorCssProperty , badgeColorCssProperty , badgeTextColorCssProperty , iconProperty , inactiveColorCssProperty , tabsProperty , titleVisibilityProperty } from './bottomnavigationbar-common' ; @ NativeClass class BottomNavigationBarDelegate extends NSObject { static ObjCProtocols = [ MDCBottomNavigationBarDelegate ] ; _owner : WeakRef < BottomNavigationBar > ; public static initWithOwner ( owner ) { const delegate = BottomNavigationBarDelegate . new ( ) as BottomNavigationBarDelegate ; delegate . _owner = new WeakRef ( owner ) ; return delegate ; } bottomNavigationBarDidSelectItem ( navigationBar , item ) { const owner = this . _owner . get ( ) ; if ( ! owner ) { return ; } const barIndex = item && ( item as any ) . barIndex ? ( item as any ) . barIndex : 0 ; if ( owner . selectedTabIndex === barIndex ) { owner . _emitTabReselected ( barIndex ) ; return ; } owner . _emitTabSelected ( barIndex ) ; } bottomNavigationBarShouldSelectItem ( bottomNavigationBar , item ) { const owner = this . _owner . get ( ) ; if ( ! owner ) { return true ; } const barIndex = item && ( item as any ) . barIndex ? ( item as any ) . barIndex : 0 ; const bottomNavigationTab = owner . items [ barIndex ] ; if ( ! bottomNavigationTab . isSelectable ) { owner . _emitTabPressed ( barIndex ) ; } return bottomNavigationTab . isSelectable ; } } export class BottomNavigationBar extends BottomNavigationBarBase { nativeViewProtected : MDCBottomNavigationBar ; _items : BottomNavigationTab [ ] ; private _delegate : BottomNavigationBarDelegate ; createNativeView ( ) { const view = MDCBottomNavigationBar . new ( ) ; const colorScheme = themer . getAppColorScheme ( ) as MDCSemanticColorScheme ; if ( colorScheme ) { const scheme = MDCContainerScheme . alloc ( ) . init ( ) ; scheme . colorScheme = colorScheme ; view . applyPrimaryThemeWithScheme ( scheme ) ; } return view ; } initNativeView ( ) { super . initNativeView ( ) ; this . _delegate = BottomNavigationBarDelegate . initWithOwner ( this ) ; this . nativeViewProtected . delegate = this . _delegate ; this . createTabs ( this . _items ) ; } disposeNativeView ( ) { this . nativeViewProtected . delegate = null ; this . _delegate = null ; this . _items . forEach ( ( item ) => this . _removeView ( item ) ) ; super . disposeNativeView ( ) ; } layoutNativeView ( left , top , right , bottom ) { if ( ! this . nativeViewProtected ) { return ; } let bottomSafeArea = 0 ; if ( Application . ios . window . safeAreaInsets ) { bottomSafeArea = Application . ios . window . safeAreaInsets . bottom ; } const viewSize = CGSizeMake ( Screen . mainScreen . widthDIPs , Screen . mainScreen . heightDIPs ) ; const nativeViewSize = this . nativeViewProtected . sizeThatFits ( viewSize ) ; const bottomBarHeight = nativeViewSize . height + bottomSafeArea ; const nativeView = this . nativeViewProtected ; const frame = CGRectMake ( 0 , Utils . layout . toDeviceIndependentPixels ( top ) , viewSize . width , bottomBarHeight ) ; ( this as any ) . _setNativeViewFrame ( nativeView , frame ) ; } showBadge ( index , value ? ) { this . _items [ index ] && this . _items [ index ] . showBadge ( value ) ; } removeBadge ( index ) { this . _items [ index ] && this . _items [ index ] . removeBadge ( ) ; } [ tabsProperty . setNative ] ( tabs ) { this . createTabs ( tabs ) ; } [ titleVisibilityProperty . setNative ] ( titleVisibility ) { this . nativeViewProtected . titleVisibility = titleVisibility as number ; } [ activeColorCssProperty . setNative ] ( activeColor ) { this . nativeViewProtected . selectedItemTintColor = activeColor ? activeColor . ios : null ; } [ badgeColorCssProperty . setNative ] ( color ) { this . nativeViewProtected . itemBadgeBackgroundColor = color ? color . ios : null ; } [ badgeTextColorCssProperty . setNative ] ( color ) { this . nativeViewProtected . itemBadgeTextColor = color ? color . ios : null ; } [ inactiveColorCssProperty . setNative ] ( inactiveColor ) { this . nativeViewProtected . unselectedItemTintColor = inactiveColor ? inactiveColor . ios : null ; } [ backgroundColorProperty . setNative ] ( backgroundColor ) { this . nativeViewProtected . barTintColor = backgroundColor . ios ; } protected createTabs ( tabs ) { if ( tabs ) { this . _items = tabs ; } const bottomNavigationTabs = this . _items . map ( ( item , index ) => { this . _addView ( item ) ; const tab = item . nativeViewProtected ; ( tab as any ) . barIndex = index ; return tab ; } ) ; this . nativeViewProtected . items = new NSArray ( { array : bottomNavigationTabs } ) ; this . selectTabNative ( this . selectedTabIndex ) ; setTimeout ( ( ) => { this . nativeViewProtected . selectedItem = this . nativeViewProtected . items . objectAtIndex ( this . selectedTabIndex ) ; } , 0 ) ; } protected selectTabNative ( index ) { if ( this . nativeViewProtected . items . count === 0 ) { return ; } const itemToSelect = this . nativeViewProtected . items . objectAtIndex ( index ) ; if ( this . _delegate . bottomNavigationBarShouldSelectItem ( this . nativeViewProtected , itemToSelect ) ) { this . nativeViewProtected . selectedItem = this . nativeViewProtected . items . objectAtIndex ( index ) ; this . _delegate . bottomNavigationBarDidSelectItem ( this . nativeViewProtected , itemToSelect ) ; this . selectedTabIndex = index ; } } } declare class MDCBottomNavigationItemView extends UIView { selectedItemTintColor : UIColor ; unselectedItemTintColor : UIColor ; selectedItemTitleColor : UIColor ; badgeTextColor : UIColor ; badgeColor : UIColor ; } export class BottomNavigationTab extends BottomNavigationTabBase { nativeViewProtected : UITabBarItem ; createNativeView ( ) { let icon = this . getNativeIcon ( ) ; if ( icon ) { icon = icon . imageWithRenderingMode ( UIImageRenderingMode . Automatic ) ; } return UITabBarItem . alloc ( ) . initWithTitleImageTag ( this . title , icon , 0 ) ; } getNativeIcon ( ) { const iconSource = this . icon ; if ( ! iconSource ) { return null ; } if ( iconSource instanceof ImageSource ) { return iconSource . ios ; } let is ; if ( Utils . isFontIconURI ( iconSource ) ) { const fontIconCode = iconSource . split ( '//' ) [ 1 ] ; const font = this . style . fontInternal ; is = ImageSource . fromFontIconCodeSync ( fontIconCode , font , new Color ( 'white' ) ) ; } else { is = ImageSource . fromFileOrResourceSync ( iconSource ) ; } return is && is . ios ; } [ iconProperty . setNative ] ( iconSource ) { this . nativeViewProtected . image = this . getNativeIcon ( ) ; } getMDView ( ) { return ( this . parent as BottomNavigationBar ) . nativeViewProtected . viewForItem ( this . nativeViewProtected ) as MDCBottomNavigationItemView ; } [ activeColorCssProperty . setNative ] ( activeColor ) { const color = activeColor ? activeColor . ios : null ; this . getMDView ( ) . selectedItemTintColor = color ; } [ inactiveColorCssProperty . setNative ] ( inactiveColor ) { const color = inactiveColor ? inactiveColor . ios : null ; this . getMDView ( ) . unselectedItemTintColor = color ; } showBadge ( value ? ) { this . nativeViewProtected . badgeValue = value ? `${ value }` : '' ; } removeBadge ( ) { this . nativeViewProtected . badgeValue = null ; } }