index.tsx

import * as React from 'react'
import { isObject, isArray } from './utils'
import { connect, Connect } from '../../app'

import {
  Wrapper,
  Key,
  Bracket,
  StringValue,
  GenericValue,
  NestedChildren,
  InlineNested,
} from './elements'

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

class Nested extends React.Component<NestedProps> {
  hasMounted: boolean = false
  componentDidMount() {
    this.hasMounted = true
  }
  render() {
    const {
      keys,
      expandedPaths,
      path,
      onToggleExpand,
      startBracket,
      endBracket,
      children,
      isArray,
    } = this.props
    const shouldCollapse =
      (this.hasMounted && !expandedPaths.includes(path.join('.'))) ||
      (!this.hasMounted && !expandedPaths.includes(path.join('.')))

    if (shouldCollapse) {
      return (
        <InlineNested onClick={() => onToggleExpand(path)}>
          {path.length ? (
            <Key>{this.props.path[this.props.path.length - 1]}:</Key>
          ) : null}
          {startBracket} {isArray ? keys.length : keys.slice(0, 3).join(', ')}{' '}
          {endBracket}
        </InlineNested>
      )
    }

    return (
      <React.Fragment>
        <Bracket onClick={() => onToggleExpand(path)}>
          {path.length ? (
            <Key>{this.props.path[this.props.path.length - 1]}:</Key>
          ) : null}
          {startBracket}
        </Bracket>
        <NestedChildren>{children()}</NestedChildren>
        <Bracket>{endBracket}</Bracket>
      </React.Fragment>
    )
  }
}

const ConnectedNested = connect(Nested)

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

class ValueComponent extends React.Component<ValueComponentProps> {
  render() {
    if (typeof this.props.value === 'string') {
      return (
        <StringValue>
          {this.props.path.length ? (
            <Key>{this.props.path[this.props.path.length - 1]}:</Key>
          ) : null}{' '}
          "{this.props.value}"
        </StringValue>
      )
    }
    return (
      <GenericValue>
        {this.props.path.length ? (
          <Key>{this.props.path[this.props.path.length - 1]}:</Key>
        ) : null}{' '}
        {String(this.props.value)}
      </GenericValue>
    )
  }
}

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

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

class Inspector extends React.Component<InspectorProps> {
  renderValue(path: string[], value: any, renderPaths?: RenderPaths) {
    const wrapper = renderPaths && renderPaths[path.join('.')]
    let node

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

    return wrapper ? wrapper(node) : node
  }
  render() {
    return (
      <Wrapper small={this.props.small}>
        {this.renderValue([], this.props.value, this.props.renderPaths)}
      </Wrapper>
    )
  }
}

export default Inspector