feat: Add logical border radius Fabric implementation for iOS

facebook · Dec 9, 2022 · 47972c0 · 47972c0
1 parent 9bafd39
commit 47972c0
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 15 deletions.
diff --git a/ReactAndroid/src/main/jni/react/fabric/viewPropConversions.h b/ReactAndroid/src/main/jni/react/fabric/viewPropConversions.h
@@ -113,6 +113,10 @@ constexpr MapBuffer::Key CORNER_TOP_END = 5;
 constexpr MapBuffer::Key CORNER_BOTTOM_END = 6;
 constexpr MapBuffer::Key CORNER_BOTTOM_START = 7;
 constexpr MapBuffer::Key CORNER_ALL = 8;
+constexpr MapBuffer::Key CORNER_END_END = 9;
+constexpr MapBuffer::Key CORNER_END_START = 10;
+constexpr MapBuffer::Key CORNER_START_END = 11;
+constexpr MapBuffer::Key CORNER_START_START = 12;
 
 inline void putOptionalFloat(
     MapBufferBuilder &builder,
@@ -132,6 +136,10 @@ MapBuffer convertBorderRadii(CascadedBorderRadii const &radii) {
   putOptionalFloat(builder, CORNER_BOTTOM_END, radii.bottomEnd);
   putOptionalFloat(builder, CORNER_BOTTOM_START, radii.bottomStart);
   putOptionalFloat(builder, CORNER_ALL, radii.all);
+  putOptionalFloat(builder, CORNER_END_END, radii.endEnd);
+  putOptionalFloat(builder, CORNER_END_START, radii.endStart);
+  putOptionalFloat(builder, CORNER_START_END, radii.startEnd);
+  putOptionalFloat(builder, CORNER_START_START, radii.startStart);
   return builder.build();
 }
 

diff --git a/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp b/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp
@@ -751,6 +751,26 @@ void YogaLayoutableShadowNode::swapLeftAndRightInViewProps(
   auto &props = const_cast<ViewProps &>(typedCasting);
 
   // Swap border node values, borderRadii, borderColors and borderStyles.
+  if (props.borderRadii.startEnd.has_value()) {
+    props.borderRadii.topEnd = props.borderRadii.startEnd;
+    props.borderRadii.startEnd.reset();
+  }
+
+  if (props.borderRadii.startStart.has_value()) {
+    props.borderRadii.topStart = props.borderRadii.startStart;
+    props.borderRadii.startStart.reset();
+  }
+
+  if (props.borderRadii.endEnd.has_value()) {
+    props.borderRadii.bottomEnd = props.borderRadii.endEnd;
+    props.borderRadii.endEnd.reset();
+  }
+
+  if (props.borderRadii.endStart.has_value()) {
+    props.borderRadii.bottomStart = props.borderRadii.endStart;
+    props.borderRadii.endStart.reset();
+  }
+
   if (props.borderRadii.topLeft.has_value()) {
     props.borderRadii.topStart = props.borderRadii.topLeft;
     props.borderRadii.topLeft.reset();

diff --git a/ReactCommon/react/renderer/components/view/primitives.h b/ReactCommon/react/renderer/components/view/primitives.h
@@ -160,12 +160,24 @@ struct CascadedRectangleCorners {
   OptionalT bottomStart{};
   OptionalT bottomEnd{};
   OptionalT all{};
+  OptionalT endEnd{};
+  OptionalT endStart{};
+  OptionalT startEnd{};
+  OptionalT startStart{};
 
   Counterpart resolve(bool isRTL, T defaults) const {
-    const auto topLeading = isRTL ? topEnd : topStart;
-    const auto topTrailing = isRTL ? topStart : topEnd;
-    const auto bottomLeading = isRTL ? bottomEnd : bottomStart;
-    const auto bottomTrailing = isRTL ? bottomStart : bottomEnd;
+    const auto topLeading = isRTL ? startEnd ? startEnd : topEnd
+        : startStart              ? startStart
+                                  : topStart;
+    const auto topTrailing = isRTL ? startStart ? startStart : topStart
+        : startEnd                 ? startEnd
+                                   : topEnd;
+    const auto bottomLeading = isRTL ? endEnd ? endEnd : bottomEnd
+        : endStart                   ? endStart
+                                     : bottomStart;
+    const auto bottomTrailing = isRTL ? endStart ? endStart : bottomStart
+        : endEnd                      ? endEnd
+                                      : bottomEnd;
 
     return {
         /* .topLeft = */ topLeft.value_or(
@@ -189,7 +201,11 @@ struct CascadedRectangleCorners {
                this->topEnd,
                this->bottomStart,
                this->bottomEnd,
-               this->all) ==
+               this->all,
+               this->endEnd,
+               this->endStart,
+               this->startEnd,
+               this->startStart) ==
         std::tie(
                rhs.topLeft,
                rhs.topRight,
@@ -199,7 +215,11 @@ struct CascadedRectangleCorners {
                rhs.topEnd,
                rhs.bottomStart,
                rhs.bottomEnd,
-               rhs.all);
+               rhs.all,
+               rhs.endEnd,
+               rhs.endStart,
+               rhs.startEnd,
+               rhs.startStart);
   }
 
   bool operator!=(const CascadedRectangleCorners<T> &rhs) const {

diff --git a/ReactCommon/react/renderer/components/view/propsConversions.h b/ReactCommon/react/renderer/components/view/propsConversions.h
@@ -401,6 +401,38 @@ static inline CascadedRectangleCorners<T> convertRawProp(
       defaultValue.bottomEnd,
       prefix,
       suffix);
+  result.endEnd = convertRawProp(
+      context,
+      rawProps,
+      "EndEnd",
+      sourceValue.endEnd,
+      defaultValue.endEnd,
+      prefix,
+      suffix);
+  result.endStart = convertRawProp(
+      context,
+      rawProps,
+      "EndStart",
+      sourceValue.endStart,
+      defaultValue.endStart,
+      prefix,
+      suffix);
+  result.startEnd = convertRawProp(
+      context,
+      rawProps,
+      "StartEnd",
+      sourceValue.startEnd,
+      defaultValue.startEnd,
+      prefix,
+      suffix);
+  result.startStart = convertRawProp(
+      context,
+      rawProps,
+      "StartStart",
+      sourceValue.startStart,
+      defaultValue.startStart,
+      prefix,
+      suffix);
 
   result.all = convertRawProp(
       context, rawProps, "", sourceValue.all, defaultValue.all, prefix, suffix);

diff --git a/ReactCommon/react/renderer/components/view/viewPropConversions.h b/ReactCommon/react/renderer/components/view/viewPropConversions.h
@@ -38,6 +38,10 @@ constexpr MapBuffer::Key CORNER_TOP_END = 5;
 constexpr MapBuffer::Key CORNER_BOTTOM_END = 6;
 constexpr MapBuffer::Key CORNER_BOTTOM_START = 7;
 constexpr MapBuffer::Key CORNER_ALL = 8;
+constexpr MapBuffer::Key CORNER_END_END = 9;
+constexpr MapBuffer::Key CORNER_END_START = 10;
+constexpr MapBuffer::Key CORNER_START_END = 11;
+constexpr MapBuffer::Key CORNER_START_START = 12;
 
 inline void putOptionalFloat(
     MapBufferBuilder &builder,
@@ -116,7 +120,7 @@ MapBuffer convertCascadedEdges(CascadedRectangleEdges<T> const &edges) {
 
 template <typename T>
 MapBuffer convertCascadedCorners(CascadedRectangleCorners<T> const &corners) {
-  MapBufferBuilder builder(9);
+  MapBufferBuilder builder(13);
   putOptionalFloat(
       builder, CORNER_TOP_LEFT, optionalFromValue(corners.topLeft));
   putOptionalFloat(
@@ -132,6 +136,13 @@ MapBuffer convertCascadedCorners(CascadedRectangleCorners<T> const &corners) {
       builder, CORNER_BOTTOM_END, optionalFromValue(corners.bottomEnd));
   putOptionalFloat(
       builder, CORNER_BOTTOM_START, optionalFromValue(corners.bottomStart));
+  putOptionalFloat(builder, CORNER_END_END, optionalFromValue(corners.endEnd));
+  putOptionalFloat(
+      builder, CORNER_END_START, optionalFromValue(corners.endStart));
+  putOptionalFloat(
+      builder, CORNER_START_END, optionalFromValue(corners.startEnd));
+  putOptionalFloat(
+      builder, CORNER_START_START, optionalFromValue(corners.startStart));
   putOptionalFloat(builder, CORNER_ALL, optionalFromValue(corners.all));
   return builder.build();
 }

diff --git a/packages/rn-tester/js/examples/RTL/RTLExample.js b/packages/rn-tester/js/examples/RTL/RTLExample.js
@@ -513,20 +513,20 @@ const LogicalBorderRadiiExample = withRTLState(({isRTL, setRTL}) => {
   return (
     <View>
       <Text style={styles.bold}>Styles</Text>
-      <Text>borderEndStartRadius: 10,</Text>
-      <Text>borderEndEndRadius: 20,</Text>
-      <Text>borderStartEndRadius: 30,</Text>
-      <Text>borderStartStartRadius: 40</Text>
+      <Text>borderStartStartRadius: 10</Text>
+      <Text>borderStartEndRadius: 20,</Text>
+      <Text>borderEndStartRadius: 30,</Text>
+      <Text>borderEndEndRadius: 40,</Text>
       <Text />
       <Text style={styles.bold}>Demo: </Text>
       <View style={directionStyle(isRTL)}>
         <View
           style={{
             borderWidth: 10,
-            borderEndStartRadius: 10,
-            borderEndEndRadius: 20,
-            borderStartEndRadius: 30,
-            borderStartStartRadius: 40,
+            borderStartStartRadius: 10,
+            borderStartEndRadius: 20,
+            borderEndStartRadius: 30,
+            borderEndEndRadius: 40,
             padding: 10,
           }}>
           <View>