Fix hitbox of UIBarButtonItem (wix#6482)

Fixes wix#5000 

Before:
<img width="280" alt="Screenshot 2020-08-19 at 18 54 21" src="https://user-images.githubusercontent.com/996231/90669241-99df5480-e251-11ea-913a-674b0d6b0797.png">

After:
<img width="291" alt="Screenshot 2020-08-19 at 18 53 11" src="https://user-images.githubusercontent.com/996231/90669274-a8c60700-e251-11ea-9816-20b17f9657e5.png">

As can be seen the hitbox increases maintaining the custom inset of 15 left.

This was changed to a button in wix@545e5fe while adding support for insets. Since they are set on the image it works either way. Maybe @yogevbd has some more insight.

Co-authored-by: yogevbd <[email protected]>

Author: danilobuerger

lib/ios/RNNInsetsOptions.h

@@ -7,4 +7,6 @@
 @property(nonatomic, strong) Double *right;
 @property(nonatomic, strong) Double *bottom;
 
+- (UIEdgeInsets)edgeInsetsWithDefault:(UIEdgeInsets)defaultInsets;
+
 @end

lib/ios/RNNInsetsOptions.m

@@ -24,4 +24,11 @@ - (void)mergeOptions:(RNNInsetsOptions *)options {
         self.right = options.right;
 }
 
+- (UIEdgeInsets)edgeInsetsWithDefault:(UIEdgeInsets)defaultInsets {
+    return UIEdgeInsetsMake([self.top getWithDefaultValue:defaultInsets.top],
+                            [self.left getWithDefaultValue:defaultInsets.left],
+                            [self.bottom getWithDefaultValue:defaultInsets.bottom],
+                            [self.right getWithDefaultValue:defaultInsets.right]);
+}
+
 @end

lib/ios/RNNNavigationButtons.m

@@ -4,7 +4,6 @@
 #import "RNNComponentViewController.h"
 #import "RNNFontAttributesCreator.h"
 #import "RNNUIBarButtonItem.h"
-#import "UIImage+insets.h"
 #import "UIImage+tint.h"
 #import "UIViewController+LayoutProtocol.h"
 #import <React/RCTConvert.h>
@@ -171,11 +170,8 @@ - (RNNUIBarButtonItem *)buildButton:(NSDictionary *)dictionary
     UIImage *iconImage = [[ImageParser parse:dictionary
                                          key:@"icon"] getWithDefaultValue:defaultIcon];
 
-    if (iconImage) {
-        iconImage = [iconImage imageWithInsets:insets];
-        if (color) {
-            iconImage = [iconImage withTintColor:color];
-        }
+    if (color) {
+        iconImage = [iconImage withTintColor:color];
     }
 
     RNNUIBarButtonItem *barButtonItem;
@@ -191,7 +187,9 @@ - (RNNUIBarButtonItem *)buildButton:(NSDictionary *)dictionary
                    reactViewReadyBlock:nil];
         barButtonItem = [[RNNUIBarButtonItem alloc] init:buttonId withCustomView:view];
     } else if (iconImage) {
-        barButtonItem = [[RNNUIBarButtonItem alloc] init:buttonId withIcon:iconImage];
+        barButtonItem = [[RNNUIBarButtonItem alloc] init:buttonId
+                                                withIcon:iconImage
+                                              withInsets:insets];
     } else if (title) {
         barButtonItem = [[RNNUIBarButtonItem alloc] init:buttonId withTitle:title];
 
@@ -277,16 +275,12 @@ - (id)getValue:(id)value withDefault:(id)defaultValue {
     return value ? value : defaultValue;
 }
 
-- (UIEdgeInsets)leftButtonInsets:(RNNInsetsOptions *)defaultInsets {
-    return UIEdgeInsetsMake(
-        [defaultInsets.top getWithDefaultValue:0], [defaultInsets.left getWithDefaultValue:0],
-        [defaultInsets.bottom getWithDefaultValue:0], [defaultInsets.right getWithDefaultValue:15]);
+- (UIEdgeInsets)leftButtonInsets:(RNNInsetsOptions *)insets {
+    return [insets edgeInsetsWithDefault:UIEdgeInsetsZero];
 }
 
-- (UIEdgeInsets)rightButtonInsets:(RNNInsetsOptions *)defaultInsets {
-    return UIEdgeInsetsMake(
-        [defaultInsets.top getWithDefaultValue:0], [defaultInsets.left getWithDefaultValue:15],
-        [defaultInsets.bottom getWithDefaultValue:0], [defaultInsets.right getWithDefaultValue:0]);
+- (UIEdgeInsets)rightButtonInsets:(RNNInsetsOptions *)insets {
+    return [insets edgeInsetsWithDefault:UIEdgeInsetsZero];
 }
 
 @end

lib/ios/RNNUIBarButtonItem.h

@@ -7,7 +7,9 @@
 
 @property(nonatomic, strong) NSString *buttonId;
 
-- (instancetype)init:(NSString *)buttonId withIcon:(UIImage *)iconImage;
+- (instancetype)init:(NSString *)buttonId
+            withIcon:(UIImage *)iconImage
+          withInsets:(UIEdgeInsets)edgeInsets;
 - (instancetype)init:(NSString *)buttonId withTitle:(NSString *)title;
 - (instancetype)init:(NSString *)buttonId withCustomView:(RCTRootView *)reactView;
 - (instancetype)init:(NSString *)buttonId withSystemItem:(NSString *)systemItemName;

lib/ios/RNNUIBarButtonItem.m

@@ -1,5 +1,6 @@
 #import "RNNUIBarButtonItem.h"
 #import "RCTConvert+UIBarButtonSystemItem.h"
+#import "UIImage+insets.h"
 #import <Foundation/Foundation.h>
 #import <UIKit/UIKit.h>
 
@@ -12,14 +13,25 @@ @interface RNNUIBarButtonItem ()
 
 @implementation RNNUIBarButtonItem
 
-- (instancetype)init:(NSString *)buttonId withIcon:(UIImage *)iconImage {
-    UIButton *button = [[UIButton alloc] init];
-    [button addTarget:self
-                  action:@selector(onButtonPressed)
-        forControlEvents:UIControlEventTouchUpInside];
-    [button setImage:iconImage forState:UIControlStateNormal];
-    [button setFrame:CGRectMake(0, 0, iconImage.size.width, iconImage.size.height)];
-    self = [super initWithCustomView:button];
+- (instancetype)init:(NSString *)buttonId
+            withIcon:(UIImage *)iconImage
+          withInsets:(UIEdgeInsets)edgeInsets {
+
+    if (UIEdgeInsetsEqualToEdgeInsets(edgeInsets, UIEdgeInsetsZero)) {
+        self = [super initWithImage:iconImage
+                              style:UIBarButtonItemStylePlain
+                             target:nil
+                             action:nil];
+    } else {
+        UIButton *button = [[UIButton alloc] init];
+        [button addTarget:self
+                      action:@selector(onButtonPressed)
+            forControlEvents:UIControlEventTouchUpInside];
+        [button setImage:[iconImage imageWithInsets:edgeInsets] forState:UIControlStateNormal];
+        [button setFrame:CGRectMake(0, 0, iconImage.size.width, iconImage.size.height)];
+        self = [super initWithCustomView:button];
+    }
+
     self.buttonId = buttonId;
     return self;
 }