Function JsonValue

packages/devtools-ui/src/components/tree.tsx:37–143

(props: {
  value: any
  keyName?: string
  isRoot?: boolean
  isLastKey?: boolean
  copyable?: boolean

  defaultExpansionDepth: number
  depth: number

  collapsePaths?: Array<string>
  path: string

  config?: { dateFormat?: string }
})

}

function JsonValue(props: {
  value: any
  keyName?: string
  isRoot?: boolean
  isLastKey?: boolean
  copyable?: boolean

  defaultExpansionDepth: number
  depth: number

  collapsePaths?: Array<string>
  path: string

  config?: { dateFormat?: string }
}) {
  const styles = createStyles()

  return (
    <span class={styles().tree.valueContainer(props.isRoot ?? false)}>
      {props.keyName &&
        typeof props.value !== 'object' &&
        !Array.isArray(props.value) && (
          <span class={styles().tree.valueKey}>
            &quot;{props.keyName}&quot;:{' '}
          </span>
        )}

      {(() => {
        if (typeof props.value === 'string') {
          return (
            <span class={styles().tree.valueString}>
              &quot;{props.value}&quot;
            </span>
          )
        }

        if (typeof props.value === 'number') {
          return (
            <span class={styles().tree.valueNumber}>{String(props.value)}</span>
          )
        }

        if (typeof props.value === 'boolean') {
          return (
            <span class={styles().tree.valueBoolean}>
              {String(props.value)}
            </span>
          )
        }

        if (props.value === null) {
          return <span class={styles().tree.valueNull}>null</span>
        }

        if (props.value === undefined) {
          return <span class={styles().tree.valueNull}>undefined</span>
        }