From 3e3ad13b65ed70f606f6826947cbcfb4f7ce2c4b Mon Sep 17 00:00:00 2001 From: Mikael Sand Date: Wed, 1 Jan 2020 21:34:03 +0200 Subject: [PATCH] feat: Implement display="none" fixes: Enable display svg prop #1220 --- android/src/main/java/com/horcrux/svg/GroupView.java | 3 +++ .../java/com/horcrux/svg/RenderableViewManager.java | 5 +++++ android/src/main/java/com/horcrux/svg/VirtualView.java | 7 +++++++ ios/Elements/RNSVGGroup.m | 3 +++ ios/RNSVGNode.h | 1 + ios/RNSVGNode.m | 10 ++++++++++ ios/ViewManagers/RNSVGNodeManager.m | 4 ++++ src/lib/extract/extractProps.ts | 6 +++++- 8 files changed, 38 insertions(+), 1 deletion(-) diff --git a/android/src/main/java/com/horcrux/svg/GroupView.java b/android/src/main/java/com/horcrux/svg/GroupView.java index b19f9fb93..ab2b9ba9a 100644 --- a/android/src/main/java/com/horcrux/svg/GroupView.java +++ b/android/src/main/java/com/horcrux/svg/GroupView.java @@ -94,6 +94,9 @@ void drawGroup(final Canvas canvas, final Paint paint, final float opacity) { } if (child instanceof VirtualView) { VirtualView node = ((VirtualView)child); + if ("none".equals(node.mDisplay)) { + continue; + } if (node instanceof RenderableView) { ((RenderableView)node).mergeProperties(self); } diff --git a/android/src/main/java/com/horcrux/svg/RenderableViewManager.java b/android/src/main/java/com/horcrux/svg/RenderableViewManager.java index c28318209..da29d456d 100644 --- a/android/src/main/java/com/horcrux/svg/RenderableViewManager.java +++ b/android/src/main/java/com/horcrux/svg/RenderableViewManager.java @@ -1213,6 +1213,11 @@ public void setName(VirtualView node, String name) { node.setName(name); } + @ReactProp(name = "display") + public void setDisplay(VirtualView node, String display) { + node.setDisplay(display); + } + private void invalidateSvgView(VirtualView node) { SvgView view = node.getSvgView(); if (view!= null) { diff --git a/android/src/main/java/com/horcrux/svg/VirtualView.java b/android/src/main/java/com/horcrux/svg/VirtualView.java index 6683dbdda..0c2e4b855 100644 --- a/android/src/main/java/com/horcrux/svg/VirtualView.java +++ b/android/src/main/java/com/horcrux/svg/VirtualView.java @@ -77,6 +77,7 @@ abstract public class VirtualView extends ReactViewGroup { final float mScale; private boolean mResponsible; private boolean mOnLayout; + String mDisplay; String mName; private SvgView svgView; @@ -242,6 +243,12 @@ public void setName(String name) { invalidate(); } + @ReactProp(name = "display") + public void setDisplay(String display) { + mDisplay = display; + invalidate(); + } + @ReactProp(name = "onLayout") public void setOnLayout(boolean onLayout) { mOnLayout = onLayout; diff --git a/ios/Elements/RNSVGGroup.m b/ios/Elements/RNSVGGroup.m index e55abbbc2..a8787b8d1 100644 --- a/ios/Elements/RNSVGGroup.m +++ b/ios/Elements/RNSVGGroup.m @@ -43,6 +43,9 @@ - (void)renderGroupTo:(CGContextRef)context rect:(CGRect)rect // no-op } else if ([node isKindOfClass:[RNSVGNode class]]) { RNSVGNode* svgNode = (RNSVGNode*)node; + if (svgNode.display && [@"none" isEqualToString:svgNode.display]) { + return YES; + } if (svgNode.responsible && !self.svgView.responsible) { self.svgView.responsible = YES; } diff --git a/ios/RNSVGNode.h b/ios/RNSVGNode.h index 60cef7273..2ba5e3fab 100644 --- a/ios/RNSVGNode.h +++ b/ios/RNSVGNode.h @@ -27,6 +27,7 @@ extern CGFloat const RNSVG_M_SQRT1_2l; extern CGFloat const RNSVG_DEFAULT_FONT_SIZE; @property (nonatomic, strong) NSString *name; +@property (nonatomic, strong) NSString *display; @property (nonatomic, assign) CGFloat opacity; @property (nonatomic, assign) RNSVGCGFCRule clipRule; @property (nonatomic, strong) NSString *clipPath; diff --git a/ios/RNSVGNode.m b/ios/RNSVGNode.m index 12008f3f4..d63fb848a 100644 --- a/ios/RNSVGNode.m +++ b/ios/RNSVGNode.m @@ -174,6 +174,16 @@ - (void)setName:(NSString *)name _name = name; } +- (void)setDisplay:(NSString *)display +{ + if ([display isEqualToString:_display]) { + return; + } + + [self invalidate]; + _display = display; +} + - (void)setOpacity:(CGFloat)opacity { if (opacity == _opacity) { diff --git a/ios/ViewManagers/RNSVGNodeManager.m b/ios/ViewManagers/RNSVGNodeManager.m index 258605ba0..23267347c 100644 --- a/ios/ViewManagers/RNSVGNodeManager.m +++ b/ios/ViewManagers/RNSVGNodeManager.m @@ -229,6 +229,10 @@ - (UIView *)view RCT_CUSTOM_SHADOW_PROPERTY(overflow, id, RNSVGNode) {} RCT_CUSTOM_SHADOW_PROPERTY(display, id, RNSVGNode) {} +RCT_CUSTOM_VIEW_PROPERTY(display, id, RNSVGNode) +{ + view.display = json; +} RCT_CUSTOM_SHADOW_PROPERTY(direction, id, RNSVGNode) {} diff --git a/src/lib/extract/extractProps.ts b/src/lib/extract/extractProps.ts index bdc3a475d..376e0af3c 100644 --- a/src/lib/extract/extractProps.ts +++ b/src/lib/extract/extractProps.ts @@ -46,6 +46,7 @@ export default function extractProps( markerMid?: string; markerEnd?: string; clipPath?: string; + display?: string; opacity?: NumberProp; onLayout?: () => void; transform?: number[] | string | TransformProps; @@ -57,11 +58,12 @@ export default function extractProps( ref: Object, ) { const { + id, opacity, onLayout, - id, clipPath, clipRule, + display, mask, marker, markerStart = marker, @@ -85,6 +87,7 @@ export default function extractProps( markerEnd?: string; clipPath?: string; clipRule?: number; + display?: string; } = { matrix, ...transformProps, @@ -93,6 +96,7 @@ export default function extractProps( ...extractResponder(props, ref), ...extractFill(props, styleProperties), ...extractStroke(props, styleProperties), + display: display === 'none' ? 'none' : undefined, }; if (onLayout) {