@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.
248 lines • 11.5 kB
JavaScript
import { state, stateSets } from '@nativescript-community/ui-material-core/android/utils';
import { Color, ImageSource, Utils } from '@nativescript/core';
import { BottomNavigationBarBase, BottomNavigationTabBase, activeColorCssProperty, iconProperty, inactiveColorCssProperty, tabsProperty, titleVisibilityProperty } from './bottomnavigationbar-common';
// eslint-disable-next-line no-redeclare
let OnTabSelectedlistener;
const getOnTabSelectedlistener = () => {
if (OnTabSelectedlistener) {
return OnTabSelectedlistener;
}
var OnTabSelectedlistenerImpl = /** @class */ (function (_super) {
__extends(OnTabSelectedlistenerImpl, _super);
function OnTabSelectedlistenerImpl(owner) {
var _this = _super.call(this) || this;
_this.owner = owner;
// necessary when extending TypeScript constructors
return global.__native(_this);
}
OnTabSelectedlistenerImpl.prototype.onNavigationItemSelected = function (menuItem) {
var _a;
var owner = (_a = this.owner) === null || _a === void 0 ? void 0 : _a.get();
if (owner) {
var index = menuItem.getItemId();
var bottomNavigationTab = owner.items[index];
if (bottomNavigationTab.isSelectable) {
owner._emitTabSelected(index);
}
else {
owner._emitTabPressed(index);
}
return bottomNavigationTab.isSelectable;
}
return false;
};
var _a;
OnTabSelectedlistenerImpl = __decorate([
Interfaces([com.google.android.material.bottomnavigation.BottomNavigationView.OnNavigationItemSelectedListener]),
__metadata("design:paramtypes", [typeof (_a = typeof WeakRef !== "undefined" && WeakRef) === "function" ? _a : Object])
], OnTabSelectedlistenerImpl);
return OnTabSelectedlistenerImpl;
}(java.lang.Object));
OnTabSelectedlistener = OnTabSelectedlistenerImpl;
return OnTabSelectedlistener;
};
// eslint-disable-next-line no-redeclare
let OnTabReselectedListener;
const getOnTabReselectedListener = () => {
if (OnTabReselectedListener) {
return OnTabReselectedListener;
}
var OnTabReselectedListenerImpl = /** @class */ (function (_super) {
__extends(OnTabReselectedListenerImpl, _super);
function OnTabReselectedListenerImpl(owner) {
var _this = _super.call(this) || this;
_this.owner = owner;
// necessary when extending TypeScript constructors
return global.__native(_this);
}
OnTabReselectedListenerImpl.prototype.onNavigationItemReselected = function (menuItem) {
var _a, _b;
(_b = (_a = this.owner) === null || _a === void 0 ? void 0 : _a.get()) === null || _b === void 0 ? void 0 : _b._emitTabReselected(menuItem.getItemId());
};
var _a;
OnTabReselectedListenerImpl = __decorate([
Interfaces([com.google.android.material.bottomnavigation.BottomNavigationView.OnNavigationItemReselectedListener]),
__metadata("design:paramtypes", [typeof (_a = typeof WeakRef !== "undefined" && WeakRef) === "function" ? _a : Object])
], OnTabReselectedListenerImpl);
return OnTabReselectedListenerImpl;
}(java.lang.Object));
OnTabReselectedListener = OnTabReselectedListenerImpl;
return OnTabReselectedListener;
};
function createColorStateList(activeColor, inactiveColor) {
const stateChecked = Array.create('int', 1);
stateChecked[0] = state.checked;
const stateUnChecked = Array.create('int', 0);
const states = Array.create('[I', 2);
states[0] = stateChecked;
states[1] = stateUnChecked;
const colors = Array.create('int', 2);
colors[0] = activeColor;
colors[1] = inactiveColor;
return new android.content.res.ColorStateList(states, colors);
}
export class BottomNavigationBar extends BottomNavigationBarBase {
constructor() {
super(...arguments);
// default height property
this.height = 56;
}
createNativeView() {
return new com.google.android.material.bottomnavigation.BottomNavigationView(this._context);
}
initNativeView() {
super.initNativeView();
const OnTabReselectedListener = getOnTabReselectedListener();
const OnTabSelectedListener = getOnTabSelectedlistener();
const that = new WeakRef(this);
this.reselectListener = new OnTabReselectedListener(that);
this.selectListener = new OnTabSelectedListener(that);
this.nativeViewProtected.setOnNavigationItemReselectedListener(this.reselectListener);
this.nativeViewProtected.setOnNavigationItemSelectedListener(this.selectListener);
// 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);
this.selectTabNative(this.selectedTabIndex);
}
disposeNativeView() {
this.nativeViewProtected.setOnNavigationItemReselectedListener(null);
this.nativeViewProtected.setOnNavigationItemSelectedListener(null);
this.reselectListener = null;
this.selectListener = null;
this._items.forEach((item) => this._removeView(item));
super.disposeNativeView();
}
showBadge(index, value) {
// showBadge method is available in v1.1.0-alpha07 of material components
// but NS team has the .d.ts for version 1
// that's why we need to cast the nativeView to any to avoid typing errors
const badge = this.nativeViewProtected.getOrCreateBadge(index);
if (this.badgeColor) {
badge.setBackgroundColor(this.badgeColor.android);
}
if (this.badgeTextColor) {
badge.setBadgeTextColor(this.badgeTextColor.android);
}
if (value) {
badge.setNumber(value);
}
}
removeBadge(index) {
// removeBadge method is available in v1.1.0-alpha07 of material components
// but NS team has the .d.ts for version 1
// that's why we need to cast the nativeView to any to avoid typing errors
this.nativeViewProtected.removeBadge(index);
}
[tabsProperty.setNative](tabs) {
this.createTabs(tabs);
}
[titleVisibilityProperty.setNative](titleVisibility) {
this.nativeViewProtected.setLabelVisibilityMode(titleVisibility);
}
[activeColorCssProperty.setNative](activeColor) {
const color1 = activeColor instanceof Color ? activeColor.android : activeColor;
const color2 = this.inactiveColor instanceof Color ? this.inactiveColor.android : this.nativeViewProtected.getItemTextColor().getColorForState(stateSets.BACKGROUND_DEFAULT_STATE_2, color1);
const colorStateList = createColorStateList(color1, color2);
this.nativeViewProtected.setItemTextColor(colorStateList);
this.nativeViewProtected.setItemIconTintList(colorStateList);
}
[inactiveColorCssProperty.setNative](inactiveColor) {
const color2 = inactiveColor instanceof Color ? inactiveColor.android : inactiveColor;
const color1 = this.activeColor instanceof Color ? this.activeColor.android : this.nativeViewProtected.getItemTextColor().getColorForState(stateSets.FOCUSED_STATE_SET, color2);
const colorStateList = createColorStateList(color1, color2);
this.nativeViewProtected.setItemTextColor(colorStateList);
this.nativeViewProtected.setItemIconTintList(colorStateList);
}
createTabs(tabs) {
const bottomNavigationTabs = this.nativeViewProtected.getMenu();
if (bottomNavigationTabs.size() > 0) {
bottomNavigationTabs.clear();
}
if (tabs) {
this._items = tabs;
}
this._items.forEach((item, index) => {
// the create nativeView will actually add the item to the tab bar
item.index = index;
this._addView(item);
// const tab = item.nativeViewProtected;
// tab.setIcon(item.getNativeIcon());
});
}
selectTabNative(index) {
if (this.nativeViewProtected) {
const bottomNavigationTabs = this.nativeViewProtected.getMenu();
if (bottomNavigationTabs.size() === 0) {
return;
}
this.nativeViewProtected.setSelectedItemId(index);
}
this.selectedTabIndex = index;
}
}
// Bottom Navigation Tab
export class BottomNavigationTab extends BottomNavigationTabBase {
constructor() {
super(...arguments);
this.index = android.view.Menu.NONE;
this._isPaddingRelative = true; // trick because @nativescript/core expect us to be a view
}
createNativeView() {
const view = this.parent.nativeViewProtected.getMenu().add(android.view.Menu.NONE, this.index, android.view.Menu.NONE, this.title);
// trick because @nativescript/core expect us to be a view
view.defaultPaddings = { top: 0, left: 0, bottom: 0, right: 0 };
return view;
}
initNativeView() {
// override for super not to be called. isClickable does not exist on android.view.MenuItem
}
[iconProperty.setNative](iconSource) {
if (!iconSource) {
return null;
}
let is;
if (iconSource instanceof ImageSource) {
is = iconSource;
}
else 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);
}
this.nativeViewProtected.setIcon(is ? new android.graphics.drawable.BitmapDrawable(is.android) : null);
}
showBadge(value) {
this.parent.showBadge(this.index, value);
}
removeBadge() {
this.parent.removeBadge(this.index);
}
[activeColorCssProperty.setNative](activeColor) {
// not working for now
const color1 = activeColor instanceof Color ? activeColor.android : activeColor;
const color2 = this.inactiveColor instanceof Color
? this.inactiveColor.android
: this.nativeViewProtected.getIconTintList()
? this.nativeViewProtected.getIconTintList().getColorForState(stateSets.BACKGROUND_DEFAULT_STATE_2, color1)
: 0;
const colorStateList = createColorStateList(color1, color2);
// this.nativeViewProtected.color(colorStateList); // can we set the text color?
this.nativeViewProtected.setIconTintList(colorStateList);
}
[inactiveColorCssProperty.setNative](inactiveColor) {
// not working for now
const color2 = inactiveColor instanceof Color ? inactiveColor.android : inactiveColor;
const color1 = this.activeColor instanceof Color
? this.activeColor.android
: this.nativeViewProtected.getIconTintList()
? this.nativeViewProtected.getIconTintList().getColorForState(stateSets.SELECTED_STATE_SET, color2)
: 0;
const colorStateList = createColorStateList(color1, color2);
// this.nativeViewProtected.setText(colorStateList); // can we set the text color?
this.nativeViewProtected.setIconTintList(colorStateList);
}
}
//# sourceMappingURL=bottomnavigationbar.android.js.map