Kaynağa Gözat

Add Icon insets support for buttons (#4699)

* Add button.iconInsets

* Define iconInsets in Options.ts

* Apply color on button iconImage
Yogev Ben David 5 yıl önce
ebeveyn
işleme
545e5fef5f
No account linked to committer's email address

+ 2
- 0
lib/ios/RNNButtonOptions.h Dosyayı Görüntüle

@@ -1,4 +1,5 @@
1 1
 #import "RNNOptions.h"
2
+#import "RNNInsetsOptions.h"
2 3
 
3 4
 @interface RNNButtonOptions : RNNOptions
4 5
 
@@ -9,5 +10,6 @@
9 10
 @property (nonatomic, strong) Color* disabledColor;
10 11
 @property (nonatomic, strong) Image* icon;
11 12
 @property (nonatomic, strong) Bool* enabled;
13
+@property (nonatomic, strong) RNNInsetsOptions* iconInsets;
12 14
 
13 15
 @end

+ 1
- 0
lib/ios/RNNButtonOptions.m Dosyayı Görüntüle

@@ -11,6 +11,7 @@
11 11
 	self.color = [ColorParser parse:dict key:@"color"];
12 12
 	self.disabledColor = [ColorParser parse:dict key:@"disabledColor"];
13 13
 	self.icon = [ImageParser parse:dict key:@"icon"];
14
+	self.iconInsets = [[RNNInsetsOptions alloc] initWithDict:dict];
14 15
 	self.enabled = [BoolParser parse:dict key:@"enabled"];
15 16
 	
16 17
 

+ 10
- 0
lib/ios/RNNInsetsOptions.h Dosyayı Görüntüle

@@ -0,0 +1,10 @@
1
+#import "RNNOptions.h"
2
+
3
+@interface RNNInsetsOptions : RNNOptions
4
+
5
+@property (nonatomic, strong) Double* top;
6
+@property (nonatomic, strong) Double* left;
7
+@property (nonatomic, strong) Double* right;
8
+@property (nonatomic, strong) Double* bottom;
9
+
10
+@end

+ 16
- 0
lib/ios/RNNInsetsOptions.m Dosyayı Görüntüle

@@ -0,0 +1,16 @@
1
+#import "RNNInsetsOptions.h"
2
+
3
+@implementation RNNInsetsOptions
4
+
5
+- (instancetype)initWithDict:(NSDictionary *)dict {
6
+	self = [super init];
7
+	
8
+	self.top = [DoubleParser parse:dict key:@"top"];
9
+	self.left = [DoubleParser parse:dict key:@"left"];
10
+	self.bottom = [DoubleParser parse:dict key:@"bottom"];
11
+	self.right = [DoubleParser parse:dict key:@"right"];
12
+	
13
+	return self;
14
+}
15
+
16
+@end

+ 31
- 7
lib/ios/RNNNavigationButtons.m Dosyayı Görüntüle

@@ -4,6 +4,7 @@
4 4
 #import "RCTHelpers.h"
5 5
 #import "UIImage+tint.h"
6 6
 #import "RNNRootViewController.h"
7
+#import "UIImage+insets.h"
7 8
 
8 9
 @interface RNNNavigationButtons()
9 10
 
@@ -28,19 +29,19 @@
28 29
 	_defaultLeftButtonStyle = defaultLeftButtonStyle;
29 30
 	_defaultRightButtonStyle = defaultRightButtonStyle;
30 31
 	if (leftButtons) {
31
-		[self setButtons:leftButtons side:@"left" animated:NO defaultStyle:_defaultLeftButtonStyle];
32
+		[self setButtons:leftButtons side:@"left" animated:NO defaultStyle:_defaultLeftButtonStyle insets:[self leftButtonInsets:_defaultLeftButtonStyle.iconInsets]];
32 33
 	}
33 34
 	
34 35
 	if (rightButtons) {
35
-		[self setButtons:rightButtons side:@"right" animated:NO defaultStyle:_defaultRightButtonStyle];
36
+		[self setButtons:rightButtons side:@"right" animated:NO defaultStyle:_defaultRightButtonStyle insets:[self rightButtonInsets:_defaultRightButtonStyle.iconInsets]];
36 37
 	}
37 38
 }
38 39
 
