Skip to content

Commit 4c661f2

Browse files
oxyno-zetaoxyno-zeta
committed
[Project] Add demo website
1 parent f2878a5 commit 4c661f2

File tree

14 files changed

+392
-45
lines changed

14 files changed

+392
-45
lines changed

‎.npmignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -194,3 +194,5 @@ src/
194194
gulp/
195195
dev/
196196
dev_build/
197+
docs/
198+
.github/

‎README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,11 @@ An example of return :
160160
npm run serve
161161
```
162162

163+
### Release
164+
```bash
165+
npm run release
166+
```
167+
163168
## Inspired by
164169
- [alexkuz/react-json-tree](https://github.com/alexkuz/react-json-tree)
165170
- [krispo/json-tree](https://github.com/krispo/json-tree)

‎dev/App.jsx‎

Lines changed: 6 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@
77
/* ******** IMPORTS ******** */
88
/* ************************************* */
99
import React, { Component } from 'react';
10-
import { JsonTree } from '../src/JsonTree.jsx';
10+
import Header from './components/Header.jsx';
11+
import Footer from './components/Footer.jsx';
12+
import Body from './components/Body.jsx';
1113

1214
/* ************************************* */
1315
/* ******** VARIABLES ******** */
@@ -23,49 +25,13 @@ const defaultProps = {};
2325
class App extends Component {
2426
constructor(props) {
2527
super(props);
26-
this.state = {
27-
json: {
28-
error: new Error('error'),
29-
func: () => {
30-
console.log('test');
31-
},
32-
text: 'text',
33-
int: 100,
34-
boolean: true,
35-
null: null,
36-
undefined: undefined,
37-
object: {
38-
text: 'text',
39-
int: 100,
40-
boolean: true,
41-
},
42-
array: [
43-
1,
44-
2,
45-
3,
46-
{
47-
string: 'test',
48-
},
49-
],
50-
},
51-
};
52-
// Bind
53-
this.onFullyUpdate = this.onFullyUpdate.bind(this);
54-
}
55-
56-
onFullyUpdate(json) {
57-
this.setState({
58-
json,
59-
});
6028
}
6129

6230
render() {
6331
return (<div>
64-
<JsonTree
65-
data={this.state.json}
66-
onFullyUpdate={this.onFullyUpdate}
67-
readOnly={false}
68-
/>
32+
<Header />
33+
<Body />
34+
<Footer />
6935
</div>);
7036
}
7137
}

‎dev/components/Body.jsx‎

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
/*
2+
* Author: Alexandre Havrileck (Oxyno-zeta)
3+
* Date: 30/10/16
4+
* Licence: See Readme
5+
*/
6+
/* ************************************* */
7+
/* ******** IMPORTS ******** */
8+
/* ************************************* */
9+
import React, { Component } from 'react';
10+
import { JsonTree } from '../../src/JsonTree.jsx';
11+
12+
/* ************************************* */
13+
/* ******** VARIABLES ******** */
14+
/* ************************************* */
15+
// Prop types
16+
const propTypes = {};
17+
// Default props
18+
const defaultProps = {};
19+
20+
const defaultJson = {
21+
error: new Error('error'),
22+
func: () => {
23+
console.log('test');
24+
},
25+
text: 'text',
26+
int: 100,
27+
boolean: true,
28+
null: null,
29+
undefined: undefined,
30+
object: {
31+
text: 'text',
32+
int: 100,
33+
boolean: true,
34+
},
35+
array: [
36+
1,
37+
2,
38+
3,
39+
{
40+
string: 'test',
41+
},
42+
],
43+
};
44+
45+
/* ************************************* */
46+
/* ******** COMPONENT ******** */
47+
/* ************************************* */
48+
class Body extends Component {
49+
constructor(props) {
50+
super(props);
51+
this.state = {
52+
json: defaultJson,
53+
deltaUpdateString: '{}',
54+
globalUpdateString: '{}',
55+
textareaRef: null,
56+
readOnlyRef: null,
57+
readOnly: false,
58+
};
59+
// Bind
60+
this.onFullyUpdate = this.onFullyUpdate.bind(this);
61+
this.onDeltaUpdate = this.onDeltaUpdate.bind(this);
62+
this.refTextarea = this.refTextarea.bind(this);
63+
this.refReadOnlyCheckbox = this.refReadOnlyCheckbox.bind(this);
64+
this.handleSubmit = this.handleSubmit.bind(this);
65+
this.handleResetToDefault = this.handleResetToDefault.bind(this);
66+
this.handleChangeReadOnly = this.handleChangeReadOnly.bind(this);
67+
}
68+
69+
onFullyUpdate(newJson) {
70+
this.setState({
71+
globalUpdateString: JSON.stringify(newJson, null, 4),
72+
});
73+
}
74+
75+
onDeltaUpdate(deltaUpdate) {
76+
this.setState({
77+
deltaUpdateString: JSON.stringify(deltaUpdate, null, 4),
78+
});
79+
}
80+
81+
refTextarea(node) {
82+
this.state.textareaRef = node;
83+
}
84+
85+
refReadOnlyCheckbox(node) {
86+
this.state.readOnlyRef = node;
87+
}
88+
89+
handleSubmit() {
90+
const { textareaRef } = this.state;
91+
// Get data
92+
const jsonString = textareaRef.value;
93+
94+
try {
95+
const json = JSON.parse(jsonString);
96+
this.setState({
97+
json,
98+
});
99+
// Reset value
100+
textareaRef.value = '';
101+
} catch (e) {
102+
// Nothing
103+
console.error(e);
104+
}
105+
}
106+
107+
handleResetToDefault() {
108+
this.setState({
109+
json: defaultJson,
110+
});
111+
}
112+
113+
handleChangeReadOnly() {
114+
const { readOnlyRef } = this.state;
115+
116+
this.setState({
117+
readOnly: readOnlyRef.checked,
118+
});
119+
}
120+
121+
render() {
122+
const { json, deltaUpdateString, globalUpdateString, readOnly } = this.state;
123+
124+
const style1 = {
125+
width: '100%',
126+
};
127+
const style2 = {
128+
verticalAlign: 'top',
129+
};
130+
const style3 = {
131+
backgroundColor: '#e0e0e0',
132+
border: '1px lightgrey solid',
133+
};
134+
const style4 = {
135+
margin: '0 15px',
136+
minWidth: '200px',
137+
};
138+
return (
139+
<div>
140+
<div style={style4}>
141+
<input
142+
type="checkbox"
143+
ref={this.refReadOnlyCheckbox}
144+
onChange={this.handleChangeReadOnly}
145+
/>Read Only
146+
</div>
147+
<table style={style1}>
148+
<thead>
149+
<tr>
150+
<th>Result</th>
151+
<th>Global Update</th>
152+
<th>Delta Update</th>
153+
<th>Put Your Json</th>
154+
</tr>
155+
</thead>
156+
<tbody>
157+
<tr>
158+
<td style={style2}>
159+
<div style={style4}>
160+
<JsonTree
161+
data={json}
162+
onFullyUpdate={this.onFullyUpdate}
163+
onDeltaUpdate={this.onDeltaUpdate}
164+
readOnly={readOnly}
165+
/>
166+
</div>
167+
</td>
168+
<td style={style2}>
169+
<div style={style4}>
170+
<pre style={style3}>{globalUpdateString}</pre>
171+
</div>
172+
</td>
173+
<td style={style2}>
174+
<div style={style4}>
175+
<pre style={style3}>{deltaUpdateString}</pre>
176+
</div>
177+
</td>
178+
<td style={style2}>
179+
<div style={style4}>
180+
<textarea ref={this.refTextarea} rows="15" cols="40" />
181+
<div>
182+
<button onClick={this.handleSubmit}>Submit</button>
183+
<button onClick={this.handleResetToDefault}>Default</button>
184+
</div>
185+
</div>
186+
</td>
187+
</tr>
188+
</tbody>
189+
</table>
190+
</div>
191+
);
192+
}
193+
}
194+
195+
// Add prop types
196+
Body.propTypes = propTypes;
197+
// Add default props
198+
Body.defaultProps = defaultProps;
199+
200+
/* ************************************* */
201+
/* ******** EXPORTS ******** */
202+
/* ************************************* */
203+
export default Body;

‎dev/components/Footer.jsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/*
2+
* Author: Alexandre Havrileck (Oxyno-zeta)
3+
* Date: 30/10/16
4+
* Licence: See Readme
5+
*/
6+
/* ************************************* */
7+
/* ******** IMPORTS ******** */
8+
/* ************************************* */
9+
import React from 'react';
10+
11+
/* ************************************* */
12+
/* ******** VARIABLES ******** */
13+
/* ************************************* */
14+
15+
/* ************************************* */
16+
/* ******** COMPONENT ******** */
17+
/* ************************************* */
18+
function Footer() {
19+
const style = {
20+
fontSize: '15px',
21+
color: 'black',
22+
lineHeight: '54px',
23+
fontWeight: 300,
24+
paddingLeft: '24px',
25+
marginBottom: '8px',
26+
};
27+
return (<div style={style}>Made by Oxyno-zeta</div>);
28+
}
29+
30+
/* ************************************* */
31+
/* ******** EXPORTS ******** */
32+
/* ************************************* */
33+
export default Footer;

‎dev/components/Header.jsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/*
2+
* Author: Alexandre Havrileck (Oxyno-zeta)
3+
* Date: 30/10/16
4+
* Licence: See Readme
5+
*/
6+
/* ************************************* */
7+
/* ******** IMPORTS ******** */
8+
/* ************************************* */
9+
import React from 'react';
10+
11+
/* ************************************* */
12+
/* ******** VARIABLES ******** */
13+
/* ************************************* */
14+
15+
16+
/* ************************************* */
17+
/* ******** COMPONENT ******** */
18+
/* ************************************* */
19+
function Header() {
20+
const style = {
21+
fontSize: '24px',
22+
color: 'rgb(255, 255, 255)',
23+
lineHeight: '64px',
24+
fontWeight: 300,
25+
paddingLeft: '24px',
26+
backgroundColor: 'rgb(0, 188, 212)',
27+
marginBottom: '15px',
28+
};
29+
return (<div style={style}>React Editable Json Tree</div>);
30+
}
31+
32+
/* ************************************* */
33+
/* ******** EXPORTS ******** */
34+
/* ************************************* */
35+
export default Header;

‎dev/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8">
55
<title>React Editable Json Tree</title>
66
</head>
7-
<body>
7+
<body style="margin: 0;">
88

99
<div id="app"></div>
1010

‎docs/bundle.js‎

Lines changed: 21 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>React Editable Json Tree</title>
6+
</head>
7+
<body style="margin: 0;">
8+
9+
<div id="app"></div>
10+
11+
<script type="text/javascript" src="/bundle.js"></script></body>
12+
</html>

‎gulp/clean.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,5 @@ const del = require('del');
2020
/* ************************************* */
2121

2222
gulp.task('clean:release:dist', () => del('dist'));
23+
24+
gulp.task('clean:release:docs', () => del('docs'));

0 commit comments

Comments
 (0)