Feature auto margin

Summary: Even so I know there are some opinions against ```margin: 0 auto``` it's still part of the spec: https://www.w3.org/TR/css-flexbox-1/#auto-margins and pretty usefull if you have to position via ```justify-content```. This PR adds an implementation for that. It adds an additonal ```YGUnitAuto``` and margins got ```YGNodeStyleSetMarginAuto``` functions as well. Closes https://github.com/facebook/yoga/pull/357 Reviewed By: astreet Differential Revision: D4501142 Pulled By: emilsjolander fbshipit-source-id: 86519f8632496f46e78a7c9dbc5b21e212e3e0c7
2017-02-14 14:26:09 -08:00
parent 8a91c0a0e5
commit 1146013e9e
29 changed files with 3353 additions and 56 deletions
--- a/gentest/fixtures/YGMarginTest.html
+++ b/gentest/fixtures/YGMarginTest.html
@@ -39,3 +39,70 @@
  <div style="margin-bottom: 10px; flex-grow: 1;"></div>
  <div style="flex-grow: 1;"></div>
 </div>
+
+<div id="margin_auto_bottom" style="width: 200px; height: 200px; align-items: center;">
+  <div style="width: 50px; height: 50px; margin-bottom:auto;"></div>
+  <div style="width: 50px; height: 50px;"></div>
+</div>
+
+<div id="margin_auto_top" style="width: 200px; height: 200px; align-items: center;">
+  <div style="width: 50px; height: 50px; margin-top:auto;"></div>
+  <div style="width: 50px; height: 50px;"></div>
+</div>
+
+<div id="margin_auto_bottom_and_top" style="width: 200px; height: 200px; align-items: center;">
+  <div style="width: 50px; height: 50px; margin-top:auto; margin-bottom:auto;"></div>
+  <div style="width: 50px; height: 50px;"></div>
+</div>
+
+<div id="margin_auto_bottom_and_top_justify_center" style="width: 200px; height: 200px; justify-content: center;">
+  <div style="width: 50px; height: 50px; margin-top:auto; margin-bottom:auto;"></div>
+  <div style="width: 50px; height: 50px;"></div>
+</div>
+
+<div id="margin_auto_mutiple_children_column" style="width: 200px; height: 200px; flex-direction: column; align-items: center;">
+  <div style="width: 50px; height: 50px; margin-top:auto;"></div>
+  <div style="width: 50px; height: 50px; margin-top:auto;"></div>
+  <div style="width: 50px; height: 50px;"></div>
+</div>
+
+<div id="margin_auto_mutiple_children_row" style="width: 200px; height: 200px; flex-direction:row; align-items: center;">
+  <div style="width: 50px; height: 50px; margin-right:auto;"></div>
+  <div style="width: 50px; height: 50px; margin-right:auto;"></div>
+  <div style="width: 50px; height: 50px;"></div>
+</div>
+
+<div id="margin_auto_left_and_right_column" style="width: 200px; height: 200px; align-items: center; flex-direction: row;">
+  <div style="width: 50px; height: 50px; margin-left:auto; margin-right:auto;"></div>
+  <div style="width: 50px; height: 50px;"></div>
+</div>
+
+<div id="margin_auto_left_and_right" style="width: 200px; height: 200px; ">
+  <div style="width: 50px; height: 50px; margin-left:auto; margin-right:auto;"></div>
+  <div style="width: 50px; height: 50px;"></div>
+</div>
+
+<div id="margin_auto_left_and_right_column_and_center" style="width: 200px; height: 200px; align-items: center;">
+  <div style="width: 50px; height: 50px; margin-left:auto; margin-right:auto;"></div>
+  <div style="width: 50px; height: 50px;"></div>
+</div>
+
+<div id="margin_auto_left" style="width: 200px; height: 200px; align-items: center;">
+  <div style="width: 50px; height: 50px; margin-left:auto;"></div>
+  <div style="width: 50px; height: 50px;"></div>
+</div>
+
+<div id="margin_auto_right" style="width: 200px; height: 200px; align-items: center;">
+  <div style="width: 50px; height: 50px; margin-right:auto;"></div>
+  <div style="width: 50px; height: 50px;"></div>
+</div>
+
+<div id="margin_auto_left_and_right_strech" style="width: 200px; height: 200px; flex-direction:row; align-items: stretch;">
+  <div style="width: 50px; height: 50px; margin-left:auto; margin-right:auto;"></div>
+  <div style="width: 50px; height: 50px;"></div>
+</div>
+
+<div id="margin_auto_top_and_bottom_strech" style="width: 200px; height: 200px; flex-direction: column; align-items: stretch;">
+  <div style="width: 50px; height: 50px; margin-top:auto; margin-bottom:auto;"></div>
+  <div style="width: 50px; height: 50px;"></div>
+</div>
--- a/gentest/gentest-cpp.js
+++ b/gentest/gentest-cpp.js
@@ -13,8 +13,10 @@ function toValueCpp(value) {
 }

 function toFunctionName(value) {
-  if (value.indexOf('%') >= 0){
+  if (value.indexOf('%') >= 0) {
    return 'Percent';
+  } else if(value.indexOf('Auto') >= 0) {
+    return 'Auto';
  }
  return '';
 }
@@ -121,6 +123,8 @@ CPPEmitter.prototype = Object.create(Emitter.prototype, {

  YGDisplayFlex:{value:'YGDisplayFlex'},
  YGDisplayNone:{value:'YGDisplayNone'},
+  YGAuto:{value:'YGAuto'},
+

  YGNodeCalculateLayout:{value:function(node, dir) {
    this.push('YGNodeCalculateLayout(' + node + ', YGUndefined, YGUndefined, ' + dir + ');');
@@ -199,7 +203,13 @@ CPPEmitter.prototype = Object.create(Emitter.prototype, {
  }},

  YGNodeStyleSetMargin:{value:function(nodeName, edge, value) {
-    this.push('YGNodeStyleSetMargin' + toFunctionName(value) + '(' + nodeName + ', ' + edge + ', ' + toValueCpp(value) + ');');
+    var valueStr = toValueCpp(value);
+    if (valueStr != 'YGAuto') {
+      valueStr = ', ' + valueStr;
+    } else {
+      valueStr = '';
+    }
+    this.push('YGNodeStyleSetMargin' + toFunctionName(value) + '(' + nodeName + ', ' + edge +  valueStr + ');');
  }},

  YGNodeStyleSetMaxHeight:{value:function(nodeName, value) {
--- a/gentest/gentest-cs.js
+++ b/gentest/gentest-cs.js
@@ -17,6 +17,9 @@ function toCsUnitValue(value) {
  if (value.indexOf('%') >= 0){
    methodName = '.Percent()';
  }
+  if(value.indexOf('Auto') >= 0){
+    return 'YogaValue.Auto()';
+  }
  return toValueCs(value) + methodName;
 }

@@ -130,6 +133,8 @@ CSEmitter.prototype = Object.create(Emitter.prototype, {

  YGUndefined:{value:'YogaConstants.Undefined'},

+  YGAuto:{value:'YogaConstants.Auto'},
+
  YGDisplayFlex:{value:'YogaDisplay.Flex'},
  YGDisplayNone:{value:'YogaDisplay.None'},

--- a/gentest/gentest-java.js
+++ b/gentest/gentest-java.js
@@ -15,6 +15,8 @@ function toValueJava(value) {
 function toMethodName(value) {
  if (value.indexOf('%') >= 0){
    return 'Percent';
+  } else if(value.indexOf('AUTO') >= 0) {
+    return 'Auto';
  }
  return '';
 }
@@ -136,6 +138,8 @@ JavaEmitter.prototype = Object.create(Emitter.prototype, {

  YGDisplayFlex:{value:'YogaDisplay.FLEX'},
  YGDisplayNone:{value:'YogaDisplay.NONE'},
+  YGAuto:{value:'YogaConstants.AUTO'},
+

  YGWrapNoWrap:{value:'YogaWrap.NO_WRAP'},
  YGWrapWrap:{value:'YogaWrap.WRAP'},
@@ -218,7 +222,14 @@ JavaEmitter.prototype = Object.create(Emitter.prototype, {
  }},

  YGNodeStyleSetMargin:{value:function(nodeName, edge, value) {
-    this.push(nodeName + '.setMargin' + toMethodName(value) + '(' + edge + ', ' + toValueJava(value) + 'f);');
+    var valueStr = toValueJava(value);
+    if (valueStr != 'YogaConstants.AUTO') {
+      valueStr = ', ' + valueStr + 'f';
+    } else {
+      valueStr = '';
+    }
+
+    this.push(nodeName + '.setMargin' + toMethodName(value) + '(' + edge + valueStr + ');');
  }},

  YGNodeStyleSetMaxHeight:{value:function(nodeName, value) {
--- a/gentest/gentest-javascript.js
+++ b/gentest/gentest-javascript.js
@@ -14,6 +14,7 @@ var JavascriptEmitter = function() {
 function toValueJavascript(value) {
  if (value.match(/^[0-9.e+-]+px$/i)) return parseFloat(value);
  if (value.match(/^[0-9.e+-]+%/i)) return JSON.stringify(value);
+  if (value == 'Yoga.AUTO') return '"auto"';
  return value;
 }

@@ -122,6 +123,8 @@ JavascriptEmitter.prototype = Object.create(Emitter.prototype, {
  YGPositionTypeAbsolute:{value:'Yoga.POSITION_TYPE_ABSOLUTE'},
  YGPositionTypeRelative:{value:'Yoga.POSITION_TYPE_RELATIVE'},

+  YGAuto:{value:'Yoga.AUTO'},
+
  YGWrapNoWrap:{value:'Yoga.WRAP_NO_WRAP'},
  YGWrapWrap:{value:'Yoga.WRAP_WRAP'},

--- a/gentest/gentest.js
+++ b/gentest/gentest.js
@@ -389,7 +389,7 @@ function alignValue(e, value) {

 function pixelValue(e, value) {
  switch (value) {
-    case 'auto': return e.YGUndefined;
+    case 'auto': return e.YGAuto;
    case 'undefined': return e.YGUndefined;
    default: return value;
  }