소스 검색

Implement BottomTabs.titleDisplayMode styling option

This option allows to control when tab titles are displayed

* showWhenActive: when a tab is focused
* alwaysShow: show regardless of which tab is in
* alwaysHide: never show tab titles
Guy Carmeli 6 년 전
부모
커밋
aca8b49df4

+ 3
- 0
docs/docs/styling.md 파일 보기

@@ -193,6 +193,9 @@ Navigation.mergeOptions(this.props.componentId, {
193 193
     title: {
194 194
       height: 70 // TitleBar height in dp.
195 195
     }
196
+  },
197
+  bottomTabs: {
198
+    titleDisplayMode: 'alwaysShow' | 'showWhenActive' | 'alwaysHide' // Sets the title state for each tab.
196 199
   }
197 200
 }
198 201
 ```

+ 22
- 51
lib/android/app/src/main/java/com/reactnativenavigation/parse/BottomTabsOptions.java 파일 보기

@@ -8,6 +8,7 @@ import com.reactnativenavigation.parse.params.NullNumber;
8 8
 import com.reactnativenavigation.parse.params.NullText;
9 9
 import com.reactnativenavigation.parse.params.Number;
10 10
 import com.reactnativenavigation.parse.params.Text;
11
+import com.reactnativenavigation.parse.params.TitleDisplayMode;
11 12
 import com.reactnativenavigation.parse.parsers.BoolParser;
12 13
 import com.reactnativenavigation.parse.parsers.ColorParser;
13 14
 import com.reactnativenavigation.parse.parsers.NumberParser;
@@ -30,6 +31,7 @@ public class BottomTabsOptions {
30 31
         options.drawBehind = BoolParser.parse(json, "drawBehind");
31 32
 		options.animate = BoolParser.parse(json,"animate");
32 33
         options.testId = TextParser.parse(json, "testID");
34
+        options.titleDisplayMode = TitleDisplayMode.fromString(json.optString("titleDisplayMode"));
33 35
 
34 36
 		return options;
35 37
 	}
@@ -43,61 +45,30 @@ public class BottomTabsOptions {
43 45
 	public Number currentTabIndex = new NullNumber();
44 46
 	public Text currentTabId = new NullText();
45 47
     public Text testId = new NullText();
48
+    public TitleDisplayMode titleDisplayMode = TitleDisplayMode.UNDEFINED;
46 49
 
47 50
 	void mergeWith(final BottomTabsOptions other) {
48
-		if (other.currentTabId.hasValue()) {
49
-			currentTabId = other.currentTabId;
50
-		}
51
-		if (other.currentTabIndex.hasValue()) {
52
-            currentTabIndex = other.currentTabIndex;
53
-		}
54
-		if (other.visible.hasValue()) {
55
-			visible = other.visible;
56
-		}
57
-        if (other.drawBehind.hasValue()) {
58
-            drawBehind = other.drawBehind;
59
-        }
60
-		if (other.animate.hasValue()) {
61
-			animate = other.animate;
62
-		}
63
-        if (other.tabColor.hasValue()) {
64
-            tabColor = other.tabColor;
65
-        }
66
-        if (other.selectedTabColor.hasValue()) {
67
-            selectedTabColor = other.selectedTabColor;
68
-        }
69
-        if (other.backgroundColor.hasValue()) {
70
-		    backgroundColor = other.backgroundColor;
71
-        }
72
-        if (other.testId.hasValue()) {
73
-            testId = other.testId;
74
-        }
51
+		if (other.currentTabId.hasValue()) currentTabId = other.currentTabId;
52
+		if (other.currentTabIndex.hasValue()) currentTabIndex = other.currentTabIndex;
53
+		if (other.visible.hasValue()) visible = other.visible;
54
+        if (other.drawBehind.hasValue()) drawBehind = other.drawBehind;
55
+		if (other.animate.hasValue()) animate = other.animate;
56
+        if (other.tabColor.hasValue()) tabColor = other.tabColor;
57
+        if (other.selectedTabColor.hasValue()) selectedTabColor = other.selectedTabColor;
58
+        if (other.backgroundColor.hasValue()) backgroundColor = other.backgroundColor;
59
+        if (other.testId.hasValue()) testId = other.testId;
60
+        if (other.titleDisplayMode.hasValue()) titleDisplayMode = other.titleDisplayMode;
75 61
     }
76 62
 
77 63
     void mergeWithDefault(final BottomTabsOptions defaultOptions) {
78
-        if (!currentTabId.hasValue()) {
79
-            currentTabId = defaultOptions.currentTabId;
80
-        }
81
-        if (!currentTabIndex.hasValue()) {
82
-            currentTabIndex = defaultOptions.currentTabIndex;
83
-        }
84
-        if (!visible.hasValue()) {
85
-            visible = defaultOptions.visible;
86
-        }
87
-        if (!drawBehind.hasValue()) {
88
-            drawBehind = defaultOptions.drawBehind;
89
-        }
90
-        if (!animate.hasValue()) {
91
-            animate = defaultOptions.animate;
92
-        }
93
-        if (!tabColor.hasValue()) {
94
-            tabColor = defaultOptions.tabColor;
95
-        }
96
-        if (!selectedTabColor.hasValue()) {
97
-            selectedTabColor = defaultOptions.selectedTabColor;
98
-        }
99
-        if (!backgroundColor.hasValue()) {
100
-            backgroundColor = defaultOptions.backgroundColor;
101
-        }
64
+        if (!currentTabId.hasValue()) currentTabId = defaultOptions.currentTabId;
65
+        if (!currentTabIndex.hasValue()) currentTabIndex = defaultOptions.currentTabIndex;
66
+        if (!visible.hasValue()) visible = defaultOptions.visible;
67
+        if (!drawBehind.hasValue()) drawBehind = defaultOptions.drawBehind;
68
+        if (!animate.hasValue()) animate = defaultOptions.animate;
69
+        if (!tabColor.hasValue()) tabColor = defaultOptions.tabColor;
70
+        if (!selectedTabColor.hasValue()) selectedTabColor = defaultOptions.selectedTabColor;
71
+        if (!backgroundColor.hasValue()) backgroundColor = defaultOptions.backgroundColor;
72
+        if (!titleDisplayMode.hasValue()) titleDisplayMode = defaultOptions.titleDisplayMode;
102 73
     }
103 74
 }

+ 46
- 0
lib/android/app/src/main/java/com/reactnativenavigation/parse/params/TitleDisplayMode.java 파일 보기

@@ -0,0 +1,46 @@
1
+package com.reactnativenavigation.parse.params;
2
+
3
+import android.support.annotation.NonNull;
4
+
5
+import com.aurelhubert.ahbottomnavigation.AHBottomNavigation.TitleState;
6
+
7
+import javax.annotation.Nullable;
8
+
9
+public enum TitleDisplayMode {
10
+    ALWAYS_SHOW(TitleState.ALWAYS_SHOW), SHOW_WHEN_ACTIVE(TitleState.SHOW_WHEN_ACTIVE), ALWAYS_HIDE(TitleState.ALWAYS_HIDE), UNDEFINED(null);
11
+
12
+    public static TitleDisplayMode fromString(String mode) {
13
+        switch (mode) {
14
+            case Constants.ALWAYS_SHOW:
15
+                return ALWAYS_SHOW;
16
+            case Constants.SHOW_WHEN_ACTIVE:
17
+                return SHOW_WHEN_ACTIVE;
18
+            case Constants.ALWAYS_HIDE:
19
+                return ALWAYS_HIDE;
20
+            default:
21
+                return UNDEFINED;
22
+        }
23
+    }
24
+
25
+    @Nullable private TitleState state;
26
+
27
+    TitleDisplayMode(@Nullable TitleState state) {
28
+        this.state = state;
29
+    }
30
+
31
+    public boolean hasValue() {
32
+        return state != null;
33
+    }
34
+
35
+    @NonNull
36
+    public TitleState toState() {
37
+        if (state == null) throw new RuntimeException("TitleDisplayMode is undefined");
38
+        return state;
39
+    }
40
+
41
+    private static class Constants {
42
+        static final String ALWAYS_SHOW = "alwaysShow";
43
+        static final String SHOW_WHEN_ACTIVE = "showWhenActive";
44
+        static final String ALWAYS_HIDE = "alwaysHide";
45
+    }
46
+}

+ 3
- 3
lib/android/app/src/main/java/com/reactnativenavigation/presentation/BottomTabsOptionsPresenter.java 파일 보기

@@ -52,15 +52,15 @@ public class BottomTabsOptionsPresenter {
52 52
         if (options.drawBehind.isTrue()) {
53 53
             lp.bottomMargin = 0;
54 54
         }
55
-
56
-        // Allocate space for the bottom tabs only if it is visible and it should not draw behind.
57 55
         if (options.visible.isTrueOrUndefined() && options.drawBehind.isFalseOrUndefined()) {
58 56
             lp.bottomMargin = bottomTabs.getHeight();
59 57
         }
60
-
61 58
     }
62 59
 
63 60
     private void applyBottomTabsOptions(BottomTabsOptions options, AnimationsOptions animationsOptions) {
61
+        if (options.titleDisplayMode.hasValue()) {
62
+            bottomTabs.setTitleState(options.titleDisplayMode.toState());
63
+        }
64 64
         if (options.backgroundColor.hasValue()) {
65 65
             bottomTabs.setBackgroundColor(options.backgroundColor.get());
66 66
         }

+ 1
- 1
lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/bottomtabs/BottomTabsController.java 파일 보기

@@ -137,7 +137,7 @@ public class BottomTabsController extends ParentController implements AHBottomNa
137 137
                 bottomTabs.addItems(tabs);
138 138
                 bottomTabs.post(() -> {
139 139
                     for (int i = 0; i < bottomTabOptionsList.size(); i++) {
140
-                        bottomTabs.setTabTag(i, bottomTabOptionsList.get(i).testId);
140
+                        bottomTabs.setTabTestId(i, bottomTabOptionsList.get(i).testId);
141 141
                     }
142 142
                 });
143 143
                 selectTab(0);

+ 6
- 1
lib/android/app/src/main/java/com/reactnativenavigation/views/BottomTabs.java 파일 보기

@@ -18,7 +18,7 @@ public class BottomTabs extends AHBottomNavigation {
18 18
         setContentDescription("BottomTabs");
19 19
     }
20 20
 
21
-    public void setTabTag(int index, Text testId) {
21
+    public void setTabTestId(int index, Text testId) {
22 22
         if (!testId.hasValue()) return;
23 23
         View view = getViewAtPosition(index);
24 24
         view.setTag(testId.get());
@@ -43,4 +43,9 @@ public class BottomTabs extends AHBottomNavigation {
43 43
     public void setInactiveColor(int inactiveColor) {
44 44
         if (getInactiveColor() != inactiveColor) super.setInactiveColor(inactiveColor);
45 45
     }
46
+
47
+    @Override
48
+    public void setTitleState(TitleState titleState) {
49
+        if (getTitleState() != titleState) super.setTitleState(titleState);
50
+    }
46 51
 }

+ 1
- 0
playground/src/screens/WelcomeScreen.js 파일 보기

@@ -124,6 +124,7 @@ class WelcomeScreen extends Component {
124 124
           options: {
125 125
             bottomTabs: {
126 126
               tabColor: 'red',
127
+              titleDisplayMode: 'alwaysShow',
127 128
               selectedTabColor: 'blue',
128 129
               fontFamily: 'HelveticaNeue-Italic',
129 130
               fontSize: 13,