From b318c4c5c99e7d34b770bfad37a8b5fe75997470 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20B=C3=BCchele?= Date: Thu, 15 Feb 2018 16:42:43 -0800 Subject: [PATCH] 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 | 2 +- .../components/Playground/CodeComponentKit.js | 6 +- website/src/components/Playground/Editor.js | 4 +- .../src/components/Playground/LayoutRecord.js | 12 +-- .../components/Playground/PositionRecord.js | 16 ++-- website/src/components/Playground/YogaNode.js | 79 ++++++++++--------- website/src/components/Playground/index.js | 10 ++- website/yarn.lock | 6 +- 8 files changed, 70 insertions(+), 65 deletions(-) diff --git a/website/package.json b/website/package.json index 95a15a0f..7b1da60e 100644 --- a/website/package.json +++ b/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" diff --git a/website/src/components/Playground/CodeComponentKit.js b/website/src/components/Playground/CodeComponentKit.js index 66e1c0a2..34487cc0 100644 --- a/website/src/components/Playground/CodeComponentKit.js +++ b/website/src/components/Playground/CodeComponentKit.js @@ -3,11 +3,9 @@ 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'; +import type {Yoga$Direction, Yoga$Node} from 'yoga-layout'; -type Yoga$Node = any; - -const enumLookup = { +const enumLookup = { flexDirection: { [yoga.FLEX_DIRECTION_COLUMN]: 'CKFlexboxDirectionVertical', [yoga.FLEX_DIRECTION_ROW]: 'CKFlexboxDirectionHorizontal', diff --git a/website/src/components/Playground/Editor.js b/website/src/components/Playground/Editor.js index e13cc9ac..e7c1a970 100644 --- a/website/src/components/Playground/Editor.js +++ b/website/src/components/Playground/Editor.js @@ -85,7 +85,7 @@ export default class Editor extends Component {

Basis - The factor of remaining space should be given to this node + Default size of a node along the main axis

{ ; 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; diff --git a/website/src/components/Playground/PositionRecord.js b/website/src/components/Playground/PositionRecord.js index b6d899a0..243f24b8 100644 --- a/website/src/components/Playground/PositionRecord.js +++ b/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; diff --git a/website/src/components/Playground/YogaNode.js b/website/src/components/Playground/YogaNode.js index 81c0a7b9..eab95a04 100644 --- a/website/src/components/Playground/YogaNode.js +++ b/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 { 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; }; diff --git a/website/src/components/Playground/index.js b/website/src/components/Playground/index.js index 586d17e5..1774f3e4 100644 --- a/website/src/components/Playground/index.js +++ b/website/src/components/Playground/index.js @@ -56,7 +56,11 @@ export default class Playground extends Component { 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 { 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, diff --git a/website/yarn.lock b/website/yarn.lock index 1449e9c9..5d961331 100644 --- a/website/yarn.lock +++ b/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"