Fixing playground editing

Summary: editing numerical values didn't work. this fixes it and cleans up the API of the playground

Reviewed By: emilsjolander

Differential Revision: D6976128

fbshipit-source-id: 9b1ace9d93ba8e597bdfb4842ed6adcaf8b77fd9

website/src/components/Playground/EditValue.js

@@ -15,14 +15,14 @@ import YogaEnumSelect from './YogaEnumSelect';
 import YogaPositionEditor from './YogaPositionEditor';
 import {Input} from 'antd';
 
-type Props<T, S> = {
+type Props<T> = {
   property: string,
   disabled?: boolean,
-  value: string | number,
-  onChange: (value: number) => void,
+  value?: ?T,
+  onChange: (property: string, value: T) => void,
 };
 
-export default (props: Props<T, S>) => {
+export default (props: Props<*>) => {
   if (YogaEnumSelect.availableProperties.indexOf(props.property) > -1) {
     return <YogaEnumSelect {...props} />;
   } else if (
@@ -30,6 +30,12 @@ export default (props: Props<T, S>) => {
   ) {
     return <YogaPositionEditor {...props} />;
   } else {
-    return <Input type="text" {...props} />;
+    return (
+      <Input
+        type="text"
+        {...props}
+        onChange={e => props.onChange(props.property, e.target.value)}
+      />
+    );
   }
 };

website/src/components/Playground/Editor.js

@@ -66,7 +66,7 @@ export default class Editor extends Component<Props> {
             <EditValue
               property="direction"
               value={this.props.direction}
-              onChange={e => this.props.onChangeSetting('direction', e)}
+              onChange={this.props.onChangeSetting}
             />
             <h2>
               Flex direction
@@ -75,8 +75,8 @@ export default class Editor extends Component<Props> {
             <EditValue
               disabled={disabled}
               property="flexDirection"
-              value={node ? node.flexDirection : ''}
-              onChange={e => this.props.onChangeLayout('flexDirection', e)}
+              value={node ? node.flexDirection : undefined}
+              onChange={this.props.onChangeLayout}
             />
 
             <Row gutter={15} style={{marginTop: 30}}>
@@ -90,11 +90,10 @@ export default class Editor extends Component<Props> {
                 </h2>
                 <EditValue
                   type="text"
+                  property="flexGrow"
                   disabled={disabled || selectedNodeIsRoot}
-                  value={node ? node.flexGrow : ''}
-                  onChange={e =>
-                    this.props.onChangeLayout('flexGrow', e.target.value)
-                  }
+                  value={node ? node.flexGrow : undefined}
+                  onChange={this.props.onChangeLayout}
                 />
               </Col>
               <Col span={12}>
@@ -107,11 +106,10 @@ export default class Editor extends Component<Props> {
                 </h2>
                 <EditValue
                   type="text"
+                  property="flexShrink"
                   disabled={disabled || selectedNodeIsRoot}
-                  value={node ? node.flexShrink : ''}
-                  onChange={e =>
-                    this.props.onChangeLayout('flexShrink', e.target.value)
-                  }
+                  value={node ? node.flexShrink : undefined}
+                  onChange={this.props.onChangeLayout}
                 />
               </Col>
             </Row>
@@ -125,8 +123,8 @@ export default class Editor extends Component<Props> {
             <EditValue
               disabled={disabled}
               property="flexWrap"
-              value={node ? node.flexWrap : ''}
-              onChange={e => this.props.onChangeLayout('flexWrap', e)}
+              value={node ? node.flexWrap : undefined}
+              onChange={this.props.onChangeLayout}
             />
           </TabPane>
           <TabPane tab="Alignment" key="2">
@@ -137,8 +135,8 @@ export default class Editor extends Component<Props> {
             <EditValue
               disabled={disabled}
               property="justifyContent"
-              value={node ? node.justifyContent : ''}
-              onChange={e => this.props.onChangeLayout('justifyContent', e)}
+              value={node ? node.justifyContent : undefined}
+              onChange={this.props.onChangeLayout}
             />
 
             <h2>
@@ -148,8 +146,8 @@ export default class Editor extends Component<Props> {
             <EditValue
               disabled={disabled}
               property="alignItems"
-              value={node ? node.alignItems : ''}
-              onChange={e => this.props.onChangeLayout('alignItems', e)}
+              value={node ? node.alignItems : undefined}
+              onChange={this.props.onChangeLayout}
             />
 
             <h2>
@@ -161,8 +159,8 @@ export default class Editor extends Component<Props> {
             <EditValue
               disabled={disabled || selectedNodeIsRoot}
               property="alignSelf"
-              value={node ? node.alignSelf : ''}
-              onChange={e => this.props.onChangeLayout('alignSelf', e)}
+              value={node ? node.alignSelf : undefined}
+              onChange={this.props.onChangeLayout}
             />
 
             <h2>
@@ -174,8 +172,8 @@ export default class Editor extends Component<Props> {
             <EditValue
               disabled={disabled}
               property="alignContent"
-              value={node ? node.alignContent : ''}
-              onChange={e => this.props.onChangeLayout('alignContent', e)}
+              value={node ? node.alignContent : undefined}
+              onChange={this.props.onChangeLayout}
             />
           </TabPane>
           <TabPane tab="Layout" key="3">
@@ -188,22 +186,20 @@ export default class Editor extends Component<Props> {
                 <EditValue
                   type="text"
                   placeholder="width"
+                  property="width"
                   disabled={disabled}
-                  value={node ? node.width : ''}
-                  onChange={e =>
-                    this.props.onChangeLayout('width', e.target.value)
-                  }
+                  value={node ? node.width : undefined}
+                  onChange={this.props.onChangeLayout}
                 />
               </Col>
               <Col span={12}>
                 <EditValue
                   type="text"
                   placeholder="height"
+                  property="height"
                   disabled={disabled}
-                  value={node ? node.height : ''}
-                  onChange={e =>
-                    this.props.onChangeLayout('height', e.target.value)
-                  }
+                  value={node ? node.height : undefined}
+                  onChange={this.props.onChangeLayout}
                 />
               </Col>
             </Row>
@@ -218,11 +214,10 @@ export default class Editor extends Component<Props> {
             <EditValue
               type="text"
               placeholder="Aspect ratio"
+              property="aspectRatio"
               disabled={disabled}
-              value={node ? node.aspectRatio : ''}
-              onChange={e =>
-                this.props.onChangeLayout('aspectRatio', e.target.value)
-              }
+              value={node ? node.aspectRatio : undefined}
+              onChange={this.props.onChangeLayout}
             />
 
             <h2>Box model</h2>
@@ -231,7 +226,7 @@ export default class Editor extends Component<Props> {
                 property={property}
                 key={property}
                 value={node ? node[property] : undefined}
-                onChange={value => this.props.onChangeLayout(property, value)}
+                onChange={this.props.onChangeLayout}
               />
             ))}
             <h2>
@@ -246,13 +241,13 @@ export default class Editor extends Component<Props> {
             <EditValue
               disabled={disabled}
               property="positionType"
-              value={node ? node.positionType : ''}
-              onChange={e => this.props.onChangeLayout('positionType', e)}
+              value={node ? node.positionType : undefined}
+              onChange={this.props.onChangeLayout}
             />
             <EditValue
               property="position"
               value={node ? node.position : undefined}
-              onChange={value => this.props.onChangeLayout('position', value)}
+              onChange={this.props.onChangeLayout}
             />
           </TabPane>
         </Tabs>

website/src/components/Playground/YogaEnumSelect.js

@@ -28,11 +28,13 @@ const PROPERTY_LOOKUP = {
   flexWrap: 'WRAP',
 };
 
+type Property = $Keys<typeof PROPERTY_LOOKUP>;
+
 type Props = {
-  property: $Keys<typeof PROPERTY_LOOKUP>,
+  property: Property,
   disabled?: boolean,
   value: string | number,
-  onChange: (value: number) => void,
+  onChange: (property: Property, value: number) => void,
 };
 
 export default class YogaEnumSelect extends Component<Props> {
@@ -52,7 +54,7 @@ export default class YogaEnumSelect extends Component<Props> {
   }
 
   handleMenuClick = ({key}: {key: string}) => {
-    this.props.onChange(yoga[key]);
+    this.props.onChange(this.props.property, yoga[key]);
   };
 
   render() {
@@ -85,7 +87,7 @@ export default class YogaEnumSelect extends Component<Props> {
     ) : (
       <RadioGroup
         {...props}
-        onChange={e => this.props.onChange(e.target.value)}
+        onChange={e => this.props.onChange(this.props.property, e.target.value)}
         defaultValue="a"
         className="YogaEnumSelect">
         {this.values.map(({key, value}) => (

website/src/components/Playground/YogaPositionEditor.js

@@ -16,10 +16,12 @@ import PositionRecord from './PositionRecord';
 import type {PositionRecordT} from './PositionRecord';
 import './YogaPositionEditor.css';
 
+type Property = 'position' | 'margin' | 'padding' | 'border';
+
 type Props = {
   value: PositionRecordT,
-  property: 'position' | 'margin' | 'padding' | 'border',
-  onChange: (value: PositionRecordT) => void,
+  property: Property,
+  onChange: (property: Property, value: PositionRecordT) => void,
 };
 
 export default class YogaPositionEditor extends Component<Props> {
@@ -36,25 +38,31 @@ export default class YogaPositionEditor extends Component<Props> {
         <Input
           type="text"
           value={value.top}
-          onChange={e => onChange(value.set('top', e.target.value))}
+          onChange={e => onChange(property, value.set('top', e.target.value))}
         />
         <div className="YogaPositionEditorRow">
           <Input
             type="text"
             value={value.left}
-            onChange={e => onChange(value.set('left', e.target.value))}
+            onChange={e =>
+              onChange(property, value.set('left', e.target.value))
+            }
           />
           {property}
           <Input
             type="text"
             value={value.right}
-            onChange={e => onChange(value.set('right', e.target.value))}
+            onChange={e =>
+              onChange(property, value.set('right', e.target.value))
+            }
           />
         </div>
         <Input
           type="text"
           value={value.bottom}
-          onChange={e => onChange(value.set('bottom', e.target.value))}
+          onChange={e =>
+            onChange(property, value.set('bottom', e.target.value))
+          }
         />
       </div>
     );

website/src/templates/withPlayground.js

@@ -34,7 +34,7 @@ export default ({pathContext}) => (
               <EditValue
                 property={prop}
                 value={layout[prop]}
-                onChange={e => onChange(prop, e)}
+                onChange={onChange}
               />
             </div>
           ))}