function getLayoutCode()

in website/src/components/Playground/src/CodeComponentKit.js [84:156]


function getLayoutCode(
  node: LayoutRecordT,
  indent: string = '',
  isRoot?: boolean,
): string {
  const lines = [];
  const isFlexbox = node.children.size > 0;

  lines.push(
    indent +
      `${isRoot ? '' : `.component = \n${indent}`}[${
        isFlexbox ? 'CKFlexboxComponent' : 'CKComponent'
      }`,
  );
  lines.push(indent + ` newWithView:{}`);
  lines.push(indent + ` size:{${getValue(node.width)},${getValue(node.height)}}`);

  const CKFlexboxComponentStyle = [
    'direction',
    'margin',
    'justifyContent',
    'alignItems',
    'alignContent',
    'wrap',
    'padding',
    'border',
  ];
  const CKFlexboxComponentChild = [
    'margin',
    'padding',
    'flexGrow',
    'flexShrink',
    'flexBasis',
    'alignSelf',
    'position',
  ];

  if (isFlexbox) {
    // render styles
    lines.push(indent + ` style:{`);
    indent += '\t';
    CKFlexboxComponentStyle.forEach(key => {
      let line = renderKey(node, key, indent);
      if (line) {
        lines.push(line);
      }
    });
    indent = indent.substr(-1);
    lines.push(indent + ` }`);

    // render children
    lines.push(indent + ' children:{');
    lines.push(
      ...node.children
        .toJSON()
        .map(
          child =>
            `${indent}\t{\n${getLayoutCode(
              child,
              indent + '\t\t',
            )}\n${indent}\t},`,
        ),
    );
    lines.push(indent + `}]${isRoot ? ';' : ','}`);
  } else {
    lines[lines.length - 1] += '],';
    CKFlexboxComponentChild.forEach(key => {
      let line = renderKey(node, key, indent);
      if (line) {
        lines.push(line);
      }
    });
  }