39
--(void)setButtons:(NSArray*)buttons side:(NSString*)side animated:(BOOL)animated defaultStyle:(RNNButtonOptions *)defaultStyle {
40
+-(void)setButtons:(NSArray*)buttons side:(NSString*)side animated:(BOOL)animated defaultStyle:(RNNButtonOptions *)defaultStyle insets:(UIEdgeInsets)insets {
40 41
 	NSMutableArray *barButtonItems = [NSMutableArray new];
41 42
 	NSArray* resolvedButtons = [self resolveButtons:buttons];
42 43
 	for (NSDictionary *button in resolvedButtons) {
43
-		RNNUIBarButtonItem* barButtonItem = [self buildButton:button defaultStyle:defaultStyle];
44
+		RNNUIBarButtonItem* barButtonItem = [self buildButton:button defaultStyle:defaultStyle insets:insets];
44 45
 		if(barButtonItem) {
45 46
 			[barButtonItems addObject:barButtonItem];
46 47
 		}
@@ -67,12 +68,15 @@
67 68
 	}
68 69
 }
69 70
 
70
--(RNNUIBarButtonItem*)buildButton: (NSDictionary*)dictionary defaultStyle:(RNNButtonOptions *)defaultStyle {
71
+-(RNNUIBarButtonItem*)buildButton: (NSDictionary*)dictionary defaultStyle:(RNNButtonOptions *)defaultStyle insets:(UIEdgeInsets)insets {
71 72
 	NSString* buttonId = dictionary[@"id"];
72 73
 	NSString* title = [self getValue:dictionary[@"text"] withDefault:[defaultStyle.text getWithDefaultValue:nil]];
73 74
 	NSDictionary* component = dictionary[@"component"];
74 75
 	NSString* systemItemName = dictionary[@"systemItem"];
75 76
 	
77
+	UIColor* color = [self color:[RCTConvert UIColor:dictionary[@"color"]] defaultColor:[defaultStyle.color getWithDefaultValue:nil]];
78
+	UIColor* disabledColor = [self color:[RCTConvert UIColor:dictionary[@"disabledColor"]] defaultColor:[defaultStyle.disabledColor getWithDefaultValue:nil]];
79
+	
76 80
 	if (!buttonId) {
77 81
 		@throw [NSException exceptionWithName:@"NSInvalidArgumentException" reason:[@"button id is not specified " stringByAppendingString:title] userInfo:nil];
78 82
 	}
@@ -83,6 +87,14 @@
83 87
 		iconImage = [RCTConvert UIImage:iconImage];
84 88
 	}
85 89
 	
90
+	if (iconImage) {
91
+		iconImage = [iconImage imageWithInsets:insets];
92
+		if (color) {
93
+			iconImage = [iconImage withTintColor:color];
94
+		}
95
+	}
96
+	
97
+	
86 98
 	RNNUIBarButtonItem *barButtonItem;
87 99
 	if (component) {
88 100
 		RNNComponentOptions* componentOptions = [RNNComponentOptions new];
@@ -116,8 +128,6 @@
116 128
 	NSMutableDictionary* textAttributes = [[NSMutableDictionary alloc] init];
117 129
 	NSMutableDictionary* disabledTextAttributes = [[NSMutableDictionary alloc] init];
118 130
 	
119
-	UIColor* color = [self color:[RCTConvert UIColor:dictionary[@"color"]] defaultColor:[defaultStyle.color getWithDefaultValue:nil]];
120
-	UIColor* disabledColor = [self color:[RCTConvert UIColor:dictionary[@"disabledColor"]] defaultColor:[defaultStyle.disabledColor getWithDefaultValue:nil]];
121 131
 	if (!enabledBool && disabledColor) {
122 132
 		color = disabledColor;
123 133
 		[disabledTextAttributes setObject:disabledColor forKey:NSForegroundColorAttributeName];
@@ -185,4 +195,18 @@
185 195
 	return value ? value : defaultValue;
186 196
 }
187 197
 
198
+- (UIEdgeInsets)leftButtonInsets:(RNNInsetsOptions *)defaultInsets {
199
+	return UIEdgeInsetsMake([defaultInsets.top getWithDefaultValue:0],
200
+					 [defaultInsets.left getWithDefaultValue:0],
201
+					 [defaultInsets.bottom getWithDefaultValue:0],
202
+					 [defaultInsets.right getWithDefaultValue:15]);
203
+}
204
+
205
+- (UIEdgeInsets)rightButtonInsets:(RNNInsetsOptions *)defaultInsets {
206
+	return UIEdgeInsetsMake([defaultInsets.top getWithDefaultValue:0],
207
+					 [defaultInsets.left getWithDefaultValue:15],
208
+					 [defaultInsets.bottom getWithDefaultValue:0],
209
+					 [defaultInsets.right getWithDefaultValue:0]);
210
+}
211
+
188 212
 @end

+ 11
- 2
lib/ios/RNNUIBarButtonItem.m Dosyayı Görüntüle

@@ -6,7 +6,10 @@
6 6
 @implementation RNNUIBarButtonItem
7 7
 
8 8
 -(instancetype)init:(NSString*)buttonId withIcon:(UIImage*)iconImage {
9
-	self = [super initWithImage:iconImage style:UIBarButtonItemStylePlain target:nil action:nil];
9
+	UIButton* button = [[UIButton alloc] init];
10
+	[button addTarget:self action:@selector(onButtonPressed) forControlEvents:UIControlEventTouchUpInside];
11
+	[button setImage:iconImage forState:UIControlStateNormal];
12
+	self = [super initWithCustomView:button];
10 13
 	self.buttonId = buttonId;
11 14
 	return self;
12 15
 }
@@ -26,7 +29,7 @@
26 29
 	self.buttonId = buttonId;
27 30
 	return self;
28 31
 }
29
-	
32
+
30 33
 -(instancetype)init:(NSString*)buttonId withSystemItem:(NSString *)systemItemName {
31 34
 	UIBarButtonSystemItem systemItem = [RCTConvert UIBarButtonSystemItem:systemItemName];
32 35
 	self = [super initWithBarButtonSystemItem:systemItem target:nil action:nil];
@@ -40,4 +43,10 @@
40 43
 	self.width = size.width;
41 44
 }
42 45
 
46
+- (void)onButtonPressed {
47
+	[self.target performSelector:self.action
48
+					  withObject:self
49
+					  afterDelay:0];
50
+}
51
+
43 52
 @end

+ 16
- 0
lib/ios/ReactNativeNavigation.xcodeproj/project.pbxproj Dosyayı Görüntüle

@@ -181,6 +181,10 @@
181 181
 		505EDD4A214FDA800071C7DE /* RCTConvert+Modal.h in Headers */ = {isa = PBXBuildFile; fileRef = 505EDD48214FDA800071C7DE /* RCTConvert+Modal.h */; };
182 182
 		5060DE73219DAD7E00D0C052 /* ReactNativeNavigation.h in Headers */ = {isa = PBXBuildFile; fileRef = 7BA500731E2544B9001B9E1B /* ReactNativeNavigation.h */; };
183 183
 		5060DE74219DAD8300D0C052 /* RNNBridgeManagerDelegate.h in Headers */ = {isa = PBXBuildFile; fileRef = 502CB43920CBCA140019B2FE /* RNNBridgeManagerDelegate.h */; };
184
+		506317AA220B547400B26FC3 /* UIImage+insets.h in Headers */ = {isa = PBXBuildFile; fileRef = 506317A8220B547400B26FC3 /* UIImage+insets.h */; };
185
+		506317AB220B547400B26FC3 /* UIImage+insets.m in Sources */ = {isa = PBXBuildFile; fileRef = 506317A9220B547400B26FC3 /* UIImage+insets.m */; };
186
+		506317AE220B550600B26FC3 /* RNNInsetsOptions.h in Headers */ = {isa = PBXBuildFile; fileRef = 506317AC220B550600B26FC3 /* RNNInsetsOptions.h */; };
187
+		506317AF220B550600B26FC3 /* RNNInsetsOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = 506317AD220B550600B26FC3 /* RNNInsetsOptions.m */; };
184 188
 		5064495D20DC62B90026709C /* RNNSideMenuSideOptions.h in Headers */ = {isa = PBXBuildFile; fileRef = 5064495B20DC62B90026709C /* RNNSideMenuSideOptions.h */; };
185 189
 		5064495E20DC62B90026709C /* RNNSideMenuSideOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = 5064495C20DC62B90026709C /* RNNSideMenuSideOptions.m */; };
