@@ -19,7 +19,7 @@ export default class extends React.PureComponent {
1919 } ;
2020 }
2121
22- toggleCollapsed = ( i ) => {
22+ toggleCollapsed = i => {
2323 const newExpanded = [ ] ;
2424 for ( const j in this . state . expanded ) {
2525 newExpanded . push ( this . state . expanded [ j ] ) ;
@@ -28,26 +28,33 @@ export default class extends React.PureComponent {
2828 this . setState ( {
2929 expanded : newExpanded
3030 } ) ;
31- }
31+ } ;
3232
3333 getExpandedIcon ( i ) {
3434 const { theme, iconStyle } = this . props ;
3535
3636 if ( this . state . expanded [ i ] ) {
37- return < ExpandedIcon { ...{ theme, iconStyle} } /> ;
37+ return < ExpandedIcon { ...{ theme, iconStyle } } /> ;
3838 }
3939
40- return < CollapsedIcon { ...{ theme, iconStyle} } /> ;
40+ return < CollapsedIcon { ...{ theme, iconStyle } } /> ;
4141 }
4242
4343 render ( ) {
4444 const {
45- src, groupArraysAfterLength, depth,
46- name, theme, jsvRoot, namespace, parent_type,
45+ src,
46+ groupArraysAfterLength,
47+ depth,
48+ name,
49+ theme,
50+ jsvRoot,
51+ namespace,
52+ parent_type,
4753 ...rest
4854 } = this . props ;
4955
50- let expanded_icon , object_padding_left = 0 ;
56+ let expanded_icon ,
57+ object_padding_left = 0 ;
5158
5259 const array_group_padding_left = this . props . indentWidth * SINGLE_INDENT ;
5360
@@ -58,59 +65,86 @@ export default class extends React.PureComponent {
5865 const size = groupArraysAfterLength ;
5966 const groups = Math . ceil ( src . length / size ) ;
6067
61- return ( < div class = 'object-key-val'
62- { ...Theme ( theme , jsvRoot ? 'jsv-root' : 'objectKeyVal' , { paddingLeft : object_padding_left } ) }
63- >
64- < ObjectName { ...this . props } />
65-
66- < span >
67- < VariableMeta size = { src . length } { ...this . props } />
68- </ span >
69- { [ ...Array ( groups ) ] . map ( ( _ , i ) =>
70- < div key = { i } class = 'object-key-val array-group' { ...Theme ( theme , 'objectKeyVal' , {
71- marginLeft : 6 ,
72- paddingLeft : array_group_padding_left
73- } ) } >
74- < span { ...Theme ( theme , 'brace-row' ) } >
75-
76- < div class = 'icon-container' { ...Theme ( theme , 'icon-container' ) }
77- onClick = { ( e ) => { this . toggleCollapsed ( i ) ; } } >
78- { this . getExpandedIcon ( i ) }
79- </ div >
80- { this . state . expanded [ i ] ?
81- < ObjectComponent
82- key = { name + i }
83- depth = { 0 }
84- name = { false }
85- collapsed = { false }
86- groupArraysAfterLength = { size }
87- index_offset = { i * size }
88- src = { src . slice ( i * size , i * size + size ) }
89- namespace = { namespace }
90- type = "array"
91- parent_type = "array_group"
92- theme = { theme }
93- { ...rest }
94- />
95- : < span { ...Theme ( theme , 'brace' ) } onClick = { ( e ) => { this . toggleCollapsed ( i ) ; } } class = 'array-group-brace' >
96- [
97- < div { ...Theme ( theme , 'array-group-meta-data' ) } class = 'array-group-meta-data' >
98- < span class = 'object-size'
99- { ...Theme ( theme , 'object-size' ) } >
100- { i * size }
101- { ' - ' }
102- { i * size + size > src . length ? src . length : i * size + size }
103- </ span >
104- </ div >
105- ]
106- </ span >
107- }
108-
109- </ span >
110- </ div >
111- ) }
112- </ div >
68+ return (
69+ < div
70+ class = "object-key-val"
71+ { ...Theme ( theme , jsvRoot ? 'jsv-root' : 'objectKeyVal' , {
72+ paddingLeft : object_padding_left
73+ } ) }
74+ >
75+ < ObjectName { ...this . props } />
76+
77+ < span >
78+ < VariableMeta size = { src . length } { ...this . props } />
79+ </ span >
80+ { [ ...Array ( groups ) ] . map ( ( _ , i ) => (
81+ < div
82+ key = { i }
83+ class = "object-key-val array-group"
84+ { ...Theme ( theme , 'objectKeyVal' , {
85+ marginLeft : 6 ,
86+ paddingLeft : array_group_padding_left
87+ } ) }
88+ >
89+ < span { ...Theme ( theme , 'brace-row' ) } >
90+ < div
91+ class = "icon-container"
92+ { ...Theme ( theme , 'icon-container' ) }
93+ onClick = { e => {
94+ this . toggleCollapsed ( i ) ;
95+ } }
96+ >
97+ { this . getExpandedIcon ( i ) }
98+ </ div >
99+ { this . state . expanded [ i ] ? (
100+ < ObjectComponent
101+ key = { name + i }
102+ depth = { 0 }
103+ name = { false }
104+ collapsed = { false }
105+ groupArraysAfterLength = { size }
106+ index_offset = { i * size }
107+ src = { src . slice ( i * size , i * size + size ) }
108+ namespace = { namespace }
109+ type = "array"
110+ parent_type = "array_group"
111+ theme = { theme }
112+ { ...rest }
113+ />
114+ ) : (
115+ < span
116+ { ...Theme ( theme , 'brace' ) }
117+ onClick = { e => {
118+ this . toggleCollapsed ( i ) ;
119+ } }
120+ class = "array-group-brace"
121+ >
122+ [
123+ < div
124+ { ...Theme (
125+ theme ,
126+ 'array-group-meta-data'
127+ ) }
128+ class = "array-group-meta-data"
129+ >
130+ < span
131+ class = "object-size"
132+ { ...Theme ( theme , 'object-size' ) }
133+ >
134+ { i * size }
135+ { ' - ' }
136+ { i * size + size > src . length
137+ ? src . length
138+ : i * size + size }
139+ </ span >
140+ </ div >
141+ ]
142+ </ span >
143+ ) }
144+ </ span >
145+ </ div >
146+ ) ) }
147+ </ div >
113148 ) ;
114149 }
115-
116150}
0 commit comments