diff --git a/dev-server/src/index.js b/dev-server/src/index.js index 229ae0e..2d5b1fa 100644 --- a/dev-server/src/index.js +++ b/dev-server/src/index.js @@ -137,7 +137,7 @@ ReactDom.render(
- {/*demo array support*/} + {/* demo array support */} + + {/* Custom buttons according to the value type */} + { console.log(JSON.stringify(element, null, 4)) }, + path: , + viewBox: '0 0 40 40', + title: 'A title example', + className: 'class-example' + }, + integer: { + clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) }, + path: (element) => element.src === 27 + ? + : , + viewBox: (element) => element.src === 27 + ? '0 0 15 15' + : '0 0 40 40', + title: (element) => element.src === 27 + ? 'Special title' + : 'Example title', + className: (element) => element.src === 27 + ? 'special-class' + : 'class-example' + }, + float: { + clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) }, + path: , + viewBox: '0 0 40 40', + title: 'A title example', + className: 'class-example' + }, + bigNumber: { + clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) }, + path: , + viewBox: '0 0 40 40', + title: 'A title example', + className: 'class-example' + }, + date: { + clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) }, + path: , + viewBox: '0 0 40 40', + title: 'A title example', + className: 'class-example' + }, + string: { + clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) }, + path: (element) => element.variableName === 'string-key-test' + ? + : , + viewBox: (element) => element.variableName === 'string-key-test' + ?'0 0 1792 1792' + :'0 0 40 40', + title: (element) => element.variableName === 'string-key-test' + ? 'Special title' + : 'Title example', + className: (element) => element.variableName === 'string-key-test' + ? 'special-class' + : 'class-example' + }, + regexp: { + clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) }, + path: , + viewBox: '0 0 40 40', + title: 'A title example', + className: 'class-example' + }, + array: { + clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) }, + path: , + viewBox: '0 0 40 40', + title: 'A title example', + className: 'class-example' + }, + empty_array: { + clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) }, + path: , + viewBox: '0 0 40 40', + title: 'A title example', + className: 'class-example' + }, + object: { + clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) }, + path: , + viewBox: '0 0 40 40', + title: 'A title example', + className: 'class-example' + }, + empty_object: { + clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) }, + path: , + viewBox: '0 0 40 40', + title: 'A title example', + className: 'class-example' + }, + function: { + clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) }, + path: , + viewBox: '0 0 40 40', + title: 'A title example', + className: 'class-example' + }, + undefined: { + clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) }, + path: , + viewBox: '0 0 40 40', + title: 'A title example', + className: 'class-example' + }, + null: { + clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) }, + path: , + viewBox: '0 0 40 40', + title: 'A title example', + className: 'class-example' + }, + nan: { + clickCallback: (element) => { console.log(JSON.stringify(element, null, 4)) }, + path: , + viewBox: '0 0 40 40', + title: 'A title example', + className: 'class-example' + }, + }} + onEdit={e => { + console.log('edit callback', e) + if (e.new_value == 'error') { + return false + } + }} + onDelete={e => { + console.log('delete callback', e) + }} + onAdd={e => { + console.log('add callback', e) + if (e.new_value == 'error') { + return false + } + }} + onSelect={e => { + console.log('select callback', e) + console.log(e.namespace) + }} + displayObjectSize={true} + name={'custom-buttons'} + enableClipboard={copy => { + console.log('you copied to clipboard!', copy) + }} + shouldCollapse={({ src, namespace, type }) => { + if (type === 'array' && src.indexOf('test') > -1) { + return true + } else if (namespace.indexOf('moment') > -1) { + return true + } + return false + }} + defaultValue='' + /> , document.getElementById('app-container') ) @@ -320,3 +486,35 @@ function getExampleArray () { function getExampleWithStringEscapeSequences () { return { '\\\n\t\r\f\\n': '\\\n\t\r\f\\n' } } + +function getExampleJson5 () { + return { + string: 'this is a test string', + 'string-key-test': 'this is another test string', + integer: 42, + 'integer-key-test': 27, + empty_array: [], + empty_object: {}, + array: [1, 2, 3, 'test'], + float: -2.757, + undefined_var: undefined, + parent: { + sibling1: true, + sibling2: false, + sibling3: null, + sibling4: NaN, + isString: value => { + if (typeof value === 'string') { + return 'string' + } else { + return 'other' + } + } + }, + string_number: '1234', + date: new Date(), + moment: Moment(), + regexp: /[0-9]/gi, + bigNumber: new BigNumber('0.0060254656709730629123'), + } +} diff --git a/docs/src/js/components/Demo.js b/docs/src/js/components/Demo.js index 7ba5dac..8fa9edd 100644 --- a/docs/src/js/components/Demo.js +++ b/docs/src/js/components/Demo.js @@ -175,9 +175,9 @@ class Demo extends React.PureComponent { `} )} -
-
-
@microlink/react-json-view
+
+
+
@microlink/react-json-view
-
-
-
Theme:
+
+
+
Theme:
{this.getThemeInput(theme)}
-
-
Icon Style:
+
+
Icon Style:
{this.getIconStyleInput(iconStyle)}
-
-
Enable Edit:
+
+
Enable Edit:
{this.getEditInput(onEdit)}
-
-
Enable Add:
+
+
Enable Add:
{this.getAddInput(onAdd)}
-
-
Enable Delete:
+
+
Enable Delete:
{this.getDeleteInput(onDelete)}
-
-
Enable Clipboard:
+
+
Enable Clipboard:
{this.getEnableClipboardInput(enableClipboard)}
-
-
-
Display Data Types:
+
+
+
Display Data Types:
{this.getDataTypesInput(displayDataTypes)}
-
-
Display Object Size:
+
+
Display Object Size:
{this.getObjectSizeInput(displayObjectSize)}
-
-
Indent Width:
+
+
Indent Width:
{this.getIndentWidthInput(indentWidth)}
-
-
Collapsed:
+
+
Collapsed:
{this.getCollapsedInput(collapsed)}
-
-
Collapse Strings After Length:
+
+
Collapse Strings After Length:
{this.getCollapsedStringsInput(collapseStringsAfter)}
diff --git a/docs/src/js/entry.js b/docs/src/js/entry.js index 883f8dc..59dd2e9 100644 --- a/docs/src/js/entry.js +++ b/docs/src/js/entry.js @@ -7,7 +7,7 @@ const app = document.getElementById('mac-react-container') //app entrypoint ReactDom.render( -
+
, app diff --git a/docs/src/js/index.js b/docs/src/js/index.js index 30eb746..8d473b5 100644 --- a/docs/src/js/index.js +++ b/docs/src/js/index.js @@ -4,7 +4,7 @@ import ReactJsonDemo from './components/Demo' // index entrypoint component export default function Demo () { return ( -
+
) diff --git a/index.d.ts b/index.d.ts index 3d49b19..5b8e7ba 100644 --- a/index.d.ts +++ b/index.d.ts @@ -165,6 +165,12 @@ export interface ReactJsonViewProps { * Default: true */ escapeStrings?: boolean + /** + * Adds custom buttons according to the value type. + * + * Default: null + */ + customButtons?: TypeCustomButtons } export interface OnCopyProps { @@ -308,5 +314,15 @@ export type ThemeKeys = | 'tube' | 'twilight' +export type TypeCustomButtons = { + [valueType: string]: { + clickCallback: (element: { variableName: string; src: string; namespace: Array; name: string; }) => void + path: React.ReactElement> | ((element: { variableName: string; src: string; namespace: Array; name: string; }) => React.ReactElement>) + viewBox?: string | ((element: { variableName: string; src: string; namespace: Array; name: string; }) => string) + title?: string | ((element: { variableName: string; src: string; namespace: Array; name: string; }) => string) + className?: string | ((element: { variableName: string; src: string; namespace: Array; name: string; }) => string) + } +} + declare const ReactJson: React.ComponentType export default ReactJson diff --git a/package.json b/package.json index 16421bb..f7c1491 100644 --- a/package.json +++ b/package.json @@ -175,6 +175,10 @@ { "name": "Mert Donmezyurek", "email": "info@mertdy.com" + }, + { + "name": "n1c0de", + "email": "n1c0de@protonmail.com" } ], "repository": { diff --git a/src/js/components/ArrayGroup.js b/src/js/components/ArrayGroup.js index 1d9b228..c6e66e7 100644 --- a/src/js/components/ArrayGroup.js +++ b/src/js/components/ArrayGroup.js @@ -50,6 +50,7 @@ export default class extends React.PureComponent { jsvRoot, namespace, parent_type, + customButtons, ...rest } = this.props @@ -66,7 +67,7 @@ export default class extends React.PureComponent { return (
- + {[...Array(groups)].map((_, i) => (
{ this.toggleCollapsed(i) @@ -118,14 +119,14 @@ export default class extends React.PureComponent { onClick={e => { this.toggleCollapsed(i) }} - class='array-group-brace' + className='array-group-brace' > [