Update css-layout from github

Summary:Update to latest master version of css-layout. Update integration in RCTShadow(Root)View to match.

This solves the issue with items not strechting vertically in column layouts (https://github.com/facebook/css-layout/issues/127)

Reviewed By: vjeux

Differential Revision: D3120699

fb-gh-sync-id: beba162e1255d3527e1160e9bd414a712cb10713
fbshipit-source-id: beba162e1255d3527e1160e9bd414a712cb10713

React/Layout/Layout.c

@@ -451,11 +451,16 @@ static float getDimWithMargin(css_node_t *node, css_flex_direction_t axis) {
     getTrailingMargin(node, axis);
 }
 
-static bool isDimDefined(css_node_t *node, css_flex_direction_t axis) {
+static bool isStyleDimDefined(css_node_t *node, css_flex_direction_t axis) {
   float value = node->style.dimensions[dim[axis]];
   return !isUndefined(value) && value >= 0.0;
 }
 
+static bool isLayoutDimDefined(css_node_t *node, css_flex_direction_t axis) {
+  float value = node->layout.dimensions[dim[axis]];
+  return !isUndefined(value) && value >= 0.0;
+}
+
 static bool isPosDefined(css_node_t *node, css_position_t position) {
   return !isUndefined(node->style.position[position]);
 }
@@ -499,11 +504,11 @@ static float boundAxis(css_node_t *node, css_flex_direction_t axis, float value)
 // When the user specifically sets a value for width or height
 static void setDimensionFromStyle(css_node_t *node, css_flex_direction_t axis) {
   // The parent already computed us a width or height. We just skip it
-  if (!isUndefined(node->layout.dimensions[dim[axis]])) {
+  if (isLayoutDimDefined(node, axis)) {
     return;
   }
   // We only run if there's a width or height defined
-  if (!isDimDefined(node, axis)) {
+  if (!isStyleDimDefined(node, axis)) {
     return;
   }
 
@@ -561,10 +566,10 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM
   float paddingAndBorderAxisColumn = getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_COLUMN);
 
   if (isMeasureDefined(node)) {
-    bool isResolvedRowDimDefined = !isUndefined(node->layout.dimensions[dim[resolvedRowAxis]]);
+    bool isResolvedRowDimDefined = isLayoutDimDefined(node, resolvedRowAxis);
 
     float width = CSS_UNDEFINED;
-    if (isDimDefined(node, resolvedRowAxis)) {
+    if (isStyleDimDefined(node, resolvedRowAxis)) {
       width = node->style.dimensions[CSS_WIDTH];
     } else if (isResolvedRowDimDefined) {
       width = node->layout.dimensions[dim[resolvedRowAxis]];
@@ -575,9 +580,9 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM
     width -= paddingAndBorderAxisResolvedRow;
 
     float height = CSS_UNDEFINED;
-    if (isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) {
+    if (isStyleDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) {
       height = node->style.dimensions[CSS_HEIGHT];
-    } else if (!isUndefined(node->layout.dimensions[dim[CSS_FLEX_DIRECTION_COLUMN]])) {
+    } else if (isLayoutDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) {
       height = node->layout.dimensions[dim[CSS_FLEX_DIRECTION_COLUMN]];
     } else {
       height = parentMaxHeight -
@@ -588,8 +593,8 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM
     // We only need to give a dimension for the text if we haven't got any
     // for it computed yet. It can either be from the style attribute or because
     // the element is flexible.
-    bool isRowUndefined = !isDimDefined(node, resolvedRowAxis) && !isResolvedRowDimDefined;
-    bool isColumnUndefined = !isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN) &&
+    bool isRowUndefined = !isStyleDimDefined(node, resolvedRowAxis) && !isResolvedRowDimDefined;
+    bool isColumnUndefined = !isStyleDimDefined(node, CSS_FLEX_DIRECTION_COLUMN) &&
       isUndefined(node->layout.dimensions[dim[CSS_FLEX_DIRECTION_COLUMN]]);
 
     // Let's not measure the text if we already know both dimensions
@@ -623,8 +628,8 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM
   float paddingAndBorderAxisMain = getPaddingAndBorderAxis(node, mainAxis);
   float paddingAndBorderAxisCross = getPaddingAndBorderAxis(node, crossAxis);
 
-  bool isMainDimDefined = !isUndefined(node->layout.dimensions[dim[mainAxis]]);
-  bool isCrossDimDefined = !isUndefined(node->layout.dimensions[dim[crossAxis]]);
+  bool isMainDimDefined = isLayoutDimDefined(node, mainAxis);
+  bool isCrossDimDefined = isLayoutDimDefined(node, crossAxis);
   bool isMainRowDirection = isRowDirection(mainAxis);
 
   int i;
@@ -686,8 +691,8 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM
     float mainDim = leadingPaddingAndBorderMain;
     float crossDim = 0;
 
-    float maxWidth;
-    float maxHeight;
+    float maxWidth = CSS_UNDEFINED;
+    float maxHeight = CSS_UNDEFINED;
     for (i = startLine; i < childCount; ++i) {
       child = node->get_child(node->context, i);
       child->line_index = linesCount;
@@ -702,7 +707,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM
       if (alignItem == CSS_ALIGN_STRETCH &&
           child->style.position_type == CSS_POSITION_RELATIVE &&
           isCrossDimDefined &&
-          !isDimDefined(child, crossAxis)) {
+          !isStyleDimDefined(child, crossAxis)) {
         child->layout.dimensions[dim[crossAxis]] = fmaxf(
           boundAxis(child, crossAxis, node->layout.dimensions[dim[crossAxis]] -
             paddingAndBorderAxisCross - getMarginAxis(child, crossAxis)),
@@ -724,8 +729,8 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM
         // left and right or top and bottom).
         for (ii = 0; ii < 2; ii++) {
           axis = (ii != 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
-          if (!isUndefined(node->layout.dimensions[dim[axis]]) &&
-              !isDimDefined(child, axis) &&
+          if (isLayoutDimDefined(node, axis) &&
+              !isStyleDimDefined(child, axis) &&
               isPosDefined(child, leading[axis]) &&
               isPosDefined(child, trailing[axis])) {
             child->layout.dimensions[dim[axis]] = fmaxf(
@@ -771,7 +776,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM
         maxHeight = CSS_UNDEFINED;
 
         if (!isMainRowDirection) {
-          if (isDimDefined(node, resolvedRowAxis)) {
+          if (isLayoutDimDefined(node, resolvedRowAxis)) {
             maxWidth = node->layout.dimensions[dim[resolvedRowAxis]] -
               paddingAndBorderAxisResolvedRow;
           } else {
@@ -780,7 +785,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM
               paddingAndBorderAxisResolvedRow;
           }
         } else {
-          if (isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) {
+          if (isLayoutDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) {
             maxHeight = node->layout.dimensions[dim[CSS_FLEX_DIRECTION_COLUMN]] -
                 paddingAndBorderAxisColumn;
           } else {
@@ -831,7 +836,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM
       if (isSimpleStackCross &&
           (child->style.position_type != CSS_POSITION_RELATIVE ||
               (alignItem != CSS_ALIGN_STRETCH && alignItem != CSS_ALIGN_FLEX_START) ||
-              isUndefined(child->layout.dimensions[dim[crossAxis]]))) {
+              (alignItem == CSS_ALIGN_STRETCH && !isCrossDimDefined))) {
         isSimpleStackCross = false;
         firstComplexCross = i;
       }
@@ -914,7 +919,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM
         );
 
         maxWidth = CSS_UNDEFINED;
-        if (isDimDefined(node, resolvedRowAxis)) {
+        if (isLayoutDimDefined(node, resolvedRowAxis)) {
           maxWidth = node->layout.dimensions[dim[resolvedRowAxis]] -
             paddingAndBorderAxisResolvedRow;
         } else if (!isMainRowDirection) {
@@ -923,7 +928,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM
             paddingAndBorderAxisResolvedRow;
         }
         maxHeight = CSS_UNDEFINED;
-        if (isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) {
+        if (isLayoutDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) {
           maxHeight = node->layout.dimensions[dim[CSS_FLEX_DIRECTION_COLUMN]] -
             paddingAndBorderAxisColumn;
         } else if (isMainRowDirection) {
@@ -1041,15 +1046,31 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM
           css_align_t alignItem = getAlignItem(node, child);
           /*eslint-enable */
           if (alignItem == CSS_ALIGN_STRETCH) {
-            // You can only stretch if the dimension has not already been set
+            // You can only stretch if the dimension has not already been defined
             // previously.
-            if (isUndefined(child->layout.dimensions[dim[crossAxis]])) {
+            if (!isStyleDimDefined(child, crossAxis)) {
+              float dimCrossAxis = child->layout.dimensions[dim[crossAxis]];
               child->layout.dimensions[dim[crossAxis]] = fmaxf(
                 boundAxis(child, crossAxis, containerCrossAxis -
                   paddingAndBorderAxisCross - getMarginAxis(child, crossAxis)),
                 // You never want to go smaller than padding
                 getPaddingAndBorderAxis(child, crossAxis)
               );
+
+              // If the size has changed, and this child has children we need to re-layout this child
+              if (dimCrossAxis != child->layout.dimensions[dim[crossAxis]] && child->children_count > 0) {
+                // Reset child margins before re-layout as they are added back in layoutNode and would be doubled
+                child->layout.position[leading[mainAxis]] -= getLeadingMargin(child, mainAxis) +
+                  getRelativePosition(child, mainAxis);
+                child->layout.position[trailing[mainAxis]] -= getTrailingMargin(child, mainAxis) +
+                  getRelativePosition(child, mainAxis);
+                child->layout.position[leading[crossAxis]] -= getLeadingMargin(child, crossAxis) +
+                  getRelativePosition(child, crossAxis);
+                child->layout.position[trailing[crossAxis]] -= getTrailingMargin(child, crossAxis) +
+                  getRelativePosition(child, crossAxis);
+
+                layoutNode(child, maxWidth, maxHeight, direction);
+              }
             }
           } else if (alignItem != CSS_ALIGN_FLEX_START) {
             // The remaining space between the parent dimensions+padding and child
@@ -1127,7 +1148,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM
         if (child->line_index != i) {
           break;
         }
-        if (!isUndefined(child->layout.dimensions[dim[crossAxis]])) {
+        if (isLayoutDimDefined(child, crossAxis)) {
           lineHeight = fmaxf(
             lineHeight,
             child->layout.dimensions[dim[crossAxis]] + getMarginAxis(child, crossAxis)
@@ -1220,8 +1241,8 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM
     for (ii = 0; ii < 2; ii++) {
       axis = (ii != 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
 
-      if (!isUndefined(node->layout.dimensions[dim[axis]]) &&
-          !isDimDefined(currentAbsoluteChild, axis) &&
+      if (isLayoutDimDefined(node, axis) &&
+          !isStyleDimDefined(currentAbsoluteChild, axis) &&
           isPosDefined(currentAbsoluteChild, leading[axis]) &&
           isPosDefined(currentAbsoluteChild, trailing[axis])) {
         currentAbsoluteChild->layout.dimensions[dim[axis]] = fmaxf(
@@ -1261,8 +1282,8 @@ void layoutNode(css_node_t *node, float parentMaxWidth, float parentMaxHeight, c
     !node->is_dirty(node->context) &&
     eq(layout->last_requested_dimensions[CSS_WIDTH], layout->dimensions[CSS_WIDTH]) &&
     eq(layout->last_requested_dimensions[CSS_HEIGHT], layout->dimensions[CSS_HEIGHT]) &&
-    eq(layout->last_parent_max_width, parentMaxWidth);
-    eq(layout->last_parent_max_height, parentMaxHeight);
+    eq(layout->last_parent_max_width, parentMaxWidth) &&
+    eq(layout->last_parent_max_height, parentMaxHeight) &&
     eq(layout->last_direction, direction);
 
   if (skipLayout) {
@@ -1277,6 +1298,10 @@ void layoutNode(css_node_t *node, float parentMaxWidth, float parentMaxHeight, c
     layout->last_parent_max_height = parentMaxHeight;
     layout->last_direction = direction;
 
+    for (int i = 0, childCount = node->children_count; i < childCount; i++) {
+      resetNodeLayout(node->get_child(node->context, i));
+    }
+
     layoutNodeImpl(node, parentMaxWidth, parentMaxHeight, parentDirection);
 
     layout->last_dimensions[CSS_WIDTH] = layout->dimensions[CSS_WIDTH];
@@ -1285,3 +1310,10 @@ void layoutNode(css_node_t *node, float parentMaxWidth, float parentMaxHeight, c
     layout->last_position[CSS_LEFT] = layout->position[CSS_LEFT];
   }
 }
+
+void resetNodeLayout(css_node_t *node) {
+  node->layout.dimensions[CSS_WIDTH] = CSS_UNDEFINED;
+  node->layout.dimensions[CSS_HEIGHT] = CSS_UNDEFINED;
+  node->layout.position[CSS_LEFT] = 0;
+  node->layout.position[CSS_TOP] = 0;
+}

React/Layout/Layout.h

@@ -9,7 +9,7 @@
  * !! 3) Copy the file from github to here                       !!
  * !!    (don't forget to keep this header)                      !!
  * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
- * @generated 
+ * @generated
  *
  * Copyright (c) 2014, Facebook, Inc.
  * All rights reserved.
@@ -149,8 +149,8 @@ struct css_node {
   int children_count;
   int line_index;
 
-  css_node_t* next_absolute_child;
-  css_node_t* next_flex_child;
+  css_node_t *next_absolute_child;
+  css_node_t *next_flex_child;
 
   css_dim_t (*measure)(void *context, float width, float height);
   void (*print)(void *context);
@@ -159,7 +159,6 @@ struct css_node {
   void *context;
 };
 
-
 // Lifecycle of nodes and children
 css_node_t *new_css_node(void);
 void init_css_node(css_node_t *node);
@@ -173,8 +172,12 @@ typedef enum {
 } css_print_options_t;
 void print_css_node(css_node_t *node, css_print_options_t options);
 
-// Function that computes the layout!
-void layoutNode(css_node_t *node, float maxWidth, float maxHeight, css_direction_t parentDirection);
 bool isUndefined(float value);
 
+// Function that computes the layout!
+void layoutNode(css_node_t *node, float maxWidth, float maxHeight, css_direction_t parentDirection);
+
+// Reset the calculated layout values for a given node. You should call this before `layoutNode`.
+void resetNodeLayout(css_node_t *node);
+
 #endif

React/Views/RCTRootShadowView.m

@@ -34,6 +34,7 @@
   [self applySizeConstraints];
 
   [self fillCSSNode:self.cssNode];
+  resetNodeLayout(self.cssNode);
   layoutNode(self.cssNode, CSS_UNDEFINED, CSS_UNDEFINED, CSS_DIRECTION_INHERIT);
 
   NSMutableSet<RCTShadowView *> *viewsWithNewFrame = [NSMutableSet set];

React/Views/RCTShadowView.m

@@ -157,11 +157,6 @@ static void RCTProcessMetaProps(const float metaProps[META_PROP_COUNT], float st
   absolutePosition.x += node->layout.position[CSS_LEFT];
   absolutePosition.y += node->layout.position[CSS_TOP];
 
-  node->layout.dimensions[CSS_WIDTH] = CSS_UNDEFINED;
-  node->layout.dimensions[CSS_HEIGHT] = CSS_UNDEFINED;
-  node->layout.position[CSS_LEFT] = 0;
-  node->layout.position[CSS_TOP] = 0;
-
   for (int i = 0; i < node->children_count; ++i) {
     RCTShadowView *child = (RCTShadowView *)_reactSubviews[i];
     [child applyLayoutNode:node->get_child(node->context, i)

ReactAndroid/src/main/java/com/facebook/csslayout/LayoutEngine.java

@@ -7,7 +7,7 @@
  */
 
 // NOTE: this file is auto-copied from https://github.com/facebook/css-layout
-// @generated SignedSource<<dcc87213906997ff353adb1148c8e77c>>
+// @generated SignedSource<<1d6f1ec2d1fbd24c5176f48d5005c0d5>>
 
 package com.facebook.csslayout;
 
@@ -207,6 +207,10 @@ public class LayoutEngine {
       node.lastLayout.parentMaxWidth = parentMaxWidth;
       node.lastLayout.parentMaxHeight = parentMaxHeight;
 
+      for (int i = 0, childCount = node.getChildCount(); i < childCount; i++) {
+        node.getChildAt(i).layout.resetResult();
+      }
+
       layoutNodeImpl(layoutContext, node, parentMaxWidth, parentMaxHeight, parentDirection);
       node.lastLayout.copy(node.layout);
     } else {
@@ -222,10 +226,6 @@ public class LayoutEngine {
       float parentMaxWidth,
       float parentMaxHeight,
       CSSDirection parentDirection) {
-    for (int i = 0, childCount = node.getChildCount(); i < childCount; i++) {
-      node.getChildAt(i).layout.resetResult();
-    }
-
     /** START_GENERATED **/
   
     CSSDirection direction = resolveDirection(node, parentDirection);

ReactAndroid/src/main/java/com/facebook/csslayout/README

@@ -1,7 +1,7 @@
 The source of truth for css-layout is: https://github.com/facebook/css-layout
 
 The code here should be kept in sync with GitHub.
-HEAD at the time this code was synced: https://github.com/facebook/css-layout/commit/3f0f4be2e868a9af4f3ed1e019f71efbc814e8a2
+HEAD at the time this code was synced: https://github.com/facebook/css-layout/commit/68e0b0cc58dcdf023651905d39c0e8147141b123
 
 There is generated code in:
  - README (this file)

ReactAndroid/src/main/java/com/facebook/csslayout/README.facebook

@@ -1,7 +1,7 @@
 The source of truth for css-layout is: https://github.com/facebook/css-layout
 
 The code here should be kept in sync with GitHub.
-HEAD at the time this code was synced: https://github.com/facebook/css-layout/commit/3f0f4be2e868a9af4f3ed1e019f71efbc814e8a2
+HEAD at the time this code was synced: https://github.com/facebook/css-layout/commit/68e0b0cc58dcdf023651905d39c0e8147141b123
 
 There is generated code in:
  - README.facebook (this file)

ReactAndroid/src/main/java/com/facebook/csslayout/syncFromGithub.sh

@@ -46,7 +46,7 @@ popd
 
 SRC=$GITHUB/src/java/src/com/facebook/csslayout
 TESTS=$GITHUB/src/java/tests/com/facebook/csslayout
-FBA_SRC=.
+FBA_SRC=$ROOT/java/com/facebook/catalyst/js/react-native-github/ReactAndroid/src/main/java/com/facebook/csslayout/
 FBA_TESTS=$ROOT/javatests/com/facebook/csslayout
 
 echo "Copying src files over..."
@@ -94,5 +94,6 @@ There is generated code in:
 The code was generated by running 'make' in the css-layout folder and copied to React Native.
 " > $FBA_SRC/README
 
-echo "Done."
+echo "fbandroid was updated. Please also update the fbobjc version under" \
+  "fbobjc/Libraries/FBReactKit/js/react-native-github/React/Layout/Layout.c."
 echo "Please run buck test //javatests/com/facebook/csslayout"