186 190
 		50644A2020E11A720026709C /* Constants.h in Headers */ = {isa = PBXBuildFile; fileRef = 50644A1E20E11A720026709C /* Constants.h */; };
@@ -508,6 +512,10 @@
508 512
 		505EDD3B214FA8000071C7DE /* RNNViewControllerPresenter.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNViewControllerPresenter.m; sourceTree = "<group>"; };
509 513
 		505EDD47214FC4A60071C7DE /* RNNLayoutProtocol.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNLayoutProtocol.h; sourceTree = "<group>"; };
510 514
 		505EDD48214FDA800071C7DE /* RCTConvert+Modal.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "RCTConvert+Modal.h"; sourceTree = "<group>"; };
515
+		506317A8220B547400B26FC3 /* UIImage+insets.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "UIImage+insets.h"; sourceTree = "<group>"; };
516
+		506317A9220B547400B26FC3 /* UIImage+insets.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = "UIImage+insets.m"; sourceTree = "<group>"; };
517
+		506317AC220B550600B26FC3 /* RNNInsetsOptions.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNInsetsOptions.h; sourceTree = "<group>"; };
518
+		506317AD220B550600B26FC3 /* RNNInsetsOptions.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNInsetsOptions.m; sourceTree = "<group>"; };
511 519
 		5064495B20DC62B90026709C /* RNNSideMenuSideOptions.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNSideMenuSideOptions.h; sourceTree = "<group>"; };
512 520
 		5064495C20DC62B90026709C /* RNNSideMenuSideOptions.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNSideMenuSideOptions.m; sourceTree = "<group>"; };
513 521
 		50644A1E20E11A720026709C /* Constants.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = Constants.h; sourceTree = "<group>"; };
@@ -697,6 +705,8 @@
697 705
 				50644A1F20E11A720026709C /* Constants.m */,
