Skip to content

Commit 0582d1d

Browse files
sergeytsergeyt
committed
draft
1 parent 26804fc commit 0582d1d

File tree

11 files changed

+456
-3
lines changed

11 files changed

+456
-3
lines changed

‎content/simple.diff

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
diff --git a/file b/file
2+
index 123..456 789
3+
--- a/file
4+
+++ b/file
5+
@@ -1,2 +1,2 @@
6+
- line1
7+
+ line2

‎demo/app.js

Lines changed: 45 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,53 @@
11
import React, { Component } from 'react';
2+
import { Grid, Row, Col } from 'react-bootstrap';
3+
import DiffView from '../src';
4+
import qwest from 'qwest';
5+
6+
const contentLinks = [
7+
{
8+
url: '/content/simple.diff',
9+
label: 'Simple',
10+
},
11+
];
212

313
export default class App extends Component {
14+
constructor(props) {
15+
super(props);
16+
this.state = { content: '' };
17+
this.load(contentLinks[0].url);
18+
}
19+
20+
load(url) {
21+
qwest.get(url).then((xhr, content) => {
22+
this.setState({ content });
23+
});
24+
}
25+
426
render() {
27+
const items = contentLinks.map(t => {
28+
const linkProps = {
29+
key: t.url,
30+
href: t.url,
31+
onClick: (e) => {
32+
e.preventDefault();
33+
this.load(t.url);
34+
return false;
35+
},
36+
style: {
37+
margin: '4px',
38+
},
39+
};
40+
return <a {...linkProps}>{t.label}</a>;
41+
});
542
return (
6-
<div className="app">
7-
</div>
43+
<Grid className="app">
44+
<Row>
45+
<Col md={8}>
46+
<div>{items}</div>
47+
<DiffView source={this.state.content}/>
48+
</Col>
49+
</Row>
50+
</Grid>
851
);
952
}
1053
}

‎lib/change.js

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
'use strict';
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
exports.default = Change;
7+
8+
var _react = require('react');
9+
10+
var _react2 = _interopRequireDefault(_react);
11+
12+
var _style = require('./style');
13+
14+
var _style2 = _interopRequireDefault(_style);
15+
16+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17+
18+
function Change(props) {
19+
var ln1 = props.normal ? props.ln1 : props.ln;
20+
var ln2 = props.normal ? props.ln2 : props.ln;
21+
22+
// TODO highlight with prism.js
23+
var html = props.content;
24+
25+
// try {
26+
// html = highlight(props.lang, props.content).value;
27+
// } catch (e) {}
28+
29+
return _react2.default.createElement(
30+
'tr',
31+
{ className: props.type },
32+
_react2.default.createElement(
33+
'td',
34+
{ className: _style2.default.nostretch },
35+
!props.add && ln1
36+
),
37+
_react2.default.createElement(
38+
'td',
39+
{ className: _style2.default.nostretch },
40+
!props.del && ln2
41+
),
42+
_react2.default.createElement(
43+
'td',
44+
null,
45+
_react2.default.createElement('pre', { dangerouslySetInnerHTML: { __html: html } })
46+
)
47+
);
48+
}

‎lib/chunk.js

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
'use strict';
2+
3+
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
4+
5+
Object.defineProperty(exports, "__esModule", {
6+
value: true
7+
});
8+
exports.default = Chunk;
9+
10+
var _react = require('react');
11+
12+
var _react2 = _interopRequireDefault(_react);
13+
14+
var _change = require('./change');
15+
16+
var _change2 = _interopRequireDefault(_change);
17+
18+
var _style = require('./style');
19+
20+
var _style2 = _interopRequireDefault(_style);
21+
22+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
23+
24+
function Chunk(props) {
25+
var changes = props.changes.map(function (change) {
26+
return _react2.default.createElement(_change2.default, _extends({}, change, { lang: props.lang }));
27+
});
28+
return _react2.default.createElement(
29+
'tbody',
30+
null,
31+
_react2.default.createElement(
32+
'tr',
33+
{ className: _style2.default.chunk },
34+
_react2.default.createElement(
35+
'td',
36+
{ className: _style2.default.nostretch },
37+
'---'
38+
),
39+
_react2.default.createElement(
40+
'td',
41+
{ className: _style2.default.nostretch },
42+
'+++'
43+
),
44+
_react2.default.createElement(
45+
'td',
46+
null,
47+
props.content
48+
)
49+
),
50+
changes
51+
);
52+
}

‎lib/diffview.js

Lines changed: 82 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
'use strict';
22

3+
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
4+
35
Object.defineProperty(exports, "__esModule", {
46
value: true
57
});
@@ -9,10 +11,89 @@ var _react = require('react');
911

1012
var _react2 = _interopRequireDefault(_react);
1113

14+
var _chunk = require('chunk');
15+
16+
var _chunk2 = _interopRequireDefault(_chunk);
17+
18+
var _parseDiff = require('parse-diff');
19+
20+
var _parseDiff2 = _interopRequireDefault(_parseDiff);
21+
22+
var _path = require('path');
23+
24+
var _langMap = require('lang-map');
25+
26+
var _style = require('./style');
27+
28+
var _style2 = _interopRequireDefault(_style);
29+
1230
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
1331

