Top tab font family (#2410)

* Implement titleFontFamily in topTab option

* docs

* Pass TypefaceLoader instead of context

docs/_sidebar.md

@@ -11,6 +11,7 @@
 - Options
  - [NavigationOptions](/docs/options/NavigationOptions)
  - [TopBar](/docs/options/TopBar)
+ - [TopTab](/docs/options/TopTab)
  - [Button](/docs/options/Button)
  - [BottomTabs](/docs/options/BottomTabs)
  - [BottomTab](/docs/options/BottomTab)

docs/docs/options/TopTab.md

@@ -0,0 +1,9 @@
+<h1>TopTab</h1>
+
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| title | <code>string</code> | The tab's title in the TopTabs view |
+| titleFontFamily | <code>string</code> | Change the tab's title font family |
+

lib/android/app/src/main/java/com/reactnativenavigation/parse/LayoutFactory.java

@@ -4,6 +4,7 @@ import android.app.Activity;
 
 import com.facebook.react.ReactInstanceManager;
 import com.reactnativenavigation.react.ReactContainerViewCreator;
+import com.reactnativenavigation.utils.TypefaceLoader;
 import com.reactnativenavigation.viewcontrollers.BottomTabsController;
 import com.reactnativenavigation.viewcontrollers.ContainerViewController;
 import com.reactnativenavigation.viewcontrollers.SideMenuController;
@@ -22,11 +23,13 @@ public class LayoutFactory {
 	private final Activity activity;
 	private final ReactInstanceManager reactInstanceManager;
     private NavigationOptions defaultOptions;
+    private final TypefaceLoader typefaceManager;
 
     public LayoutFactory(Activity activity, final ReactInstanceManager reactInstanceManager, NavigationOptions defaultOptions) {
 		this.activity = activity;
 		this.reactInstanceManager = reactInstanceManager;
         this.defaultOptions = defaultOptions;
+        typefaceManager = new TypefaceLoader(activity);
     }
 
 	public ViewController create(final LayoutNode node) {
@@ -92,7 +95,7 @@ public class LayoutFactory {
 	private ViewController createContainer(LayoutNode node) {
 		String id = node.id;
 		String name = node.data.optString("name");
-		NavigationOptions navigationOptions = NavigationOptions.parse(node.data.optJSONObject("navigationOptions"), defaultOptions);
+		NavigationOptions navigationOptions = NavigationOptions.parse(typefaceManager, node.data.optJSONObject("navigationOptions"), defaultOptions);
 		return new ContainerViewController(activity,
                 id,
                 name,
@@ -128,8 +131,10 @@ public class LayoutFactory {
 
     private ViewController createTopTabs(LayoutNode node) {
         final List<TopTabController> tabs = new ArrayList<>();
-        for (LayoutNode child : node.children) {
-            tabs.add((TopTabController) create(child));
+        for (int i = 0; i < node.children.size(); i++) {
+            TopTabController tabController = (TopTabController) create(node.children.get(i));
+            tabController.setTabIndex(i);
+            tabs.add(tabController);
         }
         return new TopTabsController(activity, node.id, tabs);
     }
@@ -137,7 +142,7 @@ public class LayoutFactory {
     private ViewController createTopTab(LayoutNode node) {
         String id = node.id;
         String name = node.data.optString("name");
-        NavigationOptions navigationOptions = NavigationOptions.parse(node.data.optJSONObject("navigationOptions"), defaultOptions);
+        NavigationOptions navigationOptions = NavigationOptions.parse(typefaceManager, node.getNavigationOptions(), defaultOptions);
         return new TopTabController(activity,
                 id,
                 name,

lib/android/app/src/main/java/com/reactnativenavigation/parse/LayoutNode.java

@@ -35,4 +35,8 @@ public class LayoutNode {
 		this.data = data;
 		this.children = children;
 	}
+
+    JSONObject getNavigationOptions() {
+	    return data.optJSONObject("navigationOptions");
+    }
 }

lib/android/app/src/main/java/com/reactnativenavigation/parse/NavigationOptions.java

@@ -2,6 +2,8 @@ package com.reactnativenavigation.parse;
 
 import android.support.annotation.NonNull;
 
+import com.reactnativenavigation.utils.TypefaceLoader;
+
 import org.json.JSONObject;
 
 import java.util.ArrayList;
@@ -22,18 +24,18 @@ public class NavigationOptions implements DEFAULT_VALUES {
 	}
 
     @NonNull
-    public static NavigationOptions parse(JSONObject json) {
-        return parse(json, new NavigationOptions());
+    public static NavigationOptions parse(TypefaceLoader typefaceManager, JSONObject json) {
+        return parse(typefaceManager, json, new NavigationOptions());
     }
 
 	@NonNull
-	public static NavigationOptions parse(JSONObject json, @NonNull NavigationOptions defaultOptions) {
+	public static NavigationOptions parse(TypefaceLoader typefaceManager, JSONObject json, @NonNull NavigationOptions defaultOptions) {
 		NavigationOptions result = new NavigationOptions();
 		if (json == null) return result;
 
 		result.topBarOptions = TopBarOptions.parse(json.optJSONObject("topBar"));
 		result.topTabsOptions = TopTabsOptions.parse(json.optJSONObject("topTabs"));
-        result.topTabOptions = TopTabOptions.parse(json.optJSONObject("topTab"));
+        result.topTabOptions = TopTabOptions.parse(typefaceManager, json.optJSONObject("topTab"));
 		result.bottomTabsOptions = BottomTabsOptions.parse(json.optJSONObject("bottomTabs"));
 		result.rightButtons = Button.parseJsonArray(json.optJSONArray("rightButtons"));
         result.leftButtons = Button.parseJsonArray(json.optJSONArray("leftButtons"));
@@ -42,7 +44,7 @@ public class NavigationOptions implements DEFAULT_VALUES {
 	}
 
     @NonNull public TopBarOptions topBarOptions = new TopBarOptions();
-    @NonNull private TopTabsOptions topTabsOptions = new TopTabsOptions();
+    @NonNull public TopTabsOptions topTabsOptions = new TopTabsOptions();
     @NonNull public TopTabOptions topTabOptions = new TopTabOptions();
     @NonNull public BottomTabsOptions bottomTabsOptions = new BottomTabsOptions();
     public ArrayList<Button> leftButtons;

lib/android/app/src/main/java/com/reactnativenavigation/parse/TopTabOptions.java

@@ -1,15 +1,23 @@
 package com.reactnativenavigation.parse;
 
+import android.graphics.Typeface;
+import android.support.annotation.Nullable;
+
+import com.reactnativenavigation.utils.TypefaceLoader;
+
 import org.json.JSONObject;
 
 public class TopTabOptions implements DEFAULT_VALUES {
     public String title = NO_VALUE;
+    @Nullable public Typeface fontFamily;
+    public int tabIndex;
 
-    public static TopTabOptions parse(JSONObject json) {
+    public static TopTabOptions parse(TypefaceLoader typefaceManager, JSONObject json) {
         TopTabOptions result = new TopTabOptions();
         if (json == null) return result;
 
         result.title = json.optString("title", NO_VALUE);
+        result.fontFamily = typefaceManager.getTypeFace(json.optString("titleFontFamily"));
         return result;
     }
 

lib/android/app/src/main/java/com/reactnativenavigation/parse/TopTabsOptions.java

@@ -1,10 +1,15 @@
 package com.reactnativenavigation.parse;
 
+import android.support.annotation.Nullable;
+
 import org.json.JSONObject;
 
 public class TopTabsOptions implements DEFAULT_VALUES {
-    public static TopTabsOptions parse(JSONObject topTabs) {
-        return new TopTabsOptions();
+
+    public static TopTabsOptions parse(@Nullable JSONObject json) {
+        TopTabsOptions result = new TopTabsOptions();
+        if (json == null) return result;
+        return result;
     }
 
     void mergeWith(TopTabsOptions topTabsOptions) {

lib/android/app/src/main/java/com/reactnativenavigation/presentation/OptionsPresenter.java

@@ -6,6 +6,7 @@ import com.reactnativenavigation.anim.StackAnimator;
 import com.reactnativenavigation.parse.Button;
 import com.reactnativenavigation.parse.NavigationOptions;
 import com.reactnativenavigation.parse.TopBarOptions;
+import com.reactnativenavigation.parse.TopTabOptions;
 import com.reactnativenavigation.utils.TypefaceLoader;
 import com.reactnativenavigation.views.TopBar;
 
@@ -23,10 +24,11 @@ public class OptionsPresenter {
         animator = new StackAnimator(topBar.getContext());
     }
 
-	public void applyOptions(NavigationOptions options) {
+    public void applyOptions(NavigationOptions options) {
         applyTopBarOptions(options.topBarOptions);
         applyButtons(options.leftButtons, options.rightButtons);
-	}
+        applyTopTabOptions(options.topTabOptions);
+    }
 
     private void applyTopBarOptions(TopBarOptions options) {
         topBar.setTitle(options.title);
@@ -34,8 +36,8 @@ public class OptionsPresenter {
         topBar.setTitleTextColor(options.textColor);
         topBar.setTitleFontSize(options.textFontSize);
 
-        TypefaceLoader typefaceLoader = new TypefaceLoader();
-        topBar.setTitleTypeface(typefaceLoader.getTypeFace(topBar.getContext(), options.textFontFamily));
+        TypefaceLoader typefaceLoader = new TypefaceLoader(topBar.getContext());
+        topBar.setTitleTypeface(typefaceLoader.getTypeFace(options.textFontFamily));
         if (options.hidden == NavigationOptions.BooleanOptions.True) {
             hideTopBar(options.animateHide);
         }
@@ -69,4 +71,10 @@ public class OptionsPresenter {
     private void applyButtons(ArrayList<Button> leftButtons, ArrayList<Button> rightButtons) {
         topBar.setButtons(leftButtons, rightButtons);
     }
+
+    private void applyTopTabOptions(TopTabOptions topTabOptions) {
+        if (topTabOptions.fontFamily != null) {
+            topBar.setTopTabFontFamily(topTabOptions.tabIndex, topTabOptions.fontFamily);
+        }
+    }
 }

lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationModule.java

@@ -15,6 +15,7 @@ import com.reactnativenavigation.parse.LayoutNode;
 import com.reactnativenavigation.parse.LayoutNodeParser;
 import com.reactnativenavigation.parse.NavigationOptions;
 import com.reactnativenavigation.parse.OverlayOptions;
+import com.reactnativenavigation.utils.TypefaceLoader;
 import com.reactnativenavigation.utils.UiThread;
 import com.reactnativenavigation.viewcontrollers.Navigator;
 import com.reactnativenavigation.viewcontrollers.ViewController;
@@ -48,7 +49,7 @@ public class NavigationModule extends ReactContextBaseJavaModule {
 
 	@ReactMethod
 	public void setDefaultOptions(final ReadableMap options) {
-        final NavigationOptions defaultOptions = NavigationOptions.parse(JSONParser.parse(options));
+        final NavigationOptions defaultOptions = NavigationOptions.parse(new TypefaceLoader(activity()), JSONParser.parse(options));
         handle(new Runnable() {
             @Override
             public void run() {
@@ -59,7 +60,7 @@ public class NavigationModule extends ReactContextBaseJavaModule {
 
 	@ReactMethod
 	public void setOptions(final String onContainerId, final ReadableMap options) {
-		final NavigationOptions navOptions = NavigationOptions.parse(JSONParser.parse(options));
+		final NavigationOptions navOptions = NavigationOptions.parse(new TypefaceLoader(activity()), JSONParser.parse(options));
 		handle(new Runnable() {
 			@Override
 			public void run() {

lib/android/app/src/main/java/com/reactnativenavigation/utils/TypefaceLoader.java

@@ -4,6 +4,7 @@ import android.content.Context;
 import android.content.res.AssetManager;
 import android.graphics.Typeface;
 import android.support.annotation.Nullable;
+import android.text.TextUtils;
 
 import java.io.IOException;
 import java.util.Arrays;
@@ -13,14 +14,17 @@ import java.util.Map;
 
 public class TypefaceLoader {
 	private static final Map<String, Typeface> typefaceCache = new HashMap<>();
+    private Context context;
+
+    public TypefaceLoader(Context context) {
+        this.context = context;
+    }
+
+    @Nullable
+	public Typeface getTypeFace(String fontFamilyName) {
+		if (TextUtils.isEmpty(fontFamilyName)) return null;
+		if (typefaceCache.containsKey(fontFamilyName)) return typefaceCache.get(fontFamilyName);
 
-	public Typeface getTypeFace(Context context, String fontFamilyName) {
-		if (fontFamilyName == null) {
-			return null;
-		}
-		if (typefaceCache.containsKey(fontFamilyName)) {
-			return typefaceCache.get(fontFamilyName);
-		}
 		Typeface result = load(context, fontFamilyName);
 		typefaceCache.put(fontFamilyName, result);
 		return result;

lib/android/app/src/main/java/com/reactnativenavigation/utils/ViewUtils.java

@@ -0,0 +1,25 @@
+package com.reactnativenavigation.utils;
+
+import android.support.annotation.Nullable;
+import android.view.View;
+import android.view.ViewGroup;
+
+public class ViewUtils {
+    @Nullable
+    public static <T> T findChildByClass(ViewGroup root, Class clazz) {
+        for (int i = 0; i < root.getChildCount(); i++) {
+            View view = root.getChildAt(i);
+            if (clazz.isAssignableFrom(view.getClass())) {
+                return (T) view;
+            }
+
+            if (view instanceof ViewGroup) {
+                view = findChildByClass((ViewGroup) view, clazz);
+                if (view != null && clazz.isAssignableFrom(view.getClass())) {
+                    return (T) view;
+                }
+            }
+        }
+        return null;
+    }
+}

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/toptabs/TopTabController.java

@@ -74,4 +74,8 @@ public class TopTabController extends ViewController implements NavigationOption
     String getTabTitle() {
         return options.topTabOptions.title;
     }
+
+    public void setTabIndex(int i) {
+        options.topTabOptions.tabIndex = i;
+    }
 }

lib/android/app/src/main/java/com/reactnativenavigation/views/TopBar.java

@@ -26,8 +26,9 @@ public class TopBar extends AppBarLayout {
 
     public TopBar(final Context context, Container container) {
         super(context);
-        titleBar = new Toolbar(context);
         this.container = container;
+        titleBar = new Toolbar(context);
+        topTabs = new TopTabs(getContext());
         addView(titleBar);
     }
 
@@ -57,6 +58,10 @@ public class TopBar extends AppBarLayout {
 		}
 	}
 
+    public void setTopTabFontFamily(int tabIndex, Typeface fontFamily) {
+        topTabs.setFontFamily(tabIndex, fontFamily);
+    }
+
 	public void setButtons(ArrayList<Button> leftButtons, ArrayList<Button> rightButtons) {
 		setLeftButtons(leftButtons);
 		setRightButtons(rightButtons);
@@ -129,7 +134,6 @@ public class TopBar extends AppBarLayout {
     }
 
     private void initTopTabs() {
-        topTabs = new TopTabs(getContext());
         addView(topTabs);
     }
 }

lib/android/app/src/main/java/com/reactnativenavigation/views/TopTabs.java

@@ -1,11 +1,18 @@
 package com.reactnativenavigation.views;
 
 import android.content.Context;
+import android.graphics.Typeface;
 import android.support.design.widget.TabLayout;
 
 public class TopTabs extends TabLayout {
+    private final TopTabsStyleHelper styleHelper;
 
     public TopTabs(Context context) {
         super(context);
+        styleHelper = new TopTabsStyleHelper(this);
+    }
+
+    public void setFontFamily(int tabIndex, Typeface fontFamily) {
+        styleHelper.setFontFamily(tabIndex, fontFamily);
     }
 }

lib/android/app/src/main/java/com/reactnativenavigation/views/TopTabsStyleHelper.java

@@ -0,0 +1,26 @@
+package com.reactnativenavigation.views;
+
+import android.graphics.Typeface;
+import android.view.ViewGroup;
+import android.widget.TextView;
+
+import com.reactnativenavigation.utils.ViewUtils;
+
+class TopTabsStyleHelper {
+    private TopTabs topTabs;
+
+    TopTabsStyleHelper(TopTabs topTabs) {
+        this.topTabs = topTabs;
+    }
+
+    void setFontFamily(int tabIndex, Typeface fontFamily) {
+        TextView title = ViewUtils.findChildByClass(getTabView(tabIndex), TextView.class);
+        if (title != null) {
+            title.setTypeface(fontFamily);
+        }
+    }
+
+    private ViewGroup getTabView(int tabIndex) {
+        return (ViewGroup) ((ViewGroup) topTabs.getChildAt(0)).getChildAt(tabIndex);
+    }
+}

lib/android/app/src/test/java/com/reactnativenavigation/parse/NavigationOptionsTest.java

@@ -1,8 +1,10 @@
 package com.reactnativenavigation.parse;
 
 import android.support.annotation.NonNull;
+import android.test.mock.MockContext;
 
 import com.reactnativenavigation.BaseTest;
+import com.reactnativenavigation.utils.TypefaceLoader;
 
 import org.json.JSONException;
 import org.json.JSONObject;
@@ -24,10 +26,11 @@ public class NavigationOptionsTest extends BaseTest {
     private static final int BOTTOM_TABS_BADGE = 3;
     private static final String BOTTOM_TABS_CURRENT_TAB_ID = "ContainerId";
     private static final int BOTTOM_TABS_CURRENT_TAB_INDEX = 1;
+    private TypefaceLoader mockLoader = new TypefaceLoader(new MockContext());
 
     @Test
 	public void parsesNullAsDefaultEmptyOptions() throws Exception {
-		assertThat(NavigationOptions.parse(null)).isNotNull();
+		assertThat(NavigationOptions.parse(mockLoader, null)).isNotNull();
 	}
 
 	@Test
@@ -35,7 +38,7 @@ public class NavigationOptionsTest extends BaseTest {
 		JSONObject json = new JSONObject()
                 .put("topBar", createTopBar())
                 .put("bottomTabs", createTabBar());
-		NavigationOptions result = NavigationOptions.parse(json);
+		NavigationOptions result = NavigationOptions.parse(mockLoader, json);
         assertResult(result);
 	}
 
@@ -100,7 +103,7 @@ public class NavigationOptionsTest extends BaseTest {
         JSONObject json = new JSONObject();
         json.put("topBar", createTopBar());
         json.put("bottomTabs", createTabBar());
-        NavigationOptions defaultOptions = NavigationOptions.parse(json);
+        NavigationOptions defaultOptions = NavigationOptions.parse(mockLoader, json);
         NavigationOptions options = new NavigationOptions();
 
         options.mergeWith(defaultOptions);
@@ -112,12 +115,12 @@ public class NavigationOptionsTest extends BaseTest {
         JSONObject defaultJson = new JSONObject()
             .put("topBar", createOtherTopBar())
             .put("bottomTabs", createOtherTabBar());
-        NavigationOptions defaultOptions = NavigationOptions.parse(defaultJson);
+        NavigationOptions defaultOptions = NavigationOptions.parse(mockLoader, defaultJson);
 
         JSONObject json = new JSONObject()
                 .put("topBar", createTopBar())
                 .put("bottomTabs", createTabBar());
-        NavigationOptions options = NavigationOptions.parse(json);
+        NavigationOptions options = NavigationOptions.parse(mockLoader, json);
         options.withDefaultOptions(defaultOptions);
         assertResult(options);
     }

lib/android/app/src/test/java/com/reactnativenavigation/utils/TypefaceLoaderTest.java

@@ -9,56 +9,50 @@ import com.reactnativenavigation.BaseTest;
 import org.junit.Test;
 import org.mockito.Mockito;
 
-import java.io.IOException;
-
 import static org.assertj.core.api.Java6Assertions.assertThat;
 
-/**
- * Created by romanko on 9/19/17.
- */
-
 public class TypefaceLoaderTest extends BaseTest {
 
 	@Test
 	public void loadTypefaceNoAssets() {
 		Context context = new MockContext();
-		TypefaceLoader mockedLoader = Mockito.spy(TypefaceLoader.class);
+		TypefaceLoader mockedLoader = Mockito.spy(new TypefaceLoader(context));
 		Mockito.doReturn(null).when(mockedLoader).getTypefaceFromAssets(context, "Helvetica-Bold");
 
-		Typeface typeface = mockedLoader.getTypeFace(context, "Helvetica-Bold");
+		Typeface typeface = mockedLoader.getTypeFace("Helvetica-Bold");
 		assertThat(typeface).isNotNull();
 		assertThat(typeface.getStyle()).isEqualTo(Typeface.BOLD);
 	}
 
 	@Test
 	public void loadTypefaceWithAssets() {
-		Context context = new MockContext();
-		TypefaceLoader mockedLoader = Mockito.spy(TypefaceLoader.class);
+        Context context = new MockContext();
+        TypefaceLoader mockedLoader = Mockito.spy(new TypefaceLoader(context));
 		Mockito.doReturn(Typeface.create("Helvetica-Italic", Typeface.ITALIC)).when(mockedLoader).getTypefaceFromAssets(context, "Helvetica-Italic");
 
-		Typeface typeface = mockedLoader.getTypeFace(context, "Helvetica-Italic");
+		Typeface typeface = mockedLoader.getTypeFace("Helvetica-Italic");
 		assertThat(typeface).isNotNull();
 		assertThat(typeface.getStyle()).isEqualTo(Typeface.ITALIC);
 	}
 
 	@Test
 	public void loadTypefaceWrongName() {
-		Context context = new MockContext();
-		TypefaceLoader mockedLoader = Mockito.spy(TypefaceLoader.class);
+        Context context = new MockContext();
+        TypefaceLoader mockedLoader = Mockito.spy(new TypefaceLoader(context));
 		Mockito.doReturn(null).when(mockedLoader).getTypefaceFromAssets(context, "Some-name");
 
-		Typeface typeface = mockedLoader.getTypeFace(context, "Some-name");
+		Typeface typeface = mockedLoader.getTypeFace("Some-name");
 		assertThat(typeface).isNotNull();
 		assertThat(typeface.getStyle()).isEqualTo(Typeface.NORMAL);
 	}
 
 	@Test
 	public void loadTypefaceNull() {
-		Context context = new MockContext();
-		TypefaceLoader mockedLoader = Mockito.spy(TypefaceLoader.class);
+        Context context = new MockContext();
+        TypefaceLoader mockedLoader = Mockito.spy(new TypefaceLoader(context));
 		Mockito.doReturn(null).when(mockedLoader).getTypefaceFromAssets(context, null);
 
-		Typeface typeface = mockedLoader.getTypeFace(context, null);
+		Typeface typeface = mockedLoader.getTypeFace(null);
 		assertThat(typeface).isNull();
 	}
 }

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/TopTabsControllerMock.java

@@ -7,7 +7,7 @@ import android.view.ViewGroup;
 import java.util.Collection;
 
 public class TopTabsControllerMock extends ParentController {
-    public TopTabsControllerMock(Activity activity, String id) {
+    TopTabsControllerMock(Activity activity, String id) {
         super(activity, id);
     }
 

lib/src/params/options/TopTab.js

@@ -0,0 +1,13 @@
+class TopTab {
+  /**
+   * @property {string} title The tab's title in the TopTabs view
+   * @property {string} [titleFontFamily] Change the tab's title font family
+   */
+  constructor(topTab) {
+    this.title = topTab.title;
+    this.titleFontFamily = topTab.titleFontFamily;
+  }
+
+}
+
+module.exports = TopTab;

lib/src/params/options/TopTab.test.js

@@ -0,0 +1,14 @@
+const TopTab = require('./TopTab');
+
+const TOP_TAB = {
+  title: 'something',
+  titleFontFamily: 'Dosis-Regular'
+};
+
+describe('TopBar', () => {
+  it('Parses TopBar', () => {
+    const uut = new TopTab(TOP_TAB);
+    expect(uut.title).toEqual('something');
+    expect(uut.titleFontFamily).toEqual('Dosis-Regular');
+  });
+});

playground/src/containers/WelcomeScreen.js

@@ -182,7 +182,8 @@ class WelcomeScreen extends Component {
           },
           navigationOptions: {
             topTab: {
-              title: 'Tab 2'
+              title: 'Tab 2',
+              titleFontFamily: 'Dosis-Regular'
             }
           }
         },