Relative values in code generators

Summary: Code generators now can handle percentage and auto values as well as numeric values (DIP)

Reviewed By: emilsjolander

Differential Revision: D7009344

fbshipit-source-id: 64ddcb61a2dce01e68e38a16e4d5865d8e4c6d5b

website/src/components/Playground/CodeComponentKit.js

@@ -64,6 +64,16 @@ function keyLookup(key: string): string {
   return keyLookup[key] || key;
 }
 
+function getValue(value) {
+  if (typeof value === 'string' && /%$/.test(value)) {
+    return `CKRelativeDimension::Percent(${parseFloat(value)})`;
+  } else if (value === 'auto') {
+    return 'CKRelativeDimension::Auto()';
+  } else {
+    return String(parseFloat(value));
+  }
+}
+
 function getLayoutCode(
   node: LayoutRecordT,
   indent: string = '',
@@ -79,7 +89,7 @@ function getLayoutCode(
       }`,
   );
   lines.push(indent + ` newWithView:{}`);
-  lines.push(indent + ` size:{${node.width},${node.height}}`);
+  lines.push(indent + ` size:{${getValue(node.width)},${getValue(node.height)}}`);
 
   const CKFlexboxComponentStyle = [
     'direction',
@@ -157,7 +167,7 @@ function renderKey(node: Yoga$Node, key: string, indent: string): ?string {
 
     ['top', 'left', 'right', 'bottom'].forEach(pKey => {
       if (node[key][pKey]) {
-        lines.push(indent + `\t.${pKey} = ${node[key][pKey]},`);
+        lines.push(indent + `\t.${pKey} = ${getValue(node[key][pKey])},`);
       }
     });
 

website/src/components/Playground/CodeLitho.js

@@ -44,6 +44,17 @@ function getEnum(yogaEnum: string, value: string | number): string {
   }
 }
 
+function dipOrPercent(value) {
+  console.log(value);
+  return value === 'auto'
+    ? 'Auto'
+    : typeof value === 'string' && /%$/.test(value) ? 'Percent' : 'Dip';
+}
+
+function getValue(value) {
+  return value === 'auto' ? '' : `, ${parseFloat(value)}`;
+}
+
 function getLayoutCode(
   node: LayoutRecordT,
   indent: string = '',
@@ -73,7 +84,7 @@ function getLayoutCode(
         ),
     );
   }
-  const untouchedLayout = LayoutRecord({width: '', height: ''});
+  const untouchedLayout = LayoutRecord();
   const untouchedPosition = PositionRecord({});
   Object.keys(node.toJSON()).forEach(key => {
     if (
@@ -95,8 +106,12 @@ function getLayoutCode(
         lines.push(
           indent +
             (key === 'border'
-              ? `\t\t\t.widthDip(YogaEdge.ALL, ${node[key].top})`
+              ? `\t\t\t.width${dipOrPercent(
-              : `\t.${key}Dip(YogaEdge.ALL, ${node[key].top})`),
+                  node[key].top,
+                )}(YogaEdge.ALL${getValue(node[key].top)})`
+              : `\t.${key}${dipOrPercent(node[key].top)}(YogaEdge.ALL${getValue(
+                  node[key].top,
+                )})`),
         );
         return;
       }
@@ -105,8 +120,12 @@ function getLayoutCode(
         lines.push(
           indent +
             (key === 'border'
-              ? `\t\t\t.widthDip(YogaEdge.VERTICAL, ${node[key].top})`
+              ? `\t\t\t.width${dipOrPercent(
-              : `\t.${key}Dip(YogaEdge.VERTICAL, ${node[key].top})`),
+                  node[key].top,
+                )}(YogaEdge.VERTICAL${getValue(node[key].top)})`
+              : `\t.${key}${dipOrPercent(
+                  node[key].top,
+                )}(YogaEdge.VERTICAL${getValue(node[key].top)})`),
         );
         alreadySet.push('top', 'bottom');
       }
@@ -114,25 +133,34 @@ function getLayoutCode(
         lines.push(
           indent +
             (key === 'border'
-              ? `\t\t\t.widthDip(YogaEdge.HORIZONTAL, ${node[key].left})`
+              ? `\t\t\t.width${dipOrPercent(
-              : `\t.${key}Dip(YogaEdge.HORIZONTAL, ${node[key].left})`),
+                  node[key].left,
+                )}(YogaEdge.HORIZONTAL${getValue(node[key].left)})`
+              : `\t.${key}${dipOrPercent(
+                  node[key].left,
+                )}(YogaEdge.HORIZONTAL${getValue(node[key].left)})`),
         );
         alreadySet.push('left', 'right');
       }
       ['left', 'top', 'right', 'bottom'].forEach((pKey, i) => {
         if (
           node[key][pKey] !== untouchedPosition[pKey] &&
-          alreadySet.indexOf(pKey) === -1
+          alreadySet.indexOf(pKey) === -1 &&
+          node[key][pKey]
         ) {
           lines.push(
             indent +
               (key === 'border'
-                ? `\t\t\t.widthDip(YogaEdge.${pKey.toUpperCase()}, ${
+                ? `\t\t\t.width${dipOrPercent(
-                    node.border[pKey]
+                    node.border[pKey],
-                  })`
+                  )}(YogaEdge.${pKey.toUpperCase()}${getValue(
-                : `\t.${key}Dip(YogaEdge.${pKey.toUpperCase()}, ${
+                    node.border[pKey],
-                    node[key][pKey]
+                  )})`
-                  })`),
+                : `\t.${key}${dipOrPercent(
+                    node[key][pKey],
+                  )}(YogaEdge.${pKey.toUpperCase()}${getValue(
+                    node[key][pKey],
+                  )})`),
           );
         }
       });
@@ -146,9 +174,28 @@ function getLayoutCode(
     } else if (
       key !== 'children' &&
       key !== 'flexDirection' &&
-      node[key] !== untouchedLayout[key]
+      node[key] !== untouchedLayout[key] &&
+      node[key]
     ) {
-      lines.push(indent + `\t.${key}(${getEnum(key, node[key])})`);
+      if (node[key] === 'auto') {
+        lines.push(indent + `\t.${key}Auto(${getEnum(key, node[key])})`);
+      } else if (typeof node[key] === 'string' && /%$/.test(node[key])) {
+        lines.push(indent + `\t.${key}Percent(${parseFloat(node[key])})`);
+      } else if (
+        [
+          'width',
+          'height',
+          'minHeight',
+          'maxHeight',
+          'minWidth',
+          'maxWidth',
+          'flexBasis',
+        ].indexOf(key) > -1
+      ) {
+        lines.push(indent + `\t.${key}Dip(${getEnum(key, node[key])})`);
+      } else {
+        lines.push(indent + `\t.${key}(${getEnum(key, node[key])})`);
+      }
     }
   });
 

website/src/components/Playground/CodeReactNative.js

@@ -17,6 +17,12 @@ import {JSEnumLookup} from './CodeJavaScript';
 import type {LayoutRecordT} from './LayoutRecord';
 import type {Yoga$Direction} from 'yoga-layout';
 
+function getValue(value) {
+  return typeof value === 'number' || /^\d+$/.test(value)
+    ? String(value)
+    : `'${value}'`;
+}
+
 function getEnum(yogaEnum: string, value: string | number): string {
   const enumValue = Object.keys(yoga)
     .filter(
@@ -33,13 +39,13 @@ function getEnum(yogaEnum: string, value: string | number): string {
           .replace('_', '-')
           .toLowerCase() +
         "'"
-    : String(value);
+    : getValue(value);
 }
 
 function getLayoutCode(node: LayoutRecordT, indent: string = ''): string {
   const lines = [];
-  const untouchedLayout = LayoutRecord({width: '', height: ''});
+  const untouchedLayout = LayoutRecord();
-  const untouchedPosition = PositionRecord({});
+  const untouchedPosition = PositionRecord();
   lines.push(indent + '<View style={{');
   lines.push(indent + '  flex: 1,');
   Object.keys(node.toJSON()).forEach(key => {
@@ -51,7 +57,9 @@ function getLayoutCode(node: LayoutRecordT, indent: string = ''): string {
         ) {
           lines.push(
             indent +
-              `  border${pKey}Width: ${node.border[pKey.toLowerCase()]},`,
+              `  border${pKey}Width: ${getValue(
+                node.border[pKey.toLowerCase()],
+              )},`,
           );
         }
       });
@@ -72,11 +80,11 @@ function getLayoutCode(node: LayoutRecordT, indent: string = ''): string {
       }
       const alreadySet = [];
       if (top !== untouchedPosition.top && top === bottom) {
-        lines.push(indent + `  ${key}Vertical: ${node[key].top},`);
+        lines.push(indent + `  ${key}Vertical: ${getValue(node[key].top)},`);
         alreadySet.push('top', 'bottom');
       }
       if (left !== untouchedPosition.left && left === right) {
-        lines.push(indent + `  ${key}Horizontal: ${node[key].left},`);
+        lines.push(indent + `  ${key}Horizontal: ${getValue(node[key].left)},`);
         alreadySet.push('left', 'right');
       }
       ['left', 'top', 'right', 'bottom'].forEach((pKey, i) => {
@@ -86,13 +94,17 @@ function getLayoutCode(node: LayoutRecordT, indent: string = ''): string {
         ) {
           lines.push(
             indent +
-              `  ${key}${pKey[0].toUpperCase()}${pKey.substr(1)}: ${
+              `  ${key}${pKey[0].toUpperCase()}${pKey.substr(1)}: ${getValue(
-                node[key][pKey]
+                node[key][pKey],
-              },`,
+              )},`,
           );
         }
       });
-    } else if (key !== 'children' && node[key] !== untouchedLayout[key]) {
+    } else if (
+      key !== 'children' &&
+      node[key] !== untouchedLayout[key] &&
+      node[key]
+    ) {
       lines.push(indent + `  ${key}: ${getEnum(key, node[key])},`);
     }
   });