Function ObjectValue

packages/devtools-ui/src/components/tree.tsx:237–352

(props: {
  value: Record<string, any>
  keyName?: string
  copyable?: boolean
  defaultExpansionDepth: number
  depth: number
  collapsePaths?: Array<string>
  path: string
  config?: { dateFormat?: string }
})

}

const ObjectValue = (props: {
  value: Record<string, any>
  keyName?: string
  copyable?: boolean
  defaultExpansionDepth: number
  depth: number
  collapsePaths?: Array<string>
  path: string
  config?: { dateFormat?: string }
}) => {
  const styles = createStyles()

  const [expanded, setExpanded] = createSignal(
    props.depth <= props.defaultExpansionDepth &&
      !props.collapsePaths?.includes(props.path),
  )

  const keys = Object.keys(props.value)
  const lastKeyName = keys[keys.length - 1]

  if (props.value instanceof Date) {
    return (
      <span class={styles().tree.expanderContainer}>
        {props.keyName && (
          <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>
            &quot;{props.keyName}&quot;:{' '}
          </span>
        )}

        <span class={styles().tree.valueBraces}>
          {dayjs(props.value).format(
            props.config?.dateFormat ? props.config.dateFormat : 'DDMMMYY',
          )}
        </span>
      </span>
    )
  }

  if (keys.length === 0) {
    return (
      <span class={styles().tree.expanderContainer}>
        {props.keyName && (
          <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>
            &quot;{props.keyName}&quot;:{' '}
          </span>
        )}

        <span class={styles().tree.valueBraces}>{'{}'}</span>
      </span>
    )
  }

  return (
    <span class={styles().tree.expanderContainer}>
      {props.keyName && (
        <Expander
          onClick={() => setExpanded(!expanded())}
          expanded={expanded()}