adding support for min/max-width/height

Summary: Adding controls for min/max height/width to the playground

Reviewed By: emilsjolander

Differential Revision: D7988400

fbshipit-source-id: bae487e2504906788552d6c1a29ed74c39cb5ac0

website/src/components/Playground/EditValue.js

@@ -33,7 +33,7 @@ export default (props: Props<*>) => {
         type="text"
         {...props}
         onChange={e => props.onChange(props.property, e.target.value)}
-        placeholder="undefined"
+        placeholder={props.placeholder || 'undefined'}
         onFocus={e => e.target.select()}
         value={Number.isNaN(props.value) ? '' : props.value}
       />

website/src/components/Playground/Editor.js

@@ -89,6 +89,7 @@ export default class Editor extends Component<Props> {
                 <EditValue
                   type="text"
                   property="flexBasis"
+                  placeholder="auto"
                   disabled={disabled || selectedNodeIsRoot}
                   value={node ? node.flexBasis : undefined}
                   onChange={this.props.onChangeLayout}
@@ -104,6 +105,7 @@ export default class Editor extends Component<Props> {
                 <EditValue
                   type="text"
                   property="flexGrow"
+                  placeholder="0"
                   disabled={disabled || selectedNodeIsRoot}
                   value={node ? node.flexGrow : undefined}
                   onChange={this.props.onChangeLayout}
@@ -120,6 +122,7 @@ export default class Editor extends Component<Props> {
                 <EditValue
                   type="text"
                   property="flexShrink"
+                  placeholder="1"
                   disabled={disabled || selectedNodeIsRoot}
                   value={node ? node.flexShrink : undefined}
                   onChange={this.props.onChangeLayout}
@@ -222,6 +225,62 @@ export default class Editor extends Component<Props> {
                 />
               </Col>
             </Row>
+            <h2>
+              Max-Width &times; Max-Height
+              <InfoText doclink="/docs/min-max">
+                Maximum dimensions of the node
+              </InfoText>
+            </h2>
+            <Row gutter={15}>
+              <Col span={12}>
+                <EditValue
+                  type="text"
+                  placeholder="none"
+                  property="maxWidth"
+                  disabled={disabled}
+                  value={node ? node.maxWidth : undefined}
+                  onChange={this.props.onChangeLayout}
+                />
+              </Col>
+              <Col span={12}>
+                <EditValue
+                  type="text"
+                  placeholder="none"
+                  property="maxHeight"
+                  disabled={disabled}
+                  value={node ? node.maxHeight : undefined}
+                  onChange={this.props.onChangeLayout}
+                />
+              </Col>
+            </Row>
+            <h2>
+              Min-Width &times; Min-Height
+              <InfoText doclink="/docs/min-max">
+                Minimum dimensions of the node
+              </InfoText>
+            </h2>
+            <Row gutter={15}>
+              <Col span={12}>
+                <EditValue
+                  type="text"
+                  placeholder="0"
+                  property="minWidth"
+                  disabled={disabled}
+                  value={node ? node.minWidth : undefined}
+                  onChange={this.props.onChangeLayout}
+                />
+              </Col>
+              <Col span={12}>
+                <EditValue
+                  type="text"
+                  placeholder="0"
+                  property="minHeight"
+                  disabled={disabled}
+                  value={node ? node.minHeight : undefined}
+                  onChange={this.props.onChangeLayout}
+                />
+              </Col>
+            </Row>
 
             <h2>
               Aspect Ratio
@@ -277,7 +336,8 @@ export default class Editor extends Component<Props> {
               icon="plus-circle-o"
               disabled={!Boolean(this.props.onAdd)}
               onClick={this.props.onAdd}
-              type="primary">
+              type="primary"
+            >
               add child node
             </Button>
           </Col>
@@ -286,7 +346,8 @@ export default class Editor extends Component<Props> {
               icon="close-circle-o"
               disabled={!Boolean(this.props.onRemove)}
               onClick={this.props.onRemove}
-              type="danger">
+              type="danger"
+            >
               remove node
             </Button>
           </Col>

website/src/components/Playground/LayoutRecord.js

@@ -19,18 +19,22 @@ import type {
   Yoga$JustifyContent,
   Yoga$FlexDirection,
   Yoga$FlexWrap,
-  Yoga$YogaPositionType,
+  Yoga$PositionType,
 } from 'yoga-layout';
 
 export type LayoutRecordT = RecordOf<{
   width?: ?number,
   height?: ?number,
+  minWidth?: ?number,
+  minHeight?: ?number,
+  maxWidth?: ?number,
+  maxHeight?: ?number,
   justifyContent?: Yoga$JustifyContent,
   padding: PositionRecordT,
   border: PositionRecordT,
   margin: PositionRecordT,
   position: PositionRecordT,
-  positionType: Yoga$YogaPositionType,
+  positionType: Yoga$PositionType,
   alignItems?: Yoga$Align,
   alignSelf?: Yoga$Align,
   alignContent?: Yoga$Align,
@@ -51,6 +55,10 @@ export type LayoutRecordT = RecordOf<{
 const r: LayoutRecordT = Record({
   width: 'auto',
   height: 'auto',
+  minWidth: 0,
+  minHeight: 0,
+  maxWidth: 'none',
+  maxHeight: 'none',
   justifyContent: yoga.JUSTIFY_FLEX_START,
   alignItems: yoga.ALIGN_STRETCH,
   alignSelf: yoga.ALIGN_AUTO,