index.tsx

import { createElement, SFC } from 'react'
import { isObject, isArray } from './utils'
import * as styles from './styles'
import { css } from 'emotion'

type NestedProps = {
  startBracket: string
  endBracket: string
  expandedPaths: string[]
  path: string[]
  keys: string[]
  isArray: boolean
  children: () => React.ReactNode
  onToggleExpand: (path: string[]) => void
}

const Nested: SFC<NestedProps> = ({
  keys,
  expandedPaths,
  path,
  onToggleExpand,
  startBracket,
  endBracket,
  children,
  isArray,
}) => {
  const shouldCollapse = !expandedPaths.includes(path.join('.'))

  if (shouldCollapse) {
    return (
      <div
        className={styles.inlineNested}
        onClick={(event) => {
          event.stopPropagation()
          onToggleExpand(path)
        }}
      >
        {path.length ? (
          <span className={styles.key}>{path[path.length - 1]}:</span>
        ) : null}
        {startBracket}
        <span className={styles.keyCount}>
          {isArray
            ? keys.length + ' items'
            : keys.slice(0, 3).join(', ') + '...'}
        </span>
        {endBracket}
      </div>
    )
  }

  return (
    <div>
      <div
        className={styles.bracket(true)}
        onClick={(event) => {
          event.stopPropagation()
          onToggleExpand(path)
        }}
      >
        {path.length ? (
          <span className={styles.key}>{path[path.length - 1]}:</span>
        ) : null}
        {startBracket}
      </div>
      <div className={styles.nestedChildren}>{children()}</div>
      <div className={styles.bracket(false)}>{endBracket}</div>
    </div>
  )
}

type ValueComponentProps = {
  value: string | number | boolean
  path: string[]
}

const ValueComponent: SFC<ValueComponentProps> = ({ value, path }) => {
  if (typeof value === 'string') {
    return (
      <div className={styles.stringValue}>
        {path.length ? (
          <span className={styles.key}>{path[path.length - 1]}:</span>
        ) : null}{' '}
        "{value}"
      </div>
    )
  }
  return (
    <div className={styles.genericValue}>
      {path.length ? (
        <span className={styles.key}>{path[path.length - 1]}:</span>
      ) : null}{' '}
      {String(value)}
    </div>
  )
}

export type RenderPaths = {
  [path: string]: (children: React.ReactChildren) => React.ReactNode
}

type InspectorProps = {
  value: object
  expandedPaths: string[]
  small?: boolean
  onToggleExpand: (path: string[]) => void
  renderPaths?: RenderPaths
}

const Inspector: SFC<InspectorProps> = ({
  value,
  expandedPaths,
  small,
  onToggleExpand,
  renderPaths,
}) => {
  function renderValue(path: string[], value: any, renderPaths?: RenderPaths) {
    const wrapper = renderPaths && renderPaths[path.join('.')]
    let node

    if (isObject(value)) {
      node = (
        <Nested
          key={path.join('.')}
          startBracket="{"
          endBracket="}"
          path={path}
          expandedPaths={expandedPaths}
          onToggleExpand={onToggleExpand}
          keys={Object.keys(value)}
          isArray={false}
        >
          {() =>
            Object.keys(value).map((key) =>
              renderValue(path.concat(key), value[key], renderPaths)
            )
          }
        </Nested>
      )
    } else if (isArray(value)) {
      node = (
        <Nested
          key={path.join('.')}
          startBracket="["
          endBracket="]"
          path={path}
          expandedPaths={expandedPaths}
          onToggleExpand={onToggleExpand}
          keys={Object.keys(value)}
          isArray
        >
          {() =>
            value.map((_, index) =>
              renderValue(path.concat(index), value[index], renderPaths)
            )
          }
        </Nested>
      )
    } else {
      node = <ValueComponent key={path.join('.')} path={path} value={value} />
    }

    return wrapper ? wrapper(node) : node
  }

  return (
    <div className={css(small ? styles.smallWrapper : styles.wrapper)}>
      {renderValue([], value, renderPaths)}
    </div>
  )
}

export default Inspector