upgrade yoga-layout

Summary:
- upgraded to yoga-layout@1.9.3
- set default values correctly
- catch errors

Reviewed By: emilsjolander

Differential Revision: D7001154

fbshipit-source-id: 49527576c61ce109ba0af0f50c981cf5c2c7d41a

website/package.json

@@ -18,7 +18,7 @@
     "immutable": "^4.0.0-rc.9",
     "react-helmet": "^5.2.0",
     "react-syntax-highlighter": "^7.0.0",
-    "yoga-layout": "^1.9.0"
+    "yoga-layout": "^1.9.3"
   },
   "keywords": [
     "gatsby"

website/src/components/Playground/CodeComponentKit.js

@@ -3,9 +3,7 @@ import yoga from 'yoga-layout/dist/entry-browser';
 import LayoutRecord from './LayoutRecord';
 import PositionRecord from './PositionRecord';
 import type {LayoutRecordT} from './LayoutRecord';
-import type {Yoga$Direction /* Yoga$Node */} from 'yoga-layout';
-
-type Yoga$Node = any;
+import type {Yoga$Direction, Yoga$Node} from 'yoga-layout';
 
 const enumLookup = {
   flexDirection: {

website/src/components/Playground/Editor.js

@@ -85,7 +85,7 @@ export default class Editor extends Component<Props> {
                 <h2>
                   Basis
                   <InfoText doclink="/docs/flex">
-                    The factor of remaining space should be given to this node
+                    Default size of a node along the main axis
                   </InfoText>
                 </h2>
                 <EditValue
@@ -233,7 +233,7 @@ export default class Editor extends Component<Props> {
             </h2>
             <EditValue
               type="text"
-              placeholder="none"
+              placeholder="auto"
               property="aspectRatio"
               disabled={disabled}
               value={node ? node.aspectRatio : undefined}

website/src/components/Playground/LayoutRecord.js

@@ -51,8 +51,8 @@ export type LayoutRecordT = RecordOf<{
 }>;
 
 const r: LayoutRecordT = Record({
-  width: 100,
-  height: 100,
+  width: 'auto',
+  height: 'auto',
   justifyContent: yoga.JUSTIFY_FLEX_START,
   alignItems: yoga.ALIGN_STRETCH,
   alignSelf: yoga.ALIGN_AUTO,
@@ -69,10 +69,10 @@ const r: LayoutRecordT = Record({
   flexShrink: 1,
   children: List(),
   aspectRatio: 'auto',
-  minWidth: undefined,
-  maxWidth: undefined,
-  minHeight: undefined,
-  maxHeight: undefined,
+  minWidth: NaN,
+  maxWidth: NaN,
+  minHeight: NaN,
+  maxHeight: NaN,
 });
 
 export default r;

website/src/components/Playground/PositionRecord.js

@@ -14,17 +14,17 @@ import {Record} from 'immutable';
 import type {RecordOf} from 'immutable';
 
 export type PositionRecordT = RecordOf<{
-  top: string,
-  right: string,
-  bottom: string,
-  left: string,
+  top: string | number,
+  right: string | number,
+  bottom: string | number,
+  left: string | number,
 }>;
 
 const r: PositionRecordT = Record({
-  top: '',
-  right: '',
-  bottom: '',
-  left: '',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
 });
 
 export default r;

website/src/components/Playground/YogaNode.js

@@ -14,13 +14,12 @@ import React, {Component} from 'react';
 import yoga, {Node} from 'yoga-layout/dist/entry-browser';
 import PositionGuide from './PositionGuide';
 import PositionRecord from './PositionRecord';
+import LayoutRecord from './LayoutRecord';
 import type {LayoutRecordT} from './LayoutRecord';
-import type {Yoga$Direction} from 'yoga-layout';
+import type {Yoga$Direction, Yoga$Node} from 'yoga-layout';
 
 import './YogaNode.css';
 
-type Yoga$Node = any;
-
 type ComputedLayout = {|
   left: number,
   top: number,
@@ -105,51 +104,53 @@ export default class YogaNode extends Component<Props, State> {
 
   createYogaNodes = (layoutDefinition: LayoutRecordT): Yoga$Node => {
     const root = Node.create();
-    root.setWidth(layoutDefinition.width);
-    root.setHeight(layoutDefinition.height);
-    root.setMinWidth(layoutDefinition.minWidth);
-    root.setMaxWidth(layoutDefinition.maxWidth);
-    root.setMinHeight(layoutDefinition.minHeight);
-    root.setMaxHeight(layoutDefinition.maxHeight);
-    root.setJustifyContent(layoutDefinition.justifyContent);
-    root.setAlignItems(layoutDefinition.alignItems);
-    root.setAlignSelf(layoutDefinition.alignSelf);
-    root.setAlignContent(layoutDefinition.alignContent);
-    root.setFlexGrow(layoutDefinition.flexGrow);
-    root.setFlexShrink(layoutDefinition.flexShrink);
 
-    root.setPadding(yoga.EDGE_TOP, layoutDefinition.padding.top);
-    root.setPadding(yoga.EDGE_RIGHT, layoutDefinition.padding.right);
-    root.setPadding(yoga.EDGE_BOTTOM, layoutDefinition.padding.bottom);
-    root.setPadding(yoga.EDGE_LEFT, layoutDefinition.padding.left);
+    const defaultLayout = LayoutRecord({});
+    [
+      'width',
+      'height',
+      'minWidth',
+      'maxWidth',
+      'minHeight',
+      'maxHeight',
+      'justifyContent',
+      'alignItems',
+      'alignSelf',
+      'alignContent',
+      'flexGrow',
+      'flexShrink',
+      'positionType',
+      'aspectRatio',
+      'flexWrap',
+      'flexDirection',
+    ].forEach(key => {
+      try {
+        const value =
+          layoutDefinition[key] === ''
+            ? defaultLayout[key]
+            : layoutDefinition[key];
+        root[`set${key[0].toUpperCase()}${key.substr(1)}`](value);
+      } catch (e) {}
+    });
 
-    root.setBorder(yoga.EDGE_TOP, layoutDefinition.border.top);
-    root.setBorder(yoga.EDGE_RIGHT, layoutDefinition.border.right);
-    root.setBorder(yoga.EDGE_BOTTOM, layoutDefinition.border.bottom);
-    root.setBorder(yoga.EDGE_LEFT, layoutDefinition.border.left);
-
-    root.setMargin(yoga.EDGE_TOP, layoutDefinition.margin.top);
-    root.setMargin(yoga.EDGE_RIGHT, layoutDefinition.margin.right);
-    root.setMargin(yoga.EDGE_BOTTOM, layoutDefinition.margin.bottom);
-    root.setMargin(yoga.EDGE_LEFT, layoutDefinition.margin.left);
-
-    root.setPosition(yoga.EDGE_TOP, layoutDefinition.position.top);
-    root.setPosition(yoga.EDGE_RIGHT, layoutDefinition.position.right);
-    root.setPosition(yoga.EDGE_BOTTOM, layoutDefinition.position.bottom);
-    root.setPosition(yoga.EDGE_LEFT, layoutDefinition.position.left);
-
-    root.setPositionType(layoutDefinition.positionType);
+    ['padding', 'margin', 'position', 'border'].forEach(key => {
+      ['top', 'right', 'bottom', 'left'].forEach(direction => {
+        try {
+          root[`set${key[0].toUpperCase()}${key.substr(1)}`](
+            yoga[`EDGE_${direction.toUpperCase()}`],
+            layoutDefinition[key][direction] || 0,
+          );
+        } catch (e) {}
+      });
+    });
 
     root.setDisplay(yoga.DISPLAY_FLEX);
-    root.setAspectRatio(layoutDefinition.aspectRatio);
-    root.setFlexWrap(layoutDefinition.flexWrap);
-    root.setFlexDirection(layoutDefinition.flexDirection);
+
     (layoutDefinition.children || [])
       .map(this.createYogaNodes)
       .forEach((node, i) => {
         root.insertChild(node, i);
       });
-
     return root;
   };
 

website/src/components/Playground/index.js

@@ -56,7 +56,11 @@ export default class Playground extends Component<Props, State> {
     layoutDefinition: {
       width: 500,
       height: 500,
-      children: [{}, {}, []],
+      children: [
+        {width: 100, height: 100},
+        {width: 100, height: 100},
+        {width: 100, height: 100},
+      ],
     },
     direction: yoga.DIRECTION_LTR,
     maxDepth: 3,
@@ -142,7 +146,9 @@ export default class Playground extends Component<Props, State> {
     const {selectedNodePath, layoutDefinition} = this.state;
     if (selectedNodePath) {
       const path = getPath(selectedNodePath).concat('children');
-      const updatedChildren = layoutDefinition.getIn(path).push(LayoutRecord());
+      const updatedChildren = layoutDefinition
+        .getIn(path)
+        .push(LayoutRecord({width: 100, height: 100}));
       this.modifyAtPath(
         path,
         updatedChildren,

website/yarn.lock

@@ -9798,9 +9798,9 @@ yeast@0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
 
-yoga-layout@^1.9.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/yoga-layout/-/yoga-layout-1.9.0.tgz#84c77dc5fc79dde58715442632c4ad152f25cfe6"
+yoga-layout@^1.9.3:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/yoga-layout/-/yoga-layout-1.9.3.tgz#f851935187f6d2945639b79c57ee0eac2fb7d886"
   dependencies:
     autogypi "^0.2.2"
     nbind "^0.3.14"