DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

Relative values in code generators

Browse Source 
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
This commit is contained in:
Daniel Büchele
2018-02-16 03:55:52 -08:00
committed by Facebook Github Bot
parent 0ca44f3001
commit 0e5651fb80
3 changed files with 97 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
website/src/components/Playground/CodeComponentKit.js
View File

@@ -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])},`);
}
});

79
website/src/components/Playground/CodeLitho.js
View File

@@ -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])})`);
}
}
});

32
website/src/components/Playground/CodeReactNative.js
View File

@@ -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 + '<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)}: ${
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])},`);
}
});