github.com/replicatedhq/ship@v0.55.0/web/init/src/components/kustomize/kustomize_overlay/FileTree.jsx (about)

     1  import * as React from "react";
     2  import PropTypes from "prop-types";
     3  import { PATCH_OVERLAY, BASE_OVERLAY, RESOURCE_OVERLAY } from "./KustomizeOverlay";
     4  
     5  export default class FileTree extends React.Component {
     6  
     7    handleFileSelect = (path) => {
     8      this.props.handleFileSelect(path);
     9    }
    10  
    11    handleDeleteOverlay = (e, path) => {
    12      e.stopPropagation();
    13  
    14      const { isResourceTree, isBaseTree, isOverlayTree } = this.props;
    15      if (isResourceTree) {
    16        return this.props.handleDeleteOverlay(path, RESOURCE_OVERLAY);
    17      }
    18  
    19      if (isBaseTree) {
    20        return this.props.handleDeleteOverlay(path, BASE_OVERLAY);
    21      }
    22  
    23      if (isOverlayTree) {
    24        return this.props.handleDeleteOverlay(path, PATCH_OVERLAY);
    25      }
    26    }
    27  
    28    handleClickExcludedBase = (e, path) => {
    29      e.stopPropagation();
    30      this.props.handleClickExcludedBase(path);
    31    }
    32  
    33    render() {
    34      const { files, basePath, isRoot, selectedFile, handleFileSelect, handleDeleteOverlay, isOverlayTree, isResourceTree, isBaseTree } = this.props;
    35      return (
    36        <ul className={`${isRoot ? "FileTree-wrapper" : "u-marginLeft--normal"} u-position--relative`}>
    37          {files && files.map((file, i) => ( file.children && file.children.length ?
    38            <li key={`${file.path}-Directory-${i}`} className={`u-position--relative u-userSelect--none ${file.hasOverlay && "edited"}`}>
    39              <input type="checkbox" name={`sub-dir-${file.name}-${file.children.length}-${file.path}-${basePath}-${i}`} id={`sub-dir-${file.name}-${file.children.length}-${file.path}-${basePath}-${i}`} defaultChecked={true} />
    40              <label htmlFor={`sub-dir-${file.name}-${file.children.length}-${file.path}-${basePath}-${i}`}>{file.name === "/" ? basePath : file.name}</label>
    41              <FileTree
    42                files={file.children}
    43                handleFileSelect={(path) => handleFileSelect(path)}
    44                handleDeleteOverlay={(path, type) => handleDeleteOverlay(path, type)}
    45                handleClickExcludedBase={(e) => this.props.handleClickExcludedBase(e, file.path)}
    46                selectedFile={selectedFile}
    47                isOverlayTree={isOverlayTree}
    48                isBaseTree={isBaseTree}
    49              />
    50            </li>
    51            :
    52            file.isExcluded
    53              ? (
    54                <li
    55                  key={file.path}
    56                  className={`u-position--relative is-file ${file.isExcluded ? "is-excluded" : ""}`}
    57                  onClick={(e) => this.handleClickExcludedBase(e, file.path)}
    58                  >
    59                  {file.name}
    60                </li>
    61              )
    62              :(
    63                <li
    64                  key={file.path}
    65                  className={`u-position--relative is-file ${selectedFile === file.path ? "is-selected" : ""} ${file.hasOverlay ? "edited" : ""} ${isBaseTree ? "is-base" : ""}`}
    66                  onClick={() => this.handleFileSelect(file.path)}>
    67                  {file.name}
    68                  {isOverlayTree || isResourceTree ? <span className="icon clickable u-deleteOverlayIcon" onClick={(e) => this.handleDeleteOverlay(e, file.path)}></span> : null}
    69                  {isBaseTree ? <span className="icon clickable u-deleteOverlayIcon" onClick={(e) => this.handleDeleteOverlay(e, file.path)}></span> : null}
    70                </li>
    71              )
    72          ))
    73          }
    74        </ul>
    75      );
    76    }
    77  }
    78  
    79  FileTree.propTypes = {
    80    isOverlayTree: PropTypes.bool,
    81    isResourceTree: PropTypes.bool,
    82    // boolean whether the provided tree is part of the base resources tree
    83    isBaseTree: PropTypes.bool,
    84    // function invoked when excluding a base resource
    85    handleExcludeBase: PropTypes.func,
    86    // function invoked when clicking on an excluded base resource
    87    handleClickExcludedBase: PropTypes.func,
    88    // function invoked when clicking on a base resource, created resource, or patch
    89    handleDeleteOverlay: PropTypes.func,
    90  };