32+
function Part(props) {
33+
var from = props.from;
34+
var to = props.to;
35+
var additions = props.additions;
36+
var deletions = props.deletions;
37+
var chunks = props.chunks;
38+
39+
var fileName = to === '/dev/null' ? from : to;
40+
41+
var ext = (0, _path.extname)(fileName);
42+
var langs = (0, _langMap.languages)(ext);
43+
44+
var items = chunks.map(function (chunk) {
45+
return _react2.default.createElement(_chunk2.default, _extends({}, chunk, { lang: langs[0] }));
46+
});
47+
48+
return _react2.default.createElement(
49+
'article',
50+
null,
51+
_react2.default.createElement(
52+
'header',
53+
null,
54+
_react2.default.createElement(
55+
'span',
56+
{ className: _style2.default.adds },
57+
'+++ ',
58+
additions
59+
),
60+
_react2.default.createElement(
61+
'span',
62+
{ className: _style2.default.dels },
63+
'--- ',
64+
deletions
65+
),
66+
_react2.default.createElement(
67+
'strong',
68+
{ className: _style2.default.filename },
69+
fileName
70+
)
71+
),
72+
_react2.default.createElement(
73+
'main',
74+
null,
75+
_react2.default.createElement(
76+
'table',
77+
null,
78+
items
79+
)
80+
)
81+
);
82+
}
83+
1484
function DiffView(props) {
15-
return _react2.default.createElement('div', null);
85+
if (!(props.diff || props.source)) {
86+
return _react2.default.createElement('div', null);
87+
}
88+
var diff = props.diff || (0, _parseDiff2.default)(props.source);
89+
var content = diff.map(function (p, i) {
90+
return _react2.default.createElement(Part, _extends({ key: i }, p));
91+
});
92+
return _react2.default.createElement(
93+
'div',
94+
null,
95+
content
96+
);
1697
}
1798

1899
exports.default = DiffView;

‎lib/style.scss

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
.diff * {
2+
box-sizing: border-box;
3+
}
4+
5+
.diff {
6+
box-sizing: border-box;
7+
border: 1px solid #ddd;
8+
margin-bottom: 15px;
9+
font-family: sans-serif;
10+
color: #505050;
11+
font-size: 14px;
12+
}
13+
14+
.diff:last-child {
15+
margin: 0;
16+
}
17+
18+
.diff header {
19+
background-color: #f7f7f7;
20+
font-size: 18px;
21+
padding: 15px;
22+
font-weight: 600;
23+
}
24+
25+
.diff .filename {
26+
}
27+
28+
.diff .adds {
29+
color: #00ff00;
30+
margin-right: 10px;
31+
}
32+
33+
.diff .dels {
34+
color: #ff0000;
35+
margin-right: 10px;
36+
}
37+
38+
.diff table {
39+
border-collapse: collapse;
40+
font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
41+
width: 100%;
42+
}
43+
44+
.diff td {
45+
padding: 5px 10px;
46+
font-size: 12px;
47+
}
48+
49+
.diff .nostretch {
50+
width: 1%;
51+
white-space: nowrap;
52+
}
53+
54+
.diff .chunk td {
55+
padding: 15px 10px;
56+
}
57+
58+
.diff .chunk {
59+
background-color: #f4f7fb;
60+
color: #bbb;
61+
}
62+
63+
.diff .add {
64+
background-color: #dbffdb;
65+
font-weight: 600;
66+
}
67+
68+
.diff .del {
69+
background-color: #ffdddd;
70+
font-weight: 600;
71+
}

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"homepage": "https://github.com/reactbits/diffview#readme",
2727
"dependencies": {
2828
"classnames": "^2.2.3",
29+
"lang-map": "^0.4.0",
2930
"lodash": "^4.0.0",
3031
"parse-diff": "^0.3.1",
3132
"react": "^0.14.6",

‎src/change.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from 'react';
2+
import style from './style';
3+
4+
export default function Change(props) {
5+
const ln1 = props.normal ? props.ln1 : props.ln;
6+
const ln2 = props.normal ? props.ln2 : props.ln;
7+
8+
// TODO highlight with prism.js
9+
const html = props.content;
10+
11+
// try {
12+
// html = highlight(props.lang, props.content).value;
13+
// } catch (e) {}
14+
15+
return (
16+
<tr className={props.type}>
17+
<td className={style.nostretch}>{!props.add && ln1}</td>
18+
<td className={style.nostretch}>{!props.del && ln2}</td>
19+
<td>
20+
<pre dangerouslySetInnerHTML={{ __html: html }} />
21+
</td>
22+
</tr>
23+
);
24+
}

‎src/chunk.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
import Change from './change';
3+
import style from './style';
4+
5+
export default function Chunk(props) {
6+
const changes = props.changes.map(change => {
7+
return <Change {...change} lang={props.lang}/>;
8+
});
9+
return (
10+
<tbody>
11+
<tr className={style.chunk}>
12+
<td className={style.nostretch}>---</td>
13+
<td className={style.nostretch}>+++</td>
14+
<td>{props.content}</td>
15+
</tr>
16+
{changes}
17+
</tbody>
18+
);
19+
}

0 commit comments

Comments
 (0)