Allow nesting subcomponents like Images inside of Tables, Details, et…

…c. (#308)

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} />
  }