feat: Add borderBlockColor implementation on Android

facebook · gabrieldonadel · Jan 30, 2023 · Jan 30, 2023 · Jan 30, 2023 · Jan 30, 2023
commit aaab1b8e1bf08dc06ff27a639f37e6bf70f0649e
diff --git a/Libraries/Components/View/ReactNativeStyleAttributes.js b/Libraries/Components/View/ReactNativeStyleAttributes.js
@@ -117,6 +117,9 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
    */
   backfaceVisibility: true,
   backgroundColor: colorAttributes,
+  borderBlockColor: colorAttributes,
+  borderBlockEndColor: colorAttributes,
+  borderBlockStartColor: colorAttributes,
   borderBottomColor: colorAttributes,
   borderBottomEndRadius: true,
   borderBottomLeftRadius: true,

diff --git a/Libraries/Components/View/ViewNativeComponent.js b/Libraries/Components/View/ViewNativeComponent.js
@@ -85,6 +85,15 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           borderEndColor: {
             process: require('../../StyleSheet/processColor').default,
           },
+          borderBlockColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
+          borderBlockEndColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
+          borderBlockStartColor: {
+            process: require('../../StyleSheet/processColor').default,
+          },
 
           focusable: true,
           overflow: true,

diff --git a/Libraries/StyleSheet/StyleSheetTypes.d.ts b/Libraries/StyleSheet/StyleSheetTypes.d.ts
@@ -232,6 +232,9 @@ export interface TransformsStyle {
 export interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
   backfaceVisibility?: 'visible' | 'hidden' | undefined;
   backgroundColor?: ColorValue | undefined;
+  borderBlockColor?: ColorValue | undefined;
+  borderBlockEndColor?: ColorValue | undefined;
+  borderBlockStartColor?: ColorValue | undefined;
   borderBottomColor?: ColorValue | undefined;
   borderBottomEndRadius?: number | undefined;
   borderBottomLeftRadius?: number | undefined;

diff --git a/Libraries/StyleSheet/StyleSheetTypes.js b/Libraries/StyleSheet/StyleSheetTypes.js
@@ -698,6 +698,9 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{
   borderRightColor?: ____ColorValue_Internal,
   borderStartColor?: ____ColorValue_Internal,
   borderTopColor?: ____ColorValue_Internal,
+  borderBlockColor: ____ColorValue_Internal,
+  borderBlockEndColor: ____ColorValue_Internal,
+  borderBlockStartColor: ____ColorValue_Internal,
   borderRadius?: number | AnimatedNode,
   borderBottomEndRadius?: number | AnimatedNode,
   borderBottomLeftRadius?: number | AnimatedNode,

diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/Spacing.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/Spacing.java
@@ -47,10 +47,22 @@ public class Spacing {
    * Spacing type that represents all directions (left, top, right, bottom). E.g. {@code margin}.
    */
   public static final int ALL = 8;
+  /**
+   * Spacing type that represents all directions (left, top, right, bottom). E.g. {@code margin}.
+   */
+  public static final int BLOCK = 9;
+  /**
+   * Spacing type that represents all directions (left, top, right, bottom). E.g. {@code margin}.
+   */
+  public static final int BLOCK_END = 10;
+  /**
+   * Spacing type that represents all directions (left, top, right, bottom). E.g. {@code margin}.
+   */
+  public static final int BLOCK_START = 11;
 
   private static final int[] sFlagsMap = {
     1, /*LEFT*/ 2, /*TOP*/ 4, /*RIGHT*/ 8, /*BOTTOM*/ 16, /*START*/ 32, /*END*/ 64, /*HORIZONTAL*/
-    128, /*VERTICAL*/ 256, /*ALL*/
+    128, /*VERTICAL*/ 256, /*ALL*/ 512, /*BLOCK*/ 1024, /*BLOCK_END*/ 2048, /*BLOCK_START*/
   };
 
   private final float[] mSpacing;
@@ -96,7 +108,8 @@ public boolean set(int spacingType, float value) {
       mHasAliasesSet =
           (mValueFlags & sFlagsMap[ALL]) != 0
               || (mValueFlags & sFlagsMap[VERTICAL]) != 0
-              || (mValueFlags & sFlagsMap[HORIZONTAL]) != 0;
+              || (mValueFlags & sFlagsMap[HORIZONTAL]) != 0
+              || (mValueFlags & sFlagsMap[BLOCK]) != 0;
 
       return true;
     }
@@ -111,7 +124,7 @@ public boolean set(int spacingType, float value) {
    */
   public float get(int spacingType) {
     float defaultValue =
-        (spacingType == START || spacingType == END ? YogaConstants.UNDEFINED : mDefaultValue);
+        (spacingType == START || spacingType == END || spacingType == BLOCK || spacingType == BLOCK_END || spacingType == BLOCK_START ? YogaConstants.UNDEFINED : mDefaultValue);
 
     if (mValueFlags == 0) {
       return defaultValue;
@@ -174,6 +187,9 @@ private static float[] newFullSpacingArray() {
       YogaConstants.UNDEFINED,
       YogaConstants.UNDEFINED,
       YogaConstants.UNDEFINED,
+      YogaConstants.UNDEFINED,
+      YogaConstants.UNDEFINED,
+      YogaConstants.UNDEFINED,
     };
   }
 }
diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java
@@ -135,6 +135,9 @@ public class ViewProps {
   public static final String BORDER_RIGHT_COLOR = "borderRightColor";
   public static final String BORDER_TOP_COLOR = "borderTopColor";
   public static final String BORDER_BOTTOM_COLOR = "borderBottomColor";
+  public static final String BORDER_BLOCK_COLOR = "borderBlockColor";
+  public static final String BORDER_BLOCK_END_COLOR = "borderBlockEndColor";
+  public static final String BORDER_BLOCK_START_COLOR = "borderBlockStartColor";
   public static final String BORDER_TOP_START_RADIUS = "borderTopStartRadius";
   public static final String BORDER_TOP_END_RADIUS = "borderTopEndRadius";
   public static final String BORDER_BOTTOM_START_RADIUS = "borderBottomStartRadius";
@@ -299,6 +302,15 @@ public static boolean isLayoutOnly(ReadableMap map, String prop) {
       case BORDER_BOTTOM_COLOR:
         return map.getType(BORDER_BOTTOM_COLOR) == ReadableType.Number
             && map.getInt(BORDER_BOTTOM_COLOR) == Color.TRANSPARENT;
+      case BORDER_BLOCK_COLOR:
+        return map.getType(BORDER_BLOCK_COLOR) == ReadableType.Number
+            && map.getInt(BORDER_BLOCK_COLOR) == Color.TRANSPARENT;
+      case BORDER_BLOCK_END_COLOR:
+        return map.getType(BORDER_BLOCK_END_COLOR) == ReadableType.Number
+            && map.getInt(BORDER_BLOCK_END_COLOR) == Color.TRANSPARENT;
+      case BORDER_BLOCK_START_COLOR:
+        return map.getType(BORDER_BLOCK_START_COLOR) == ReadableType.Number
+            && map.getInt(BORDER_BLOCK_START_COLOR) == Color.TRANSPARENT;
       case BORDER_WIDTH:
         return map.isNull(BORDER_WIDTH) || map.getDouble(BORDER_WIDTH) == 0d;
       case BORDER_LEFT_WIDTH:

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
@@ -87,6 +87,9 @@ object ReactMapBufferPropSetter {
   private const val EDGE_START = 4
   private const val EDGE_END = 5
   private const val EDGE_ALL = 6
+  private const val EDGE_BLOCK = 7
+  private const val EDGE_BLOCK_END = 8
+  private const val EDGE_BLOCK_START = 9
 
   private const val CORNER_TOP_LEFT = 0
   private const val CORNER_TOP_RIGHT = 1
@@ -349,6 +352,9 @@ object ReactMapBufferPropSetter {
             EDGE_BOTTOM -> 4
             EDGE_START -> 5
             EDGE_END -> 6
+            EDGE_BLOCK -> 7
+            EDGE_BLOCK_END -> 8
+            EDGE_BLOCK_START -> 9
             else -> throw IllegalArgumentException("Unknown key for border color: $key")
           }
       val colorValue = entry.intValue

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
@@ -359,6 +359,21 @@ private void drawRoundedBackgroundWithBorders(Canvas canvas) {
     int colorRight = getBorderColor(Spacing.RIGHT);
     int colorBottom = getBorderColor(Spacing.BOTTOM);
 
+    int colorBlock = getBorderColor(Spacing.BLOCK);
+    int colorBlockStart = getBorderColor(Spacing.BLOCK_START);
+    int colorBlockEnd = getBorderColor(Spacing.BLOCK_END);
+
+    if(isBorderColorDefined(Spacing.BLOCK)){
+      colorBottom = colorBlock;
+      colorTop = colorBlock;
+    }
+    if(isBorderColorDefined(Spacing.BLOCK_END)){
+      colorBottom = colorBlockEnd;
+    }
+    if(isBorderColorDefined(Spacing.BLOCK_START)){
+      colorTop = colorBlockStart;
+    }
+
     if (borderWidth.top > 0
         || borderWidth.bottom > 0
         || borderWidth.left > 0
@@ -552,13 +567,20 @@ private void updatePath() {
     int colorRight = getBorderColor(Spacing.RIGHT);
     int colorBottom = getBorderColor(Spacing.BOTTOM);
     int borderColor = getBorderColor(Spacing.ALL);
+    int colorBlock = getBorderColor(Spacing.BLOCK);
+    int colorBlockStart = getBorderColor(Spacing.BLOCK_START);
+    int colorBlockEnd = getBorderColor(Spacing.BLOCK_END);
+
 
     // Clip border ONLY if its color is non transparent
     if (Color.alpha(colorLeft) != 0
         && Color.alpha(colorTop) != 0
         && Color.alpha(colorRight) != 0
         && Color.alpha(colorBottom) != 0
-        && Color.alpha(borderColor) != 0) {
+        && Color.alpha(borderColor) != 0
+        && Color.alpha(colorBlock) != 0
+        && Color.alpha(colorBlockStart) != 0
+        && Color.alpha(colorBlockEnd) != 0) {
 
       mInnerClipTempRectForBorderRadius.top += borderWidth.top;
       mInnerClipTempRectForBorderRadius.bottom -= borderWidth.bottom;
@@ -1128,6 +1150,21 @@ private void drawRectangularBackgroundWithBorders(Canvas canvas) {
       int colorRight = getBorderColor(Spacing.RIGHT);
       int colorBottom = getBorderColor(Spacing.BOTTOM);
 
+      int colorBlock = getBorderColor(Spacing.BLOCK);
+      int colorBlockStart = getBorderColor(Spacing.BLOCK_START);
+      int colorBlockEnd = getBorderColor(Spacing.BLOCK_END);
+
+      if(isBorderColorDefined(Spacing.BLOCK)){
+        colorBottom = colorBlock;
+        colorTop = colorBlock;
+      }
+      if(isBorderColorDefined(Spacing.BLOCK_END)){
+        colorBottom = colorBlockEnd;
+      }
+      if(isBorderColorDefined(Spacing.BLOCK_START)){
+        colorTop = colorBlockStart;
+      }
+
       final boolean isRTL = getResolvedLayoutDirection() == View.LAYOUT_DIRECTION_RTL;
       int colorStart = getBorderColor(Spacing.START);
       int colorEnd = getBorderColor(Spacing.END);

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
@@ -47,6 +47,9 @@ public class ReactViewManager extends ReactClippingViewManager<ReactViewGroup> {
     Spacing.BOTTOM,
     Spacing.START,
     Spacing.END,
+    Spacing.BLOCK,
+    Spacing.BLOCK_END,
+    Spacing.BLOCK_START
   };
   private static final int CMD_HOTSPOT_UPDATE = 1;
   private static final int CMD_SET_PRESSED = 2;
@@ -238,7 +241,10 @@ public void setBorderWidth(ReactViewGroup view, int index, float width) {
         ViewProps.BORDER_TOP_COLOR,
         ViewProps.BORDER_BOTTOM_COLOR,
         ViewProps.BORDER_START_COLOR,
-        ViewProps.BORDER_END_COLOR
+        ViewProps.BORDER_END_COLOR,
+        ViewProps.BORDER_BLOCK_COLOR,
+        ViewProps.BORDER_BLOCK_END_COLOR,
+        ViewProps.BORDER_BLOCK_START_COLOR
       },
       customType = "Color")
   public void setBorderColor(ReactViewGroup view, int index, Integer color) {

diff --git a/ReactCommon/react/renderer/components/view/primitives.h b/ReactCommon/react/renderer/components/view/primitives.h
@@ -99,6 +99,9 @@ struct CascadedRectangleEdges {
   OptionalT horizontal{};
   OptionalT vertical{};
   OptionalT all{};
+  OptionalT block{};
+  OptionalT blockStart{};
+  OptionalT blockEnd{};
 
   Counterpart resolve(bool isRTL, T defaults) const {
     const auto leadingEdge = isRTL ? end : start;

diff --git a/packages/rn-tester/js/examples/View/ViewExample.js b/packages/rn-tester/js/examples/View/ViewExample.js
@@ -738,4 +738,29 @@ exports.examples = [
       );
     },
   },
+  {
+    title: 'Border Color',
+    render(): React.Node {
+      return (
+        <View style={{rowGap: 10}}>
+          <View style={{position: 'relative', height: 65, borderWidth: 1}}>
+            <View
+              style={{
+                borderBlockEndColor: 'green',
+                borderBlockStartColor: 'purple',
+                borderWidth: 5,
+                position: 'absolute',
+                top: 10,
+                bottom: 10,
+                left: 10,
+                right: 10,
+              }}>
+              <Text style={{fontSize: 11}}>borderBlockStartColor purple</Text>
+              <Text style={{fontSize: 11}}>borderBlockEndColor green</Text>
+            </View>
+          </View>
+        </View>
+      );
+    },
+  },
 ];