From 740ef6cd9ec65dc7594b5409e1c11a94b82c2759 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20B=C3=BCchele?= Date: Wed, 14 Feb 2018 07:53:08 -0800 Subject: [PATCH] flexWrap, alignContent, initialPlayground Summary: Adds `initialPlayground` to the markdown header. Adds contents fro alignContent and flexWrap. Reviewed By: emilsjolander Differential Revision: D6987513 fbshipit-source-id: 41de309d427a9f42e09477170fb8512ce1e7a816 --- website/contents/properties/align-content.md | 4 +++ website/contents/properties/flex-wrap.md | 12 +++++++ website/gatsby-node.js | 1 + website/src/components/Playground/YogaNode.js | 1 + website/src/components/Playground/index.js | 34 +++++++++---------- website/src/templates/withPlayground.js | 11 +++++- 6 files changed, 45 insertions(+), 18 deletions(-) diff --git a/website/contents/properties/align-content.md b/website/contents/properties/align-content.md index f1293eb0..97b67bfc 100644 --- a/website/contents/properties/align-content.md +++ b/website/contents/properties/align-content.md @@ -2,8 +2,12 @@ path: "docs/align-content" title: "Align Content" hasPlayground: true +initialPlayground: eyJ3aWR0aCI6NTAwLCJoZWlnaHQiOjUwMCwiZmxleFdyYXAiOjEsImNoaWxkcmVuIjpbe30se30se30se30se30se30se30se30se30se30se30se31dfQ== --- ## Align Content +The property defines the distribution of lines along the cross-axis. This only +has effect when items are wrapped to multiple lines (see [flexWrap](flex-wrap)). + diff --git a/website/contents/properties/flex-wrap.md b/website/contents/properties/flex-wrap.md index a02b9855..aa8e09f2 100644 --- a/website/contents/properties/flex-wrap.md +++ b/website/contents/properties/flex-wrap.md @@ -2,8 +2,20 @@ path: "docs/flex-wrap" title: "Flex Wrap" hasPlayground: true +initialPlayground: eyJ3aWR0aCI6NTAwLCJoZWlnaHQiOjUwMCwiY2hpbGRyZW4iOlt7fSx7fSx7fSx7fSx7fSx7fSx7fSx7fV19 --- ## Flex Wrap +The `flexWrap` property is set on containers and controls what happens when +children overflow the size of the container along the main axis. By default +children are forced into a single line (which can shrink elements). + +If wrapping is allowed items are wrapped into multiple lines along the main +axis if needed. `WRAP_REVERSE` behaves the same, but the order of the lines is +reversed. + + +When wrapping lines [alignContent](align-content) can be used to specify how the +lines are placed in the container. diff --git a/website/gatsby-node.js b/website/gatsby-node.js index 20c54a85..7883945d 100644 --- a/website/gatsby-node.js +++ b/website/gatsby-node.js @@ -25,6 +25,7 @@ exports.createPages = ({boundActionCreators, graphql}) => { frontmatter { path hasPlayground + initialPlayground } html } diff --git a/website/src/components/Playground/YogaNode.js b/website/src/components/Playground/YogaNode.js index 4154d0bc..fdc7a281 100644 --- a/website/src/components/Playground/YogaNode.js +++ b/website/src/components/Playground/YogaNode.js @@ -110,6 +110,7 @@ export default class YogaNode extends Component { root.setJustifyContent(layoutDefinition.justifyContent); root.setAlignItems(layoutDefinition.alignItems); root.setAlignSelf(layoutDefinition.alignSelf); + root.setAlignContent(layoutDefinition.alignContent); root.setFlexGrow(layoutDefinition.flexGrow); root.setFlexShrink(layoutDefinition.flexShrink); diff --git a/website/src/components/Playground/index.js b/website/src/components/Playground/index.js index 4c222c2b..2430f7bb 100644 --- a/website/src/components/Playground/index.js +++ b/website/src/components/Playground/index.js @@ -25,7 +25,7 @@ import type {Yoga$Direction} from 'yoga-layout'; import './index.css'; type Props = { - layoutDefinition: LayoutRecordT, + layoutDefinition: Object, direction: Yoga$Direction, maxDepth: number, maxChildren?: number, @@ -53,11 +53,11 @@ export default class Playground extends Component { _containerRef: ?HTMLElement; static defaultProps = { - layoutDefinition: LayoutRecord({ + layoutDefinition: { width: 500, height: 500, - children: List([LayoutRecord(), LayoutRecord(), LayoutRecord()]), - }), + children: [{}, {}, []], + }, direction: yoga.DIRECTION_LTR, maxDepth: 3, showCode: false, @@ -65,9 +65,19 @@ export default class Playground extends Component { persist: false, }; + rehydrate = (node: Object): LayoutRecord => { + let record = LayoutRecord(node); + record = record.set('padding', PositionRecord(record.padding)); + record = record.set('border', PositionRecord(record.border)); + record = record.set('margin', PositionRecord(record.margin)); + record = record.set('position', PositionRecord(record.position)); + record = record.set('children', List(record.children.map(this.rehydrate))); + return record; + }; + state = { selectedNodePath: this.props.selectedNodePath, - layoutDefinition: this.props.layoutDefinition, + layoutDefinition: this.rehydrate(this.props.layoutDefinition), direction: this.props.direction, showCode: false, }; @@ -90,16 +100,6 @@ export default class Playground extends Component { document.removeEventListener('keydown', this.onKeyDown); } - rehydrate = (node: Object): LayoutRecord => { - let record = LayoutRecord(node); - record = record.set('padding', PositionRecord(record.padding)); - record = record.set('border', PositionRecord(record.border)); - record = record.set('margin', PositionRecord(record.margin)); - record = record.set('position', PositionRecord(record.position)); - record = record.set('children', List(record.children.map(this.rehydrate))); - return record; - }; - onKeyDown = (e: KeyboardEvent) => { if (e.key === 'Escape') { this.hideSidePanes(); @@ -276,8 +276,8 @@ export default class Playground extends Component { this.setState({showCode: false})}> - + onClose={() => this.setState({showCode: false})} + /> {this.props.persist && } ); diff --git a/website/src/templates/withPlayground.js b/website/src/templates/withPlayground.js index 62cf9230..e4a6667c 100644 --- a/website/src/templates/withPlayground.js +++ b/website/src/templates/withPlayground.js @@ -22,16 +22,25 @@ import './index.css'; type Props = { pathContext: { html: string, - frontmatter: {}, + frontmatter: { + initialPlayground?: string, + }, }, }; const REGEX = //gi; export default class withPlayground extends Component { render() { + let layoutDefinition; + if (this.props.pathContext.frontmatter.initialPlayground) { + layoutDefinition = JSON.parse( + atob(this.props.pathContext.frontmatter.initialPlayground), + ); + } return ( (