11import React from 'react' ;
2- import JSONTree from '../../src' ;
32import { Map } from 'immutable' ;
3+ import JSONTree from '../../src' ;
44
55const getLabelStyle = ( { style } , nodeType , expanded ) => ( {
66 style : {
@@ -17,18 +17,26 @@ const getBoolStyle = ({ style }, nodeType) => ({
1717 }
1818} ) ;
1919
20- const getItemString = ( type ) => ( < span > // { type } </ span > ) ;
20+ const getItemString = type => (
21+ < span >
22+ { ' // ' }
23+ { type }
24+ </ span >
25+ ) ;
2126
2227const getValueLabelStyle = ( { style } , nodeType , keyPath ) => ( {
2328 style : {
2429 ...style ,
25- color : ! isNaN ( keyPath [ 0 ] ) && ! ( parseInt ( keyPath , 10 ) % 2 ) ?
26- '#33F' : style . color
30+ color :
31+ ! Number . isNaN ( keyPath [ 0 ] ) && ! ( parseInt ( keyPath , 10 ) % 2 )
32+ ? '#33F'
33+ : style . color
2734 }
2835} ) ;
2936
3037// eslint-disable-next-line max-len
31- const longString = 'Loremipsumdolorsitamet,consecteturadipiscingelit.Namtempusipsumutfelisdignissimauctor.Maecenasodiolectus,finibusegetultricesvel,aliquamutelit.Loremipsumdolorsitamet,consecteturadipiscingelit.Namtempusipsumutfelisdignissimauctor.Maecenasodiolectus,finibusegetultricesvel,aliquamutelit.Loremipsumdolorsitamet,consecteturadipiscingelit.Namtempusipsumutfelisdignissimauctor.Maecenasodiolectus,finibusegetultricesvel,aliquamutelit.' ;
38+ const longString =
39+ 'Loremipsumdolorsitamet,consecteturadipiscingelit.Namtempusipsumutfelisdignissimauctor.Maecenasodiolectus,finibusegetultricesvel,aliquamutelit.Loremipsumdolorsitamet,consecteturadipiscingelit.Namtempusipsumutfelisdignissimauctor.Maecenasodiolectus,finibusegetultricesvel,aliquamutelit.Loremipsumdolorsitamet,consecteturadipiscingelit.Namtempusipsumutfelisdignissimauctor.Maecenasodiolectus,finibusegetultricesvel,aliquamutelit.' ;
3240
3341const data = {
3442 array : [ 1 , 2 , 3 ] ,
@@ -57,7 +65,10 @@ const data = {
5765 emptyObject : { } ,
5866 symbol : Symbol ( 'value' ) ,
5967 // eslint-disable-next-line new-cap
60- immutable : Map ( [ [ 'key' , 'value' ] , [ { objectKey : 'value' } , { objectKey : 'value' } ] ] ) ,
68+ immutable : Map ( [
69+ [ 'key' , 'value' ] ,
70+ [ { objectKey : 'value' } , { objectKey : 'value' } ]
71+ ] ) ,
6172 map : new window . Map ( [
6273 [ 'key' , 'value' ] ,
6374 [ 0 , 'value' ] ,
@@ -98,44 +109,29 @@ const theme = {
98109
99110const App = ( ) => (
100111 < div >
101- < JSONTree
102- data = { data }
103- theme = { theme }
104- invertTheme
105- />
112+ < JSONTree data = { data } theme = { theme } invertTheme />
106113 < br />
107114 < h3 > Dark Theme</ h3 >
108- < JSONTree
109- data = { data }
110- theme = { theme }
111- invertTheme = { false }
112- />
115+ < JSONTree data = { data } theme = { theme } invertTheme = { false } />
113116 < br />
114117 < h3 > Hidden Root</ h3 >
115- < JSONTree
116- data = { data }
117- theme = { theme }
118- hideRoot
119- />
118+ < JSONTree data = { data } theme = { theme } hideRoot />
120119 < br />
121120 < h3 > Base16 Greenscreen Theme</ h3 >
122- < JSONTree
123- data = { data }
124- theme = 'greenscreen'
125- invertTheme = { false }
126- />
121+ < JSONTree data = { data } theme = "greenscreen" invertTheme = { false } />
127122 < h4 > Inverted Theme</ h4 >
128- < JSONTree
129- data = { data }
130- theme = 'greenscreen'
131- invertTheme
132- />
123+ < JSONTree data = { data } theme = "greenscreen" invertTheme />
133124 < br />
134125 < h3 > Style Customization</ h3 >
135126 < ul >
136- < li > Label changes between uppercase/lowercase based on the expanded state.</ li >
127+ < li >
128+ Label changes between uppercase/lowercase based on the expanded state.
129+ </ li >
137130 < li > Array keys are styled based on their parity.</ li >
138- < li > The labels of objects, arrays, and iterables are customized as "// type".</ li >
131+ < li >
132+ The labels of objects, arrays, and iterables are customized as "//
133+ type".
134+ </ li >
139135 < li > See code for details.</ li >
140136 </ ul >
141137 < div >
@@ -151,33 +147,38 @@ const App = () => (
151147 />
152148 </ div >
153149 < h3 > More Fine Grained Rendering</ h3 >
154- < p > Pass < code > labelRenderer</ code > or < code > valueRenderer</ code > .</ p >
150+ < p >
151+ Pass < code > labelRenderer</ code > or < code > valueRenderer</ code > .
152+ </ p >
155153 < div >
156154 < JSONTree
157155 data = { data }
158156 theme = { theme }
159157 labelRenderer = { ( [ raw ] ) => < span > (({ raw } )):</ span > }
160- valueRenderer = { raw => < em > 😐 { raw } 😐</ em > }
158+ valueRenderer = { raw => (
159+ < em >
160+ < span role = "img" aria-label = "mellow" >
161+ 😐
162+ </ span > { ' ' }
163+ { raw } { ' ' }
164+ < span role = "img" aria-label = "mellow" >
165+ 😐
166+ </ span >
167+ </ em >
168+ ) }
161169 />
162170 </ div >
163- < p > Sort object keys with < code > sortObjectKeys</ code > prop.</ p >
171+ < p >
172+ Sort object keys with < code > sortObjectKeys</ code > prop.
173+ </ p >
164174 < div >
165- < JSONTree
166- data = { data }
167- theme = { theme }
168- sortObjectKeys
169- />
175+ < JSONTree data = { data } theme = { theme } sortObjectKeys />
170176 </ div >
171177 < p > Collapsed root node</ p >
172178 < div >
173- < JSONTree
174- data = { data }
175- theme = { theme }
176- shouldExpandNode = { ( ) => false }
177- />
179+ < JSONTree data = { data } theme = { theme } shouldExpandNode = { ( ) => false } />
178180 </ div >
179181 </ div >
180182) ;
181183
182184export default App ;
183-
0 commit comments