Added property display: flex and none

Summary:
Fix #241 and successor for #302

Added new property ```display``` with ```YGDisplayFlex``` and ```YGDisplayNone```. Allows to hide nodes from the layout without the need to remove it from the DOM.
Closes https://github.com/facebook/yoga/pull/369

Reviewed By: astreet

Differential Revision: D4501141

Pulled By: emilsjolander

fbshipit-source-id: 0dfeee381f6d1e4bbba81926126b83dd7abab9d6

gentest/fixtures/YGDisplayTest.html

@@ -0,0 +1,27 @@
+<div id="display_none" style="width: 100px; height: 100px; flex-direction: row;">
+ <div style="flex-grow: 1;"></div>
+ <div style="flex-grow: 1; display:none;"></div>
+</div>
+
+<div id="display_none_fixed_size" style="width: 100px; height: 100px; flex-direction: row;">
+  <div style="flex-grow: 1;"></div>
+  <div style="width: 20px; height: 20px; display:none;"></div>
+</div>
+
+<div id="display_none_with_margin" style="width: 100px; height: 100px; flex-direction: row;">
+  <div style="width: 20px; height: 20px; display:none; margin: 10px;"></div>
+  <div style="flex-grow: 1;"></div>
+</div>
+
+<div id="display_none_with_child" style="width: 100px; height: 100px; flex-direction: row;">
+ <div style="flex: 1;"></div>
+ <div style="flex: 1; display:none;">
+   <div style="flex: 1; width: 20px;"></div>
+ </div>
+ <div style="flex: 1;"></div>
+</div>
+
+<div id="display_none_with_position" style="width: 100px; height: 100px; flex-direction: row;">
+ <div style="flex-grow: 1;"></div>
+ <div style="flex-grow: 1; display:none; top: 10px;"></div>
+</div>

gentest/gentest-cpp.js

