redux-saga-devtools/src/components/TreeView/TreeView.js

Monitor and UI for redux-saga

import PropTypes from 'prop-types';
import React from 'react';
import styled from 'styled-components'

const TreeViewChildren = styled.div`
  padding-left: 10px;
  margin-bottom: 10px;
`


class TreeView extends React.Component {

  state = { collapsed: this.props.defaultCollapsed }

  toggleCollapsed = () => {
    this.setState(state => {
      return { collapsed: !state.collapsed }
    })
  }

  render() {
    const {
      collapsed = this.state.collapsed,
      renderLabel,
      children
    } = this.props;

    let treeViewChildren
    if(children) {
      const childrenStyle = collapsed ?  {display: 'none'} : null
      treeViewChildren = (
        <TreeViewChildren style={childrenStyle} >
          {typeof children === 'function'
            ? (collapsed ? null : children(collapsed))
            : children
          }
        </TreeViewChildren>
      )
    }

    return (
      <div>
        <div>
          {renderLabel(this.toggleCollapsed, collapsed)}
        </div>
        {treeViewChildren}
      </div>
    )
  }
}

TreeView.propTypes = {
  collapsed: PropTypes.bool,
  defaultCollapsed: PropTypes.bool,
  renderLabel: PropTypes.func.isRequired,
}

export default TreeView;