fix: remove gap if its last element in line (fix flex gap extra spacing when children determine parents main axis size) (#1188)
Summary: Fixes - https://github.com/facebook/react-native/issues/35553 ## Approach We're using `betweenMainDim` to add [gap between](bbeede82d3/yoga/Yoga.cpp (L2495)
) items in main axis. This is resulting in increased [main axis](bbeede82d3/yoga/Yoga.cpp (L2598)
) dimension of the container as it gets added even for the last element. One solution is to keep using it and subtract the gap when last element is reached. ## Aside Mutating this value feels weird, but I think `betweenMainDim` gets initialized for every line so should be fine? I did some manual tests to verify. I tried running tests but I'll have to downgrade the java version. Let me know if anything fails. Thanks! 🙏 Pull Request resolved: https://github.com/facebook/yoga/pull/1188 Test Plan: Added fixtures which previously failed but now pass. Reviewed By: necolas Differential Revision: D42078162 Pulled By: NickGerleman fbshipit-source-id: 0e535618350422e001141a8786a83fc81651afe9
This commit is contained in:
committed by
Facebook GitHub Bot
parent
35f3335efc
commit
ba27f9d1ec
@@ -1589,6 +1589,73 @@ public class YGGapTest {
|
||||
assertEquals(150f, root_child4.getLayoutHeight(), 0.0f);
|
||||
}
|
||||
|
||||
@Test
|
||||
public void test_column_gap_determines_parent_width() {
|
||||
YogaConfig config = YogaConfigFactory.create();
|
||||
|
||||
final YogaNode root = createNode(config);
|
||||
root.setFlexDirection(YogaFlexDirection.ROW);
|
||||
root.setHeight(100f);
|
||||
root.setGap(YogaGutter.COLUMN, 10f);
|
||||
|
||||
final YogaNode root_child0 = createNode(config);
|
||||
root_child0.setWidth(10f);
|
||||
root.addChildAt(root_child0, 0);
|
||||
|
||||
final YogaNode root_child1 = createNode(config);
|
||||
root_child1.setWidth(20f);
|
||||
root.addChildAt(root_child1, 1);
|
||||
|
||||
final YogaNode root_child2 = createNode(config);
|
||||
root_child2.setWidth(30f);
|
||||
root.addChildAt(root_child2, 2);
|
||||
root.setDirection(YogaDirection.LTR);
|
||||
root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
|
||||
|
||||
assertEquals(0f, root.getLayoutX(), 0.0f);
|
||||
assertEquals(0f, root.getLayoutY(), 0.0f);
|
||||
assertEquals(80f, root.getLayoutWidth(), 0.0f);
|
||||
assertEquals(100f, root.getLayoutHeight(), 0.0f);
|
||||
|
||||
assertEquals(0f, root_child0.getLayoutX(), 0.0f);
|
||||
assertEquals(0f, root_child0.getLayoutY(), 0.0f);
|
||||
assertEquals(10f, root_child0.getLayoutWidth(), 0.0f);
|
||||
assertEquals(100f, root_child0.getLayoutHeight(), 0.0f);
|
||||
|
||||
assertEquals(20f, root_child1.getLayoutX(), 0.0f);
|
||||
assertEquals(0f, root_child1.getLayoutY(), 0.0f);
|
||||
assertEquals(20f, root_child1.getLayoutWidth(), 0.0f);
|
||||
assertEquals(100f, root_child1.getLayoutHeight(), 0.0f);
|
||||
|
||||
assertEquals(50f, root_child2.getLayoutX(), 0.0f);
|
||||
assertEquals(0f, root_child2.getLayoutY(), 0.0f);
|
||||
assertEquals(30f, root_child2.getLayoutWidth(), 0.0f);
|
||||
assertEquals(100f, root_child2.getLayoutHeight(), 0.0f);
|
||||
|
||||
root.setDirection(YogaDirection.RTL);
|
||||
root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
|
||||
|
||||
assertEquals(0f, root.getLayoutX(), 0.0f);
|
||||
assertEquals(0f, root.getLayoutY(), 0.0f);
|
||||
assertEquals(80f, root.getLayoutWidth(), 0.0f);
|
||||
assertEquals(100f, root.getLayoutHeight(), 0.0f);
|
||||
|
||||
assertEquals(70f, root_child0.getLayoutX(), 0.0f);
|
||||
assertEquals(0f, root_child0.getLayoutY(), 0.0f);
|
||||
assertEquals(10f, root_child0.getLayoutWidth(), 0.0f);
|
||||
assertEquals(100f, root_child0.getLayoutHeight(), 0.0f);
|
||||
|
||||
assertEquals(40f, root_child1.getLayoutX(), 0.0f);
|
||||
assertEquals(0f, root_child1.getLayoutY(), 0.0f);
|
||||
assertEquals(20f, root_child1.getLayoutWidth(), 0.0f);
|
||||
assertEquals(100f, root_child1.getLayoutHeight(), 0.0f);
|
||||
|
||||
assertEquals(0f, root_child2.getLayoutX(), 0.0f);
|
||||
assertEquals(0f, root_child2.getLayoutY(), 0.0f);
|
||||
assertEquals(30f, root_child2.getLayoutWidth(), 0.0f);
|
||||
assertEquals(100f, root_child2.getLayoutHeight(), 0.0f);
|
||||
}
|
||||
|
||||
@Test
|
||||
public void test_row_gap_align_items_stretch() {
|
||||
YogaConfig config = YogaConfigFactory.create();
|
||||
@@ -1969,6 +2036,72 @@ public class YGGapTest {
|
||||
assertEquals(0f, root_child2.getLayoutHeight(), 0.0f);
|
||||
}
|
||||
|
||||
@Test
|
||||
public void test_row_gap_determines_parent_height() {
|
||||
YogaConfig config = YogaConfigFactory.create();
|
||||
|
||||
final YogaNode root = createNode(config);
|
||||
root.setWidth(100f);
|
||||
root.setGap(YogaGutter.ROW, 10f);
|
||||
|
||||
final YogaNode root_child0 = createNode(config);
|
||||
root_child0.setHeight(10f);
|
||||
root.addChildAt(root_child0, 0);
|
||||
|
||||
final YogaNode root_child1 = createNode(config);
|
||||
root_child1.setHeight(20f);
|
||||
root.addChildAt(root_child1, 1);
|
||||
|
||||
final YogaNode root_child2 = createNode(config);
|
||||
root_child2.setHeight(30f);
|
||||
root.addChildAt(root_child2, 2);
|
||||
root.setDirection(YogaDirection.LTR);
|
||||
root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
|
||||
|
||||
assertEquals(0f, root.getLayoutX(), 0.0f);
|
||||
assertEquals(0f, root.getLayoutY(), 0.0f);
|
||||
assertEquals(100f, root.getLayoutWidth(), 0.0f);
|
||||
assertEquals(80f, root.getLayoutHeight(), 0.0f);
|
||||
|
||||
assertEquals(0f, root_child0.getLayoutX(), 0.0f);
|
||||
assertEquals(0f, root_child0.getLayoutY(), 0.0f);
|
||||
assertEquals(100f, root_child0.getLayoutWidth(), 0.0f);
|
||||
assertEquals(10f, root_child0.getLayoutHeight(), 0.0f);
|
||||
|
||||
assertEquals(0f, root_child1.getLayoutX(), 0.0f);
|
||||
assertEquals(20f, root_child1.getLayoutY(), 0.0f);
|
||||
assertEquals(100f, root_child1.getLayoutWidth(), 0.0f);
|
||||
assertEquals(20f, root_child1.getLayoutHeight(), 0.0f);
|
||||
|
||||
assertEquals(0f, root_child2.getLayoutX(), 0.0f);
|
||||
assertEquals(50f, root_child2.getLayoutY(), 0.0f);
|
||||
assertEquals(100f, root_child2.getLayoutWidth(), 0.0f);
|
||||
assertEquals(30f, root_child2.getLayoutHeight(), 0.0f);
|
||||
|
||||
root.setDirection(YogaDirection.RTL);
|
||||
root.calculateLayout(YogaConstants.UNDEFINED, YogaConstants.UNDEFINED);
|
||||
|
||||
assertEquals(0f, root.getLayoutX(), 0.0f);
|
||||
assertEquals(0f, root.getLayoutY(), 0.0f);
|
||||
assertEquals(100f, root.getLayoutWidth(), 0.0f);
|
||||
assertEquals(80f, root.getLayoutHeight(), 0.0f);
|
||||
|
||||
assertEquals(0f, root_child0.getLayoutX(), 0.0f);
|
||||
assertEquals(0f, root_child0.getLayoutY(), 0.0f);
|
||||
assertEquals(100f, root_child0.getLayoutWidth(), 0.0f);
|
||||
assertEquals(10f, root_child0.getLayoutHeight(), 0.0f);
|
||||
|
||||
assertEquals(0f, root_child1.getLayoutX(), 0.0f);
|
||||
assertEquals(20f, root_child1.getLayoutY(), 0.0f);
|
||||
assertEquals(100f, root_child1.getLayoutWidth(), 0.0f);
|
||||
assertEquals(20f, root_child1.getLayoutHeight(), 0.0f);
|
||||
|
||||
assertEquals(0f, root_child2.getLayoutX(), 0.0f);
|
||||
assertEquals(50f, root_child2.getLayoutY(), 0.0f);
|
||||
assertEquals(100f, root_child2.getLayoutWidth(), 0.0f);
|
||||
assertEquals(30f, root_child2.getLayoutHeight(), 0.0f);
|
||||
}
|
||||
|
||||
private YogaNode createNode(YogaConfig config) {
|
||||
return mNodeFactory.create(config);
|
||||
}
|
||||
|
Reference in New Issue
Block a user