UNPKG

@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.

211 lines 6.74 kB
var BottomNavigationBarBase_1; import { CSSType, CoercibleProperty, Color, CssProperty, Property, Style, View, booleanConverter } from '@nativescript/core'; import { cssProperty } from '@nativescript-community/ui-material-core'; /** * Enum for Title Visibility options * * @export * @enum {number} */ export var TitleVisibility; (function (TitleVisibility) { TitleVisibility[TitleVisibility["selected"] = 0] = "selected"; TitleVisibility[TitleVisibility["always"] = 1] = "always"; TitleVisibility[TitleVisibility["never"] = 2] = "never"; })(TitleVisibility || (TitleVisibility = {})); export const selectedTabIndexProperty = new CoercibleProperty({ 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) }); let BottomNavigationBarBase = BottomNavigationBarBase_1 = class BottomNavigationBarBase extends View { constructor() { super(...arguments); this.titleVisibility = TitleVisibility.always; this._items = []; } get items() { 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_1.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_1.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); } onSelectedTabIndexChanged(oldIndex, newIndex) { this.selectedTabIndex = newIndex; // to be overridden in platform specific files this.notify({ eventName: BottomNavigationBarBase_1.tabSelectedEvent, object: this, oldIndex, newIndex }); } }; BottomNavigationBarBase.tabPressedEvent = 'tabPressed'; BottomNavigationBarBase.tabSelectedEvent = 'tabSelected'; BottomNavigationBarBase.tabReselectedEvent = 'tabReselected'; __decorate([ cssProperty ], BottomNavigationBarBase.prototype, "activeColor", void 0); __decorate([ cssProperty ], BottomNavigationBarBase.prototype, "inactiveColor", void 0); __decorate([ cssProperty ], BottomNavigationBarBase.prototype, "badgeColor", void 0); __decorate([ cssProperty ], BottomNavigationBarBase.prototype, "badgeTextColor", void 0); BottomNavigationBarBase = BottomNavigationBarBase_1 = __decorate([ CSSType('BottomNavigationBar') ], BottomNavigationBarBase); export { BottomNavigationBarBase }; export const tabsProperty = new Property({ name: 'tabs', affectsLayout: true }); tabsProperty.register(BottomNavigationBarBase); export const titleVisibilityProperty = new Property({ 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({ name: 'autoClearBadge', defaultValue: true, valueConverter: booleanConverter }); autoClearBadgeProperty.register(BottomNavigationBarBase); export const activeColorCssProperty = new CssProperty({ name: 'activeColor', cssName: 'active-color', equalityComparer: Color.equals, valueConverter: (v) => new Color(v) }); activeColorCssProperty.register(Style); export const inactiveColorCssProperty = new CssProperty({ name: 'inactiveColor', cssName: 'inactive-color', equalityComparer: Color.equals, valueConverter: (v) => new Color(v) }); inactiveColorCssProperty.register(Style); export const badgeColorCssProperty = new CssProperty({ name: 'badgeColor', cssName: 'badge-color', equalityComparer: Color.equals, valueConverter: (v) => new Color(v) }); badgeColorCssProperty.register(Style); export const badgeTextColorCssProperty = new CssProperty({ name: 'badgeTextColor', cssName: 'badge-text-color', equalityComparer: Color.equals, valueConverter: (v) => new Color(v) }); badgeTextColorCssProperty.register(Style); selectedTabIndexProperty.register(BottomNavigationBarBase); let BottomNavigationTabBase = class BottomNavigationTabBase extends View { }; __decorate([ cssProperty ], BottomNavigationTabBase.prototype, "title", void 0); __decorate([ cssProperty ], BottomNavigationTabBase.prototype, "icon", void 0); __decorate([ cssProperty ], BottomNavigationTabBase.prototype, "activeColor", void 0); __decorate([ cssProperty ], BottomNavigationTabBase.prototype, "inactiveColor", void 0); BottomNavigationTabBase = __decorate([ CSSType('BottomNavigationTab') ], BottomNavigationTabBase); export { BottomNavigationTabBase }; export const isSelectableProperty = new Property({ name: 'isSelectable', defaultValue: true, valueConverter: booleanConverter }); isSelectableProperty.register(BottomNavigationTabBase); export const iconProperty = new Property({ name: 'icon', affectsLayout: true }); iconProperty.register(BottomNavigationTabBase); //# sourceMappingURL=bottomnavigationbar-common.js.map