Skip to content

Commit 55b03fc

Browse files
farfromrefugfarfromrefug
committed
fix(bottomnavigationbar): bunch of fixes!
1 parent 5864177 commit 55b03fc

File tree

3 files changed

+87
-37
lines changed

3 files changed

+87
-37
lines changed

‎src/bottomnavigationbar/bottomnavigationbar-common.ts

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,9 @@ export interface TabReselectedEventData extends EventData {
4141
* @enum {number}
4242
*/
4343
export enum TitleVisibility {
44-
Selected = 0,
45-
Always = 1,
46-
Never = 2,
44+
selected = 0,
45+
always = 1,
46+
never = 2,
4747
}
4848

4949
@CSSType('BottomNavigationBar')
@@ -54,9 +54,11 @@ export abstract class BottomNavigationBarBase extends View {
5454

5555
@cssProperty activeColor: Color;
5656
@cssProperty inactiveColor: Color;
57+
@cssProperty badgeColor: Color;
58+
@cssProperty badgeTextColor: Color;
5759

5860
selectedTabIndex: number = 0;
59-
titleVisibility: TitleVisibility = TitleVisibility.Selected;
61+
titleVisibility: TitleVisibility = TitleVisibility.always;
6062

6163
protected _items: BottomNavigationTabBase[] = [];
6264

@@ -143,8 +145,7 @@ export const titleVisibilityProperty = new Property<BottomNavigationBarBase, Tit
143145
name: 'titleVisibility',
144146
equalityComparer: (x, y) => x === y,
145147
affectsLayout: true,
146-
defaultValue: TitleVisibility.Selected,
147-
valueConverter: (v) => TitleVisibility[v],
148+
valueConverter: (v) => (typeof v === 'string') ? TitleVisibility[v.toLowerCase()]:v ,
148149
});
149150

150151
titleVisibilityProperty.register(BottomNavigationBarBase);
@@ -153,7 +154,6 @@ export const activeColorCssProperty = new CssProperty<Style, Color>({
153154
name: 'activeColor',
154155
cssName: 'active-color',
155156
equalityComparer: Color.equals,
156-
defaultValue: new Color('black'),
157157
valueConverter: (v) => new Color(v),
158158
});
159159
activeColorCssProperty.register(Style);
@@ -162,10 +162,23 @@ export const inactiveColorCssProperty = new CssProperty<Style, Color>({
162162
name: 'inactiveColor',
163163
cssName: 'inactive-color',
164164
equalityComparer: Color.equals,
165-
defaultValue: new Color('gray'),
166165
valueConverter: (v) => new Color(v),
167166
});
168167
inactiveColorCssProperty.register(Style);
168+
export const badgeColorCssProperty = new CssProperty<Style, Color>({
169+
name: 'badgeColor',
170+
cssName: 'badge-color',
171+
equalityComparer: Color.equals,
172+
valueConverter: (v) => new Color(v),
173+
});
174+
badgeColorCssProperty.register(Style);
175+
export const badgeTextColorCssProperty = new CssProperty<Style, Color>({
176+
name: 'badgeTextColor',
177+
cssName: 'badge-text-color',
178+
equalityComparer: Color.equals,
179+
valueConverter: (v) => new Color(v),
180+
});
181+
badgeTextColorCssProperty.register(Style);
169182

170183
// Bottom Navigation Tab
171184

‎src/bottomnavigationbar/bottomnavigationbar.android.ts

