Merge pull request #10 from mateoguzmana/feat/border-style-none-suppo…

…rt-fixes feat(styles): setting border style in yoga and applying logic to for `none`
mateoguzmana · Oct 28, 2024 · ab51de2 · ab51de2
2 parents d5e1ffc + f170634
commit ab51de2
Show file tree

Hide file tree

Showing 9 changed files with 126 additions and 4 deletions.
diff --git a/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm b/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm
@@ -731,6 +731,8 @@ static CALayerCornerCurve CornerCurveFromBorderCurve(BorderCurve borderCurve)
 static RCTBorderStyle RCTBorderStyleFromBorderStyle(BorderStyle borderStyle)
 {
   switch (borderStyle) {
+    case BorderStyle::None:
+      return RCTBorderStyleUnset;
     case BorderStyle::Solid:
       return RCTBorderStyleSolid;
     case BorderStyle::Dotted:

diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.cpp b/packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.cpp
@@ -540,6 +540,13 @@ YogaStylableProps::YogaStylableProps(
       sourceProps.yogaStyle.boxSizing(),
       yogaStyle.boxSizing()));
 
+  yogaStyle.setBorderStyle(convertRawProp(
+      context,
+      rawProps,
+      "borderStyle",
+      sourceProps.yogaStyle.borderStyle(),
+      yogaStyle.borderStyle()));
+
   convertRawPropAliases(context, sourceProps, rawProps);
 };
 

diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/conversions.h b/packages/react-native/ReactCommon/react/renderer/components/view/conversions.h
@@ -446,6 +446,35 @@ inline void fromRawValue(
   LOG(ERROR) << "Could not parse yoga::Display: " << stringValue;
 }
 
