Button refactor (#3532)

[BREAKING] Buttons refactor

* Support setting single button
```js
  topBar: {
    rightButtons: {
    }
  }
```
* [BREAKING] Rename button.title to button.text

* Set TopBar default background color (white)

e2e/ScreenStyle.test.js

@@ -153,4 +153,10 @@ describe('screen style', () => {
     await elementByLabel('Start Typing').typeText(query);
     await expect(elementById(testIDs.SEARCH_RESULT_ITEM)).toHaveText(`Item ${query}`);
   });
+
+  test('default options should apply to all screens in stack', async () => {
+    await elementById(testIDs.PUSH_BUTTON).tap();
+    await expect(elementById(testIDs.TOP_BAR_ELEMENT)).toBeVisible();
+    await expect(elementById(testIDs.TOP_BAR_BUTTON)).toBeVisible();
+  });
 });

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

@@ -15,13 +15,18 @@ public class TopBarButtons {
         TopBarButtons result = new TopBarButtons();
         if (json == null) return result;
 
-        result.right = Button.parseJsonArray(json.optJSONArray("rightButtons"), typefaceLoader);
-        result.left = Button.parseJsonArray(json.optJSONArray("leftButtons"), typefaceLoader);
+        result.right = parseButtons(typefaceLoader, json, "rightButtons");
+        result.left = parseButtons(typefaceLoader, json, "leftButtons");
         result.back = BackButton.parse(json.optJSONObject("backButton"));
 
         return result;
     }
 
+    @Nullable
+    private static ArrayList<Button> parseButtons(TypefaceLoader typefaceLoader, JSONObject json, String buttons) {
+        return Button.parse(json, buttons, typefaceLoader);
+    }
+
     public BackButton back = new BackButton();
     @Nullable public ArrayList<Button> left;
     @Nullable public ArrayList<Button> right;

lib/android/app/src/main/java/com/reactnativenavigation/parse/params/Button.java