Lines changed: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
import { state } from '@nativescript-community/ui-material-core/android/utils';
1+
import { state, stateSets } from '@nativescript-community/ui-material-core/android/utils';
22
import { Color } from '@nativescript/core';
33
import {
44
BottomNavigationBarBase,
55
BottomNavigationTabBase,
66
TitleVisibility,
77
activeColorCssProperty,
8+
badgeColorCssProperty,
9+
badgeTextColorCssProperty,
810
inactiveColorCssProperty,
911
tabsProperty,
1012
titleVisibilityProperty
@@ -83,18 +85,18 @@ const getOnTabReselectedListener = () => {
8385
return OnTabReselectedListener;
8486
};
8587

86-
function createColorStateList(activeColor: Color, inactiveColor: Color) {
88+
function createColorStateList(activeColor: number, inactiveColor: number) {
8789
const stateChecked = Array.create('int', 1);
8890
stateChecked[0] = state.checked;
8991
const stateUnChecked = Array.create('int', 0);
9092

91-
const states = java.lang.reflect.Array.newInstance(stateChecked.getClass() || stateUnChecked.getClass(), 2);
93+
const states = Array.create('[I', 2);
9294
states[0] = stateChecked;
9395
states[1] = stateUnChecked;
9496

9597
const colors = Array.create('int', 2);
96-
colors[0] = activeColor.android;
97-
colors[1] = inactiveColor.android;
98+
colors[0] = activeColor;
99+
colors[1] = inactiveColor;
98100

99101
return new android.content.res.ColorStateList(states, colors);
100102
}
@@ -133,7 +135,13 @@ export class BottomNavigationBar extends BottomNavigationBarBase {
133135
// showBadge method is available in v1.1.0-alpha07 of material components
134136
// but NS team has the .d.ts for version 1
135137
// that's why we need to cast the nativeView to any to avoid typing errors
136-
const badge = (this.nativeViewProtected as any).getOrCreateBadge(index);
138+
const badge = (this.nativeViewProtected).getOrCreateBadge(index);
139+
if (this.badgeColor) {
140+
badge.setBackgroundColor(this.badgeColor.android);
141+
}
142+
if (this.badgeTextColor) {
143+
badge.setBadgeTextColor(this.badgeTextColor.android);
144+
}
137145
if (value) {
138146
badge.setNumber(value);
139147
}
@@ -155,13 +163,17 @@ export class BottomNavigationBar extends BottomNavigationBarBase {
155163
}
156164

157165
[activeColorCssProperty.setNative](activeColor: Color) {
158-
const colorStateList = createColorStateList(activeColor, this.inactiveColor);
166+
const color1 = activeColor instanceof Color ? activeColor.android : activeColor;
167+
const color2 = this.inactiveColor instanceof Color ? this.inactiveColor.android : this.nativeViewProtected.getItemTextColor().getColorForState(stateSets.BACKGROUND_DEFAULT_STATE_2, color1);
168+
const colorStateList = createColorStateList(color1, color2);
159169
this.nativeViewProtected.setItemTextColor(colorStateList);
160170
this.nativeViewProtected.setItemIconTintList(colorStateList);
161171
}
162172

163173
[inactiveColorCssProperty.setNative](inactiveColor: Color) {
164-
const colorStateList = createColorStateList(this.activeColor, inactiveColor);
174+
const color2= inactiveColor instanceof Color ? inactiveColor.android : inactiveColor;
175+
const color1 = this.activeColor instanceof Color ? this.activeColor.android : (this.nativeViewProtected.getItemTextColor().getColorForState(stateSets.FOCUSED_STATE_SET, color2));
176+
const colorStateList = createColorStateList(color1, color2);
165177
this.nativeViewProtected.setItemTextColor(colorStateList);
166178
this.nativeViewProtected.setItemIconTintList(colorStateList);
167179
}
@@ -225,15 +237,19 @@ export class BottomNavigationTab extends BottomNavigationTabBase {
225237
}
226238
[activeColorCssProperty.setNative](activeColor: Color) {
227239
// not working for now
228-
// const colorStateList = createColorStateList(activeColor, this.inactiveColor);
240+
const color1 = activeColor instanceof Color ? activeColor.android : activeColor;
241+
const color2 = this.inactiveColor instanceof Color ? this.inactiveColor.android : (this.nativeViewProtected.getIconTintList()?this.nativeViewProtected.getIconTintList().getColorForState(stateSets.BACKGROUND_DEFAULT_STATE_2, color1): 0);
242+
const colorStateList = createColorStateList(color1, color2);
229243
// this.nativeViewProtected.color(colorStateList); // can we set the text color?
230-
// this.nativeViewProtected.setIconTintList(colorStateList);
244+
this.nativeViewProtected.setIconTintList(colorStateList);
231245
}
232246

233247
[inactiveColorCssProperty.setNative](inactiveColor: Color) {
234248
// not working for now
235-
// const colorStateList = createColorStateList(this.activeColor, inactiveColor);
249+
const color2= inactiveColor instanceof Color ? inactiveColor.android : inactiveColor;
250+
const color1 = this.activeColor instanceof Color ? this.activeColor.android : (this.nativeViewProtected.getIconTintList()?this.nativeViewProtected.getIconTintList().getColorForState(stateSets.FOCUSED_STATE_SET, color2):0);
251+
const colorStateList = createColorStateList(color1, color2);
236252
// this.nativeViewProtected.setText(colorStateList); // can we set the text color?
237-
// this.nativeViewProtected.setIconTintList(colorStateList);
253+
this.nativeViewProtected.setIconTintList(colorStateList);
238254
}
239255
}

‎src/bottomnavigationbar/bottomnavigationbar.ios.ts

Lines changed: 38 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { themer } from '@nativescript-community/ui-material-core';
22
import { Application, Color, Screen, Utils, backgroundColorProperty } from '@nativescript/core';
3-
import { BottomNavigationBarBase, BottomNavigationTabBase, activeColorCssProperty, inactiveColorCssProperty, tabsProperty, titleVisibilityProperty } from './bottomnavigationbar-common';
3+
import { BottomNavigationBarBase, BottomNavigationTabBase,TitleVisibility, activeColorCssProperty, badgeColorCssProperty, badgeTextColorCssProperty, inactiveColorCssProperty, tabsProperty, titleVisibilityProperty } from './bottomnavigationbar-common';
44

55
@NativeClass
66
class BottomNavigationBarDelegate extends NSObject {
@@ -36,8 +36,6 @@ class BottomNavigationBarDelegate extends NSObject {
3636
return bottomNavigationTab.isSelectable;
3737
}
3838
}
39-
{
40-
}
4139
export class BottomNavigationBar extends BottomNavigationBarBase {
4240
nativeViewProtected: MDCBottomNavigationBar;
4341
_items: BottomNavigationTab[];
@@ -107,13 +105,20 @@ export class BottomNavigationBar extends BottomNavigationBarBase {
107105
this.createTabs(tabs);
108106
}
109107

110-
[titleVisibilityProperty.setNative](titleVisibility: MDCBottomNavigationBarTitleVisibility) {
111-
this.nativeViewProtected.titleVisibility = titleVisibility;
108+
[titleVisibilityProperty.setNative](titleVisibility: TitleVisibility) {
109+
this.nativeViewProtected.titleVisibility = titleVisibility as number;
112110
}
113111

114112
[activeColorCssProperty.setNative](activeColor: Color) {
115113
this.nativeViewProtected.selectedItemTintColor = activeColor ? activeColor.ios : null;
116114
}
115+
[badgeColorCssProperty.setNative](color: Color) {
116+
this.nativeViewProtected.itemBadgeBackgroundColor = color ? color.ios : null;
117+
}
118+
119+
[badgeTextColorCssProperty.setNative](color: Color) {
120+
this.nativeViewProtected.itemBadgeTextColor = color ? color.ios : null;
121+
}
117122

118123
[inactiveColorCssProperty.setNative](inactiveColor: Color) {
119124
this.nativeViewProtected.unselectedItemTintColor = inactiveColor ? inactiveColor.ios : null;
@@ -136,45 +141,61 @@ export class BottomNavigationBar extends BottomNavigationBarBase {
136141
});
137142
this.nativeViewProtected.items = new NSArray({ array: bottomNavigationTabs });
138143

139-
this.selectTabNative(this.selectedTabIndex);
144+
this.nativeViewProtected.selectedItem = this.nativeViewProtected.items[this.selectedTabIndex];
140145
}
141146

142147
protected selectTabNative(index: number): void {
143148
if (this.nativeViewProtected.items.count === 0) {
144149
return;
145150
}
146-
147-
this.nativeViewProtected.selectedItem = this.nativeViewProtected.items[index];
148-
this.selectedTabIndex = index;
151+
// ios impl does not trigger delegates!
152+
const itemToSelect = this.nativeViewProtected.items[index];
153+
if (this._delegate.bottomNavigationBarShouldSelectItem(this.nativeViewProtected, itemToSelect)) {
154+
this.nativeViewProtected.selectedItem = this.nativeViewProtected.items[index];
155+
this._delegate.bottomNavigationBarDidSelectItem(this.nativeViewProtected, itemToSelect);
156+
this.selectedTabIndex = index;
157+
}
149158
}
150159
}
151160

152161
// Bottom Navigation Tab
153162

163+
declare class MDCBottomNavigationItemView extends UIView {
164+
selectedItemTintColor: UIColor;
165+
unselectedItemTintColor: UIColor;
166+
selectedItemTitleColor: UIColor;
167+
badgeTextColor: UIColor;
168+
badgeColor: UIColor;
169+
}
170+
154171
export class BottomNavigationTab extends BottomNavigationTabBase {
155172
nativeViewProtected: UITabBarItem;
156173
createNativeView() {
157-
return UITabBarItem.alloc().initWithTitleImageTag(this.title, this.getNativeIcon(), 0);
174+
let icon = this.getNativeIcon() ;
175+
if (icon) {
176+
icon = icon.imageWithRenderingMode(UIImageRenderingMode.Automatic);
177+
}
178+
return UITabBarItem.alloc().initWithTitleImageTag(this.title, icon, 0);
158179
}
159180

160181
getNativeIcon(): UIImage {
161182
return this.icon && this.icon.ios;
162183
}
163184

164185
getMDView() {
165-
return (this.parent as BottomNavigationBar).nativeViewProtected.viewForItem(this.nativeViewProtected) as any;
186+
return (this.parent as BottomNavigationBar).nativeViewProtected.viewForItem(this.nativeViewProtected) as MDCBottomNavigationItemView;
166187
}
167188

168189
[activeColorCssProperty.setNative](activeColor: Color) {
169-
// not working for now
170-
// const color = activeColor ? activeColor.ios : null;
171-
// this.getMDView().selectedItemTintColor = color;
190+
const color = activeColor ? activeColor.ios : null;
191+
// TODO: it wont work for now as MDCBottomNavigationItemView is not exposed
192+
this.getMDView().selectedItemTintColor = color;
172193
}
173194

174195
[inactiveColorCssProperty.setNative](inactiveColor: Color) {
175-
// not working for now
176-
// const color = inactiveColor ? inactiveColor.ios : null;
177-
// this.getMDView().unselectedItemTintColor = color;
196+
const color = inactiveColor ? inactiveColor.ios : null;
197+
// TODO: it wont work for now as MDCBottomNavigationItemView is not exposed
198+
this.getMDView().unselectedItemTintColor = color;
178199
}
179200

180201
showBadge(value?: number): void {

0 commit comments

Comments
 (0)