From 0e5651fb8045acae9feed8e2799030570f9e71e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20B=C3=BCchele?= Date: Fri, 16 Feb 2018 03:55:52 -0800 Subject: [PATCH] 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 --- .../components/Playground/CodeComponentKit.js | 14 +++- .../src/components/Playground/CodeLitho.js | 79 +++++++++++++++---- .../components/Playground/CodeReactNative.js | 32 +++++--- 3 files changed, 97 insertions(+), 28 deletions(-) diff --git a/website/src/components/Playground/CodeComponentKit.js b/website/src/components/Playground/CodeComponentKit.js index 34487cc0..fea711af 100644 --- a/website/src/components/Playground/CodeComponentKit.js +++ b/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])},`); } }); diff --git a/website/src/components/Playground/CodeLitho.js b/website/src/components/Playground/CodeLitho.js index 695a14d1..c9e43679 100644 --- a/website/src/components/Playground/CodeLitho.js +++ b/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.${key}Dip(YogaEdge.ALL, ${node[key].top})`), + ? `\t\t\t.width${dipOrPercent( + 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.${key}Dip(YogaEdge.VERTICAL, ${node[key].top})`), + ? `\t\t\t.width${dipOrPercent( + 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.${key}Dip(YogaEdge.HORIZONTAL, ${node[key].left})`), + ? `\t\t\t.width${dipOrPercent( + 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()}, ${ - node.border[pKey] - })` - : `\t.${key}Dip(YogaEdge.${pKey.toUpperCase()}, ${ - node[key][pKey] - })`), + ? `\t\t\t.width${dipOrPercent( + node.border[pKey], + )}(YogaEdge.${pKey.toUpperCase()}${getValue( + node.border[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])})`); + } } }); diff --git a/website/src/components/Playground/CodeReactNative.js b/website/src/components/Playground/CodeReactNative.js index b96517c0..b6f42215 100644 --- a/website/src/components/Playground/CodeReactNative.js +++ b/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 untouchedPosition = PositionRecord({}); + const untouchedLayout = LayoutRecord(); + const untouchedPosition = PositionRecord(); lines.push(indent + ' { @@ -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)}: ${ - node[key][pKey] - },`, + ` ${key}${pKey[0].toUpperCase()}${pKey.substr(1)}: ${getValue( + 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])},`); } });