+inline void fromRawValue(
+    const PropsParserContext& context,
+    const RawValue& value,
+    yoga::BorderStyle& result) {
+  result = yoga::BorderStyle::Solid;
+  react_native_expect(value.hasType<std::string>());
+  if (!value.hasType<std::string>()) {
+    return;
+  }
+  auto stringValue = (std::string)value;
+  if (stringValue == "none") {
+    result = yoga::BorderStyle::None;
+    return;
+  }
+  if (stringValue == "solid") {
+    result = yoga::BorderStyle::Solid;
+    return;
+  }
+  if (stringValue == "dotted") {
+    result = yoga::BorderStyle::Dotted;
+    return;
+  }
+  if (stringValue == "dashed") {
+    result = yoga::BorderStyle::Dashed;
+    return;
+  }
+  LOG(ERROR) << "Could not parse yoga::BorderStyle: " << stringValue;
+}
+
 inline void fromRawValue(
     const PropsParserContext& context,
     const RawValue& value,
@@ -775,6 +804,10 @@ inline void fromRawValue(
     return;
   }
   auto stringValue = (std::string)value;
+  if (stringValue == "none") {
+    result = BorderStyle::None;
+    return;
+  }
   if (stringValue == "solid") {
     result = BorderStyle::Solid;
     return;
@@ -1369,6 +1402,10 @@ inline std::string toString(const yoga::Display& value) {
   return YGDisplayToString(yoga::unscopedEnum(value));
 }
 
+inline std::string toString(const yoga::BorderStyle& value) {
+  return YGBorderStyleToString(yoga::unscopedEnum(value));
+}
+
 inline std::string toString(const yoga::Style::Length& length) {
   switch (length.unit()) {
     case yoga::Unit::Undefined:

diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/primitives.h b/packages/react-native/ReactCommon/react/renderer/components/view/primitives.h
@@ -90,7 +90,7 @@ enum class BackfaceVisibility : uint8_t { Auto, Visible, Hidden };
 
 enum class BorderCurve : uint8_t { Circular, Continuous };
 
-enum class BorderStyle : uint8_t { Solid, Dotted, Dashed };
+enum class BorderStyle : uint8_t { None, Solid, Dotted, Dashed };
 
 enum class OutlineStyle : uint8_t { Solid, Dotted, Dashed };
 

diff --git a/packages/react-native/ReactCommon/yoga/yoga/YGEnums.cpp b/packages/react-native/ReactCommon/yoga/yoga/YGEnums.cpp
@@ -260,3 +260,17 @@ const char* YGWrapToString(const YGWrap value) {
   }
   return "unknown";
 }
+
+const char* YGBorderStyleToString(const YGBorderStyle value) {
+  switch (value) {
+    case YGBorderStyleNone:
+      return "none";
+    case YGBorderStyleSolid:
+      return "solid";
+    case YGBorderStyleDotted:
+      return "dotted";
+    case YGBorderStyleDashed:
+      return "dashed";
+  }
+  return "unknown";
+}
diff --git a/packages/react-native/ReactCommon/yoga/yoga/YGEnums.h b/packages/react-native/ReactCommon/yoga/yoga/YGEnums.h
@@ -139,4 +139,11 @@ YG_ENUM_DECL(
     YGWrapWrap,
     YGWrapWrapReverse)
 
+YG_ENUM_DECL(
+    YGBorderStyle,
+    YGBorderStyleNone,
+    YGBorderStyleSolid,
+    YGBorderStyleDotted,
+    YGBorderStyleDashed)
+
 YG_EXTERN_C_END
diff --git a/packages/react-native/ReactCommon/yoga/yoga/enums/BorderStyle.h b/packages/react-native/ReactCommon/yoga/yoga/enums/BorderStyle.h
@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// @generated by enums.py
+// clang-format off
+#pragma once
+
+#include <cstdint>
+#include <yoga/YGEnums.h>
+#include <yoga/enums/YogaEnums.h>
+
+namespace facebook::yoga {
+
+enum class BorderStyle : uint8_t {
+  None = YGBorderStyleNone,
+  Solid = YGBorderStyleSolid,
+  Dotted = YGBorderStyleDotted,
+  Dashed = YGBorderStyleDashed,
+};
+
+template <>
+constexpr int32_t ordinalCount<BorderStyle>() {
+  return 4;
+}
+
+constexpr BorderStyle scopedEnum(YGBorderStyle unscoped) {
+  return static_cast<BorderStyle>(unscoped);
+}
+
+constexpr YGBorderStyle unscopedEnum(BorderStyle scoped) {
+  return static_cast<YGBorderStyle>(scoped);
+}
+
+inline const char* toString(BorderStyle e) {
+  return YGBorderStyleToString(unscopedEnum(e));
+}
+
+} // namespace facebook::yoga
diff --git a/packages/react-native/ReactCommon/yoga/yoga/style/Style.h b/packages/react-native/ReactCommon/yoga/yoga/style/Style.h
@@ -15,6 +15,7 @@
 
 #include <yoga/algorithm/FlexDirection.h>
 #include <yoga/enums/Align.h>
+#include <yoga/enums/BorderStyle.h>
 #include <yoga/enums/BoxSizing.h>
 #include <yoga/enums/Dimension.h>
 #include <yoga/enums/Direction.h>
@@ -250,6 +251,13 @@ class YG_EXPORT Style {
     boxSizing_ = value;
   }
 
+  BorderStyle borderStyle() const {
+    return borderStyle_;
+  }
+  void setBorderStyle(BorderStyle value) {
+    borderStyle_ = value;
+  }
+
   bool horizontalInsetsDefined() const {
     return position_[yoga::to_underlying(Edge::Left)].isDefined() ||
         position_[yoga::to_underlying(Edge::Right)].isDefined() ||
@@ -707,6 +715,10 @@ class YG_EXPORT Style {
   }
 
   Style::Length computeBorder(PhysicalEdge edge, Direction direction) const {
+    if (borderStyle_ == BorderStyle::None) {
+      return Style::Length{};
+    }
+
     switch (edge) {
       case PhysicalEdge::Left:
         return computeLeftEdge(border_, direction);
@@ -734,6 +746,7 @@ class YG_EXPORT Style {
   Overflow overflow_ : bitCount<Overflow>() = Overflow::Visible;
   Display display_ : bitCount<Display>() = Display::Flex;
   BoxSizing boxSizing_ : bitCount<BoxSizing>() = BoxSizing::BorderBox;
+  BorderStyle borderStyle_ : bitCount<BorderStyle>() = BorderStyle::Solid;
 
   StyleValueHandle flex_{};
   StyleValueHandle flexGrow_{};

diff --git a/packages/rn-tester/js/examples/View/ViewExample.js b/packages/rn-tester/js/examples/View/ViewExample.js
@@ -31,7 +31,7 @@ class ViewBorderStyleExample extends React.Component<
           <View
             style={[
               {
-                borderWidth: 1,
+                borderWidth: 10,
                 padding: 5,
               },
               this.state.showBorder
@@ -48,7 +48,7 @@ class ViewBorderStyleExample extends React.Component<
             style={[
               {
                 marginTop: 5,
-                borderWidth: 1,
+                borderWidth: 10,
                 borderRadius: 5,
                 padding: 5,
               },
@@ -68,7 +68,7 @@ class ViewBorderStyleExample extends React.Component<
               style={[
                 {
                   marginTop: 5,
-                  borderWidth: 1,
+                  borderWidth: 10,
                   borderRadius: 5,
                   padding: 5,
                 },