Enable UI shell to render all kinds of child elements

i-like-robots · i-like-robots · commit fa5bae89f132 · 2019-03-04T16:40:03.000Z
diff --git a/packages/anvil-ui-ft-shell/src/index.tsx b/packages/anvil-ui-ft-shell/src/index.tsx
@@ -11,6 +11,20 @@ interface Props extends TDocumentHeadProps {
   enhancedScriptsToLoad: string[]
 }
 
+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>
+  }
+}
+
 export default function Shell(props: Props) {
   const coreScripts = [corePolyfillServiceUrl, ...props.coreScriptsToLoad]
   const enhancedScripts = [enhancedPolyfillServiceUrl, ...props.enhancedScriptsToLoad]
@@ -32,7 +46,7 @@ export default function Shell(props: Props) {
         />
         <script dangerouslySetInnerHTML={{ __html: getBootstrapJS() }} />
       </head>
-      <body>{props.children}</body>
+      {renderComponent(props.children)}
     </html>
   )
 }
