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>
);
};
|