@nativescript-community/ui-material-bottomnavigationbar
Version:
Material Design Bottom Navigation bars allow movement between primary destinations in an app. Tapping on a bottom navigation icon takes you directly to the associated view or refreshes the currently active view.
189 lines • 8.23 kB
JavaScript
import { themer } from '@nativescript-community/ui-material-core';
import { Application, Color, ImageSource, Screen, Utils, backgroundColorProperty } from '@nativescript/core';
import { BottomNavigationBarBase, BottomNavigationTabBase, activeColorCssProperty, badgeColorCssProperty, badgeTextColorCssProperty, iconProperty, inactiveColorCssProperty, tabsProperty, titleVisibilityProperty } from './bottomnavigationbar-common';
var BottomNavigationBarDelegate = /** @class */ (function (_super) {
__extends(BottomNavigationBarDelegate, _super);
function BottomNavigationBarDelegate() {
return _super !== null && _super.apply(this, arguments) || this;
}
BottomNavigationBarDelegate.initWithOwner = function (owner) {
var delegate = BottomNavigationBarDelegate.new();
delegate._owner = new WeakRef(owner);
return delegate;
};
BottomNavigationBarDelegate.prototype.bottomNavigationBarDidSelectItem = function (navigationBar, item) {
var owner = this._owner.get();
if (!owner) {
return;
}
var barIndex = item && item.barIndex ? item.barIndex : 0;
if (owner.selectedTabIndex === barIndex) {
owner._emitTabReselected(barIndex);
return;
}
owner._emitTabSelected(barIndex);
};
BottomNavigationBarDelegate.prototype.bottomNavigationBarShouldSelectItem = function (bottomNavigationBar, item) {
var owner = this._owner.get();
if (!owner) {
return true;
}
var barIndex = item && item.barIndex ? item.barIndex : 0;
var bottomNavigationTab = owner.items[barIndex];
if (!bottomNavigationTab.isSelectable) {
owner._emitTabPressed(barIndex);
}
return bottomNavigationTab.isSelectable;
};
BottomNavigationBarDelegate.ObjCProtocols = [MDCBottomNavigationBarDelegate];
return BottomNavigationBarDelegate;
}(NSObject));
export class BottomNavigationBar extends BottomNavigationBarBase {
createNativeView() {
const view = MDCBottomNavigationBar.new();
const colorScheme = themer.getAppColorScheme();
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;
// Create the tabs before setting the default values for each tab
// We call this method here to create the tabs defined in the xml
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._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;
}
[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;
}
createTabs(tabs) {
if (tabs) {
this._items = tabs;
}
const bottomNavigationTabs = this._items.map((item, index) => {
this._addView(item);
const tab = item.nativeViewProtected;
tab.barIndex = index;
return tab;
});
this.nativeViewProtected.items = new NSArray({ array: bottomNavigationTabs });
// TODO: this is for he v8 runtime. Should not have to need this setTimeout(), find better way.
this.selectTabNative(this.selectedTabIndex);
setTimeout(() => {
this.nativeViewProtected.selectedItem = this.nativeViewProtected.items.objectAtIndex(this.selectedTabIndex);
}, 0);
}
selectTabNative(index) {
if (this.nativeViewProtected.items.count === 0) {
return;
}
// ios impl does not trigger delegates!
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;
}
}
}
export class BottomNavigationTab extends BottomNavigationTabBase {
createNativeView() {
let icon = this.getNativeIcon();
if (icon) {
icon = icon.imageWithRenderingMode(0 /* 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();
this.nativeViewProtected.selectedImage = this.nativeViewProtected.image;
}
getMDView() {
return this.parent.nativeViewProtected.viewForItem(this.nativeViewProtected);
}
[activeColorCssProperty.setNative](activeColor) {
const color = activeColor ? activeColor.ios : null;
// TODO: it wont work for now as MDCBottomNavigationItemView is not exposed
this.getMDView().selectedItemTintColor = color;
}
[inactiveColorCssProperty.setNative](inactiveColor) {
const color = inactiveColor ? inactiveColor.ios : null;
// TODO: it wont work for now as MDCBottomNavigationItemView is not exposed
this.getMDView().unselectedItemTintColor = color;
}
showBadge(value) {
this.nativeViewProtected.badgeValue = value ? `${value}` : '';
}
removeBadge() {
this.nativeViewProtected.badgeValue = null;
}
}
//# sourceMappingURL=bottomnavigationbar.ios.js.map