diff --git a/React/Views/RCTView.h b/React/Views/RCTView.h index 5a3ff743a31ca8..a22c1d85a74307 100644 --- a/React/Views/RCTView.h +++ b/React/Views/RCTView.h @@ -144,6 +144,12 @@ extern const UIAccessibilityTraits SwitchAccessibilityTrait; @property (nonatomic, copy) RCTDirectEventBlock onKeyUp; @property (nonatomic, copy) NSArray *validKeysDown; @property (nonatomic, copy) NSArray *validKeysUp; + +// Shadow Properties +@property (nonatomic, strong) NSColor *shadowColor; +@property (nonatomic, assign) CGFloat shadowOpacity; +@property (nonatomic, assign) CGFloat shadowRadius; +@property (nonatomic, assign) CGSize shadowOffset; #endif // ]TODO(macOS GH#774) /** diff --git a/React/Views/RCTView.m b/React/Views/RCTView.m index fa1a7e6e0e10d0..60b03591b1e377 100644 --- a/React/Views/RCTView.m +++ b/React/Views/RCTView.m @@ -165,6 +165,7 @@ - (instancetype)initWithFrame:(CGRect)frame _hitTestEdgeInsets = UIEdgeInsetsZero; #if TARGET_OS_OSX // TODO(macOS GH#774) _transform3D = CATransform3DIdentity; + _shadowColor = nil; #endif // TODO(macOS GH#774) _backgroundColor = super.backgroundColor; @@ -716,20 +717,49 @@ - (NSString *)description #endif // TODO(macOS GH#774) #if TARGET_OS_OSX // [TODO(macOS GH#774) -// Workaround AppKit issue with directly manipulating the view layer's shadow. -- (NSShadow*)shadow +- (void)setShadowColor:(NSColor *)shadowColor { - CALayer *layer = self.layer; - NSShadow *shadow = nil; + if (_shadowColor != shadowColor) + { + _shadowColor = shadowColor; + [self didUpdateShadow]; + } +} - if (layer.shadowColor != nil && layer.shadowOpacity > 0) { - shadow = [NSShadow new]; +- (void)setShadowOffset:(CGSize)shadowOffset +{ + if (!CGSizeEqualToSize(_shadowOffset, shadowOffset)) + { + _shadowOffset = shadowOffset; + [self didUpdateShadow]; + } +} - shadow.shadowColor = [[NSColor colorWithCGColor:layer.shadowColor] colorWithAlphaComponent:layer.shadowOpacity]; - shadow.shadowOffset = layer.shadowOffset; - shadow.shadowBlurRadius = layer.shadowRadius; - } - return shadow; +- (void)setShadowOpacity:(CGFloat)shadowOpacity +{ + if (_shadowOpacity != shadowOpacity) + { + _shadowOpacity = shadowOpacity; + [self didUpdateShadow]; + } +} + +- (void)setShadowRadius:(CGFloat)shadowRadius +{ + if (_shadowRadius != shadowRadius) + { + _shadowRadius = shadowRadius; + [self didUpdateShadow]; + } +} + +-(void)didUpdateShadow +{ + NSShadow *shadow = [NSShadow new]; + shadow.shadowColor = [[self shadowColor] colorWithAlphaComponent:[self shadowOpacity]]; + shadow.shadowOffset = [self shadowOffset]; + shadow.shadowBlurRadius = [self shadowRadius]; + [self setShadow:shadow]; } - (void)viewDidMoveToWindow diff --git a/React/Views/RCTViewManager.m b/React/Views/RCTViewManager.m index ac03717daa4829..2621ff79baeeab 100644 --- a/React/Views/RCTViewManager.m +++ b/React/Views/RCTViewManager.m @@ -196,10 +196,19 @@ - (RCTShadowView *)shadowView #else // [TODO(macOS GH#774) RCT_REMAP_VIEW_PROPERTY(opacity, alphaValue, CGFloat) #endif // ]TODO(macOS GH#774) + +#if !TARGET_OS_OSX // TODO(macOS GH#774) RCT_REMAP_VIEW_PROPERTY(shadowColor, layer.shadowColor, CGColor) RCT_REMAP_VIEW_PROPERTY(shadowOffset, layer.shadowOffset, CGSize) RCT_REMAP_VIEW_PROPERTY(shadowOpacity, layer.shadowOpacity, float) RCT_REMAP_VIEW_PROPERTY(shadowRadius, layer.shadowRadius, CGFloat) +#else // [TODO(macOS GH#774) +RCT_EXPORT_VIEW_PROPERTY(shadowColor, NSColor) +RCT_EXPORT_VIEW_PROPERTY(shadowOffset, CGSize) +RCT_EXPORT_VIEW_PROPERTY(shadowOpacity, CGFloat) +RCT_EXPORT_VIEW_PROPERTY(shadowRadius, CGFloat) +#endif // ]TODO(macOS GH#774) + RCT_REMAP_VIEW_PROPERTY(needsOffscreenAlphaCompositing, layer.allowsGroupOpacity, BOOL) RCT_CUSTOM_VIEW_PROPERTY(overflow, YGOverflow, RCTView) { diff --git a/packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExSet.js b/packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExSet.js index 26e3b88dfbc958..6f91e2632c145a 100644 --- a/packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExSet.js +++ b/packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExSet.js @@ -139,10 +139,11 @@ const styles = StyleSheet.create({ headerText: { fontSize: 25, color: 'white', - shadowRadius: 3, - shadowColor: 'black', - shadowOpacity: 1, - shadowOffset: {height: 1}, + // [TODO(macOS GH#1409) + textShadowRadius: 3, + textShadowColor: 'rgba(0, 0, 0, 1.0)', + textShadowOffset: {height: 1, width: 0}, + // ]TODO(macOS GH#1409) }, });