customising value display

demo/src/App.tsx

@@ -8,12 +8,14 @@ export default function App() {
   )
 }
 
-const customRender: CustomRender = () => {
-  // const { type } = props
-  // if (type == 'Modal') {
-  //   return () => <span style={{ color: 'blue' }}>modal</span>
-  // }
-  return null
+const customRender: CustomRender = (props) => {
+  const { type } = props
+  if (type == 'DisplayPrimitive') {
+    const { value } = props
+    if (typeof value == 'boolean') {
+      return () => <>{value ? '👍' : '👎'}</>
+    }
+  }
 }
 
 const bootstrapClassName: ClassNameGenerator = (props) => {

demo/src/FastUI/components/Json.tsx

@@ -0,0 +1,22 @@
+import {FC} from 'react'
+
+export type JSON = string | number | boolean | null | JSON[] | { [key: string]: JSON }
+
+export interface JsonProps {
+  value: JSON
+  type: 'JSON'
+}
+
+export const JsonComp: FC<JsonProps> = ({ value }) => {
+  // if the value is a string, we assume it's already JSON, and parse it
+  if (typeof value === 'string') {
+    value = JSON.parse(value)
+  }
+  return (
+    <div className="code-block">
+      <pre>
+        <code>{JSON.stringify(value, null, 2)}</code>
+      </pre>
+    </div>
+  )
+}

demo/src/FastUI/components/display.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react'
-
-export type JSON = string | number | boolean | null | JSON[] | { [key: string]: JSON }
+import {JsonComp, JSON} from './Json'
+import {useCustomRender} from '../hooks/customRender'
 
 // eslint-disable-next-line react-refresh/only-export-components
 export enum DisplayChoices {
@@ -15,21 +15,95 @@ export enum DisplayChoices {
   inline_code = 'inline_code',
 }
 
-export interface DisplayProps {
+interface DisplayProps {
   display?: DisplayChoices
   value?: JSON
+  type: 'Display'
 }
 
-export const DisplayComp: FC<DisplayProps> = ({ value, display }) => {
-  display = display ?? DisplayChoices.auto
-  value = value ?? null
+export type AllDisplayProps = DisplayProps | DisplayArrayProps | DisplayObjectProps | DisplayPrimitiveProps
+
+export const DisplayComp: FC<DisplayProps> = (props) => {
+  const CustomRenderComp = useCustomRender(props)
+  if (CustomRenderComp) {
+    return <CustomRenderComp />
+  }
+
+  const display = props.display ?? DisplayChoices.auto
+  const value = props.value ?? null
   if (display == DisplayChoices.json) {
-    return <DisplayJsonComp value={value} />
+    return <JsonComp type="JSON" value={value} />
   } else if (Array.isArray(value)) {
-    return <DisplayArray display={display} value={value} />
+    return <DisplayArray type="DisplayArray" display={display} value={value} />
   } else if (typeof value === 'object' && value !== null) {
-    return <DisplayObject display={display} value={value} />
+    return <DisplayObject type="DisplayObject" display={display} value={value} />
+  } else {
+    return <DisplayPrimitive type="DisplayPrimitive" display={display} value={value} />
+  }
+}
+
+interface DisplayArrayProps {
+  value: JSON[]
+  display?: DisplayChoices
+  type: 'DisplayArray'
+}
+
+export const DisplayArray: FC<DisplayArrayProps> = (props) => {
+  const CustomRenderComp = useCustomRender(props)
+  if (CustomRenderComp) {
+    return <CustomRenderComp />
+  }
+  const { display, value } = props
+
+  return (
+    <>
+      {value.map((v, i) => (
+        <span key={i}>
+          <DisplayComp type="Display" display={display} value={v} />,{' '}
+        </span>
+      ))}
+    </>
+  )
+}
+
+interface DisplayObjectProps {
+  value: { [key: string]: JSON }
+  display?: DisplayChoices
+  type: 'DisplayObject'
+}
+
+export const DisplayObject: FC<DisplayObjectProps> = (props) => {
+  const CustomRenderComp = useCustomRender(props)
+  if (CustomRenderComp) {
+    return <CustomRenderComp />
   }
+  const { display, value } = props
+
+  return (
+    <>
+      {Object.entries(value).map(([key, v], i) => (
+        <span key={key}>
+          {key}: <DisplayComp type="Display" display={display} key={i} value={v} />,{' '}
+        </span>
+      ))}
+    </>
+  )
+}
+
+type JSONPrimitive = string | number | boolean | null
+
+interface DisplayPrimitiveProps {
+  value: JSONPrimitive
+  display: DisplayChoices
+  type: 'DisplayPrimitive'
+}
+
+export const DisplayPrimitive: FC<DisplayPrimitiveProps> = (props) => {
+  const CustomRenderComp = useCustomRender(props)
+  if (CustomRenderComp) {
+    return <CustomRenderComp />
+  }
+  const { display, value } = props
 
   switch (display) {
     case DisplayChoices.auto:
@@ -51,42 +125,6 @@ export const DisplayComp: FC<DisplayProps> = ({ value, display }) => {
   }
 }
 
-const DisplayJsonComp: FC<{ value: JSON }> = ({ value }) => {
-  // if the value is a string, we assume it's already JSON, and parse it
-  if (typeof value === 'string') {
-    value = JSON.parse(value)
-  }
-  return (
-    <div className="code-block">
-      <pre>
-        <code>{JSON.stringify(value, null, 2)}</code>
-      </pre>
-    </div>
-  )
-}
-
-const DisplayArray: FC<{ display?: DisplayChoices; value: JSON[] }> = ({ display, value }) => (
-  <>
-    {value.map((v, i) => (
-      <span key={i}>
-        <DisplayComp display={display} value={v} />,{' '}
-      </span>
-    ))}
-  </>
-)
-
-const DisplayObject: FC<{ display?: DisplayChoices; value: { [key: string]: JSON } }> = ({ display, value }) => (
-  <>
-    {Object.entries(value).map(([key, v], i) => (
-      <span key={key}>
-        {key}: <DisplayComp display={display} key={i} value={v} />,{' '}
-      </span>
-    ))}
-  </>
-)
-
-type JSONPrimitive = string | number | boolean | null
-
 const DisplayNull: FC = () => {
   return <span className="fu-null">&mdash;</span>
 }
@@ -144,7 +182,7 @@ const DisplayDuration: FC<{ value: JSONPrimitive }> = ({ value }) => {
 
 // usage as_title('what_ever') > 'What Ever'
 // eslint-disable-next-line react-refresh/only-export-components
-export const as_title = (s: string): string => s.replace(/(_|-)/g, ' ').replace(/(_|\b)\w/g, (l) => l.toUpperCase())
+export const as_title = (s: string): string => s.replace(/[_-]/g, ' ').replace(/(_|\b)\w/g, (l) => l.toUpperCase())
 
 const DisplayAsTitle: FC<{ value: JSONPrimitive }> = ({ value }) => {
   if (value === null) {

demo/src/FastUI/components/index.tsx

@@ -9,6 +9,8 @@ import { ButtonComp, ButtonProps } from './button'
 import { LinkComp, LinkProps } from './link'
 import { ModalComp, ModalProps } from './modal'
 import { TableComp, TableProps } from './table'
+import {AllDisplayProps, DisplayArray, DisplayComp, DisplayObject, DisplayPrimitive} from './display'
+import {JsonComp, JsonProps} from './Json'
 
 export type FastProps =
   | TextProps
@@ -19,6 +21,8 @@ export type FastProps =
   | ModalProps
   | TableProps
   | LinkProps
+  | AllDisplayProps
+  | JsonProps
 
 export const AnyComp: FC<FastProps> = (props) => {
   const { DisplayError } = useContext(ErrorContext)
@@ -50,6 +54,16 @@ export const AnyComp: FC<FastProps> = (props) => {
         return <ModalComp {...props} />
       case 'Table':
         return <TableComp {...props} />
+      case 'Display':
+        return <DisplayComp {...props} />
+      case 'DisplayArray':
+        return <DisplayArray {...props} />
+      case 'DisplayObject':
+        return <DisplayObject {...props} />
+      case 'DisplayPrimitive':
+        return <DisplayPrimitive {...props} />
+      case 'JSON':
+        return <JsonComp {...props} />
       default:
         console.log('unknown component type:', type, props)
         return <DisplayError title="Invalid Server Response" description={`Unknown component type: "${type}"`} />

demo/src/FastUI/components/table.tsx

@@ -1,9 +1,9 @@
 import { FC } from 'react'
 import { ClassName, useClassNameGenerator } from '../hooks/className'
 import { PageEvent, GoToEvent } from '../hooks/event'
-import {as_title, DisplayChoices, DisplayComp} from './display'
+import {as_title, DisplayChoices, DisplayComp } from './display'
 import { LinkRender } from './link'
-import type { JSON } from './display'
+import type { JSON } from './Json'
 
 interface ColumnProps {
   field: string
@@ -72,14 +72,14 @@ const Cell: FC<CellProps> = ({ row, column }) => {
     return (
       <td>
         <LinkRender onClick={event}>
-          <DisplayComp display={display} value={value} />
+          <DisplayComp type="Display" display={display} value={value} />
         </LinkRender>
       </td>
     )
   } else {
     return (
       <td>
-        <DisplayComp display={display} value={value} />
+        <DisplayComp type="Display" display={display} value={value} />
       </td>
     )
   }

demo/src/FastUI/hooks/customRender.ts

@@ -1,16 +1,14 @@
 import { createContext, FC, useContext } from 'react'
 import { FastProps } from '../components'
 
-export type CustomRender = (props: FastProps) => FC | null
+export type CustomRender = (props: FastProps) => FC | void
 
 export const CustomRenderContext = createContext<CustomRender | null>(null)
 
-export const useCustomRender = (props: FastProps): FC | null => {
+export const useCustomRender = (props: FastProps): FC | void => {
   const customRender = useContext(CustomRenderContext)
 
   if (customRender) {
     return customRender(props)
-  } else {
-    return null
   }
 }

demo/src/FastUI/index.tsx

@@ -5,8 +5,9 @@ import { ClassNameContext, ClassNameGenerator } from './hooks/className'
 import { ErrorContextProvider, ErrorDisplayType } from './hooks/error'
 import { CustomRender, CustomRenderContext } from './hooks/customRender'
 import { FastProps } from './components'
+import { DisplayChoices } from './components/display'
 
-export type { ClassNameGenerator, CustomRender, ErrorDisplayType, FastProps }
+export type { ClassNameGenerator, CustomRender, ErrorDisplayType, FastProps, DisplayChoices }
 
 export interface FastUIProps {
   rootUrl: string