From 4178d21e96b8fd2e674f5f33afdcf90eb57f7373 Mon Sep 17 00:00:00 2001 From: Adam Comella Date: Tue, 30 Aug 2016 00:58:15 -0700 Subject: [PATCH] Expose overflow prop to layout engine Summary: The overflow prop needs to be set on the shadow view so that it can make its way into the layout engine. In some situations, the value of the overflow prop affects the calculations of the layout engine. **Test plan (required)** Verified in a test app that the `overflow` prop makes its way into the layout engine. Also, my team's app is currently using this change. Adam Comella Microsoft Corp. Closes https://github.com/facebook/react-native/pull/9659 Differential Revision: D3790552 fbshipit-source-id: 61513ece63ae214f48c6cb6f40fb29757a0ac706 --- React/Base/RCTConvert.h | 4 ++-- React/Base/RCTConvert.m | 8 ++++---- React/Views/RCTShadowView.h | 5 +++++ React/Views/RCTShadowView.m | 1 + React/Views/RCTViewManager.m | 11 ++++++++++- 5 files changed, 22 insertions(+), 7 deletions(-) diff --git a/React/Base/RCTConvert.h b/React/Base/RCTConvert.h index 68a3e25dc..f87aa251f 100644 --- a/React/Base/RCTConvert.h +++ b/React/Base/RCTConvert.h @@ -104,8 +104,8 @@ typedef NSArray CGColorArray; typedef id NSPropertyList; + (NSPropertyList)NSPropertyList:(id)json; -typedef BOOL css_clip_t, css_backface_visibility_t; -+ (css_clip_t)css_clip_t:(id)json; +typedef BOOL css_backface_visibility_t; ++ (CSSOverflow)CSSOverflow:(id)json; + (css_backface_visibility_t)css_backface_visibility_t:(id)json; + (CSSFlexDirection)CSSFlexDirection:(id)json; + (CSSJustify)CSSJustify:(id)json; diff --git a/React/Base/RCTConvert.m b/React/Base/RCTConvert.m index a7194f49c..69e4aebd7 100644 --- a/React/Base/RCTConvert.m +++ b/React/Base/RCTConvert.m @@ -601,10 +601,10 @@ RCT_ENUM_CONVERTER(css_backface_visibility_t, (@{ @"visible": @YES }), YES, boolValue) -RCT_ENUM_CONVERTER(css_clip_t, (@{ - @"hidden": @YES, - @"visible": @NO -}), NO, boolValue) +RCT_ENUM_CONVERTER(CSSOverflow, (@{ + @"hidden": @(CSSOverflowHidden), + @"visible": @(CSSOverflowVisible) +}), CSSOverflowVisible, intValue) RCT_ENUM_CONVERTER(CSSFlexDirection, (@{ @"row": @(CSSFlexDirectionRow), diff --git a/React/Views/RCTShadowView.h b/React/Views/RCTShadowView.h index c24cc4049..e0ac977a6 100644 --- a/React/Views/RCTShadowView.h +++ b/React/Views/RCTShadowView.h @@ -139,6 +139,11 @@ typedef void (^RCTApplierBlock)(NSDictionary *viewRegistry */ @property (nonatomic, assign) NSInteger zIndex; +/** + * Clipping properties + */ +@property (nonatomic, assign) CSSOverflow overflow; + /** * Calculate property changes that need to be propagated to the view. * The applierBlocks set contains RCTApplierBlock functions that must be applied diff --git a/React/Views/RCTShadowView.m b/React/Views/RCTShadowView.m index 76b262b15..688084a3f 100644 --- a/React/Views/RCTShadowView.m +++ b/React/Views/RCTShadowView.m @@ -632,6 +632,7 @@ RCT_STYLE_PROPERTY(AlignSelf, alignSelf, AlignSelf, CSSAlign) RCT_STYLE_PROPERTY(AlignItems, alignItems, AlignItems, CSSAlign) RCT_STYLE_PROPERTY(Position, position, PositionType, CSSPositionType) RCT_STYLE_PROPERTY(FlexWrap, flexWrap, FlexWrap, CSSWrapType) +RCT_STYLE_PROPERTY(Overflow, overflow, Overflow, CSSOverflow) - (void)setBackgroundColor:(UIColor *)color { diff --git a/React/Views/RCTViewManager.m b/React/Views/RCTViewManager.m index d14cc32a9..fef287205 100644 --- a/React/Views/RCTViewManager.m +++ b/React/Views/RCTViewManager.m @@ -119,7 +119,14 @@ 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) -RCT_REMAP_VIEW_PROPERTY(overflow, clipsToBounds, css_clip_t) +RCT_CUSTOM_VIEW_PROPERTY(overflow, CSSOverflow, RCTView) +{ + if (json) { + view.clipsToBounds = [RCTConvert CSSOverflow:json] == CSSOverflowHidden; + } else { + view.clipsToBounds = defaultView.clipsToBounds; + } +} RCT_CUSTOM_VIEW_PROPERTY(shouldRasterizeIOS, BOOL, RCTView) { view.layer.shouldRasterize = json ? [RCTConvert BOOL:json] : defaultView.layer.shouldRasterize; @@ -295,6 +302,8 @@ RCT_EXPORT_SHADOW_PROPERTY(alignItems, CSSAlign) RCT_EXPORT_SHADOW_PROPERTY(alignSelf, CSSAlign) RCT_EXPORT_SHADOW_PROPERTY(position, CSSPositionType) +RCT_EXPORT_SHADOW_PROPERTY(overflow, CSSOverflow) + RCT_EXPORT_SHADOW_PROPERTY(onLayout, RCTDirectEventBlock) RCT_EXPORT_SHADOW_PROPERTY(zIndex, NSInteger)