Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Allow PlatformColor to work with RCTView border colors #29728

Closed
wants to merge 2 commits into from
Closed

Allow PlatformColor to work with RCTView border colors #29728

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dce2d09
Allow PlatformColor to work with RCTView border colors
danilobuerger Aug 22, 2020
946f4a3
Added RNTester example
danilobuerger Oct 28, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions React/Views/RCTView.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,13 +82,13 @@ extern const UIAccessibilityTraits SwitchAccessibilityTrait;
/**
* Border colors (actually retained).
*/
@property (nonatomic, assign) CGColorRef borderTopColor;
@property (nonatomic, assign) CGColorRef borderRightColor;
@property (nonatomic, assign) CGColorRef borderBottomColor;
@property (nonatomic, assign) CGColorRef borderLeftColor;
@property (nonatomic, assign) CGColorRef borderStartColor;
@property (nonatomic, assign) CGColorRef borderEndColor;
@property (nonatomic, assign) CGColorRef borderColor;
@property (nonatomic, strong) UIColor *borderTopColor;
@property (nonatomic, strong) UIColor *borderRightColor;
@property (nonatomic, strong) UIColor *borderBottomColor;
@property (nonatomic, strong) UIColor *borderLeftColor;
@property (nonatomic, strong) UIColor *borderStartColor;
@property (nonatomic, strong) UIColor *borderEndColor;
@property (nonatomic, strong) UIColor *borderColor;

/**
* Border widths.
Expand Down
46 changes: 17 additions & 29 deletions React/Views/RCTView.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -729,28 +729,28 @@ - (RCTBorderColors)borderColors
const BOOL isRTL = _reactLayoutDirection == UIUserInterfaceLayoutDirectionRightToLeft;

if ([[RCTI18nUtil sharedInstance] doLeftAndRightSwapInRTL]) {
const CGColorRef borderStartColor = _borderStartColor ?: _borderLeftColor;
const CGColorRef borderEndColor = _borderEndColor ?: _borderRightColor;
UIColor *borderStartColor = _borderStartColor ?: _borderLeftColor;
UIColor *borderEndColor = _borderEndColor ?: _borderRightColor;

const CGColorRef directionAwareBorderLeftColor = isRTL ? borderEndColor : borderStartColor;
const CGColorRef directionAwareBorderRightColor = isRTL ? borderStartColor : borderEndColor;
UIColor *directionAwareBorderLeftColor = isRTL ? borderEndColor : borderStartColor;
UIColor *directionAwareBorderRightColor = isRTL ? borderStartColor : borderEndColor;

return (RCTBorderColors){
_borderTopColor ?: _borderColor,
directionAwareBorderLeftColor ?: _borderColor,
_borderBottomColor ?: _borderColor,
directionAwareBorderRightColor ?: _borderColor,
(_borderTopColor ?: _borderColor).CGColor,
(directionAwareBorderLeftColor ?: _borderColor).CGColor,
(_borderBottomColor ?: _borderColor).CGColor,
(directionAwareBorderRightColor ?: _borderColor).CGColor,
};
}

const CGColorRef directionAwareBorderLeftColor = isRTL ? _borderEndColor : _borderStartColor;
const CGColorRef directionAwareBorderRightColor = isRTL ? _borderStartColor : _borderEndColor;
UIColor *directionAwareBorderLeftColor = isRTL ? _borderEndColor : _borderStartColor;
UIColor *directionAwareBorderRightColor = isRTL ? _borderStartColor : _borderEndColor;

return (RCTBorderColors){
_borderTopColor ?: _borderColor,
directionAwareBorderLeftColor ?: _borderLeftColor ?: _borderColor,
_borderBottomColor ?: _borderColor,
directionAwareBorderRightColor ?: _borderRightColor ?: _borderColor,
(_borderTopColor ?: _borderColor).CGColor,
(directionAwareBorderLeftColor ?: _borderLeftColor ?: _borderColor).CGColor,
(_borderBottomColor ?: _borderColor).CGColor,
(directionAwareBorderRightColor ?: _borderRightColor ?: _borderColor).CGColor,
};
}

Expand Down Expand Up @@ -903,13 +903,12 @@ - (void)updateClippingForLayer:(CALayer *)layer
#pragma mark Border Color

#define setBorderColor(side) \
-(void)setBorder##side##Color : (CGColorRef)color \
- (void)setBorder##side##Color:(UIColor *)color \
{ \
if (CGColorEqualToColor(_border##side##Color, color)) { \
if ([_border##side##Color isEqual:color]) { \
return; \
} \
CGColorRelease(_border##side##Color); \
_border##side##Color = CGColorRetain(color); \
_border##side##Color = color; \
[self.layer setNeedsDisplay]; \
}

Expand Down Expand Up @@ -961,15 +960,4 @@ -(void)setBorder##side##Style : (RCTBorderStyle)style \

setBorderStyle()

- (void)dealloc
{
CGColorRelease(_borderColor);
CGColorRelease(_borderTopColor);
CGColorRelease(_borderRightColor);
CGColorRelease(_borderBottomColor);
CGColorRelease(_borderLeftColor);
CGColorRelease(_borderStartColor);
CGColorRelease(_borderEndColor);
}

@end
4 changes: 2 additions & 2 deletions React/Views/RCTViewManager.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -261,7 +261,7 @@ - (RCTShadowView *)shadowView
RCT_CUSTOM_VIEW_PROPERTY(borderColor, CGColor, RCTView)
{
if ([view respondsToSelector:@selector(setBorderColor:)]) {
view.borderColor = json ? [RCTConvert CGColor:json] : defaultView.borderColor;
view.borderColor = json ? [RCTConvert UIColor:json] : defaultView.borderColor;
} else {
view.layer.borderColor = json ? [RCTConvert CGColor:json] : defaultView.layer.borderColor;
}
Expand Down Expand Up @@ -303,7 +303,7 @@ - (RCTShadowView *)shadowView
RCT_CUSTOM_VIEW_PROPERTY(border##SIDE##Color, UIColor, RCTView) \
{ \
if ([view respondsToSelector:@selector(setBorder##SIDE##Color:)]) { \
view.border##SIDE##Color = json ? [RCTConvert CGColor:json] : defaultView.border##SIDE##Color; \
view.border##SIDE##Color = json ? [RCTConvert UIColor:json] : defaultView.border##SIDE##Color; \
} \
}

Expand Down
14 changes: 14 additions & 0 deletions packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,6 +238,20 @@ function DynamicColorsExample() {
}}
/>
</View>
<View style={styles.row}>
<Text style={styles.labelCell}>
DynamicColorIOS({'{\n'}
{' '}light: 'red', dark: 'blue'{'\n'}
{'}'})
</Text>
<View
style={{
...styles.colorCell,
borderColor: DynamicColorIOS({light: 'red', dark: 'blue'}),
borderWidth: 1,
}}
/>
</View>
<View style={styles.row}>
<Text style={styles.labelCell}>
DynamicColorIOS({'{\n'}
Expand Down