698 706
 				50706E6B20CE7CA5003345C3 /* UIImage+tint.h */,
699 707
 				50706E6C20CE7CA5003345C3 /* UIImage+tint.m */,
708
+				506317A8220B547400B26FC3 /* UIImage+insets.h */,
709
+				506317A9220B547400B26FC3 /* UIImage+insets.m */,
700 710
 				5038A372216CDDB6009280BC /* UIViewController+SideMenuController.h */,
701 711
 				5038A373216CDDB6009280BC /* UIViewController+SideMenuController.m */,
702 712
 				5038A3BF216E1E66009280BC /* RNNFontAttributesCreator.h */,
@@ -931,6 +941,8 @@
931 941
 				E33AC20720B5C4F90090DB8A /* RNNSplitViewOptions.m */,
932 942
 				E3458D3C20BD9CA10023149B /* RNNPreviewOptions.h */,
933 943
 				E3458D3D20BD9CE40023149B /* RNNPreviewOptions.m */,
944
+				506317AC220B550600B26FC3 /* RNNInsetsOptions.h */,
945
+				506317AD220B550600B26FC3 /* RNNInsetsOptions.m */,
934 946
 			);
935 947
 			name = Options;
936 948
 			sourceTree = "<group>";
@@ -1250,6 +1262,7 @@
1250 1262
 				50D031342005149000386B3D /* RNNOverlayManager.h in Headers */,
1251 1263
 				7B1126A71E2D2B6C00F9B03B /* RNNEventEmitter.h in Headers */,
1252 1264
 				E8A430111F9CB87B00B61A20 /* RNNAnimatedView.h in Headers */,
1265
+				506317AA220B547400B26FC3 /* UIImage+insets.h in Headers */,
1253 1266
 				5038A3C6216E2D93009280BC /* Number.h in Headers */,
1254 1267
 				50887C1520ECC5C200D06111 /* RNNButtonOptions.h in Headers */,
1255 1268
 				5049593E216F5D73006D2B81 /* BoolParser.h in Headers */,
@@ -1299,6 +1312,7 @@
1299 1312
 				507F43C91FF4F9CC00D9425B /* RNNTopTabOptions.h in Headers */,
1300 1313
 				E8A5CD521F464F0400E89D0D /* RNNAnimator.h in Headers */,
1301 1314
 				50451D0D2042F70900695F00 /* RNNTransition.h in Headers */,
1315
+				506317AE220B550600B26FC3 /* RNNInsetsOptions.h in Headers */,
1302 1316
 				507F43F81FF525B500D9425B /* RNNSegmentedControl.h in Headers */,
