All files / app/components DirectoryDifferences.tsx

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108                                              2x                           2x     2x 2x   2x 2x 2x       2x 2x                                   2x   2x   2x                                                                      
import React, { useEffect, useState } from 'react';
import { style } from 'app/styles';
import { debug } from 'app/utilities/logger';
 
import { IModifiedFile } from 'app/interfaces';
 
import { DirectoryTree } from 'app/components/DirectoryTree';
import { usePrevious } from 'app/utilities/hooks';
 
export interface DirectoryDifferencesProps {
  modifiedFiles: IModifiedFile[];
  leftTree;
  rightTree;
  // only show commits that DON't have .status of this value
  style?: object | string;
  onFileClick: (fullPath: string) => void;
}
 
interface DirectoryDifferencesState {
  // these map to the index of each node
  expandedNodes: string[];
}
 
const outerStyle = {
  _extends: 'flexRow',
  transition: 'all 1s ease',
  overflow: 'scroll',
};
// const iconSize = 12;
 
// const iconStyle = {
//   display: 'inline-block',
//   height: iconSize,
//   width: iconSize,
//   textAlign: 'center'
// }
 
export const DirectoryDifferences: React.FC<DirectoryDifferencesProps> = (
  props
): React.ReactElement => {
  const [expandedNodes, setExpandedNodes] = useState([]);
  const prevModifiedFiles = usePrevious({ modifiedFiles: props.modifiedFiles });
 
  useEffect(() => {
    Eif (didModifiedFilesChange(prevModifiedFiles)) {
      debug('componentDidUpdate modifiedFiles changed');
      // setExpandedNodes([]);
    }
  });
  const { leftTree, rightTree } = props;
  return (
    <div style={style(outerStyle, props.style)}>
      <DirectoryTree
        fileTree={leftTree}
        expandedNodes={expandedNodes}
        onExpandNode={onExpandNode}
        onFileClick={onFileClick}
      />
      <DirectoryTree
        fileTree={rightTree}
        expandedNodes={expandedNodes}
        onExpandNode={onExpandNode}
        onFileClick={onFileClick}
      />
    </div>
  );
 
  function didModifiedFilesChange(prevModifiedFiles) {
    const { modifiedFiles } = props;
    // debug('didModifiedFilesChange', modifiedFiles, prevModifiedFiles);
    Eif (!modifiedFiles || !prevModifiedFiles) {
      // debug('one or both null');
      return modifiedFiles !== prevModifiedFiles;
    }
    if (modifiedFiles.length !== prevModifiedFiles.length) {
      // debug('lengthsDiffer');
      return true;
    }
    return !modifiedFiles.every((file, index) => {
      const prevFile = prevModifiedFiles[index];
      const result =
        file.path === prevFile.path &&
        file.delta === prevFile.delta &&
        file.status === prevFile.status;
 
      return result;
    });
  }
 
  function onFileClick(fullPath) {
    props.onFileClick(fullPath);
  }
 
  function onExpandNode(fullPath) {
    const currentIndex = expandedNodes.indexOf(fullPath);
    let newExpandedNodes;
    if (currentIndex === -1) {
      newExpandedNodes = expandedNodes.slice(0);
      newExpandedNodes.push(fullPath);
    } else {
      newExpandedNodes = expandedNodes
        .slice(0, currentIndex)
        .concat(expandedNodes.slice(currentIndex + 1));
    }
    setExpandedNodes(newExpandedNodes);
  }
};