preserve inline components in prop type doc gen

Summary:
Some of the operations, like `oneOf` and `arrayOf`, were doing joins on arrays of potential
tags, like `<span>` or `<a>`, which would stringify them to `[object Object]`.

This introduces a new `spanJoinMapper` which suppresses the trailing separator like `join` but wraps
elements in `<span>` rather than `concat`ing into a string.

Latest master is pretty broken:
{F66059444}

Nested `color` and some other props were broken even before https://github.com/facebook/react-native/commit/a7a3922b89d821b9a34d26bdcc7676e747a2716
{F66059446}

All fixed in this diff:
{F66059445}

Reviewed By: mkonicek

Differential Revision: D4670441

fbshipit-source-id: ddc10f13b3bdc6a1e799fa06a4e206f8dbd08769
This commit is contained in:
Spencer Ahrens 2017-03-07 17:58:15 -08:00 committed by Facebook Github Bot
parent b8e8b723d4
commit 7eded2d8ed
1 changed files with 16 additions and 4 deletions

View File

@ -34,7 +34,15 @@ function renderEnumValue(value) {
}
function renderType(type) {
return <code>{(type.nullable ? '?' : '') + renderBaseType(type)}</code>;
const baseType = renderBaseType(type);
return type.nullable ? <span>?{baseType}</span> : baseType;
}
function spanJoinMapper(elements, callback, separator) {
return <span>{elements.map((rawElement, ii) => {
const el = callback(rawElement);
return (ii + 1 < elements.length) ? <span>{el}{separator}</span> : el;
})}</span>;
}
function renderBaseType(type) {
@ -53,14 +61,18 @@ function renderBaseType(type) {
}
if (type.name === 'shape') {
return '{' + Object.keys(type.value).map((key => key + ': ' + renderType(type.value[key]))).join(', ') + '}';
return <span>{'{'}{spanJoinMapper(
Object.keys(type.value),
(key) => <span>{key + ': '}{renderType(type.value[key])}</span>,
', '
)}{'}'}</span>;
}
if (type.name === 'union') {
if (type.value) {
return type.value.map(renderType).join(', ');
return spanJoinMapper(type.value, renderType, ', ');
}
return type.elements.map(renderType).join(' | ');
return spanJoinMapper(type.elements, renderType, ' | ');
}
if (type.name === 'arrayOf') {