Skip to content

Commit a2312a7

Browse files
KikobeatsKikobeats
authored
Merge branch 'master' into hotfix/use-camelcase-on-inline-style
2 parents b8c14d8 + b357174 commit a2312a7

File tree

13 files changed

+13
-465
lines changed

13 files changed

+13
-465
lines changed

‎CHANGELOG.md‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,6 @@
22

33
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
44

5-
## [1.27.0](https://github.com/n1c0de/react-json-view/compare/v1.26.3...v1.27.0) (2025-05-26)
6-
7-
8-
### Features
9-
10-
- **json viewer:** add a new prop to add custom buttons according to the data type ([e8df37a](https://github.com/n1c0de/react-json-view/commit/e8df37aa76e2eaeb586a63a6b5dd1cc0c05892b4))
11-
12-
### [1.26.3](https://github.com/n1c0de/react-json-view/compare/v1.26.2...v1.26.3) (2025-05-26)
13-
145
### [1.26.2](https://github.com/microlinkhq/react-json-view/compare/v1.26.1...v1.26.2) (2025-05-16)
156

167
### [1.26.1](https://github.com/microlinkhq/react-json-view/compare/v1.26.0...v1.26.1) (2025-02-15)

‎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

‎package.json‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
{
2-
"name": "@n1c0de/react-json-view",
2+
"name": "@microlink/react-json-view",
33
"description": "Interactive react component for displaying javascript arrays and JSON objects.",
44
"homepage": "https://github.com/microlinkhq/react-json-view",
5-
"version": "1.27.0",
5+
"version": "1.26.2",
66
"main": "dist/main.js",
7-
"author": "Mac Gainor",
7+
"author": {
8+
"name": "Mac Gainor"
9+
},
810
"contributors": [
911
{
1012
"name": "mac",
@@ -327,9 +329,5 @@
327329
"demo/dist",
328330
"dev-server"
329331
]
330-
},
331-
"directories": {
332-
"doc": "docs",
333-
"test": "test"
334332
}
335333
}

‎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.

0 commit comments

Comments
 (0)