CSS Grid 1/9: Grid style types and public API (facebook#55876)

Summary:
Pull Request resolved: facebook#55876

- Add foundational data types, enums, style properties, and C API for expressing CSS Grid layouts
- Includes `GridLine.h`, `GridTrack.h`, `GridTrackType.h`, `Display::Grid`, new alignment enums (`Align::Start/End`, `Justify::Auto/Stretch/Start/End`)
- C API: `YGGridTrackList.h/cpp`, `YGNodeStyle` grid setters/getters
- Layout helper updates, `Node.h` `relativePosition` made public

Split from facebook/yoga#1865. Part of the CSS Grid implementation series.

Changelog: [Internal]

X-link: facebook/yoga#1893

Reviewed By: sammy-SC

Differential Revision: D94867121

Pulled By: NickGerleman

fbshipit-source-id: adcb6d107cdd782550a614f87f84cff3ecefd806

Author: intergalacticspacehighway

packages/react-native/React/Views/RCTLayout.m

@@ -128,11 +128,12 @@ RCTDisplayType RCTReactDisplayTypeFromYogaDisplayType(YGDisplay displayType)
 {
   switch (displayType) {
     case YGDisplayFlex:
+    case YGDisplayContents:
+    case YGDisplayGrid:
       return RCTDisplayTypeFlex;
     case YGDisplayNone:
       return RCTDisplayTypeNone;
-    case YGDisplayContents:
-      RCTAssert(NO, @"YGDisplayContents cannot be converted to RCTDisplayType value.");
-      return RCTDisplayTypeNone;
+    default:
+      return RCTDisplayTypeFlex;
   }
 }

packages/react-native/ReactAndroid/src/main/java/com/facebook/yoga/YogaAlign.java

@@ -18,7 +18,9 @@ public enum YogaAlign {
   BASELINE(5),
   SPACE_BETWEEN(6),
   SPACE_AROUND(7),
-  SPACE_EVENLY(8);
+  SPACE_EVENLY(8),
+  START(9),
+  END(10);
 
   private final int mIntValue;
 
@@ -41,6 +43,8 @@ public static YogaAlign fromInt(int value) {
       case 6: return SPACE_BETWEEN;
       case 7: return SPACE_AROUND;
       case 8: return SPACE_EVENLY;
+      case 9: return START;
+      case 10: return END;
       default: throw new IllegalArgumentException("Unknown enum value: " + value);
     }
   }

packages/react-native/ReactAndroid/src/main/java/com/facebook/yoga/YogaDisplay.java

@@ -12,7 +12,8 @@
 public enum YogaDisplay {
   FLEX(0),
   NONE(1),
-  CONTENTS(2);
+  CONTENTS(2),
+  GRID(3);
 
   private final int mIntValue;
 
@@ -29,6 +30,7 @@ public static YogaDisplay fromInt(int value) {
       case 0: return FLEX;
       case 1: return NONE;
       case 2: return CONTENTS;
+      case 3: return GRID;
       default: throw new IllegalArgumentException("Unknown enum value: " + value);
     }
   }

packages/react-native/ReactAndroid/src/main/java/com/facebook/yoga/YogaGridTrackType.java

@@ -0,0 +1,39 @@
+/*
+ * 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
+
+package com.facebook.yoga;
+
+public enum YogaGridTrackType {
+  AUTO(0),
+  POINTS(1),
+  PERCENT(2),
+  FR(3),
+  MINMAX(4);
+
+  private final int mIntValue;
+
+  YogaGridTrackType(int intValue) {
+    mIntValue = intValue;
+  }
+
+  public int intValue() {
+    return mIntValue;
+  }
+
+  public static YogaGridTrackType fromInt(int value) {
+    switch (value) {
+      case 0: return AUTO;
+      case 1: return POINTS;
+      case 2: return PERCENT;
+      case 3: return FR;
+      case 4: return MINMAX;
+      default: throw new IllegalArgumentException("Unknown enum value: " + value);
+    }
+  }
+}

packages/react-native/ReactAndroid/src/main/java/com/facebook/yoga/YogaJustify.java

@@ -10,12 +10,16 @@
 package com.facebook.yoga;
 
 public enum YogaJustify {
-  FLEX_START(0),
-  CENTER(1),
-  FLEX_END(2),
-  SPACE_BETWEEN(3),
-  SPACE_AROUND(4),
-  SPACE_EVENLY(5);
+  AUTO(0),
+  FLEX_START(1),
+  CENTER(2),
+  FLEX_END(3),
+  SPACE_BETWEEN(4),
+  SPACE_AROUND(5),
+  SPACE_EVENLY(6),
+  STRETCH(7),
+  START(8),
+  END(9);
 
   private final int mIntValue;
 
@@ -29,12 +33,16 @@ public int intValue() {
 
   public static YogaJustify fromInt(int value) {
     switch (value) {
-      case 0: return FLEX_START;
-      case 1: return CENTER;
-      case 2: return FLEX_END;
-      case 3: return SPACE_BETWEEN;
-      case 4: return SPACE_AROUND;
-      case 5: return SPACE_EVENLY;
+      case 0: return AUTO;
+      case 1: return FLEX_START;
+      case 2: return CENTER;
+      case 3: return FLEX_END;
+      case 4: return SPACE_BETWEEN;
+      case 5: return SPACE_AROUND;
+      case 6: return SPACE_EVENLY;
+      case 7: return STRETCH;
+      case 8: return START;
+      case 9: return END;
       default: throw new IllegalArgumentException("Unknown enum value: " + value);
     }
   }

packages/react-native/ReactCommon/react/renderer/components/view/conversions.h

@@ -133,6 +133,8 @@ inline DisplayType displayTypeFromYGDisplay(YGDisplay display)
       return DisplayType::Contents;
     case YGDisplayFlex:
       return DisplayType::Flex;
+    case YGDisplayGrid:
+      return DisplayType::Grid;
   }
 }
 

packages/react-native/ReactCommon/react/renderer/core/LayoutMetrics.cpp

@@ -44,9 +44,11 @@ std::vector<DebugStringConvertibleObject> getDebugProps(
            ",bottom:" + getDebugDescription(object.overflowInset.bottom, {}) +
            ",left:" + getDebugDescription(object.overflowInset.left, {}) + "}"},
       {.name = "displayType",
-       .value = object.displayType == DisplayType::None
-           ? "None"
-           : (object.displayType == DisplayType::Flex ? "Flex" : "Inline")},
+       .value = object.displayType == DisplayType::None  ? "None"
+           : object.displayType == DisplayType::Flex     ? "Flex"
+           : object.displayType == DisplayType::Grid     ? "Grid"
+           : object.displayType == DisplayType::Contents ? "Contents"
+                                                         : "Unknown"},
       {.name = "layoutDirection",
        .value = object.layoutDirection == LayoutDirection::Undefined
            ? "Undefined"

packages/react-native/ReactCommon/react/renderer/core/LayoutPrimitives.h

@@ -20,6 +20,7 @@ enum class DisplayType {
   None = 0,
   Flex = 1,
   Contents = 2,
+  Grid = 3,
 };
 
 enum class PositionType {

packages/react-native/ReactCommon/react/renderer/core/conversions.h

@@ -44,6 +44,8 @@ inline int toInt(const DisplayType &displayType)
       return 1;
     case DisplayType::Contents:
       return 2;
+    case DisplayType::Grid:
+      return 3;
   }
 }
 
@@ -56,6 +58,8 @@ inline std::string toString(const DisplayType &displayType)
       return "flex";
     case DisplayType::Contents:
       return "contents";
+    case DisplayType::Grid:
+      return "grid";
   }
 }
 

packages/react-native/ReactCommon/yoga/yoga/YGEnums.cpp

@@ -29,6 +29,10 @@ const char* YGAlignToString(const YGAlign value) {
       return "space-around";
     case YGAlignSpaceEvenly:
       return "space-evenly";
+    case YGAlignStart:
+      return "start";
+    case YGAlignEnd:
+      return "end";
   }
   return "unknown";
 }
@@ -73,6 +77,8 @@ const char* YGDisplayToString(const YGDisplay value) {
       return "none";
     case YGDisplayContents:
       return "contents";
+    case YGDisplayGrid:
+      return "grid";
   }
   return "unknown";
 }
@@ -143,6 +149,22 @@ const char* YGFlexDirectionToString(const YGFlexDirection value) {
   return "unknown";
 }
 
+const char* YGGridTrackTypeToString(const YGGridTrackType value) {
+  switch (value) {
+    case YGGridTrackTypeAuto:
+      return "auto";
+    case YGGridTrackTypePoints:
+      return "points";
+    case YGGridTrackTypePercent:
+      return "percent";
+    case YGGridTrackTypeFr:
+      return "fr";
+    case YGGridTrackTypeMinmax:
+      return "minmax";
+  }
+  return "unknown";
+}
+
 const char* YGGutterToString(const YGGutter value) {
   switch (value) {
     case YGGutterColumn:
@@ -157,6 +179,8 @@ const char* YGGutterToString(const YGGutter value) {
 
 const char* YGJustifyToString(const YGJustify value) {
   switch (value) {
+    case YGJustifyAuto:
+      return "auto";
     case YGJustifyFlexStart:
       return "flex-start";
     case YGJustifyCenter:
@@ -169,6 +193,12 @@ const char* YGJustifyToString(const YGJustify value) {
       return "space-around";
     case YGJustifySpaceEvenly:
       return "space-evenly";
+    case YGJustifyStretch:
+      return "stretch";
+    case YGJustifyStart:
+      return "start";
+    case YGJustifyEnd:
+      return "end";
   }
   return "unknown";
 }