Skip to content

Commit b0b8914

Browse files
ava-macgava-macg
committed
went-down-a-rabbit-hole
1 parent 9c57b96 commit b0b8914

File tree

9 files changed

+272
-233
lines changed

9 files changed

+272
-233
lines changed

‎.babelrc

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"presets": ["react-app"],
33
"plugins": [
44
"@babel/plugin-syntax-class-properties",
5-
"@babel/plugin-syntax-jsx"
5+
"@babel/plugin-syntax-jsx",
6+
"react-html-attrs"
67
]
78
}

‎.nycrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"plugins": ["transform-decorators-legacy"],
33
"require": [
4-
"babel-register",
4+
"@babel/register",
55
"./test/testHelpers/requireSources.js"
66
]
77
}

‎dev-server/src/index.js

+86-86
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,54 @@
1-
"use strict"
1+
'use strict';
22

33
//import react and reactDom for browser rendering
4-
import React from "react"
5-
import ReactDom from "react-dom"
4+
import React from 'react';
5+
import ReactDom from 'react-dom';
66

7-
import Moment from "moment"
7+
import Moment from 'moment';
88

99
//import the react-json-view component (installed with npm)
10-
import JsonViewer from "./../../src/js/index"
10+
import JsonViewer from './../../src/js/index';
1111