@@ -18,7 +18,7 @@ import java.util.ArrayList;
 
 public class Button {
     public String id;
-    public Text title = new NullText();
+    public Text text = new NullText();
     public Bool enabled = new NullBool();
     public Bool disableIconTint = new NullBool();
     public int showAsAction;
@@ -34,7 +34,7 @@ public class Button {
     protected static Button parseJson(JSONObject json, TypefaceLoader typefaceManager) {
         Button button = new Button();
         button.id = json.optString("id");
-        button.title = TextParser.parse(json, "title");
+        button.text = TextParser.parse(json, "text");
         button.enabled = BoolParser.parse(json, "enabled");
         button.disableIconTint = BoolParser.parse(json, "disableIconTint");
         button.showAsAction = parseShowAsAction(json);
@@ -53,19 +53,28 @@ public class Button {
         return button;
     }
 
-    public static ArrayList<Button> parseJsonArray(JSONArray jsonArray, TypefaceLoader typefaceLoader) {
+    public static ArrayList<Button> parse(JSONObject json, String buttonsType, TypefaceLoader typefaceLoader) {
         ArrayList<Button> buttons = new ArrayList<>();
-
-        if (jsonArray == null) {
+        if (!json.has(buttonsType)) {
             return null;
         }
 
+        JSONArray jsonArray = json.optJSONArray(buttonsType);
+        if (jsonArray != null) {
+            buttons.addAll(parseJsonArray(jsonArray, typefaceLoader));
+        } else {
+            buttons.add(parseJson(json.optJSONObject(buttonsType), typefaceLoader));
+        }
+        return buttons;
+    }
+
+    private static ArrayList<Button> parseJsonArray(JSONArray jsonArray, TypefaceLoader typefaceLoader) {
+        ArrayList<Button> buttons = new ArrayList<>();
         for (int i = 0; i < jsonArray.length(); i++) {
             JSONObject json = jsonArray.optJSONObject(i);
             Button button = Button.parseJson(json, typefaceLoader);
             buttons.add(button);
         }
-
         return buttons;
     }
 

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

@@ -92,7 +92,7 @@ public class StackOptionsPresenter {
         topBar.setBorderHeight(options.borderHeight.get(0d));
         topBar.setBorderColor(options.borderColor.get(DEFAULT_BORDER_COLOR));
 
-        topBar.setBackgroundColor(options.background.color);
+        topBar.setBackgroundColor(options.background.color.get(Color.WHITE));
         topBar.setBackgroundComponent(options.background.component);
         if (options.testId.hasValue()) topBar.setTestId(options.testId.get());
 
@@ -186,7 +186,7 @@ public class StackOptionsPresenter {
         if (options.subtitle.fontSize.hasValue()) topBar.setSubtitleFontSize(options.subtitle.fontSize.get());
         if (options.subtitle.fontFamily != null) topBar.setSubtitleFontFamily(options.subtitle.fontFamily);
 
-        if (options.background.color.hasValue()) topBar.setBackgroundColor(options.background.color);
+        if (options.background.color.hasValue()) topBar.setBackgroundColor(options.background.color.get());
 
         if (options.testId.hasValue()) topBar.setTestId(options.testId.get());
 

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

@@ -41,12 +41,12 @@ public class ButtonOptionsPresenter {
     }
 
     public void setFontSize(MenuItem menuItem) {
-        SpannableString spanString = new SpannableString(button.title.get());
+        SpannableString spanString = new SpannableString(button.text.get());
         if (this.button.fontSize.hasValue())
             spanString.setSpan(
                     new AbsoluteSizeSpan(button.fontSize.get(), true),
                     0,
-                    button.title.get().length(),
+                    button.text.get().length(),
                     Spannable.SPAN_INCLUSIVE_INCLUSIVE
             );
         menuItem.setTitleCondensed(spanString);
@@ -76,7 +76,7 @@ public class ButtonOptionsPresenter {
     @NonNull
     private ArrayList<View> findActualTextViewInMenu() {
         ArrayList<View> outViews = new ArrayList<>();
-        toolbar.findViewsWithText(outViews, button.title.get(), View.FIND_VIEWS_WITH_TEXT);
+        toolbar.findViewsWithText(outViews, button.text.get(), View.FIND_VIEWS_WITH_TEXT);
         return outViews;
     }
 

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/TopBarButtonController.java

@@ -99,7 +99,7 @@ public class TopBarButtonController extends ViewController<TitleBarReactButtonVi
     }
 
     public void addToMenu(Toolbar toolbar, int position) {
-        MenuItem menuItem = toolbar.getMenu().add(0, position, position, button.title.get(""));
+        MenuItem menuItem = toolbar.getMenu().add(0, position, position, button.text.get(""));
         menuItem.setShowAsAction(button.showAsAction);
         menuItem.setEnabled(button.enabled.isTrueOrUndefined());
         menuItem.setOnMenuItemClickListener(this);
@@ -144,7 +144,7 @@ public class TopBarButtonController extends ViewController<TitleBarReactButtonVi
             ActionMenuView buttonsLayout = ViewUtils.findChildByClass(toolbar, ActionMenuView.class);
             List<TextView> buttons = ViewUtils.findChildrenByClass(buttonsLayout, TextView.class);
             for (TextView view : buttons) {
-                if (button.title.hasValue() && button.title.get().equals(view.getText().toString())) {
+                if (button.text.hasValue() && button.text.get().equals(view.getText().toString())) {
                     view.setTag(testId.get());
                 } else if (button.icon.hasValue() && ArrayUtils.contains(view.getCompoundDrawables(), icon)) {
                     view.setTag(testId.get());

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

@@ -225,11 +225,6 @@ public class TopBar extends AppBarLayout implements ScrollEventListener.ScrollAw
         titleBar.setRightButtons(rightButtons);
     }
 
-    public void setBackgroundColor(Color color) {
-        if (!color.hasValue()) return;
-        setBackgroundColor(color.get());
-    }
-
     public void setElevation(Fraction elevation) {
         if (elevation.hasValue() &&
             Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP &&

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

@@ -151,7 +151,7 @@ public class StackOptionsPresenterTest extends BaseTest {
             verify(topBar, times(t)).setSubtitle(any());
         }
         verify(topBar, times(t)).setTitleComponent(any());
-        verify(topBar, times(t)).setBackgroundColor(any());
+        verify(topBar, times(t)).setBackgroundColor(anyInt());
         verify(topBar, times(t)).setTitleTextColor(anyInt());
         verify(topBar, times(t)).setTitleFontSize(anyDouble());
         verify(topBar, times(t)).setTitleTypeface(any());

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

@@ -66,7 +66,7 @@ public class TitleBarTest extends BaseTest {
 
         textButton = new Button();
         textButton.id = "textButton";
-        textButton.title = new Text("Btn");
+        textButton.text = new Text("Btn");
 
         customButton = new Button();
         customButton.id = "customBtn";
@@ -78,7 +78,7 @@ public class TitleBarTest extends BaseTest {
     public void setButton_setsTextButton() {
         uut.setRightButtons(rightButtons(textButton));
         uut.setLeftButtons(leftButton(leftButton));
-        assertThat(uut.getMenu().getItem(0).getTitle()).isEqualTo(textButton.title.get());
+        assertThat(uut.getMenu().getItem(0).getTitle()).isEqualTo(textButton.text.get());
     }
 
     @Test
@@ -141,7 +141,7 @@ public class TitleBarTest extends BaseTest {
     public void setRightButtons_buttonsAreAddedInReverseOrderToMatchOrderOnIOs() {
         uut.setLeftButtons(new ArrayList<>());
         uut.setRightButtons(rightButtons(textButton, customButton));
-        assertThat(uut.getMenu().getItem(1).getTitle()).isEqualTo(textButton.title.get());
+        assertThat(uut.getMenu().getItem(1).getTitle()).isEqualTo(textButton.text.get());
     }
 
     @Test

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

@@ -159,7 +159,7 @@ public class TopBarButtonControllerTest extends BaseTest {
 
     private void setTextButton() {
         button.id = "btn1";
-        button.title = new Text("Button");
+        button.text = new Text("Button");
         button.fontFamily = Typeface.MONOSPACE;
         button.showAsAction = MenuItem.SHOW_AS_ACTION_ALWAYS;
     }

lib/android/app/src/test/java/com/reactnativenavigation/views/TopBarTest.java

@@ -62,7 +62,7 @@ public class TopBarTest extends BaseTest {
         ArrayList<Button> result = new ArrayList<>();
         Button leftButton = new Button();
         leftButton.id = "leftButton";
-        leftButton.title = new Text("");
+        leftButton.text = new Text("");
         result.add(spy(leftButton));
         return result;
     }
@@ -72,7 +72,7 @@ public class TopBarTest extends BaseTest {
         for (int i = 0; i < 2; i++) {
             Button button = new Button();
             button.id = "rightButtons" + i;
-            button.title = new Text("btn" + i);
+            button.text = new Text("btn" + i);
             button.showAsAction = MenuItem.SHOW_AS_ACTION_ALWAYS;
             result.add(spy(button));
         }

playground/src/screens/OptionsScreen.js

@@ -75,7 +75,7 @@ class OptionsScreen extends Component {
           {
             id: BUTTON_ONE,
             testID: BUTTON_ONE,
-            title: 'One',
+            text: 'One',
             fontFamily: 'HelveticaNeue-Italic',
             fontSize: 28,
             color: 'red'
@@ -85,7 +85,7 @@ class OptionsScreen extends Component {
           id: BUTTON_LEFT,
           testID: BUTTON_LEFT,
           icon: require('../../img/navicon_add.png'),
-          title: 'Left',
+          text: 'Left',
           color: 'purple'
         }
       },
@@ -144,7 +144,7 @@ class OptionsScreen extends Component {
           rightButtons: [{
             id: BUTTON_TWO,
             testID: BUTTON_TWO,
-            title: 'Two',
+            text: 'Two',
             icon: require('../../img/navicon_add.png'),
             disableIconTint: true,
             showAsAction: 'ifRoom',
@@ -161,14 +161,14 @@ class OptionsScreen extends Component {
           rightButtons: [{
             id: BUTTON_ONE,
             testID: BUTTON_ONE,
-            title: 'One',
+            text: 'One',
             color: 'red'
           }],
           leftButtons: [{
             id: BUTTON_LEFT,
             testID: BUTTON_LEFT,
             icon: require('../../img/navicon_add.png'),
-            title: 'Left',
+            text: 'Left',
             color: 'purple'
           }]
         }

playground/src/screens/PushedScreen.js

@@ -17,7 +17,12 @@ class PushedScreen extends Component {
         drawBehind: true
       },
       topBar: {
-        testID: testIDs.TOP_BAR_ELEMENT
+        testID: testIDs.TOP_BAR_ELEMENT,
+        rightButtons: {
+          id: 'singleBtn',
+          text: 'single',
+          testID: testIDs.TOP_BAR_BUTTON
+        }
       },
       layout: {
         backgroundColor: '#f5fcff'

playground/src/testIDs.js

@@ -38,6 +38,7 @@ module.exports = {
   DYNAMIC_OPTIONS_BUTTON: `DYNAMIC_OPTIONS_BUTTON`,
   SHOW_TOP_BAR_BUTTON: `SHOW_TOP_BAR_BUTTON`,
   HIDE_TOP_BAR_BUTTON: `HIDE_TOP_BAR_BUTTON`,
+  TOP_BAR_BUTTON: `TOP_BAR_BUTTON`,
   SCROLLVIEW_SCREEN_BUTTON: `SCROLLVIEW_SCREEN_BUTTON`,
   HIDE_FAB: `HIDE_FAB`,
   SHOW_SNACKBAR_BUTTON: `SHOW_SNACKBAR_BUTTON`,