From 7eded2d8edb2ec25d672fd865feff2634b65e933 Mon Sep 17 00:00:00 2001
From: Spencer Ahrens <sahrens@fb.com>
Date: Tue, 7 Mar 2017 17:58:15 -0800
Subject: [PATCH] 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
---
 website/layout/AutodocsLayout.js | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/website/layout/AutodocsLayout.js b/website/layout/AutodocsLayout.js
index 2d1208648..39a66eca2 100644
--- a/website/layout/AutodocsLayout.js
+++ b/website/layout/AutodocsLayout.js
@@ -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') {