Default position to NaN

Summary: The position record defaulted to 0, which was wrong. No it defaults to NaN, which is the same as not having a value at all.

Reviewed By: emilsjolander

Differential Revision: D7009783

fbshipit-source-id: 83810da87e983f8d4d3e428f1f5fab0928bce58d

website/src/components/Playground/LayoutRecord.js

@@ -61,7 +61,12 @@ const r: LayoutRecordT = Record({
   padding: PositionRecord(),
   margin: PositionRecord(),
   border: PositionRecord(),
-  position: PositionRecord(),
+  position: PositionRecord({
+    left: NaN,
+    top: NaN,
+    right: NaN,
+    bottom: NaN,
+  }),
   positionType: yoga.POSITION_TYPE_RELATIVE,
   flexWrap: yoga.WRAP_NO_WRAP,
   flexBasis: 'auto',

website/src/components/Playground/YogaNode.js

@@ -145,7 +145,7 @@ export default class YogaNode extends Component<Props, State> {
         try {
           root[`set${key[0].toUpperCase()}${key.substr(1)}`](
             yoga[`EDGE_${direction.toUpperCase()}`],
-            layoutDefinition[key][direction] || 0,
+            layoutDefinition[key][direction],
           );
         } catch (e) {}
       });

website/src/components/Playground/YogaPositionEditor.js

@@ -38,17 +38,15 @@ export default class YogaPositionEditor extends Component<Props> {
       <div className="YogaPositionEditor">
         <Input
           type="text"
-          value={value.top}
+          value={Number.isNaN(value.top) ? '' : value.top}
           disabled={disabled}
-          placeholder="0"
           onChange={e => onChange(property, value.set('top', e.target.value))}
         />
         <div className="YogaPositionEditorRow">
           <Input
             type="text"
-            value={value.left}
+            value={Number.isNaN(value.left) ? '' : value.left}
             disabled={disabled}
-            placeholder="0"
             onChange={e =>
               onChange(property, value.set('left', e.target.value))
             }
@@ -56,9 +54,8 @@ export default class YogaPositionEditor extends Component<Props> {
           {property.toUpperCase()}
           <Input
             type="text"
-            value={value.right}
+            value={Number.isNaN(value.right) ? '' : value.right}
             disabled={disabled}
-            placeholder="0"
             onChange={e =>
               onChange(property, value.set('right', e.target.value))
             }
@@ -66,9 +63,8 @@ export default class YogaPositionEditor extends Component<Props> {
         </div>
         <Input
           type="text"
-          value={value.bottom}
+          value={Number.isNaN(value.bottom) ? '' : value.bottom}
           disabled={disabled}
-          placeholder="0"
           onChange={e =>
             onChange(property, value.set('bottom', e.target.value))
           }