Skip to content

Commit 2b0226d

Browse files
praneshrpraneshr
committed
Updating examples
1 parent bf735b0 commit 2b0226d

File tree

3 files changed

+61
-193
lines changed

3 files changed

+61
-193
lines changed

‎examples/src/index.tsx‎

Lines changed: 8 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,10 @@ import * as ReactDOM from 'react-dom';
44

55
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;
@@ -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: DiffMethod.CHARS,
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-
<option value={DiffMethod.CHARS}>Diff Chars</option>
174-
<option value={DiffMethod.WORDS}>Diff Words</option>
175-
<option value={DiffMethod.WORDS_WITH_SPACE}>DiffWordsWithSpace</option>
176-
<option value={DiffMethod.LINES}>diffLines</option>
177-
<option value={DiffMethod.TRIMMED_LINES}>diffTrimmedLines</option>
178-
<option value={DiffMethod.SENTENCES}>diffCss</option>
179-
<option value={DiffMethod.CSS}>diffSentences</option>
180-
</select>
181-
</span>
182-
<span>
183-
<label htmlFor="language">Language</label>
184-
{' '}
185-
<select
186-
name="language"
187-
id="language"
188-
onChange={this.onLanguageChange}
189-
value={this.state.language}
190-
>
191-
<option value="json">JSON</option>
192-
<option value="xml">XML</option>
193-
<option value="javascript">Javascript</option>
194-
</select>
195-
</span>
196-
<span>
197-
<label>
198-
<input
199-
type="checkbox"
200-
name="toggle-2"
201-
id="toggle-2"
202-
onChange={this.toggleSyntaxHighlighting}
203-
checked={this.state.enableSyntaxHighlighting}
204-
/>{' '}
205-
Syntax Highlighting
206-
</label>
207-
<label>
208-
<input
209-
type="checkbox"
210-
name="toggle-1"
211-
id="toggle-1"
212-
onChange={this.onChange}
213-
checked={this.state.splitView}
214-
/>{' '}
215-
Split View
216-
</label>
217-
</span>
218-
</div>
21987
<div className="diff-viewer">
22088
<ReactDiff
221-
compareMethod={this.state.compareMethod}
22289
highlightLines={this.state.highlightLine}
22390
onLineNumberClick={this.onLineNumberClick}
224-
oldValue={oldValue}
225-
splitView={this.state.splitView}
226-
newValue={newValue}
227-
renderContent={
228-
this.state.enableSyntaxHighlighting && this.syntaxHighlight
229-
}
91+
oldValue={oldJs}
92+
splitView
93+
newValue={newJs}
94+
renderContent={this.syntaxHighlight}
23095
useDarkTheme
231-
leftTitle="asdfsdf"
232-
rightTitle="asdfsdsldjfgbdkfjbgkjf"
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: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -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
}

0 commit comments

Comments
 (0)