Skip to content

Commit d2612ed

Browse files
author
n1c0de
committed
feat: add custom buttons to rows according to value type
1 parent 4f386dd commit d2612ed

File tree

10 files changed

+408
-8
lines changed

10 files changed

+408
-8
lines changed

‎dev-server/src/index.js‎

Lines changed: 213 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ ReactDom.render(
137137

138138
<br />
139139

140-
{/*demo array support*/}
140+
{/* demo array support */}
141141
<JsonViewer
142142
src={getExampleArray()}
143143
theme='solarized'
@@ -201,6 +201,186 @@ ReactDom.render(
201201
name='String with special escape sequences'
202202
src={getExampleWithStringEscapeSequences()}
203203
/>
204+
205+
{/* Custom buttons according to the value type */}
206+
<JsonViewer
207+
bigNumber={BigNumber}
208+
sortKeys
209+
style={{ padding: '30px', backgroundColor: 'white' }}
210+
src={getExampleJson5()}
211+
quotesOnKeys={false}
212+
collapseStringsAfterLength={12}
213+
customButtons={{
214+
boolean: {
215+
clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) },
216+
path: <path d="m31.7 16.4q0-0.6-0.4-1l-2.1-2.1q-0.4-0.4-1-0.4t-1 0.4l-9.1 9.1-5-5q-0.5-0.4-1-0.4t-1 0.4l-2.1 2q-0.4 0.4-0.4 1 0 0.6 0.4 1l8.1 8.1q0.4 0.4 1 0.4 0.6 0 1-0.4l12.2-12.1q0.4-0.4 0.4-1z m5.6 3.6q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3-8.6-2.3-6.2-6.2-2.3-8.6 2.3-8.6 6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z" />,
217+
viewBox: '0 0 40 40',
218+
title: 'A title example',
219+
className: 'class-example'
220+
},
221+
integer: {
222+
clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) },
223+
path: (element) => element.src === 27
224+
? <path d='M0 14l6-6-6-6z' />
225+
: <path d="m31.7 16.4q0-0.6-0.4-1l-2.1-2.1q-0.4-0.4-1-0.4t-1 0.4l-9.1 9.1-5-5q-0.5-0.4-1-0.4t-1 0.4l-2.1 2q-0.4 0.4-0.4 1 0 0.6 0.4 1l8.1 8.1q0.4 0.4 1 0.4 0.6 0 1-0.4l12.2-12.1q0.4-0.4 0.4-1z m5.6 3.6q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3-8.6-2.3-6.2-6.2-2.3-8.6 2.3-8.6 6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z" />,
226+
viewBox: (element) => element.src === 27
227+
? '0 0 15 15'
228+
: '0 0 40 40',
229+
title: (element) => element.src === 27
230+
? 'Special title'
231+
: 'Example title',
232+
className: (element) => element.src === 27
233+
? 'special-class'
234+
: 'class-example'
235+
},
236+
float: {
237+
clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) },
238+
path: <path d="m31.7 16.4q0-0.6-0.4-1l-2.1-2.1q-0.4-0.4-1-0.4t-1 0.4l-9.1 9.1-5-5q-0.5-0.4-1-0.4t-1 0.4l-2.1 2q-0.4 0.4-0.4 1 0 0.6 0.4 1l8.1 8.1q0.4 0.4 1 0.4 0.6 0 1-0.4l12.2-12.1q0.4-0.4 0.4-1z m5.6 3.6q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3-8.6-2.3-6.2-6.2-2.3-8.6 2.3-8.6 6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z" />,
239+
viewBox: '0 0 40 40',
240+
title: 'A title example',
241+
className: 'class-example'
242+
},
243+
bigNumber: {
244+
clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) },
245+
path: <path d="m31.7 16.4q0-0.6-0.4-1l-2.1-2.1q-0.4-0.4-1-0.4t-1 0.4l-9.1 9.1-5-5q-0.5-0.4-1-0.4t-1 0.4l-2.1 2q-0.4 0.4-0.4 1 0 0.6 0.4 1l8.1 8.1q0.4 0.4 1 0.4 0.6 0 1-0.4l12.2-12.1q0.4-0.4 0.4-1z m5.6 3.6q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3-8.6-2.3-6.2-6.2-2.3-8.6 2.3-8.6 6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z" />,
246+
viewBox: '0 0 40 40',
247+
title: 'A title example',
248+
className: 'class-example'
249+
},
250+
date: {
251+
clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) },
252+
path: <path d="m31.7 16.4q0-0.6-0.4-1l-2.1-2.1q-0.4-0.4-1-0.4t-1 0.4l-9.1 9.1-5-5q-0.5-0.4-1-0.4t-1 0.4l-2.1 2q-0.4 0.4-0.4 1 0 0.6 0.4 1l8.1 8.1q0.4 0.4 1 0.4 0.6 0 1-0.4l12.2-12.1q0.4-0.4 0.4-1z m5.6 3.6q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3-8.6-2.3-6.2-6.2-2.3-8.6 2.3-8.6 6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z" />,
253+
viewBox: '0 0 40 40',
254+
title: 'A title example',
255+
className: 'class-example'
256+
},
257+
string: {
258+
clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) },
259+
path: (element) => element.variableName === 'string-key-test'
260+
? <path d='M1344 800v64q0 14-9 23t-23 9h-352v352q0 14-9 23t-23 9h-64q-14 0-23-9t-9-23v-352h-352q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h352v-352q0-14 9-23t23-9h64q14 0 23 9t9 23v352h352q14 0 23 9t9 23zm128 448v-832q0-66-47-113t-113-47h-832q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113zm128-832v832q0 119-84.5 203.5t-203.5 84.5h-832q-119 0-203.5-84.5t-84.5-203.5v-832q0-119 84.5-203.5t203.5-84.5h832q119 0 203.5 84.5t84.5 203.5z' />
261+
: <path d="m31.7 16.4q0-0.6-0.4-1l-2.1-2.1q-0.4-0.4-1-0.4t-1 0.4l-9.1 9.1-5-5q-0.5-0.4-1-0.4t-1 0.4l-2.1 2q-0.4 0.4-0.4 1 0 0.6 0.4 1l8.1 8.1q0.4 0.4 1 0.4 0.6 0 1-0.4l12.2-12.1q0.4-0.4 0.4-1z m5.6 3.6q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3-8.6-2.3-6.2-6.2-2.3-8.6 2.3-8.6 6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z" />,
262+
viewBox: (element) => element.variableName === 'string-key-test'
263+
?'0 0 1792 1792'
264+
:'0 0 40 40',
265+
title: (element) => element.variableName === 'string-key-test'
266+
? 'Special title'
267+
: 'Title example',
268+
className: (element) => element.variableName === 'string-key-test'
269+
? 'special-class'
270+
: 'class-example'
271+
},
272+
regexp: {
273+
clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) },
274+
path: <path d="m31.7 16.4q0-0.6-0.4-1l-2.1-2.1q-0.4-0.4-1-0.4t-1 0.4l-9.1 9.1-5-5q-0.5-0.4-1-0.4t-1 0.4l-2.1 2q-0.4 0.4-0.4 1 0 0.6 0.4 1l8.1 8.1q0.4 0.4 1 0.4 0.6 0 1-0.4l12.2-12.1q0.4-0.4 0.4-1z m5.6 3.6q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3-8.6-2.3-6.2-6.2-2.3-8.6 2.3-8.6 6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z" />,
275+
viewBox: '0 0 40 40',
276+
title: 'A title example',
277+
className: 'class-example'
278+
},
279+
array: {
280+
clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) },
281+
path: <path d="m31.7 16.4q0-0.6-0.4-1l-2.1-2.1q-0.4-0.4-1-0.4t-1 0.4l-9.1 9.1-5-5q-0.5-0.4-1-0.4t-1 0.4l-2.1 2q-0.4 0.4-0.4 1 0 0.6 0.4 1l8.1 8.1q0.4 0.4 1 0.4 0.6 0 1-0.4l12.2-12.1q0.4-0.4 0.4-1z m5.6 3.6q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3-8.6-2.3-6.2-6.2-2.3-8.6 2.3-8.6 6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z" />,
282+
viewBox: '0 0 40 40',
283+
title: 'A title example',
284+
className: 'class-example'
285+
},
286+
empty_array: {
287+
clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) },
288+
path: <path d="m31.7 16.4q0-0.6-0.4-1l-2.1-2.1q-0.4-0.4-1-0.4t-1 0.4l-9.1 9.1-5-5q-0.5-0.4-1-0.4t-1 0.4l-2.1 2q-0.4 0.4-0.4 1 0 0.6 0.4 1l8.1 8.1q0.4 0.4 1 0.4 0.6 0 1-0.4l12.2-12.1q0.4-0.4 0.4-1z m5.6 3.6q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3-8.6-2.3-6.2-6.2-2.3-8.6 2.3-8.6 6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z" />,
289+
viewBox: '0 0 40 40',
290+
title: 'A title example',
291+
className: 'class-example'
292+
},
293+
object: {
294+
clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) },
295+
path: <path d="m31.7 16.4q0-0.6-0.4-1l-2.1-2.1q-0.4-0.4-1-0.4t-1 0.4l-9.1 9.1-5-5q-0.5-0.4-1-0.4t-1 0.4l-2.1 2q-0.4 0.4-0.4 1 0 0.6 0.4 1l8.1 8.1q0.4 0.4 1 0.4 0.6 0 1-0.4l12.2-12.1q0.4-0.4 0.4-1z m5.6 3.6q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3-8.6-2.3-6.2-6.2-2.3-8.6 2.3-8.6 6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z" />,
296+
viewBox: '0 0 40 40',
297+
title: 'A title example',
298+
className: 'class-example'
299+
},
300+
empty_object: {
301+
clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) },
302+
path: <path d="m31.7 16.4q0-0.6-0.4-1l-2.1-2.1q-0.4-0.4-1-0.4t-1 0.4l-9.1 9.1-5-5q-0.5-0.4-1-0.4t-1 0.4l-2.1 2q-0.4 0.4-0.4 1 0 0.6 0.4 1l8.1 8.1q0.4 0.4 1 0.4 0.6 0 1-0.4l12.2-12.1q0.4-0.4 0.4-1z m5.6 3.6q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3-8.6-2.3-6.2-6.2-2.3-8.6 2.3-8.6 6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z" />,
303+
viewBox: '0 0 40 40',
304+
title: 'A title example',
305+
className: 'class-example'
306+
},
307+
function: {
308+
clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) },
309+
path: <path d="m31.7 16.4q0-0.6-0.4-1l-2.1-2.1q-0.4-0.4-1-0.4t-1 0.4l-9.1 9.1-5-5q-0.5-0.4-1-0.4t-1 0.4l-2.1 2q-0.4 0.4-0.4 1 0 0.6 0.4 1l8.1 8.1q0.4 0.4 1 0.4 0.6 0 1-0.4l12.2-12.1q0.4-0.4 0.4-1z m5.6 3.6q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3-8.6-2.3-6.2-6.2-2.3-8.6 2.3-8.6 6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z" />,
310+
viewBox: '0 0 40 40',
311+
title: 'A title example',
312+
className: 'class-example'
313+
},
314+
parent: {
315+
clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) },
316+
path: <path d="m31.7 16.4q0-0.6-0.4-1l-2.1-2.1q-0.4-0.4-1-0.4t-1 0.4l-9.1 9.1-5-5q-0.5-0.4-1-0.4t-1 0.4l-2.1 2q-0.4 0.4-0.4 1 0 0.6 0.4 1l8.1 8.1q0.4 0.4 1 0.4 0.6 0 1-0.4l12.2-12.1q0.4-0.4 0.4-1z m5.6 3.6q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3-8.6-2.3-6.2-6.2-2.3-8.6 2.3-8.6 6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z" />,
317+
viewBox: '0 0 40 40',
318+
title: 'A title example',
319+
className: 'class-example'
320+
},
321+
moment: {
322+
clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) },
323+
path: <path d="m31.7 16.4q0-0.6-0.4-1l-2.1-2.1q-0.4-0.4-1-0.4t-1 0.4l-9.1 9.1-5-5q-0.5-0.4-1-0.4t-1 0.4l-2.1 2q-0.4 0.4-0.4 1 0 0.6 0.4 1l8.1 8.1q0.4 0.4 1 0.4 0.6 0 1-0.4l12.2-12.1q0.4-0.4 0.4-1z m5.6 3.6q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3-8.6-2.3-6.2-6.2-2.3-8.6 2.3-8.6 6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z" />,
324+
viewBox: '0 0 40 40',
325+
title: 'A title example',
326+
className: 'class-example'
327+
},
328+
undefined: {
329+
clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) },
330+
path: <path d="m31.7 16.4q0-0.6-0.4-1l-2.1-2.1q-0.4-0.4-1-0.4t-1 0.4l-9.1 9.1-5-5q-0.5-0.4-1-0.4t-1 0.4l-2.1 2q-0.4 0.4-0.4 1 0 0.6 0.4 1l8.1 8.1q0.4 0.4 1 0.4 0.6 0 1-0.4l12.2-12.1q0.4-0.4 0.4-1z m5.6 3.6q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3-8.6-2.3-6.2-6.2-2.3-8.6 2.3-8.6 6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z" />,
331+
viewBox: '0 0 40 40',
332+
title: 'A title example',
333+
className: 'class-example'
334+
},
335+
null: {
336+
clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) },
337+
path: <path d="m31.7 16.4q0-0.6-0.4-1l-2.1-2.1q-0.4-0.4-1-0.4t-1 0.4l-9.1 9.1-5-5q-0.5-0.4-1-0.4t-1 0.4l-2.1 2q-0.4 0.4-0.4 1 0 0.6 0.4 1l8.1 8.1q0.4 0.4 1 0.4 0.6 0 1-0.4l12.2-12.1q0.4-0.4 0.4-1z m5.6 3.6q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3-8.6-2.3-6.2-6.2-2.3-8.6 2.3-8.6 6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z" />,
338+
viewBox: '0 0 40 40',
339+
title: 'A title example',
340+
className: 'class-example'
341+
},
342+
nan: {
343+
clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) },
344+
path: <path d="m31.7 16.4q0-0.6-0.4-1l-2.1-2.1q-0.4-0.4-1-0.4t-1 0.4l-9.1 9.1-5-5q-0.5-0.4-1-0.4t-1 0.4l-2.1 2q-0.4 0.4-0.4 1 0 0.6 0.4 1l8.1 8.1q0.4 0.4 1 0.4 0.6 0 1-0.4l12.2-12.1q0.4-0.4 0.4-1z m5.6 3.6q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3-8.6-2.3-6.2-6.2-2.3-8.6 2.3-8.6 6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z" />,
345+
viewBox: '0 0 40 40',
346+
title: 'A title example',
347+
className: 'class-example'
348+
},
349+
}}
350+
onEdit={e => {
351+
console.log('edit callback', e)
352+
if (e.new_value == 'error') {
353+
return false
354+
}
355+
}}
356+
onDelete={e => {
357+
console.log('delete callback', e)
358+
}}
359+
onAdd={e => {
360+
console.log('add callback', e)
361+
if (e.new_value == 'error') {
362+
return false
363+
}
364+
}}
365+
onSelect={e => {
366+
console.log('select callback', e)
367+
console.log(e.namespace)
368+
}}
369+
displayObjectSize={true}
370+
name={'custom-buttons'}
371+
enableClipboard={copy => {
372+
console.log('you copied to clipboard!', copy)
373+
}}
374+
shouldCollapse={({ src, namespace, type }) => {
375+
if (type === 'array' && src.indexOf('test') > -1) {
376+
return true
377+
} else if (namespace.indexOf('moment') > -1) {
378+
return true
379+
}
380+
return false
381+
}}
382+
defaultValue=''
383+
/>
204384
</div>,
205385
document.getElementById('app-container')
206386
)
@@ -320,3 +500,35 @@ function getExampleArray () {
320500
function getExampleWithStringEscapeSequences () {
321501
return { '\\\n\t\r\f\\n': '\\\n\t\r\f\\n' }
322502
}
503+
504+
function getExampleJson5 () {
505+
return {
506+
string: 'this is a test string',
507+
'string-key-test': 'this is another test string',
508+
integer: 42,
509+
'integer-key-test': 27,
510+
empty_array: [],
511+
empty_object: {},
512+
array: [1, 2, 3, 'test'],
513+
float: -2.757,
514+
undefined_var: undefined,
515+
parent: {
516+
sibling1: true,
517+
sibling2: false,
518+
sibling3: null,
519+
sibling4: NaN,
520+
isString: value => {
521+
if (typeof value === 'string') {
522+
return 'string'
523+
} else {
524+
return 'other'
525+
}
526+
}
527+
},
528+
string_number: '1234',
529+
date: new Date(),
530+
moment: Moment(),
531+
regexp: /[0-9]/gi,
532+
bigNumber: new BigNumber('0.0060254656709730629123'),
533+
}
534+
}

‎index.d.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,12 @@ export interface ReactJsonViewProps {
165165
* Default: true
166166
*/
167167
escapeStrings?: boolean
168+
/**
169+
* Adds custom buttons according to the value type.
170+
*
171+
* Default: null
172+
*/
173+
customButtons?: TypeCustomButtons
168174
}
169175

170176
export interface OnCopyProps {
@@ -308,5 +314,15 @@ export type ThemeKeys =
308314
| 'tube'
309315
| 'twilight'
310316

317+
export type TypeCustomButtons = {
318+
[valueType: string]: {
319+
clickCallback: (element: { variableName: string; src: string; namespace: Array<string>; name: string; }) => void
320+
path: React.ReactElement<React.SVGProps<SVGPathElement>> | ((element: { variableName: string; src: string; namespace: Array<string>; name: string; }) => React.ReactElement<React.SVGProps<SVGPathElement>>)
321+
viewBox?: string | ((element: { variableName: string; src: string; namespace: Array<string>; name: string; }) => string)
322+
title?: string | ((element: { variableName: string; src: string; namespace: Array<string>; name: string; }) => string)
323+
className?: string | ((element: { variableName: string; src: string; namespace: Array<string>; name: string; }) => string)
324+
}
325+
}
326+
311327
declare const ReactJson: React.ComponentType<ReactJsonViewProps>
312328
export default ReactJson

‎src/js/components/ArrayGroup.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ export default class extends React.PureComponent {
5050
jsvRoot,
5151
namespace,
5252
parent_type,
53+
customButtons,
5354
...rest
5455
} = this.props
5556

@@ -74,7 +75,7 @@ export default class extends React.PureComponent {
7475
<ObjectName {...this.props} />
7576

7677
<span>
77-
<VariableMeta size={src.length} {...this.props} />
78+
<VariableMeta customButtons={customButtons} size={src.length} {...this.props} />
7879
</span>
7980
{[...Array(groups)].map((_, i) => (
8081
<div

‎src/js/components/CustomButton.js‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import React from 'react'
2+
import { CustomIcon } from './icons'
3+
import Theme from './../themes/getStyle'
4+
5+
export default class extends React.PureComponent {
6+
constructor(props) {
7+
super(props)
8+
}
9+
10+
handleClick = () => {
11+
const { clickCallback, src, namespace, variableName } = this.props
12+
13+
clickCallback({
14+
variableName: variableName,
15+
src: src,
16+
namespace: namespace,
17+
name: namespace[namespace.length - 1]
18+
})
19+
}
20+
21+
getClippyIcon = () => {
22+
const { theme } = this.props
23+
24+
return (
25+
<CustomIcon
26+
className='custom-icon'
27+
{...this.props}
28+
{...Theme(theme, 'custom-icon')}
29+
/>
30+
)
31+
}
32+
33+
render () {
34+
const { src, theme, hidden, rowHovered, namespace, variableName, title, className } = this.props;
35+
const style = Theme(theme, 'custom-button').style
36+
let display = 'inline'
37+
38+
if (hidden) {
39+
display = 'none'
40+
}
41+
42+
return (
43+
<span
44+
className={typeof className === 'function'
45+
? className({
46+
variableName: variableName,
47+
src: src,
48+
namespace: namespace,
49+
name: namespace[namespace.length - 1]
50+
})
51+
: typeof className === 'string'
52+
? className
53+
: ''
54+
}
55+
title={typeof title === 'function'
56+
? title({
57+
variableName: variableName,
58+
src: src,
59+
namespace: namespace,
60+
name: namespace[namespace.length - 1]
61+
})
62+
: typeof title === 'string'
63+
? title
64+
: ''
65+
}
66+
style={{
67+
verticalAlign: 'top',
68+
display: rowHovered ? 'inline-block' : 'none'
69+
}}
70+
>
71+
<span
72+
style={{
73+
...style,
74+
display: display
75+
}}
76+
onClick={this.handleClick}
77+
>
78+
{this.getClippyIcon()}
79+
</span>
80+
</span>
81+
)
82+
}
83+
}

‎src/js/components/DataTypes/Object.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -130,9 +130,9 @@ class RjvObject extends React.PureComponent {
130130
}
131131

132132
getObjectMetaData = src => {
133-
const { rjvId, theme } = this.props
133+
const { rjvId, theme, customButtons } = this.props
134134
const { size, hovered } = this.state
135-
return <VariableMeta rowHovered={hovered} size={size} {...this.props} />
135+
return <VariableMeta customButtons={customButtons} rowHovered={hovered} size={size} {...this.props} />
136136
}
137137

138138
getBraceStart (object_type, expanded) {

‎src/js/components/JsonViewer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export default class extends React.PureComponent {
2525
return (
2626
<div className='pretty-json-container object-container'>
2727
<div className='object-content'>
28-
<ObjectComponent namespace={namespace} depth={0} jsvRoot {...props} />
28+
<ObjectComponent namespace={namespace} depth={0} jsvRoot customButtons={{}} {...props} />
2929
</div>
3030
</div>
3131
)

0 commit comments

Comments
 (0)