Skip to content

Commit f411ff0

Browse files
author
n1c0de
committed
Revert "feat: add custom buttons to rows according to value type (#4)"
This reverts commit e8df37a.
1 parent f94c004 commit f411ff0

File tree

10 files changed

+8
-394
lines changed

10 files changed

+8
-394
lines changed

‎dev-server/src/index.js‎

Lines changed: 1 addition & 199 deletions
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,172 +201,6 @@ 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-
undefined: {
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-
null: {
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-
nan: {
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-
}}
336-
onEdit={e => {
337-
console.log('edit callback', e)
338-
if (e.new_value == 'error') {
339-
return false
340-
}
341-
}}
342-
onDelete={e => {
343-
console.log('delete callback', e)
344-
}}
345-
onAdd={e => {
346-
console.log('add callback', e)
347-
if (e.new_value == 'error') {
348-
return false
349-
}
350-
}}
351-
onSelect={e => {
352-
console.log('select callback', e)
353-
console.log(e.namespace)
354-
}}
355-
displayObjectSize={true}
356-
name={'custom-buttons'}
357-
enableClipboard={copy => {
358-
console.log('you copied to clipboard!', copy)
359-
}}
360-
shouldCollapse={({ src, namespace, type }) => {
361-
if (type === 'array' && src.indexOf('test') > -1) {
362-
return true
363-
} else if (namespace.indexOf('moment') > -1) {
364-
return true
365-
}
366-
return false
367-
}}
368-
defaultValue=''
369-
/>
370204
</div>,
371205
document.getElementById('app-container')
372206
)
@@ -486,35 +320,3 @@ function getExampleArray () {
486320
function getExampleWithStringEscapeSequences () {
487321
return { '\\\n\t\r\f\\n': '\\\n\t\r\f\\n' }
488322
}
489-
490-
function getExampleJson5 () {
491-
return {
492-
string: 'this is a test string',
493-
'string-key-test': 'this is another test string',
494-
integer: 42,
495-
'integer-key-test': 27,
496-
empty_array: [],
497-
empty_object: {},
498-
array: [1, 2, 3, 'test'],
499-
float: -2.757,
500-
undefined_var: undefined,
501-
parent: {
502-
sibling1: true,
503-
sibling2: false,
504-
sibling3: null,
505-
sibling4: NaN,
506-
isString: value => {
507-
if (typeof value === 'string') {
508-
return 'string'
509-
} else {
510-
return 'other'
511-
}
512-
}
513-
},
514-
string_number: '1234',
515-
date: new Date(),
516-
moment: Moment(),
517-
regexp: /[0-9]/gi,
518-
bigNumber: new BigNumber('0.0060254656709730629123'),
519-
}
520-
}

‎index.d.ts‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -165,12 +165,6 @@ 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
174168
}
175169

176170
export interface OnCopyProps {
@@ -314,15 +308,5 @@ export type ThemeKeys =
314308
| 'tube'
315309
| 'twilight'
316310

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-
327311
declare const ReactJson: React.ComponentType<ReactJsonViewProps>
328312
export default ReactJson

‎src/js/components/ArrayGroup.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,6 @@ export default class extends React.PureComponent {
5050
jsvRoot,
5151
namespace,
5252
parent_type,
53-
customButtons,
5453
...rest
5554
} = this.props
5655

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

7776
<span>
78-
<VariableMeta customButtons={customButtons} size={src.length} {...this.props} />
77+
<VariableMeta size={src.length} {...this.props} />
7978
</span>
8079
{[...Array(groups)].map((_, i) => (
8180
<div

‎src/js/components/CustomButton.js‎

Lines changed: 0 additions & 83 deletions
This file was deleted.

‎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, customButtons } = this.props
133+
const { rjvId, theme } = this.props
134134
const { size, hovered } = this.state
135-
return <VariableMeta customButtons={customButtons} rowHovered={hovered} size={size} {...this.props} />
135+
return <VariableMeta 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 customButtons={{}} {...props} />
28+
<ObjectComponent namespace={namespace} depth={0} jsvRoot {...props} />
2929
</div>
3030
</div>
3131
)

0 commit comments

Comments
 (0)