feat: Add logical border radius Paper implementation for Android

facebook · Dec 12, 2022 · dae78fd · dae78fd
1 parent 04db275
commit dae78fd
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 11 deletions.
diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java
@@ -139,6 +139,10 @@ public class ViewProps {
   public static final String BORDER_TOP_END_RADIUS = "borderTopEndRadius";
   public static final String BORDER_BOTTOM_START_RADIUS = "borderBottomStartRadius";
   public static final String BORDER_BOTTOM_END_RADIUS = "borderBottomEndRadius";
+  public static final String BORDER_END_END_RADIUS= "borderEndEndRadius";
+  public static final String BORDER_END_START_RADIUS = "borderEndStartRadius";
+  public static final String BORDER_START_END_RADIUS = "borderStartEndRadius";
+  public static final String BORDER_START_START_RADIUS = "borderStartStartRadius";
   public static final String BORDER_START_COLOR = "borderStartColor";
   public static final String BORDER_END_COLOR = "borderEndColor";
   public static final String ON_LAYOUT = "onLayout";

diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactMapBufferPropSetter.kt b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactMapBufferPropSetter.kt
@@ -97,6 +97,10 @@ object ReactMapBufferPropSetter {
   private const val CORNER_BOTTOM_END = 6
   private const val CORNER_BOTTOM_START = 7
   private const val CORNER_ALL = 8
+  private const val CORNER_END_END = 9
+  private const val CORNER_END_START = 10
+  private const val CORNER_START_END = 11
+  private const val CORNER_START_START = 12
 
   private const val NATIVE_DRAWABLE_KIND = 0
   private const val NATIVE_DRAWABLE_ATTRIBUTE = 1
@@ -365,6 +369,10 @@ object ReactMapBufferPropSetter {
             CORNER_TOP_END -> 6
             CORNER_BOTTOM_START -> 7
             CORNER_BOTTOM_END -> 8
+            CORNER_END_END -> 9
+            CORNER_END_START -> 10
+            CORNER_START_END -> 11
+            CORNER_START_START -> 12
             else -> throw IllegalArgumentException("Unknown key for border style: $key")
           }
       val borderRadius = entry.doubleValue

diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java
@@ -128,7 +128,11 @@ public enum BorderRadiusLocation {
     TOP_START,
     TOP_END,
     BOTTOM_START,
-    BOTTOM_END
+    BOTTOM_END,
+    END_END,
+    END_START,
+    START_END,
+    START_START
   }
 
   public ReactViewBackgroundDrawable(Context context) {
@@ -271,7 +275,7 @@ public void setRadius(float radius) {
 
   public void setRadius(float radius, int position) {
     if (mBorderCornerRadii == null) {
-      mBorderCornerRadii = new float[8];
+      mBorderCornerRadii = new float[12];
       Arrays.fill(mBorderCornerRadii, YogaConstants.UNDEFINED);
     }
 
@@ -581,8 +585,13 @@ private void updatePath() {
     float bottomStartRadius = getBorderRadius(BorderRadiusLocation.BOTTOM_START);
     float bottomEndRadius = getBorderRadius(BorderRadiusLocation.BOTTOM_END);
 
+    float endEndRadius = getBorderRadius(BorderRadiusLocation.END_END);
+    float endStartRadius = getBorderRadius(BorderRadiusLocation.END_START);
+    float startEndRadius = getBorderRadius(BorderRadiusLocation.START_END);
+    float startStartRadius = getBorderRadius(BorderRadiusLocation.START_START);
+
     if (I18nUtil.getInstance().doLeftAndRightSwapInRTL(mContext)) {
-      if (YogaConstants.isUndefined(topStartRadius)) {
+       if (YogaConstants.isUndefined(topStartRadius)) {
         topStartRadius = topLeftRadius;
       }
 
@@ -598,20 +607,30 @@ private void updatePath() {
         bottomEndRadius = bottomRightRadius;
       }
 
-      final float directionAwareTopLeftRadius = isRTL ? topEndRadius : topStartRadius;
-      final float directionAwareTopRightRadius = isRTL ? topStartRadius : topEndRadius;
-      final float directionAwareBottomLeftRadius = isRTL ? bottomEndRadius : bottomStartRadius;
-      final float directionAwareBottomRightRadius = isRTL ? bottomStartRadius : bottomEndRadius;
+      final float logicalTopStartRadius = !YogaConstants.isUndefined(startStartRadius) ? startStartRadius : topStartRadius;
+      final float logicalTopEndRadius = !YogaConstants.isUndefined(startEndRadius) ? startEndRadius : topEndRadius;
+      final float logicalBottomStartRadius = !YogaConstants.isUndefined(endStartRadius) ? endStartRadius : bottomStartRadius;
+      final float logicalBottomEndRadius = !YogaConstants.isUndefined(endEndRadius) ? endEndRadius : bottomEndRadius;
+
+      final float directionAwareTopLeftRadius = isRTL ? logicalTopEndRadius : logicalTopStartRadius;
+      final float directionAwareTopRightRadius = isRTL ? logicalTopStartRadius : logicalTopEndRadius;
+      final float directionAwareBottomLeftRadius = isRTL ? logicalBottomEndRadius : logicalBottomStartRadius;
+      final float directionAwareBottomRightRadius = isRTL ? logicalBottomStartRadius : logicalBottomEndRadius;
 
       topLeftRadius = directionAwareTopLeftRadius;
       topRightRadius = directionAwareTopRightRadius;
       bottomLeftRadius = directionAwareBottomLeftRadius;
       bottomRightRadius = directionAwareBottomRightRadius;
     } else {
-      final float directionAwareTopLeftRadius = isRTL ? topEndRadius : topStartRadius;
-      final float directionAwareTopRightRadius = isRTL ? topStartRadius : topEndRadius;
-      final float directionAwareBottomLeftRadius = isRTL ? bottomEndRadius : bottomStartRadius;
-      final float directionAwareBottomRightRadius = isRTL ? bottomStartRadius : bottomEndRadius;
+      final float logicalTopStartRadius = !YogaConstants.isUndefined(startStartRadius) ? startStartRadius : topStartRadius;
+      final float logicalTopEndRadius = !YogaConstants.isUndefined(startEndRadius) ? startEndRadius : topEndRadius;
+      final float logicalBottomStartRadius = !YogaConstants.isUndefined(endStartRadius) ? endStartRadius : bottomStartRadius;
+      final float logicalBottomEndRadius = !YogaConstants.isUndefined(endEndRadius) ? endEndRadius : bottomEndRadius;
+
+      final float directionAwareTopLeftRadius = isRTL ? logicalTopEndRadius : logicalTopStartRadius;
+      final float directionAwareTopRightRadius = isRTL ? logicalTopStartRadius : logicalTopEndRadius;
+      final float directionAwareBottomLeftRadius = isRTL ? logicalBottomEndRadius : logicalBottomStartRadius;
+      final float directionAwareBottomRightRadius = isRTL ? logicalBottomStartRadius : logicalBottomEndRadius;
 
       if (!YogaConstants.isUndefined(directionAwareTopLeftRadius)) {
         topLeftRadius = directionAwareTopLeftRadius;

diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.java
@@ -119,6 +119,10 @@ public void nextFocusUp(ReactViewGroup view, int viewId) {
         ViewProps.BORDER_TOP_END_RADIUS,
         ViewProps.BORDER_BOTTOM_START_RADIUS,
         ViewProps.BORDER_BOTTOM_END_RADIUS,
+        ViewProps.BORDER_END_END_RADIUS,
+        ViewProps.BORDER_END_START_RADIUS,
+        ViewProps.BORDER_START_END_RADIUS,
+        ViewProps.BORDER_START_START_RADIUS,
       },
       defaultFloat = YogaConstants.UNDEFINED)
   public void setBorderRadius(ReactViewGroup view, int index, float borderRadius) {