sourcecred/explorer/src/FileExplorer.js

// @flow
import React, { Component } from 'react';
import {buildTree} from './commitUtils';
import type {CommitData, FileTree} from './commitUtils';

export class FileExplorer extends Component<{
    selectedPath: string,
    onSelectPath: (newPath: string) => void,
    data: CommitData,
}> {
  render() {
    // within the FileExplorer, paths start with "./", outside they don't
    // which is hacky and should be cleaned up
    const fileNames = Object.keys(this.props.data.fileToCommits).sort();
    const tree = buildTree(fileNames);
    const selectPath = (path) => {
      if (path.startsWith("./")) {
        path = path.slice(2);
      }
      this.props.onSelectPath(path);
    }
    return <div className="file-explorer plugin-pane">
      <h3 style={{textAlign: "center"}}>File Explorer</h3>
      <div style={{fontFamily: "monospace"}}>
        <FileEntry
          alwaysExpand={true}
          name=""
          path="."
          tree={tree}
          onSelectPath={selectPath}
          selectedPath={`./${this.props.selectedPath}`}
        />
      </div>
    </div>
  }
}

class FileEntry extends Component<{
  name: string,
  path: string,
  alwaysExpand: bool,
  tree: FileTree,
  selectedPath: string,
  onSelectPath: (newPath: string) => void,
}, {
  expanded: bool,
}> {

  constructor() {
    super();
    this.state = {expanded: false,};
  }

  render() {
    const topLevels = Object.keys(this.props.tree);
    const subEntries = topLevels.map((x) =>
      <FileEntry
        key={x}
        name={x}
        path={`${this.props.path}/${x}`}
        alwaysExpand={false}
        tree={this.props.tree[x]}
        selectedPath={this.props.selectedPath}
        onSelectPath={this.props.onSelectPath}
      />
    )
    const isFolder = topLevels.length > 0 && !this.props.alwaysExpand;
    const toggleExpand = () => this.setState({expanded: !this.state.expanded});
    const isSelected = this.props.path === this.props.selectedPath;
    const selectTarget = isSelected ? "." : this.props.path;
    const onClick = () => this.props.onSelectPath(selectTarget);
    return <div 
        className={isSelected ? 'selected-path' : ''}
        style={{marginLeft: this.props.path === "." ? 0 : 25}}
      >

      <p>
        {isFolder && <button
          style={{marginRight: 3}}
          onClick={toggleExpand}>»</button>}
        <a href="javascript: void 0" onClick={onClick}>{this.props.name}</a>
      </p>
      {(this.state.expanded || this.props.alwaysExpand) && subEntries}
    </div>
  }

}