1212
//render 2 different examples of the react-json-view component
1313
ReactDom.render(
1414
<div>
1515
{/* just pass in your JSON to the src attribute */}
1616
<JsonViewer
1717
sortKeys
18-
style={{ padding: "30px", backgroundColor: "white" }}
18+
style={{ padding: '30px', backgroundColor: 'white' }}
1919
src={getExampleJson1()}
2020
collapseStringsAfterLength={12}
2121
onEdit={e => {
22-
console.log("edit callback", e)
23-
if (e.new_value == "error") {
24-
return false
22+
console.log('edit callback', e);
23+
if (e.new_value == 'error') {
24+
return false;
2525
}
2626
}}
2727
onDelete={e => {
28-
console.log("delete callback", e)
28+
console.log('delete callback', e);
2929
}}
3030
onAdd={e => {
31-
console.log("add callback", e)
32-
if (e.new_value == "error") {
33-
return false
31+
console.log('add callback', e);
32+
if (e.new_value == 'error') {
33+
return false;
3434
}
3535
}}
3636
onSelect={e => {
37-
console.log("select callback", e)
38-
console.log(e.namespace)
37+
console.log('select callback', e);
38+
console.log(e.namespace);
3939
}}
4040
displayObjectSize={true}
41-
name={"dev-server"}
41+
name={'dev-server'}
4242
enableClipboard={copy => {
43-
console.log("you copied to clipboard!", copy)
43+
console.log('you copied to clipboard!', copy);
4444
}}
4545
shouldCollapse={({ src, namespace, type }) => {
46-
if (type === "array" && src.indexOf("test") > -1) {
47-
return true
48-
} else if (namespace.indexOf("moment") > -1) {
49-
return true
46+
if (type === 'array' && src.indexOf('test') > -1) {
47+
return true;
48+
} else if (namespace.indexOf('moment') > -1) {
49+
return true;
5050
}
51-
return false
51+
return false;
5252
}}
5353
defaultValue=""
5454
/>
@@ -62,26 +62,26 @@ ReactDom.render(
6262
validationMessage="You're doing something wrong."
6363
collapseStringsAfterLength={15}
6464
onEdit={e => {
65-
console.log(e)
66-
if (e.new_value === "error") {
67-
return false
65+
console.log(e);
66+
if (e.new_value === 'error') {
67+
return false;
6868
}
6969
}}
7070
onDelete={e => {
71-
console.log(e)
71+
console.log(e);
7272
}}
7373
onAdd={e => {
74-
console.log(e)
75-
if (e.new_value === "error") {
76-
return false
74+
console.log(e);
75+
if (e.new_value === 'error') {
76+
return false;
7777
}
7878
}}
7979
name={false}
8080
iconStyle="triangle"
8181
shouldCollapse={({ src, type }) =>
82-
type === "object" &&
82+
type === 'object' &&
8383
src.constructor &&
84-
src.constructor.name === "Moment"
84+
src.constructor.name === 'Moment'
8585
}
8686
/>
8787

@@ -91,7 +91,7 @@ ReactDom.render(
9191
<JsonViewer
9292
src={getExampleJson2()}
9393
collapsed={true}
94-
name={"feature_set"}
94+
name={'feature_set'}
9595
displayDataTypes={false}
9696
indentWidth={2}
9797
/>
@@ -102,7 +102,7 @@ ReactDom.render(
102102
<JsonViewer
103103
src={getExampleJson2()}
104104
collapsed={1}
105-
name={"feature_set"}
105+
name={'feature_set'}
106106
displayDataTypes={false}
107107
indentWidth={5}
108108
/>
@@ -113,7 +113,7 @@ ReactDom.render(
113113
<JsonViewer
114114
src={getExampleJson3()}
115115
collapsed={true}
116-
name={"collapsed_by_default_example"}
116+
name={'collapsed_by_default_example'}
117117
indentWidth={8}
118118
displayObjectSize={false}
119119
displayDataTypes={false}
@@ -127,7 +127,7 @@ ReactDom.render(
127127
src={getExampleArray()}
128128
theme="solarized"
129129
onEdit={edit => {
130-
console.log(edit)
130+
console.log(edit);
131131
}}
132132
/>
133133

@@ -138,25 +138,25 @@ ReactDom.render(
138138
enableClipboard={false}
139139
src={getExampleJson1()}
140140
shouldCollapse={({ src, namespace, type }) =>
141-
namespace.indexOf("moment") > -1
141+
namespace.indexOf('moment') > -1
142142
}
143143
theme={{
144-
base00: "white",
145-
base01: "#ddd",
146-
base02: "#ddd",
147-
base03: "#444",
148-
base04: "purple",
149-
base05: "#444",
150-
base06: "#444",
151-
base07: "#444",
152-
base08: "#444",
153-
base09: "rgba(70, 70, 230, 1)",
154-
base0A: "rgba(70, 70, 230, 1)",
155-
base0B: "rgba(70, 70, 230, 1)",
156-
base0C: "rgba(70, 70, 230, 1)",
157-
base0D: "rgba(70, 70, 230, 1)",
158-
base0E: "rgba(70, 70, 230, 1)",
159-
base0F: "rgba(70, 70, 230, 1)"
144+
base00: 'white',
145+
base01: '#ddd',
146+
base02: '#ddd',
147+
base03: '#444',
148+
base04: 'purple',
149+
base05: '#444',
150+
base06: '#444',
151+
base07: '#444',
152+
base08: '#444',
153+
base09: 'rgba(70, 70, 230, 1)',
154+
base0A: 'rgba(70, 70, 230, 1)',
155+
base0B: 'rgba(70, 70, 230, 1)',
156+
base0C: 'rgba(70, 70, 230, 1)',
157+
base0D: 'rgba(70, 70, 230, 1)',
158+
base0E: 'rgba(70, 70, 230, 1)',
159+
base0F: 'rgba(70, 70, 230, 1)'
160160
}}
161161
/>
162162

@@ -168,8 +168,8 @@ ReactDom.render(
168168
src={getExampleJson4()}
169169
/>
170170
</div>,
171-
document.getElementById("app-container")
172-
)
171+
document.getElementById('app-container')
172+
);
173173

174174
/*-------------------------------------------------------------------------*/
175175
/* the following functions just contain test json data for display */
@@ -178,108 +178,108 @@ ReactDom.render(
178178
//just a function to get an example JSON object
179179
function getExampleJson1() {
180180
return {
181-
string: "this is a test string",
181+
string: 'this is a test string',
182182
integer: 42,
183183
empty_array: [],
184184
empty_object: {},
185-
array: [1, 2, 3, "test"],
185+
array: [1, 2, 3, 'test'],
186186
float: -2.757,
187187
undefined_var: undefined,
188188
parent: {
189189
sibling1: true,
190190
sibling2: false,
191191
sibling3: null,
192192
isString: value => {
193-
if (typeof value === "string") {
194-
return "string"
193+
if (typeof value === 'string') {
194+
return 'string';
195195
} else {
196-
return "other"
196+
return 'other';
197197
}
198198
}
199199
},
200-
string_number: "1234",
200+
string_number: '1234',
201201
date: new Date(),
202202
moment: Moment(),
203203
regexp: /[0-9]/gi
204-
}
204+
};
205205
}
206206

207207
//and another a function to get an example JSON object
208208
function getExampleJson2() {
209209
return {
210210
normalized: {
211-
"1-grams": {
211+
'1-grams': {
212212
body: 1,
213213
testing: 1
214214
},
215-
"2-grams": {
216-
"testing body": 1
215+
'2-grams': {
216+
'testing body': 1
217217
},
218-
"3-grams": {}
218+
'3-grams': {}
219219
},
220220
noun_phrases: {
221221
body: 1
222222
},
223223
lemmatized: {
224-
"1-grams": {
224+
'1-grams': {
225225
test: 1,
226226
body: 1
227227
},
228-
"2-grams": {
229-
"test body": 1
228+
'2-grams': {
229+
'test body': 1
230230
},
231-
"3-grams": {}
231+
'3-grams': {}
232232
},
233233
dependency: {
234-
"1-grams": {
234+
'1-grams': {
235235
testingVERBROOTtestingVERB: 1,
236236
bodyNOUNdobjtestingVERB: 1
237237
},
238-
"2-grams": {
239-
"testingVERBROOTtestingVERB bodyNOUNdobjtestingVERB": 1
238+
'2-grams': {
239+
'testingVERBROOTtestingVERB bodyNOUNdobjtestingVERB': 1
240240
},
241-
"3-grams": {}
241+
'3-grams': {}
242242
}
243-
}
243+
};
244244
}
245245

246246
function getExampleJson3() {
247247
return {
248248
example_information:
249-
"this example has the collapsed prop set to true and the indentWidth prop is set to 8",
249+
'this example has the collapsed prop set to true and the indentWidth prop is set to 8',
250250
default_collapsed: true,
251251
collapsed_array: [
252-
"you expanded me",
253-
"try collapsing and expanding the root node",
254-
"i will still be expanded",
252+
'you expanded me',
253+
'try collapsing and expanding the root node',
254+
'i will still be expanded',
255255
{
256256
leaf_node: true
257257
}
258258
]
259-
}
259+
};
260260
}
261261

262262
function getExampleJson4() {
263263
const large_array = new Array(225).fill(
264-
"this is a large array full of items"
265-
)
264+
'this is a large array full of items'
265+
);
266266

267-
large_array.push(getExampleArray())
267+
large_array.push(getExampleArray());
268268

269-
large_array.push(new Array(75).fill(Math.random()))
269+
large_array.push(new Array(75).fill(Math.random()));
270270

271-
return large_array
271+
return large_array;
272272
}
273273

274274
function getExampleArray() {
275275
return [
276-
"you can also display arrays!",
276+
'you can also display arrays!',
277277
new Date(),
278278
1,
279279
2,
280280
3,
281281
{
282282
pretty_cool: true
283283
}
284-
]
284+
];
285285
}

0 commit comments

Comments
 (0)