@uiw/react-json-view 2.0.0-alpha.11 → 2.0.0-alpha.13

package/README.md

@@ -147,6 +147,7 @@ const object = {
 const customTheme = {
   '--w-rjv-font-family': 'monospace',
   '--w-rjv-color': '#9cdcfe',
+  '--w-rjv-key-number': '#268bd2',
   '--w-rjv-key-string': '#9cdcfe',
   '--w-rjv-background-color': '#1e1e1e',
   '--w-rjv-line-color': '#36334280',
@@ -160,6 +161,7 @@ const customTheme = {
   '--w-rjv-curlybraces-color': '#d4d4d4',
   '--w-rjv-colon-color': '#d4d4d4',
   '--w-rjv-brackets-color': '#d4d4d4',
+  '--w-rjv-ellipsis-color': '#cb4b16',
   '--w-rjv-quotes-color': 'var(--w-rjv-key-string)',
   '--w-rjv-quotes-string-color': 'var(--w-rjv-type-string-color)',
 
@@ -217,6 +219,7 @@ const object = {
 }
 const customTheme = {
   '--w-rjv-color': '#9cdcfe',
+  '--w-rjv-key-number': '#268bd2',
   '--w-rjv-key-string': '#9cdcfe',
   '--w-rjv-background-color': '#1e1e1e',
   '--w-rjv-line-color': '#36334280',
@@ -230,6 +233,7 @@ const customTheme = {
   '--w-rjv-curlybraces-color': '#d4d4d4',
   '--w-rjv-colon-color': '#d4d4d4',
   '--w-rjv-brackets-color': '#d4d4d4',
+  '--w-rjv-ellipsis-color': '#cb4b16',
   '--w-rjv-quotes-color': '#9cdcfe',
   '--w-rjv-quotes-string-color': '#ce9178',
 
@@ -279,21 +283,31 @@ export default function Demo() {
         />
         <div>
           <Colorful color={hex} onChange={onChange} />
-          <div style={{ display: 'flex', gap: '0.4rem', flexDirection: 'column' }}>
+          <div style={{ display: 'flex', gap: '0.4rem', flexDirection: 'column', ...customTheme }}>
             {Object.keys(customTheme).map((varname, idx) => {
               const click = () => {
                 setCssvar(varname);
                 setHex(customTheme[varname]);
               };
               const active = cssvar === varname ? '#a8a8a8' : '';
-              return <button key={idx} style={{ background: active, border: 0,boxShadow: 'inset 0px 0px 1px #000', textAlign: 'left' }} onClick={click}>{varname}</button>
+              return (
+                <button key={idx}
+                  style={{ background: active, border: 0,boxShadow: 'inset 0px 0px 1px #000', display: 'flex', alignItems: 'center', gap: 5, padding: '1px 3px' }}
+                  onClick={click}
+                >
+                  <span style={{ display: 'inline-block', width: 12, height: 12, background: `var(${varname})` }}></span>
+                  {varname}
+                </button>
+              )
             })}
           </div>
         </div>
       </div>
-      <pre style={{ padding: 10 }}>
+      <div>
         Copy the theme configuration below into your project.
-        <JsonView value={theme} displayDataTypes={false} />
+      </div>
+      <pre style={{ padding: 10 }}>
+        {JSON.stringify(theme, null, 2)}
       </pre>
     </React.Fragment>
   );

package/cjs/index.js

@@ -110,7 +110,7 @@ Object.keys(_symbol).forEach(function (key) {
     }
   });
 });
-var _excluded = ["className", "style", "value", "children", "collapsed", "indentWidth", "displayObjectSize", "shortenTextAfterLength", "highlightUpdates", "enableClipboard", "displayDataTypes", "objectSortKeys", "onExpand"];
+var _excluded = ["className", "style", "value", "children", "collapsed", "indentWidth", "displayObjectSize", "shortenTextAfterLength", "highlightUpdates", "enableClipboard", "displayDataTypes", "objectSortKeys", "onExpand", "onCopied"];
 var JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$className = props.className,
     className = _props$className === void 0 ? '' : _props$className,
@@ -133,6 +133,7 @@ var JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     _props$objectSortKeys = props.objectSortKeys,
     objectSortKeys = _props$objectSortKeys === void 0 ? false : _props$objectSortKeys,
     onExpand = props.onExpand,
+    onCopied = props.onCopied,
     elmProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var defaultStyle = (0, _objectSpread2["default"])({
     lineHeight: 1.4,
@@ -152,6 +153,7 @@ var JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       enableClipboard: enableClipboard,
       shortenTextAfterLength: shortenTextAfterLength,
       highlightUpdates: highlightUpdates,
+      onCopied: onCopied,
       onExpand: onExpand
     },
     initialTypes: {

package/cjs/theme/basic.js

@@ -7,6 +7,7 @@ exports.basicTheme = void 0;
 var basicTheme = exports.basicTheme = {
   '--w-rjv-font-family': 'monospace',
   '--w-rjv-color': '#b5bd68',
+  '--w-rjv-key-number': '#002b36',
   '--w-rjv-key-string': '#b5bd68',
   '--w-rjv-background-color': '#2E3235',
   '--w-rjv-line-color': '#292d30',
@@ -19,6 +20,7 @@ var basicTheme = exports.basicTheme = {
   '--w-rjv-curlybraces-color': '#cc99cc',
   '--w-rjv-colon-color': '#bababa',
   '--w-rjv-brackets-color': '#808080',
+  '--w-rjv-ellipsis-color': '#cb4b16',
   '--w-rjv-quotes-color': 'var(--w-rjv-key-string)',
   '--w-rjv-quotes-string-color': 'var(--w-rjv-type-string-color)',
   '--w-rjv-type-string-color': '#b5bd68',

package/esm/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["className", "style", "value", "children", "collapsed", "indentWidth", "displayObjectSize", "shortenTextAfterLength", "highlightUpdates", "enableClipboard", "displayDataTypes", "objectSortKeys", "onExpand"];
+var _excluded = ["className", "style", "value", "children", "collapsed", "indentWidth", "displayObjectSize", "shortenTextAfterLength", "highlightUpdates", "enableClipboard", "displayDataTypes", "objectSortKeys", "onExpand", "onCopied"];
 import { forwardRef } from 'react';
 import { Provider } from './store';
 import { Container } from './Container';
@@ -53,7 +53,8 @@ var JsonView = /*#__PURE__*/forwardRef((props, ref) => {
       enableClipboard = true,
       displayDataTypes = true,
       objectSortKeys = false,
-      onExpand
+      onExpand,
+      onCopied
     } = props,
     elmProps = _objectWithoutPropertiesLoose(props, _excluded);
   var defaultStyle = _extends({
@@ -74,6 +75,7 @@ var JsonView = /*#__PURE__*/forwardRef((props, ref) => {
       enableClipboard,
       shortenTextAfterLength,
       highlightUpdates,
+      onCopied,
       onExpand
     },
     initialTypes: {

package/esm/theme/basic.js

@@ -1,6 +1,7 @@
 export var basicTheme = {
   '--w-rjv-font-family': 'monospace',
   '--w-rjv-color': '#b5bd68',
+  '--w-rjv-key-number': '#002b36',
   '--w-rjv-key-string': '#b5bd68',
   '--w-rjv-background-color': '#2E3235',
   '--w-rjv-line-color': '#292d30',
@@ -13,6 +14,7 @@ export var basicTheme = {
   '--w-rjv-curlybraces-color': '#cc99cc',
   '--w-rjv-colon-color': '#bababa',
   '--w-rjv-brackets-color': '#808080',
+  '--w-rjv-ellipsis-color': '#cb4b16',
   '--w-rjv-quotes-color': 'var(--w-rjv-key-string)',
   '--w-rjv-quotes-string-color': 'var(--w-rjv-type-string-color)',
   '--w-rjv-type-string-color': '#b5bd68',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-json-view",
-  "version": "2.0.0-alpha.11",
+  "version": "2.0.0-alpha.13",
   "description": "JSON viewer for react.",
   "main": "cjs/index.js",
   "module": "esm/index.js",