/
diff-blocks.component.js
109 lines (90 loc) · 2.44 KB
/
diff-blocks.component.js
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
108
109
// @flow
import React from 'react';
import { TouchableOpacity } from 'react-native';
import styled from 'styled-components';
import { colors, fonts } from 'config';
type Props = {
additions: number,
deletions: number,
showNumbers: boolean,
onPress: Function,
};
const DiffBlocksViewContainer = styled.View`
flex-direction: row;
align-items: center;
`;
const DiffBlocksTouchableContainer = DiffBlocksViewContainer.withComponent(
TouchableOpacity
);
const Num = styled.Text`
letter-spacing: 1;
${fonts.fontPrimarySemiBold};
`;
const NumAdditions = Num.extend`
margin-right: 3;
color: ${colors.green};
`;
const NumDeletions = Num.extend`
margin-right: 2;
color: ${colors.red};
`;
const LinesChanged = styled.View`
flex-direction: row;
align-items: center;
`;
const Block = styled.View`
width: 7;
height: 7;
margin-left: 1;
`;
const AddedBlock = Block.extend`
background-color: ${colors.green};
`;
const DeletedBlock = Block.extend`
background-color: ${colors.darkRed};
`;
const NeutralBlock = Block.extend`
background-color: ${colors.greyMid};
`;
export const DiffBlocks = ({
additions,
deletions,
showNumbers,
onPress,
}: Props) => {
const linesChanged = additions + deletions;
let addedBlocks = null;
let deletedBlocks = null;
let neutralBlocks = null;
if (linesChanged <= 5) {
addedBlocks = additions;
deletedBlocks = deletions;
neutralBlocks = 5 - (addedBlocks + deletedBlocks);
} else {
addedBlocks = Math.floor(additions / linesChanged * 5);
deletedBlocks = Math.floor(deletions / linesChanged * 5);
neutralBlocks = 5 - (addedBlocks + deletedBlocks);
}
const Container = onPress
? DiffBlocksTouchableContainer
: DiffBlocksViewContainer;
return (
<Container onPress={onPress}>
{showNumbers && (
<LinesChanged>
<NumAdditions>{`+${additions}`}</NumAdditions>
<NumDeletions>{`-${deletions}`}</NumDeletions>
</LinesChanged>
)}
{[...Array(addedBlocks)].map((item, index) => {
return <AddedBlock key={index} />; // eslint-disable-line react/no-array-index-key
})}
{[...Array(deletedBlocks)].map((item, index) => {
return <DeletedBlock key={index} />; // eslint-disable-line react/no-array-index-key
})}
{[...Array(neutralBlocks)].map((item, index) => {
return <NeutralBlock key={index} />; // eslint-disable-line react/no-array-index-key
})}
</Container>
);
};