| 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 |
5x
5x
5x
5x
5x
5x
5x
1x
1x
1x
5x
| import React from 'react';
import { style } from 'app/styles';
import { ICommit } from 'app/interfaces';
import { EpochDateTime } from 'app/components/EpochDateTime';
import { AddedDeleted } from 'app/components/AddedDeleted';
import { CommitBody } from 'app/components/CommitBody';
import { CommitCardFiles } from 'app/components/CommitCardFiles';
import { Selectable } from 'app/components/Selectable';
export interface CommitCardProps {
commit: ICommit;
index?: number;
isExpanded?: boolean;
isHighlighted?: boolean;
hideFiles?: boolean;
hideCommitBody?: boolean;
onClick?: (evt, commit: ICommit, index: number) => void;
onDoubleClick?: (evt, commit: ICommit, index: number) => void;
onFileClick?: (evt, fileName: string) => void;
style?: string | object;
}
const defaultCardStyle = {
_extends: ['card', 'block'],
marginRight: 0,
padding: 0,
};
const dateLineStyle = {
_extends: ['smallerText', 'block', 'flexRow'],
};
const messageStyle = {
_extends: ['largerText', 'block'],
marginLeft: 5,
};
const authorStyle = {
_extends: ['normalText', 'block'],
marginLeft: 5,
};
const filesStyle = {
_extends: ['block', 'normalText'],
marginLeft: 10,
marginRight: 20,
marginBottom: 10,
};
const dateDisplayOptions = {
month: 'long',
minute: 'numeric',
};
export const CommitCard = (props: CommitCardProps): JSX.Element => {
const {
commit,
isExpanded,
isHighlighted,
onFileClick,
onClick,
onDoubleClick,
index,
} = props;
const outerOverrideStyle = isHighlighted ? 'selected' : {};
return (
<div style={style(defaultCardStyle, props.style, outerOverrideStyle)}>
<Selectable
onClick={evt => onClick && onClick(evt, commit, index)}
onDoubleClick={evt =>
onDoubleClick && onDoubleClick(evt, commit, index)
}
>
<div style={style(dateLineStyle)}>
<EpochDateTime
value={commit.authorDate}
displayOptions={dateDisplayOptions}
/>
<span style={{ flexGrow: 1, textAlign: 'center' }}>
{commit.hash}
</span>
<AddedDeleted
linesAdded={commit.linesAdded}
linesDeleted={commit.linesDeleted}
/>
</div>
<div style={style(messageStyle)}>{commit.message}</div>
{!props.hideCommitBody && (
<CommitBody text={commit.body} isExpanded={isExpanded} />
)}
{!props.hideFiles && (
<CommitCardFiles
files={commit.files}
isExpanded={isExpanded}
style={filesStyle}
onFileClick={onFileClick}
/>
)}
<div style={style(authorStyle)}>
Authored by {commit.authorName} {commit.relativeDate}
</div>
</Selectable>
</div>
);
};
CommitCard.displayName = 'CommitCard';
|