All files / app/components CommitCardFiles.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                              6x       6x 1x     6x 3x                               6x 3x     6x 1x     1x             6x 3x                     6x  
import React from 'react';
import { style } from 'app/styles';
 
import { ICommitFile } from 'app/interfaces';
 
import { AddedDeleted } from 'app/components/AddedDeleted';
import { EllipsizedFileName } from 'app/components/EllipsizedFileName';
 
export interface CommitCardFilesProps {
  files: ICommitFile[];
  isExpanded?: boolean;
  style?: object;
  onFileClick?: (evt, fileName: string) => void;
}
 
const defaultContainerStyle = {
  marginBottom: 10,
};
 
const renderNone = () => {
  return <span>No files effected</span>;
};
 
const renderFile = (file: ICommitFile, index, onClick) => {
  return (
    <div key={index} style={{ wordBreak: 'break-all' }}>
      <AddedDeleted
        linesAdded={file.linesAdded}
        linesDeleted={file.linesDeleted}
      />
      <EllipsizedFileName
        style={style('smallerText')}
        fileName={file.name}
        maxCharacters={58}
        onClick={onClick}
      />
    </div>
  );
};
 
const renderFiles = (files: ICommitFile[], onFileClick) => {
  return files.map((file, index) => renderFile(file, index, onFileClick));
};
 
const renderSummary = (files: ICommitFile[]) => {
  const noun = files.length === 1 ? 'file' : 'files';
  // this is rendered as a link to suggest that they can expand the card
  // and see all files changed.  The card itself handles the click though
  return (
    <span style={style('link')}>
      {files.length} {noun} changed
    </span>
  );
};
 
export const CommitCardFiles = (props: CommitCardFilesProps): JSX.Element => {
  return (
    <div style={style(defaultContainerStyle, props.style)}>
      {props.files.length <= 0
        ? renderNone()
        : props.isExpanded
          ? renderFiles(props.files, props.onFileClick)
          : renderSummary(props.files)}
    </div>
  );
};
 
CommitCardFiles.displayName = 'CommitCardFiles';