From f57eaac5783af14525154b3e1d5c6959fc2f1148 Mon Sep 17 00:00:00 2001 From: Chad Autry <> Date: Sat, 17 Apr 2021 15:36:14 +0000 Subject: [PATCH] Custom Icon --- dev-server/src/index.js | 11 +++++ package-lock.json | 2 +- package.json | 2 +- src/js/components/ArrayGroup.js | 3 +- src/js/components/CopyToClipboard.js | 2 +- src/js/components/CustomButton.js | 64 +++++++++++++++++++++++++++ src/js/components/DataTypes/Object.js | 4 +- src/js/components/JsonViewer.js | 1 + src/js/components/VariableEditor.js | 12 ++++- src/js/components/VariableMeta.js | 12 ++++- src/js/components/icons.js | 22 +++++++++ 11 files changed, 127 insertions(+), 8 deletions(-) create mode 100644 src/js/components/CustomButton.js diff --git a/dev-server/src/index.js b/dev-server/src/index.js index 169a2501..c89d6097 100644 --- a/dev-server/src/index.js +++ b/dev-server/src/index.js @@ -19,6 +19,17 @@ ReactDom.render( src={getExampleJson1()} quotesOnKeys={false} collapseStringsAfterLength={12} + customButtons={{"array":{ + "clickCallback":(element)=>{console.log(JSON.stringify(element,null,4))}, + "viewBox": "0 0 40 40", + "path": + }, + "date":{ + "clickCallback":(element)=>{console.log(JSON.stringify(element,null,4))}, + "viewBox": "0 0 40 40", + "path": + } + }} onEdit={e => { console.log('edit callback', e); if (e.new_value == 'error') { diff --git a/package-lock.json b/package-lock.json index 9589552f..1bc044be 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "react-json-view", - "version": "1.21.1", + "version": "1.21.3", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 36d66aad..c2d9257f 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,7 @@ }, "scripts": { "build": "NODE_ENV=production webpack --config webpack/webpack.config.js -p --display-error-details --progress --optimize-minimize", - "prebuild": "NODE_ENV=test npm run test:unit", + "build:demo": "NODE_ENV=production webpack --config webpack/webpack.config-demo.js -p --display-error-details --progress --optimize-minimize", "dev": "NODE_ENV=development webpack-dev-server --config webpack/webpack.config-dev.js --open", "modules:debug": "./docker/debug.sh", diff --git a/src/js/components/ArrayGroup.js b/src/js/components/ArrayGroup.js index deae3f8e..8da88a3e 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; @@ -74,7 +75,7 @@ export default class extends React.PureComponent { - + {[...Array(groups)].map((_, i) => (
{ + + const { clickCallback, src, namespace } = this.props; + + + clickCallback({ + src: src, + namespace: namespace, + name: namespace[namespace.length - 1] + }); + }; + + getClippyIcon = () => { + const { theme} = this.props; + + return ; + }; + + render() { + const { src, theme, hidden, rowHovered, title } = this.props; + let style = Theme(theme, 'copy-to-clipboard').style; + let display = 'inline'; + + if (hidden) { + display = 'none'; + } + + return ( + + + {this.getClippyIcon()} + + + ); + } +} diff --git a/src/js/components/DataTypes/Object.js b/src/js/components/DataTypes/Object.js index 4c7cb93f..3bbb6a4b 100644 --- a/src/js/components/DataTypes/Object.js +++ b/src/js/components/DataTypes/Object.js @@ -130,10 +130,10 @@ class RjvObject extends React.PureComponent { }; getObjectMetaData = src => { - const { rjvId, theme } = this.props; + const { rjvId, theme, customButtons } = this.props; const { size, hovered } = this.state; return ( - + ); }; diff --git a/src/js/components/JsonViewer.js b/src/js/components/JsonViewer.js index 5c0278f8..ad11634a 100644 --- a/src/js/components/JsonViewer.js +++ b/src/js/components/JsonViewer.js @@ -23,6 +23,7 @@ export default class extends React.PureComponent { namespace={namespace} depth={0} jsvRoot={true} + customButtons={{}} {...props} />
diff --git a/src/js/components/VariableEditor.js b/src/js/components/VariableEditor.js index a78aab4e..78c41104 100644 --- a/src/js/components/VariableEditor.js +++ b/src/js/components/VariableEditor.js @@ -6,6 +6,7 @@ import dispatcher from './../helpers/dispatcher'; import parseInput from './../helpers/parseInput'; import stringifyVariable from './../helpers/stringifyVariable'; import CopyToClipboard from './CopyToClipboard'; +import CustomButton from './CustomButton'; //data type components import { @@ -55,7 +56,8 @@ class VariableEditor extends React.PureComponent { onDelete, onSelect, displayArrayKey, - quotesOnKeys + quotesOnKeys, + customButtons } = this.props; const { editMode } = this.state; return ( @@ -138,6 +140,14 @@ class VariableEditor extends React.PureComponent { {...{ theme, namespace: [...namespace, variable.name] }} /> ) : null} + {customButtons[variable.name] ? ( + + ) : null} {onEdit !== false && editMode == false ? this.getEditIcon() : null} diff --git a/src/js/components/VariableMeta.js b/src/js/components/VariableMeta.js index d6f6da74..84ba9aa6 100644 --- a/src/js/components/VariableMeta.js +++ b/src/js/components/VariableMeta.js @@ -2,6 +2,7 @@ import React from 'react'; import dispatcher from './../helpers/dispatcher'; import CopyToClipboard from './CopyToClipboard'; +import CustomButton from './CustomButton'; import { toType } from './../helpers/util'; //icons @@ -114,7 +115,9 @@ export default class extends React.PureComponent { enableClipboard, src, namespace, - rowHovered + rowHovered, + name, + customButtons } = this.props; return (
) : null} + {customButtons[name] ? ( + + ) : null} {/* copy add/remove icons */} {onAdd !== false ? this.getAddAttribute(rowHovered) : null} {onDelete !== false ? this.getRemoveObject(rowHovered) : null} diff --git a/src/js/components/icons.js b/src/js/components/icons.js index 863eb9ea..d00616ce 100644 --- a/src/js/components/icons.js +++ b/src/js/components/icons.js @@ -266,6 +266,28 @@ export class CheckCircle extends React.PureComponent { } } +export class CustomIcon extends React.PureComponent { + render() { + const { props } = this; + const { style, path, viewBox} = props; + + return ( + + + + {path} + + + + ); + } +} + function getIconStyle(style) { if (!style) { style = {};