Allow nesting subcomponents like Images inside of Tables, Details, etc. (#308)

Author: jimkring

src/npm-fastui/src/components/display.tsx

@@ -1,10 +1,12 @@
 import { FC } from 'react'
 
-import type { AnyEvent, DisplayMode, Display, JsonData } from '../models'
+import type { AnyEvent, DisplayMode, Display, JsonData, FastProps } from '../models'
 
 import { useCustomRender } from '../hooks/config'
 import { unreachable, asTitle } from '../tools'
 
+import { AnyComp } from '.'
+
 import { JsonComp } from './Json'
 import { LinkRender } from './link'
 
@@ -26,6 +28,28 @@ export const DisplayComp: FC<Display> = (props) => {
   }
 }
 
+// todo: this list should probably be defined in the models file
+const nestableSubcomponents = [
+  'Text',
+  'Paragraph',
+  'Div',
+  'Heading',
+  'Markdown',
+  'Code',
+  'Json',
+  'Button',
+  'Link',
+  'LinkList',
+  'ServerLoad',
+  'Image',
+  'Iframe',
+  'Video',
+  'Spinner',
+  'Custom',
+  'Table',
+  'Details',
+]
+
 const DisplayRender: FC<Display> = (props) => {
   const mode = props.mode ?? 'auto'
   const value = props.value ?? null
@@ -34,7 +58,11 @@ const DisplayRender: FC<Display> = (props) => {
   } else if (Array.isArray(value)) {
     return <DisplayArray mode={mode} value={value} />
   } else if (typeof value === 'object' && value !== null) {
-    return <DisplayObject mode={mode} value={value} />
+    if (value.type !== null && typeof value.type === 'string' && nestableSubcomponents.includes(value.type)) {
+      return <AnyComp {...(value as unknown as FastProps)} />
+    } else {
+      return <DisplayObject mode={mode} value={value} />
+    }
   } else {
     return <DisplayPrimitive mode={mode} value={value} />
   }