fix: tests + minor improvements

th3rdwave · Jun 20, 2023 · e808572 · e808572
1 parent 65c5a99
commit e808572
Show file tree

Hide file tree

Showing 9 changed files with 168 additions and 55 deletions.
diff --git a/common/cpp/react/renderer/components/safeareacontext/RNCSafeAreaViewShadowNode.cpp b/common/cpp/react/renderer/components/safeareacontext/RNCSafeAreaViewShadowNode.cpp
@@ -22,7 +22,8 @@ inline YGValue valueFromEdges(YGStyle::Edges edges, YGEdge edge, YGEdge axis) {
   return edges[YGEdgeAll];
 }
 
-inline float getEdgeValue(std::string edgeMode, float insetValue, float edgeValue) {
+inline float
+getEdgeValue(std::string edgeMode, float insetValue, float edgeValue) {
   if (edgeMode == "off") {
     return edgeValue;
   } else if (edgeMode == "maximum") {
@@ -64,10 +65,22 @@ void RNCSafeAreaViewShadowNode::adjustLayoutWithState() {
         valueFromEdges(props.yogaStyle.margin(), YGEdgeRight, YGEdgeHorizontal);
   }
 
-  top = yogaStyleValueFromFloat(getEdgeValue(edges.top, stateData.insets.top, (top.unit == YGUnitPoint ? top.value : 0)));
-  left = yogaStyleValueFromFloat(getEdgeValue(edges.left, stateData.insets.left, (left.unit == YGUnitPoint ? left.value : 0)));
-  right = yogaStyleValueFromFloat(getEdgeValue(edges.right, stateData.insets.right, (right.unit == YGUnitPoint ? right.value : 0)));
-  bottom = yogaStyleValueFromFloat(getEdgeValue(edges.bottom, stateData.insets.bottom, (bottom.unit == YGUnitPoint ? bottom.value : 0)));
+  top = yogaStyleValueFromFloat(getEdgeValue(
+      edges.top,
+      stateData.insets.top,
+      (top.unit == YGUnitPoint ? top.value : 0)));
+  left = yogaStyleValueFromFloat(getEdgeValue(
+      edges.left,
+      stateData.insets.left,
+      (left.unit == YGUnitPoint ? left.value : 0)));
+  right = yogaStyleValueFromFloat(getEdgeValue(
+      edges.right,
+      stateData.insets.right,
+      (right.unit == YGUnitPoint ? right.value : 0)));
+  bottom = yogaStyleValueFromFloat(getEdgeValue(
+      edges.bottom,
+      stateData.insets.bottom,
+      (bottom.unit == YGUnitPoint ? bottom.value : 0)));
 
   YGStyle adjustedStyle = getConcreteProps().yogaStyle;
   if (props.mode == RNCSafeAreaViewMode::Padding) {

diff --git a/ios/RNCSafeAreaShadowView.m b/ios/RNCSafeAreaShadowView.m
@@ -3,10 +3,10 @@
 #import <React/RCTAssert.h>
 #include <math.h>
 
+#import "RNCSafeAreaViewEdgeMode.h"
 #import "RNCSafeAreaViewEdges.h"
 #import "RNCSafeAreaViewLocalData.h"
 #import "RNCSafeAreaViewMode.h"
-#import "RNCSafeAreaViewEdgeMode.h"
 
 // From RCTShadowView.m
 typedef NS_ENUM(unsigned int, meta_prop_t) {
@@ -113,14 +113,17 @@ - (void)updateInsets
   if (mode == RNCSafeAreaViewModePadding) {
     [self extractEdges:_paddingMetaProps top:&top right:&right bottom:&bottom left:&left];
     super.paddingTop = (YGValue){[self getEdgeValue:edges.top insetValue:insets.top edgeValue:top], YGUnitPoint};
-    super.paddingRight = (YGValue){[self getEdgeValue:edges.right insetValue:insets.right edgeValue:right], YGUnitPoint};
-    super.paddingBottom = (YGValue){[self getEdgeValue:edges.bottom insetValue:insets.bottom edgeValue:bottom], YGUnitPoint};
+    super.paddingRight =
+        (YGValue){[self getEdgeValue:edges.right insetValue:insets.right edgeValue:right], YGUnitPoint};
+    super.paddingBottom =
+        (YGValue){[self getEdgeValue:edges.bottom insetValue:insets.bottom edgeValue:bottom], YGUnitPoint};
     super.paddingLeft = (YGValue){[self getEdgeValue:edges.left insetValue:insets.left edgeValue:left], YGUnitPoint};
   } else if (mode == RNCSafeAreaViewModeMargin) {
     [self extractEdges:_marginMetaProps top:&top right:&right bottom:&bottom left:&left];
     super.marginTop = (YGValue){[self getEdgeValue:edges.top insetValue:insets.top edgeValue:top], YGUnitPoint};
     super.marginRight = (YGValue){[self getEdgeValue:edges.right insetValue:insets.right edgeValue:right], YGUnitPoint};
-    super.marginBottom = (YGValue){[self getEdgeValue:edges.bottom insetValue:insets.bottom edgeValue:bottom], YGUnitPoint};
+    super.marginBottom =
+        (YGValue){[self getEdgeValue:edges.bottom insetValue:insets.bottom edgeValue:bottom], YGUnitPoint};
     super.marginLeft = (YGValue){[self getEdgeValue:edges.left insetValue:insets.left edgeValue:left], YGUnitPoint};
   }
 }

diff --git a/ios/RNCSafeAreaView.m b/ios/RNCSafeAreaView.m
@@ -23,7 +23,8 @@ - (instancetype)initWithBridge:(RCTBridge *)bridge
     _bridge = bridge;
     // Defaults
     _mode = RNCSafeAreaViewModePadding;
-    _edges = RNCSafeAreaViewEdgesMake(RNCSafeAreaViewEdgeModeOff, RNCSafeAreaViewEdgeModeOff, RNCSafeAreaViewEdgeModeOff, RNCSafeAreaViewEdgeModeOff);
+    _edges = RNCSafeAreaViewEdgesMake(
+        RNCSafeAreaViewEdgeModeOff, RNCSafeAreaViewEdgeModeOff, RNCSafeAreaViewEdgeModeOff, RNCSafeAreaViewEdgeModeOff);
   }
 
   return self;

diff --git a/ios/RNCSafeAreaViewEdgeMode.h b/ios/RNCSafeAreaViewEdgeMode.h
@@ -8,5 +8,5 @@ typedef NS_ENUM(NSInteger, RNCSafeAreaViewEdgeMode) {
 };
 
 @interface RCTConvert (RNCSafeAreaViewEdgeMode)
- + (RNCSafeAreaViewEdgeMode)RNCSafeAreaViewEdgeMode:(nullable id)json;
++ (RNCSafeAreaViewEdgeMode)RNCSafeAreaViewEdgeMode:(nullable id)json;
 @end
diff --git a/ios/RNCSafeAreaViewEdges.h b/ios/RNCSafeAreaViewEdges.h
@@ -2,10 +2,14 @@
 #import "RNCSafeAreaViewEdgeMode.h"
 
 typedef struct RNCSafeAreaViewEdges {
-    RNCSafeAreaViewEdgeMode top;
-    RNCSafeAreaViewEdgeMode right;
-    RNCSafeAreaViewEdgeMode bottom;
-    RNCSafeAreaViewEdgeMode left;
+  RNCSafeAreaViewEdgeMode top;
+  RNCSafeAreaViewEdgeMode right;
+  RNCSafeAreaViewEdgeMode bottom;
+  RNCSafeAreaViewEdgeMode left;
 } RNCSafeAreaViewEdges;
 
-RNCSafeAreaViewEdges RNCSafeAreaViewEdgesMake(RNCSafeAreaViewEdgeMode top, RNCSafeAreaViewEdgeMode right, RNCSafeAreaViewEdgeMode bottom, RNCSafeAreaViewEdgeMode left);
+RNCSafeAreaViewEdges RNCSafeAreaViewEdgesMake(
+    RNCSafeAreaViewEdgeMode top,
+    RNCSafeAreaViewEdgeMode right,
+    RNCSafeAreaViewEdgeMode bottom,
+    RNCSafeAreaViewEdgeMode left);
diff --git a/ios/RNCSafeAreaViewEdges.m b/ios/RNCSafeAreaViewEdges.m
@@ -1,29 +1,36 @@
-#import <React/RCTConvert.h>
 #import "RNCSafeAreaViewEdges.h"
+#import <React/RCTConvert.h>
 #import "RNCSafeAreaViewEdgeMode.h"
 
-RNCSafeAreaViewEdges RNCSafeAreaViewEdgesMake(RNCSafeAreaViewEdgeMode top, RNCSafeAreaViewEdgeMode right, RNCSafeAreaViewEdgeMode bottom, RNCSafeAreaViewEdgeMode left)
+RNCSafeAreaViewEdges RNCSafeAreaViewEdgesMake(
+    RNCSafeAreaViewEdgeMode top,
+    RNCSafeAreaViewEdgeMode right,
+    RNCSafeAreaViewEdgeMode bottom,
+    RNCSafeAreaViewEdgeMode left)
 {
-    RNCSafeAreaViewEdges edges;
-    edges.top = top;
-    edges.left = left;
-    edges.bottom = bottom;
-    edges.right = right;
-    return edges;
+  RNCSafeAreaViewEdges edges;
+  edges.top = top;
+  edges.left = left;
+  edges.bottom = bottom;
+  edges.right = right;
+  return edges;
 }
 
 RNCSafeAreaViewEdges RNCSafeAreaViewEdgesMakeString(NSString *top, NSString *right, NSString *bottom, NSString *left)
 {
-    RNCSafeAreaViewEdges edges;
-    edges.top = [RCTConvert RNCSafeAreaViewEdgeMode:top];
-    edges.right = [RCTConvert RNCSafeAreaViewEdgeMode:right];
-    edges.bottom = [RCTConvert RNCSafeAreaViewEdgeMode:bottom];
-    edges.left = [RCTConvert RNCSafeAreaViewEdgeMode:left];
-    return edges;
+  RNCSafeAreaViewEdges edges;
+  edges.top = [RCTConvert RNCSafeAreaViewEdgeMode:top];
+  edges.right = [RCTConvert RNCSafeAreaViewEdgeMode:right];
+  edges.bottom = [RCTConvert RNCSafeAreaViewEdgeMode:bottom];
+  edges.left = [RCTConvert RNCSafeAreaViewEdgeMode:left];
+  return edges;
 }
 
 @implementation RCTConvert (RNCSafeAreaViewEdges)
 
-RCT_CUSTOM_CONVERTER(RNCSafeAreaViewEdges, RNCSafeAreaViewEdges, RNCSafeAreaViewEdgesMakeString(json[@"top"], json[@"right"], json[@"bottom"], json[@"left"]))
+RCT_CUSTOM_CONVERTER(
+    RNCSafeAreaViewEdges,
+    RNCSafeAreaViewEdges,
+    RNCSafeAreaViewEdgesMakeString(json[@"top"], json[@"right"], json[@"bottom"], json[@"left"]))
 
 @end
diff --git a/src/SafeAreaView.tsx b/src/SafeAreaView.tsx
@@ -23,23 +23,23 @@ export const SafeAreaView = React.forwardRef<
   SafeAreaViewProps
 >(({ edges, ...props }, ref) => {
   const nativeEdges = useMemo(() => {
-    const _edges = Array.isArray(edges)
-      ? edges.reduce<EdgeRecord>((accum, edge) => {
-          accum[edge] = 'additive';
-          return accum;
-        }, {})
-      : edges;
-
-    if (_edges === undefined) {
+    if (edges == null) {
       return defaultEdges;
     }
 
+    const edgesObj = Array.isArray(edges)
+      ? edges.reduce<EdgeRecord>((acc, edge) => {
+          acc[edge] = 'additive';
+          return acc;
+        }, {})
+      : edges;
+
     // make sure that we always pass all edges, required for fabric
     const requiredEdges: Record<Edge, EdgeMode> = {
-      top: _edges.top ?? 'off',
-      right: _edges.right ?? 'off',
-      bottom: _edges.bottom ?? 'off',
-      left: _edges.left ?? 'off',
+      top: edgesObj.top ?? 'off',
+      right: edgesObj.right ?? 'off',
+      bottom: edgesObj.bottom ?? 'off',
+      left: edgesObj.left ?? 'off',
     };
 
     return requiredEdges;

diff --git a/src/__tests__/SafeAreaView-test.tsx b/src/__tests__/SafeAreaView-test.tsx
@@ -32,4 +32,29 @@ describe('SafeAreaView', () => {
     );
     expect(component).toMatchSnapshot();
   });
+
+  it('can set edges', () => {
+    const component = ReactTestRenderer.create(
+      <SafeAreaProvider initialMetrics={INITIAL_METRICS}>
+        <SafeAreaView edges={['top', 'bottom']}>
+          <View />
+        </SafeAreaView>
+      </SafeAreaProvider>,
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it('can set edges value type', () => {
+    const component = ReactTestRenderer.create(
+      <SafeAreaProvider initialMetrics={INITIAL_METRICS}>
+        <SafeAreaView
+          edges={{ top: 'additive', bottom: 'maximum' }}
+          style={{ paddingTop: 24, paddingBottom: 24 }}
+        >
+          <View />
+        </SafeAreaView>
+      </SafeAreaProvider>,
+    );
+    expect(component).toMatchSnapshot();
+  });
 });
diff --git a/src/__tests__/__snapshots__/SafeAreaView-test.tsx.snap b/src/__tests__/__snapshots__/SafeAreaView-test.tsx.snap
@@ -14,12 +14,12 @@ exports[`SafeAreaView can override padding styles 1`] = `
 >
   <RNCSafeAreaView
     edges={
-      [
-        "bottom",
-        "left",
-        "right",
-        "top",
-      ]
+      {
+        "bottom": "additive",
+        "left": "additive",
+        "right": "additive",
+        "top": "additive",
+      }
     }
     style={
       {
@@ -32,6 +32,66 @@ exports[`SafeAreaView can override padding styles 1`] = `
 </RNCSafeAreaProvider>
 `;
 
+exports[`SafeAreaView can set edges 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <RNCSafeAreaView
+    edges={
+      {
+        "bottom": "additive",
+        "left": "off",
+        "right": "off",
+        "top": "additive",
+      }
+    }
+  >
+    <View />
+  </RNCSafeAreaView>
+</RNCSafeAreaProvider>
+`;
+
+exports[`SafeAreaView can set edges value type 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <RNCSafeAreaView
+    edges={
+      {
+        "bottom": "maximum",
+        "left": "off",
+        "right": "off",
+        "top": "additive",
+      }
+    }
+    style={
+      {
+        "paddingBottom": 24,
+        "paddingTop": 24,
+      }
+    }
+  >
+    <View />
+  </RNCSafeAreaView>
+</RNCSafeAreaProvider>
+`;
+
 exports[`SafeAreaView renders 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
@@ -46,12 +106,12 @@ exports[`SafeAreaView renders 1`] = `
 >
   <RNCSafeAreaView
     edges={
-      [
-        "bottom",
-        "left",
-        "right",
-        "top",
-      ]
+      {
+        "bottom": "additive",
+        "left": "additive",
+        "right": "additive",
+        "top": "additive",
+      }
     }
   >
     <View />