Enable UI shell to render all kinds of child elements

i-like-robots · i-like-robots · commit 53c91078fa65 · 2019-03-04T17:31:06.000Z
diff --git a/packages/anvil-ui-ft-shell/src/components/DocumentHead/index.tsx b/packages/anvil-ui-ft-shell/src/components/DocumentHead/index.tsx
@@ -76,7 +76,7 @@ DocumentHead.defaultProps = {
   jsonLd: [],
   robots: 'index,follow',
   siteTitle: 'Financial Times',
-  twitterSite: '@FinancialTimes',
+  twitterSite: '@FinancialTimes'
 }
 
 export default DocumentHead
diff --git a/packages/anvil-ui-ft-shell/src/index.tsx b/packages/anvil-ui-ft-shell/src/index.tsx
@@ -32,7 +32,21 @@ export default function Shell(props: Props) {
         />
         <script dangerouslySetInnerHTML={{ __html: getBootstrapJS() }} />
       </head>
-      <body>{props.children}</body>
+      {renderComponent(props.children)}
     </html>
   )
 }
+
+function renderComponent(Component) {
+  if (typeof Component === 'string') {
+    return <body dangerouslySetInnerHTML={{ __html: Component }} />
+  } else if (typeof Component === 'function') {
+    return (
+      <body>
+        <Component />
+      </body>
+    )
+  } else {
+    return <body>{Component}</body>
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -76,7 +76,7 @@ DocumentHead.defaultProps = {`
`76`	`76`	`jsonLd: [],`
`77`	`77`	`robots: 'index,follow',`
`78`	`78`	`siteTitle: 'Financial Times',`
`79`		`- twitterSite: '@FinancialTimes',`
	`79`	`+ twitterSite: '@FinancialTimes'`
`80`	`80`	`}`
`81`	`81`
`82`	`82`	`export default DocumentHead`