feat: Add Fabric logical border radius implementation

facebook · Dec 6, 2022 · c656a18 · c656a18
1 parent 17f221c
commit c656a18
Show file tree

Hide file tree

Showing 8 changed files with 80 additions and 4 deletions.
diff --git a/Libraries/Components/View/ReactNativeStyleAttributes.js b/Libraries/Components/View/ReactNativeStyleAttributes.js
@@ -118,10 +118,14 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   borderColor: colorAttributes,
   borderCurve: true,
   borderEndColor: colorAttributes,
+  borderEndEndRadius: true,
+  borderEndStartRadius: true,
   borderLeftColor: colorAttributes,
   borderRadius: true,
   borderRightColor: colorAttributes,
   borderStartColor: colorAttributes,
+  borderStartEndRadius: true,
+  borderStartStartRadius: true,
   borderStyle: true,
   borderTopColor: colorAttributes,
   borderTopEndRadius: true,

diff --git a/Libraries/NativeComponent/BaseViewConfig.android.js b/Libraries/NativeComponent/BaseViewConfig.android.js
@@ -243,13 +243,17 @@ const validAttributesForNonEventProps = {
   paddingTop: true,
   paddingVertical: true,
 
-  borderWidth: true,
-  borderStartWidth: true,
-  borderEndWidth: true,
-  borderTopWidth: true,
   borderBottomWidth: true,
+  borderEndEndRadius: true,
+  borderEndStartRadius: true,
+  borderEndWidth: true,
   borderLeftWidth: true,
   borderRightWidth: true,
+  borderStartEndRadius: true,
+  borderStartStartRadius: true,
+  borderStartWidth: true,
+  borderTopWidth: true,
+  borderWidth: true,
 
   start: true,
   end: true,

diff --git a/Libraries/NativeComponent/BaseViewConfig.ios.js b/Libraries/NativeComponent/BaseViewConfig.ios.js
@@ -221,6 +221,10 @@ const validAttributesForNonEventProps = {
   borderBottomRightRadius: true,
   borderBottomStartRadius: true,
   borderBottomEndRadius: true,
+  borderEndEndRadius: true,
+  borderEndStartRadius: true,
+  borderStartEndRadius: true,
+  borderStartStartRadius: true,
   display: true,
   zIndex: true,
 

diff --git a/Libraries/StyleSheet/StyleSheetTypes.d.ts b/Libraries/StyleSheet/StyleSheetTypes.d.ts
@@ -233,12 +233,16 @@ export interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
   borderBottomWidth?: number | undefined;
   borderColor?: ColorValue | undefined;
   borderEndColor?: ColorValue | undefined;
+  borderEndEndRadius?: number | undefined;
+  borderEndStartRadius?: number | undefined;
   borderLeftColor?: ColorValue | undefined;
   borderLeftWidth?: number | undefined;
   borderRadius?: number | undefined;
   borderRightColor?: ColorValue | undefined;
   borderRightWidth?: number | undefined;
   borderStartColor?: ColorValue | undefined;
+  borderStartEndRadius?: number | undefined;
+  borderStartStartRadius?: number | undefined;
   borderStyle?: 'solid' | 'dotted' | 'dashed' | undefined;
   borderTopColor?: ColorValue | undefined;
   borderTopEndRadius?: number | undefined;

diff --git a/Libraries/StyleSheet/StyleSheetTypes.js b/Libraries/StyleSheet/StyleSheetTypes.js
@@ -629,6 +629,10 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{
   borderBottomLeftRadius?: number | AnimatedNode,
   borderBottomRightRadius?: number | AnimatedNode,
   borderBottomStartRadius?: number | AnimatedNode,
+  borderEndEndRadius?: number | AnimatedNode,
+  borderEndStartRadius?: number | AnimatedNode,
+  borderStartEndRadius?: number | AnimatedNode,
+  borderStartStartRadius?: number | AnimatedNode,
   borderTopEndRadius?: number | AnimatedNode,
   borderTopLeftRadius?: number | AnimatedNode,
   borderTopRightRadius?: number | AnimatedNode,

diff --git a/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp b/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp
@@ -749,6 +749,19 @@ void YogaLayoutableShadowNode::swapLeftAndRightInViewProps(
   auto &typedCasting = static_cast<ViewProps const &>(*shadowNode.props_);
   auto &props = const_cast<ViewProps &>(typedCasting);
 
+  if (props.borderRadii.bottomRight.has_value()) {
+    props.borderRadii.bottomRight = props.borderEndEndRadius;
+  }
+  if (props.borderRadii.bottomLeft.has_value()) {
+    props.borderRadii.bottomLeft = props.borderEndStartRadius;
+  }
+  if (props.borderRadii.topRight.has_value()) {
+    props.borderRadii.topRight = props.borderStartEndRadius;
+  }
+  if (props.borderRadii.topLeft.has_value()) {
+    *props.borderRadii.topLeft = props.borderStartStartRadius;
+  }
+
   // Swap border node values, borderRadii, borderColors and borderStyles.
   if (props.borderRadii.topLeft.has_value()) {
     props.borderRadii.topStart = props.borderRadii.topLeft;

diff --git a/ReactCommon/react/renderer/components/view/YogaStylableProps.cpp b/ReactCommon/react/renderer/components/view/YogaStylableProps.cpp
@@ -134,6 +134,20 @@ void YogaStylableProps::setProp(
     REBUILD_FIELD_YG_EDGES(border, "border", "Width");
 
     // Aliases
+    RAW_SET_PROP_SWITCH_CASE(
+        borderEndEndRadius, "borderEndEndRadius", CompactValue::ofUndefined());
+    RAW_SET_PROP_SWITCH_CASE(
+        borderEndStartRadius,
+        "borderEndStartRadius",
+        CompactValue::ofUndefined());
+    RAW_SET_PROP_SWITCH_CASE(
+        borderStartEndRadius,
+        "borderStartEndRadius",
+        CompactValue::ofUndefined());
+    RAW_SET_PROP_SWITCH_CASE(
+        borderStartStartRadius,
+        "borderStartStartRadius",
+        CompactValue::ofUndefined());
     RAW_SET_PROP_SWITCH_CASE(
         marginInline, "marginInline", CompactValue::ofUndefined());
     RAW_SET_PROP_SWITCH_CASE(
@@ -245,6 +259,30 @@ void YogaStylableProps::convertRawPropAliases(
     const PropsParserContext &context,
     YogaStylableProps const &sourceProps,
     RawProps const &rawProps) {
+  borderEndEndRadius = convertRawProp(
+      context,
+      rawProps,
+      "borderEndEndRadius",
+      sourceProps.borderEndEndRadius,
+      CompactValue::ofUndefined());
+  borderEndStartRadius = convertRawProp(
+      context,
+      rawProps,
+      "borderEndStartRadius",
+      sourceProps.borderEndStartRadius,
+      CompactValue::ofUndefined());
+  borderStartEndRadius = convertRawProp(
+      context,
+      rawProps,
+      "borderStartEndRadius",
+      sourceProps.borderStartEndRadius,
+      CompactValue::ofUndefined());
+  borderStartStartRadius = convertRawProp(
+      context,
+      rawProps,
+      "borderStartStartRadius",
+      sourceProps.borderStartStartRadius,
+      CompactValue::ofUndefined());
   marginInline = convertRawProp(
       context,
       rawProps,

diff --git a/ReactCommon/react/renderer/components/view/YogaStylableProps.h b/ReactCommon/react/renderer/components/view/YogaStylableProps.h
@@ -62,6 +62,11 @@ class YogaStylableProps : public Props {
   CompactValue paddingBlockStart;
   CompactValue paddingBlockEnd;
 
+  CompactValue borderEndEndRadius;
+  CompactValue borderEndStartRadius;
+  CompactValue borderStartEndRadius;
+  CompactValue borderStartStartRadius;
+
 #if RN_DEBUG_STRING_CONVERTIBLE
 
 #pragma mark - DebugStringConvertible (Partial)