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';
|