Function ArrayValue

packages/devtools-ui/src/components/tree.tsx:145–235

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

            />
          )
        }

        return <span />
      })()}
      {props.copyable && (
        <div class={clsx(styles().tree.actions, 'actions')}>
          <CopyButton value={props.value} />
        </div>
      )}
      {props.isLastKey || props.isRoot ? (
        ''
      ) : (
        <span data-tsd-syntax="punctuation">,</span>
      )}
    </span>
  )
}

const ArrayValue = (props: {
  value: Array<any>
  copyable?: boolean
  keyName?: string
  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),
  )

  if (props.value.length === 0) {
    return (
      <span class={styles().tree.expanderContainer}>
        {props.keyName && (
          <span
            data-tsd-syntax="property"
            class={clsx(styles().tree.valueKey, styles().tree.collapsible)}
          >
            &quot;{props.keyName}&quot;:{' '}
          </span>
        )}

        <span data-tsd-syntax="punctuation" class={styles().tree.valueBraces}>
          []
        </span>
      </span>
    )
  }
  return (
    <span class={styles().tree.expanderContainer}>
      <Expander
        onClick={() => setExpanded(!expanded())}
        expanded={expanded()}