@@ -118,6 +118,9 @@ CPPEmitter.prototype = Object.create(Emitter.prototype, {
 
   YGUndefined:{value:'YGUndefined'},
 
+  YGDisplayFlex:{value:'YGDisplayFlex'},
+  YGDisplayNone:{value:'YGDisplayNone'},
+
   YGNodeCalculateLayout:{value:function(node, dir) {
     this.push('YGNodeCalculateLayout(' + node + ', YGUndefined, YGUndefined, ' + dir + ');');
   }},
@@ -162,6 +165,10 @@ CPPEmitter.prototype = Object.create(Emitter.prototype, {
     this.push('YGNodeStyleSetDirection(' + nodeName + ', ' + toValueCpp(value) + ');');
   }},
 
+  YGNodeStyleSetDisplay:{value:function(nodeName, value) {
+    this.push('YGNodeStyleSetDisplay(' + nodeName + ', ' + toValueCpp(value) + ');');
+  }},
+
   YGNodeStyleSetFlexBasis:{value:function(nodeName, value) {
     this.push('YGNodeStyleSetFlexBasis' + toFunctionName(value) + '(' + nodeName + ', ' + toValueCpp(value) + ');');
   }},

gentest/gentest-cs.js

@@ -128,6 +128,9 @@ CSEmitter.prototype = Object.create(Emitter.prototype, {
 
   YGUndefined:{value:'YogaConstants.Undefined'},
 
+  YGDisplayFlex:{value:'YogaDisplay.Flex'},
+  YGDisplayNone:{value:'YogaDisplay.None'},
+
   YGWrapNoWrap:{value:'YogaWrap.NoWrap'},
   YGWrapWrap:{value:'YogaWrap.Wrap'},
 
@@ -176,6 +179,10 @@ CSEmitter.prototype = Object.create(Emitter.prototype, {
     this.push(nodeName + '.StyleDirection = ' + toValueCs(value) + ';');
   }},
 
+  YGNodeStyleSetDisplay:{value:function(nodeName, value) {
+    this.push(nodeName + '.Display = ' + toValueCs(value) + ';');
+  }},
+
   YGNodeStyleSetFlexBasis:{value:function(nodeName, value) {
     this.push(nodeName + '.FlexBasis = ' + toCsUnitValue(value) + ';');
   }},

gentest/gentest-java.js

@@ -132,6 +132,9 @@ JavaEmitter.prototype = Object.create(Emitter.prototype, {
 
   YGUndefined:{value:'YogaConstants.UNDEFINED'},
 
+  YGDisplayFlex:{value:'YogaDisplay.FLEX'},
+  YGDisplayNone:{value:'YogaDisplay.NONE'},
+
   YGWrapNoWrap:{value:'YogaWrap.NO_WRAP'},
   YGWrapWrap:{value:'YogaWrap.WRAP'},
 
@@ -180,6 +183,10 @@ JavaEmitter.prototype = Object.create(Emitter.prototype, {
     this.push(nodeName + '.setDirection(' + toValueJava(value) + ');');
   }},
 
+  YGNodeStyleSetDisplay:{value:function(nodeName, value) {
+    this.push(nodeName + '.setDisplay(' + toValueJavascript(value) + ');');
+  }},
+
   YGNodeStyleSetFlexBasis:{value:function(nodeName, value) {
     this.push(nodeName + '.setFlexBasis' + toMethodName(value) + '(' + toValueJava(value) + 'f);');
   }},

gentest/gentest-javascript.js

@@ -125,6 +125,9 @@ JavascriptEmitter.prototype = Object.create(Emitter.prototype, {
 
   YGUndefined:{value:'Yoga.UNDEFINED'},
 
+  YGDisplayFlex:{value:'Yoga.DISPLAY_FLEX'},
+  YGDisplayNone:{value:'Yoga.DISPLAY_NONE'},
+
   YGNodeCalculateLayout:{value:function(node, dir) {
     this.push(node + '.calculateLayout(Yoga.UNDEFINED, Yoga.UNDEFINED, ' + dir + ');');
   }},
@@ -169,6 +172,10 @@ JavascriptEmitter.prototype = Object.create(Emitter.prototype, {
     this.push(nodeName + '.setDirection(' + toValueJavascript(value) + ');');
   }},
 
+  YGNodeStyleSetDisplay:{value:function(nodeName, value) {
+    this.push(nodeName + '.setDisplay(' + toValueJavascript(value) + ');');
+  }},
+
   YGNodeStyleSetFlexBasis:{value:function(nodeName, value) {
     this.push(nodeName + '.setFlexBasis(' + toValueJavascript(value) + ');');
   }},

gentest/gentest.js

@@ -140,6 +140,7 @@ function checkDefaultValues() {
     {style:'top', value:'undefined'},
     {style:'right', value:'undefined'},
     {style:'bottom', value:'undefined'},
+    {style:'display', value:'flex'},
   ].forEach(function(item) {
     assert(item.value === getDefaultStyleValue(item.style),
         item.style + ' should be ' + item.value);
@@ -300,6 +301,9 @@ function setupTestTree(e, parent, node, genericNode, nodeName, parentName, index
         case 'max-height':
           e.YGNodeStyleSetMaxHeight(nodeName, pixelValue(e, node.style[style]));
           break;
+        case 'display':
+          e.YGNodeStyleSetDisplay(nodeName, displayValue(e, node.style[style]))
+          break;
       }
     }
   }
@@ -389,6 +393,13 @@ function pixelValue(e, value) {
   }
 }
 
+function displayValue(e, value){
+  switch(value){
+    case 'flex': return e.YGDisplayFlex;
+    case 'none': return e.YGDisplayNone;
+  }
+}
+
 function getDefaultStyleValue(style) {
   if (style == 'position') {
     return 'relative';
@@ -466,6 +477,7 @@ function getYogaStyle(node) {
     'height',
     'min-height',
     'max-height',
+    'display',
   ].reduce(function(map, key) {
     map[key] = node.style[key] || getComputedStyle(node, null).getPropertyValue(key);
     return map;