Skip to content

Commit 5fc5789

Browse files
praneshrpraneshr
authored
V3.0.0 (#58)
V3.0.0
2 parents 41fd9de + 4e1aa91 commit 5fc5789

File tree

13 files changed

+689
-597
lines changed

13 files changed

+689
-597
lines changed

‎.travis.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
language: node_js
2-
node_js: 8
2+
node_js: 12
33
before_script: yarn build
4-
after_success: "./publish-examples.sh"
4+
after_success: './publish-examples.sh'
55
deploy:
66
skip_cleanup: true
77
provider: npm

‎README.md‎

Lines changed: 221 additions & 130 deletions
Large diffs are not rendered by default.

‎examples/src/index.ejs‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,23 @@
55
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
66
<title>React Diff Viewer</title>
77
<meta name="author" content="Pranesh Ravi" />
8-
<meta name="description" content="A simple and beautiful text diff viewer component made with diff and React" />
8+
<meta name="description" content="A simple and beautiful text diff viewer for React" />
99
<meta name="viewport" content="width=device-width, initial-scale=1.0">
10-
<meta name="theme-color" content="#704DFF" />
10+
<meta name="theme-color" content="#11171C" />
1111

12-
<meta content="https://i.ibb.co/ChNkdjs/Banner.png" property="og:image"/>
12+
<meta content="https://i.ibb.co/585KcMw/diff-viewer-v3.png" property="og:image"/>
1313
<meta content="React Diff Viewer" property="og:site_name" />
1414
<meta content="object" property="og:type" />
1515
<meta content="React Diff Viewer" property="og:title" />
1616
<meta content="https://github.com/praneshr/react-diff-viewer" property="og:url" />
17-
<meta content="A simple and beautiful text diff viewer component made with diff and React" property="og:description" />
17+
<meta content="A simple and beautiful text diff viewer for React" property="og:description" />
1818

1919
<meta name="twitter:card" value="summary_large_image"/>
2020
<meta name="twitter:site" value="@pranesh_ravi" />
2121
<meta name="twitter:creator" value="@pranesh_ravi" />
2222
<meta name="twitter:title" content="React Diff Viewer" />
23-
<meta name="twitter:description" content="A simple and beautiful text diff viewer component made with diff and React" />
24-
<meta name="twitter:image" content="https://i.ibb.co/ChNkdjs/Banner.png" />
23+
<meta name="twitter:description" content="A simple and beautiful text diff viewer for React" />
24+
<meta name="twitter:image" content="https://i.ibb.co/585KcMw/diff-viewer-v3.png" />
2525
</head>
2626
<body>
2727
<div id="app"></div>

‎examples/src/index.tsx‎

Lines changed: 11 additions & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,19 @@ require('./style.scss');
22
import * as React from 'react';
33
import * as ReactDOM from 'react-dom';
44

5-
import ReactDiff from '../../lib/index';
5+
import ReactDiff, { DiffMethod } from '../../lib/index';
66

7-
const oldJson = require('./diff/json/old.json');
8-
const newJson = require('./diff/json/new.json');
9-
const oldXml = require('./diff/xml/old.xml').default;
10-
const newXml = require('./diff/xml/new.xml').default;
117
const oldJs = require('./diff/javascript/old.rjs').default;
128
const newJs = require('./diff/javascript/new.rjs').default;
139

1410
const logo = require('../../logo.png');
15-
const logoStandalone = require('../../logo-standalone.png');
1611

1712
interface ExampleState {
1813
splitView?: boolean;
1914
highlightLine?: string[];
2015
language?: string;
2116
enableSyntaxHighlighting?: boolean;
22-
compareMethod?: string;
17+
compareMethod?: DiffMethod;
2318
}
2419

2520
const P = (window as any).Prism;
@@ -28,28 +23,11 @@ class Example extends React.Component<{}, ExampleState> {
2823
public constructor(props: any) {
2924
super(props);
3025
this.state = {
31-
splitView: true,
3226
highlightLine: [],
33-
language: 'javascript',
3427
enableSyntaxHighlighting: true,
35-
compareMethod: 'diffChars'
3628
};
3729
}
3830

39-
private toggleSyntaxHighlighting = (): void =>
40-
this.setState({
41-
enableSyntaxHighlighting: !this.state.enableSyntaxHighlighting,
42-
});
43-
44-
private onChange = (): void =>
45-
this.setState({ splitView: !this.state.splitView });
46-
47-
private onLanguageChange = (e: any): void =>
48-
this.setState({ language: e.target.value, highlightLine: [] });
49-
50-
private onCompareMethodChange = (e: any): void =>
51-
this.setState({ compareMethod: e.target.value });
52-
5331
private onLineNumberClick = (
5432
id: string,
5533
e: React.MouseEvent<HTMLTableCellElement>,
@@ -74,66 +52,18 @@ class Example extends React.Component<{}, ExampleState> {
7452

7553
private syntaxHighlight = (str: string): any => {
7654
if (!str) return;
77-
let language;
78-
switch (this.state.language) {
79-
case 'xml':
80-
language = P.highlight(str, P.languages.markup);
81-
break;
82-
case 'json':
83-
language = P.highlight(str, P.languages.json);
84-
break;
85-
case 'javascript':
86-
language = P.highlight(str, P.languages.javascript);
87-
break;
88-
default:
89-
break;
90-
}
55+
const language = P.highlight(str, P.languages.javascript);
9156
return <span dangerouslySetInnerHTML={{ __html: language }} />;
9257
};
9358

9459
public render(): JSX.Element {
95-
let oldValue;
96-
let newValue;
9760

98-
switch (this.state.language) {
99-
case 'xml':
100-
oldValue = oldXml;
101-
newValue = newXml;
102-
break;
103-
case 'json':
104-
oldValue = JSON.stringify(oldJson, null, 4);
105-
newValue = JSON.stringify(newJson, null, 4);
106-
break;
107-
case 'javascript':
108-
oldValue = oldJs;
109-
newValue = newJs;
110-
break;
111-
default:
112-
break;
113-
}
114-
115-
switch (this.state.language) {
116-
case 'xml':
117-
oldValue = oldXml;
118-
newValue = newXml;
119-
break;
120-
case 'json':
121-
oldValue = JSON.stringify(oldJson, null, 4);
122-
newValue = JSON.stringify(newJson, null, 4);
123-
break;
124-
case 'javascript':
125-
oldValue = oldJs;
126-
newValue = newJs;
127-
break;
128-
default:
129-
break;
130-
}
13161
return (
13262
<div className="react-diff-viewer-example">
63+
<div className="radial"></div>
13364
<div className="banner">
13465
<div className="img-container">
13566
<img src={logo} alt="React Diff Viewer Logo" />
136-
<img src={logoStandalone} alt="React Diff Viewer Logo" className="mobile" />
13767
</div>
13868
<p>
13969
A simple and beautiful text diff viewer made with{' '}
@@ -152,84 +82,19 @@ class Example extends React.Component<{}, ExampleState> {
15282
Documentation
15383
</button>
15484
</a>
155-
<a href="https://github.com/praneshr/react-diff-viewer">
156-
<button type="button" className="btn btn-primary btn-lg">
157-
Github
158-
</button>
159-
</a>
16085
</div>
16186
</div>
162-
<div className="controls">
163-
<span>
164-
<label htmlFor="js_diff_compare_method">JsDiff Compare Method</label>
165-
{' '}
166-
(<a href="https://github.com/kpdecker/jsdiff/tree/v4.0.1#api">Learn More</a>)
167-
{' '}
168-
<select
169-
name="js_diff_compare_method"
170-
id="js_diff_compare_method"
171-
onChange={this.onCompareMethodChange}
172-
value={this.state.compareMethod}
173-
>
174-
<option value="disabled">DISABLE</option>
175-
<option value="diffChars">diffChars</option>
176-
<option value="diffWords">diffWords</option>
177-
<option value="diffWordsWithSpace">diffWordsWithSpace</option>
178-
<option value="diffLines">diffLines</option>
179-
<option value="diffTrimmedLines">diffTrimmedLines</option>
180-
<option value="diffCss">diffCss</option>
181-
<option value="diffSentences">diffSentences</option>
182-
</select>
183-
</span>
184-
<span>
185-
<label htmlFor="language">Language</label>
186-
{' '}
187-
<select
188-
name="language"
189-
id="language"
190-
onChange={this.onLanguageChange}
191-
value={this.state.language}
192-
>
193-
<option value="json">JSON</option>
194-
<option value="xml">XML</option>
195-
<option value="javascript">Javascript</option>
196-
</select>
197-
</span>
198-
<span>
199-
<label>
200-
<input
201-
type="checkbox"
202-
name="toggle-2"
203-
id="toggle-2"
204-
onChange={this.toggleSyntaxHighlighting}
205-
checked={this.state.enableSyntaxHighlighting}
206-
/>{' '}
207-
Syntax Highlighting
208-
</label>
209-
<label>
210-
<input
211-
type="checkbox"
212-
name="toggle-1"
213-
id="toggle-1"
214-
onChange={this.onChange}
215-
checked={this.state.splitView}
216-
/>{' '}
217-
Split View
218-
</label>
219-
</span>
220-
</div>
22187
<div className="diff-viewer">
22288
<ReactDiff
223-
disableWordDiff={ this.state.compareMethod === 'disabled' }
224-
compareMethod={ this.state.compareMethod }
22589
highlightLines={this.state.highlightLine}
22690
onLineNumberClick={this.onLineNumberClick}
227-
oldValue={oldValue}
228-
splitView={this.state.splitView}
229-
newValue={newValue}
230-
renderContent={
231-
this.state.enableSyntaxHighlighting && this.syntaxHighlight
232-
}
91+
oldValue={oldJs}
92+
splitView
93+
newValue={newJs}
94+
renderContent={this.syntaxHighlight}
95+
useDarkTheme
96+
leftTitle="webpack.config.js master@2178133 - pushed 2 hours ago."
97+
rightTitle="webpack.config.js master@64207ee - pushed 13 hours ago."
23398
/>
23499
</div>
235100
<footer>

‎examples/src/style.scss‎

Lines changed: 25 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ pre[class*="language-"] {}
7979

8080
.token.punctuation,
8181
.token.operator {
82-
color: #393A34;
82+
color: #3bf5d4;
8383
/* no highlight */
8484
}
8585

@@ -106,13 +106,13 @@ pre[class*="language-"] {}
106106
.token.function,
107107
.token.deleted,
108108
.language-autohotkey .token.tag {
109-
color: #9a050f;
109+
color: #069071;
110110
}
111111

112112
.token.tag,
113113
.token.selector,
114114
.language-autohotkey .token.keyword {
115-
color: #00009f;
115+
color: #ff9292;
116116
}
117117

118118
.token.important,
@@ -129,11 +129,12 @@ pre[class*="language-"] {}
129129

130130
body {
131131
font-family: 'Poppins', sans-serif;
132+
background-color: #262831;
132133
}
133134

134135
.react-diff-viewer-example {
135136
a {
136-
color: #3fcb61;
137+
color: #125dec;
137138
text-decoration: none;
138139
}
139140

@@ -143,7 +144,7 @@ body {
143144

144145
.img-container {
145146
text-align: center;
146-
margin: 0 auto;
147+
margin: 100px auto 60px;
147148
max-width: 700px;
148149

149150
img {
@@ -167,14 +168,13 @@ body {
167168
}
168169

169170
button {
170-
margin-right: 30px;
171171
font-size: 14px;
172-
background: #3fcb61;
172+
background: #125dec;
173173
border: none;
174174
cursor: pointer;
175175

176176
&:focus {
177-
background: #3fcb61;
177+
background: #125dec;
178178
}
179179
}
180180
}
@@ -183,7 +183,7 @@ body {
183183
max-width: 700px;
184184
font-size: 18px;
185185
margin: 0 auto;
186-
color: grey;
186+
color: #FFF;
187187
}
188188
}
189189

@@ -198,28 +198,39 @@ body {
198198
}
199199

200200
select {
201-
background-color: #fff;
201+
background-color: transparent;
202202
padding: 5px 15px;
203203
border-radius: 4px;
204204
border: 2px solid #ddd;
205205
}
206206
}
207207

208+
.radial {
209+
background: linear-gradient(180deg, #363946 0%, #262931 100%);
210+
position: absolute;
211+
width: 100%;
212+
height: 600px;
213+
left: 0;
214+
z-index: -1;
215+
}
216+
208217
.diff-viewer {
209-
margin: 0 15px 50px;
218+
max-width: 90%;
219+
margin: 0 auto;
210220
border-radius: 8px;
211221
overflow-x: auto;
212222
overflow-y: hidden;
213223
white-space: nowrap;
214-
border: 1px solid #eee;
224+
box-shadow: 0 0 30px #1c1e25;
215225

216226
a {
217227
color: inherit;
218228
}
219229
}
220230

221231
footer {
222-
padding: 0 15px 30px;
232+
margin: 40px 0;
233+
color: #FFF;
223234
text-align: center;
224235
}
225236
}
@@ -229,13 +240,7 @@ body {
229240
.banner {
230241
.img-container {
231242
img {
232-
display: none;
233-
234-
&.mobile {
235-
display: block;
236-
width: 100px;
237-
margin: 0 auto 30px;
238-
}
243+
width: 80%;
239244
}
240245
}
241246
}

‎logo-standalone.png‎

-26.4 KB
Loading

‎logo.png‎

-60.9 KB
Loading

0 commit comments

Comments
 (0)