All files / app/components FileCard.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                              3x         3x 1x 1x                                                      
import React from 'react';
import { style } from 'app/styles';
 
import { IFileStats } from 'app/interfaces';
 
import { AddedDeleted } from 'app/components/AddedDeleted';
import { EpochSpan } from 'app/components/EpochSpan';
import { EllipsizedFileName } from 'app/components/EllipsizedFileName';
 
export interface FileCardProps {
  file: IFileStats;
  style?: string | object;
  onFileClick?: (evt, fileName: string) => void;
}
 
const defaultCardStyle = {
  _extends: 'card',
  display: 'block',
};
 
export const FileCard = (props: FileCardProps): JSX.Element => {
  const { file, onFileClick } = props;
  return (
    <div style={style(defaultCardStyle, props.style)}>
      <EllipsizedFileName
        fileName={file.fileName}
        maxCharacters={47}
        style={style('largerText', { display: 'block' })}
        onClick={onFileClick}
      />
      <AddedDeleted
        linesAdded={file.linesAdded}
        linesDeleted={file.linesDeleted}
      />{' '}
      <div style={style('normalText')}>
        <div>
          {file.commits.length} commits by {file.authorNames.length} authors
        </div>
        <div>
          spanning{' '}
          <EpochSpan
            firstEpochTime={file.firstCommitOn}
            secondEpochTime={file.lastCommitOn}
          />
        </div>
      </div>
    </div>
  );
};