1303 1317
 				50175CD1207A2AA1004FE91B /* RNNComponentOptions.h in Headers */,
1304 1318
 				5038A3B1216DF41B009280BC /* UIViewController+RNNOptions.h in Headers */,
@@ -1481,6 +1495,7 @@
1481 1495
 				506A2B1520973DFD00F43A95 /* RNNErrorHandler.m in Sources */,
1482 1496
 				50395588217480C900B0A663 /* IntNumber.m in Sources */,
1483 1497
 				7BBFE5441E25330E002A6182 /* RNNBridgeModule.m in Sources */,
1498
+				506317AF220B550600B26FC3 /* RNNInsetsOptions.m in Sources */,
1484 1499
 				261F0E651E6EC94900989DE2 /* RNNModalManager.m in Sources */,
1485 1500
 				50395590217482FE00B0A663 /* NullIntNumber.m in Sources */,
1486 1501
 				E8A5CD631F49114F00E89D0D /* RNNElement.m in Sources */,
@@ -1519,6 +1534,7 @@
1519 1534
 				E33AC20020B5BA0B0090DB8A /* RNNSplitViewController.m in Sources */,
1520 1535
 				263905CF1E4C6F440023D7D3 /* TheSidebarController.m in Sources */,
1521 1536
 				5038A3C2216E1E66009280BC /* RNNFontAttributesCreator.m in Sources */,
1537
+				506317AB220B547400B26FC3 /* UIImage+insets.m in Sources */,
1522 1538
 				E8A430121F9CB87B00B61A20 /* RNNAnimatedView.m in Sources */,
1523 1539
 				507F43F51FF4FCFE00D9425B /* HMSegmentedControl.m in Sources */,
1524 1540
 				5012242321736883000F5F98 /* NullColor.m in Sources */,

+ 7
- 0
lib/ios/UIImage+insets.h Dosyayı Görüntüle

@@ -0,0 +1,7 @@
1
+#import <UIKit/UIKit.h>
2
+
3
+@interface UIImage (insets)
4
+
5
+- (UIImage *)imageWithInsets:(UIEdgeInsets)insets;
6
+
7
+@end

+ 20
- 0
lib/ios/UIImage+insets.m Dosyayı Görüntüle

@@ -0,0 +1,20 @@
1
+#import "UIImage+insets.h"
2
+
3
+@implementation UIImage (insets)
4
+
5
+- (UIImage *)imageWithInsets:(UIEdgeInsets)insets {
6
+	UIGraphicsBeginImageContextWithOptions(CGSizeMake(self.size.width + insets.left + insets.right,
7
+													  self.size.height + insets.top + insets.bottom), false, self.scale);
8
+	CGContextRef context = UIGraphicsGetCurrentContext();
9
+	UIGraphicsPushContext(context);
10
+	
11
+	CGPoint origin = CGPointMake(insets.left, insets.top);
12
+	[self drawAtPoint:origin];
13
+	
14
+	UIGraphicsPopContext();
15
+	UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
16
+	UIGraphicsEndImageContext();
17
+	return newImage;
18
+}
19
+
20
+@end

+ 23
- 0
lib/src/interfaces/Options.ts Dosyayı Görüntüle

@@ -247,6 +247,10 @@ export interface OptionsTopBarButton {
247 247
    * Set the button icon
248 248
    */
249 249
   icon?: ImageRequireSource;
250
+   /**
251
+   * Set the button icon insets
252
+   */
253
+  iconInsets?: IconInsets;
250 254
   /**
251 255
    * Set the button as a custom component
252 256
    */
@@ -692,6 +696,25 @@ export interface OptionsAnimationProperties {
692 696
   rotation?: OptionsAnimationPropertyConfig;
693 697
 }
694 698
 
699
+export interface IconInsets {
700
+  /**
701
+   * Configure top inset
702
+   */
703
+  top?: number;
704
+  /**
705
+   * Configure left inset
706
+   */
707
+  left?: number;
708
+  /**
709
+   * Configure bottom inset
710
+   */
711
+  bottom?: number;
712
+  /**
713
+   * Configure right inset
714
+   */
715
+  right?: number;
716
+}
717
+
695 718
 export interface OptionsAnimationPropertiesId extends OptionsAnimationProperties {
696 719
   /**
697 720
    * ID of the Top Bar we want to animate