@uiw/react-json-view 2.0.0-alpha.10 → 2.0.0-alpha.12

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>
   );
@@ -363,7 +377,7 @@ export default function Demo() {
 }
 ```
 
-Supports certain partial customizations such as: `<Copied />`, `<CountInfo />`, `<CountInfoExtra />`, `<Ellipsis />`, `<KeyName />`
+Supports certain partial customizations such as: `<Copied />`, `<CountInfo />`, `<CountInfoExtra />`, `<Ellipsis />`, `<KeyName />`, `<Row />`
 
 ```tsx mdx:preview
 import React, { Fragment } from 'react';
@@ -580,6 +594,52 @@ Passing **as="tagName"** will automatically infer the type.
 />
 ```
 
+Add a click event on the data row
+
+```tsx mdx:preview
+import React from 'react';
+import JsonView from '@uiw/react-json-view';
+
+export default function Demo() {
+  return (
+    <JsonView
+      style={{
+        '--w-rjv-background-color': '#ffffff',
+      }}
+      value={{
+        name: 'John',
+        age: 30,
+        hobbies: ['reading', 'coding', 'swimming'],
+        address: {
+            street: '123 Main St',
+            city: 'New York',
+            country: {
+                name: 'Main ',
+                codex: '123'
+            }
+        }
+      }}
+    >
+      <JsonView.Row
+        as="div"
+        render={(props, { keyName, value, parentValue }) => {
+          return (
+            <div
+              {...props}
+              onClick={() => {
+                console.log("keyName", keyName)
+                console.log("value", value)
+                console.log("parentValue", parentValue)
+              }}
+            />
+          )
+        }}
+      />
+    </JsonView>
+  )
+}
+```
+
 ## Highlight Updates
 
 ```tsx mdx:preview
@@ -777,6 +837,7 @@ import { Arrow } from './symbol/Arrow';
 import { Colon } from './symbol/Colon';
 import { Quote } from './symbol/Quote';
 import { ValueQuote } from './symbol/ValueQuote';
+
 import { Bigint } from './types/Bigint';
 import { Date } from './types/Date';
 import { False } from './types/False';
@@ -790,13 +851,24 @@ import { StringText } from './types/String';
 import { True } from './types/True';
 import { Undefined } from './types/Undefined';
 import { Url } from './types/Url';
+
 import { Copied } from './section/Copied';
 import { CountInfo } from './section/CountInfo';
 import { CountInfoExtra } from './section/CountInfoExtra';
 import { Ellipsis } from './section/Ellipsis';
 import { KeyName } from './section/KeyName';
+import { Row } from './section/Row';
 
 type JsonViewComponent = React.FC<React.PropsWithRef<JsonViewProps<object>>> & {
+  BraceLeft: typeof BraceLeft;
+  BraceRight: typeof BraceRight;
+  BracketsLeft: typeof BracketsLeft;
+  BracketsRight: typeof BracketsRight;
+  Arrow: typeof Arrow;
+  Colon: typeof Colon;
+  Quote: typeof Quote;
+  ValueQuote: typeof ValueQuote;
+
   Bigint: typeof Bigint;
   Date: typeof Date;
   False: typeof False;
@@ -810,19 +882,13 @@ type JsonViewComponent = React.FC<React.PropsWithRef<JsonViewProps<object>>> & {
   True: typeof True;
   Undefined: typeof Undefined;
   Url: typeof Url;
-  BraceLeft: typeof BraceLeft;
-  BraceRight: typeof BraceRight;
-  BracketsLeft: typeof BracketsLeft;
-  BracketsRight: typeof BracketsRight;
-  Colon: typeof Colon;
-  Ellipsis: typeof Ellipsis;
-  Quote: typeof Quote;
-  ValueQuote: typeof ValueQuote;
-  Arrow: typeof Arrow;
+
   Copied: typeof Copied;
   CountInfo: typeof CountInfo;
   CountInfoExtra: typeof CountInfoExtra;
+  Ellipsis: typeof Ellipsis;
   KeyName: typeof KeyName;
+  Row: typeof Row;
 };
 declare const JsonView: JsonViewComponent;
 export default JsonView;

package/cjs/comps/KeyValues.js

@@ -15,6 +15,7 @@ var _Expands = require("../store/Expands");
 var _ShowTools = require("../store/ShowTools");
 var _Value = require("./Value");
 var _KeyName = require("../section/KeyName");
+var _Row = require("../section/Row");
 var _Container = require("../Container");
 var _symbol = require("../symbol");
 var _useHighlight = require("../utils/useHighlight");
@@ -143,8 +144,11 @@ var KeyValuesItem = exports.KeyValuesItem = function KeyValuesItem(props) {
       return dispatch((0, _defineProperty2["default"])({}, subkeyid, false));
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
-    className: "w-rjv-line"
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Row.RowComp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+    className: "w-rjv-line",
+    value: value,
+    keyName: keyName,
+    parentValue: parentValue
   }, reset), {}, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(KayName, {
       keyName: keyName,

package/cjs/index.d.ts

@@ -25,6 +25,7 @@ import { CountInfo } from './section/CountInfo';
 import { CountInfoExtra } from './section/CountInfoExtra';
 import { Ellipsis } from './section/Ellipsis';
 import { KeyName } from './section/KeyName';
+import { Row } from './section/Row';
 export * from './store';
 export * from './store/Expands';
 export * from './store/ShowTools';
@@ -89,6 +90,7 @@ type JsonViewComponent = React.FC<React.PropsWithRef<JsonViewProps<object>>> & {
     CountInfo: typeof CountInfo;
     CountInfoExtra: typeof CountInfoExtra;
     KeyName: typeof KeyName;
+    Row: typeof Row;
 };
 declare const JsonView: JsonViewComponent;
 export default JsonView;

package/cjs/index.js

@@ -48,6 +48,7 @@ var _CountInfo = require("./section/CountInfo");
 var _CountInfoExtra = require("./section/CountInfoExtra");
 var _Ellipsis = require("./section/Ellipsis");
 var _KeyName = require("./section/KeyName");
+var _Row = require("./section/Row");
 var _jsxRuntime = require("react/jsx-runtime");
 var _Expands = require("./store/Expands");
 Object.keys(_Expands).forEach(function (key) {
@@ -191,5 +192,6 @@ JsonView.Copied = _Copied.Copied;
 JsonView.CountInfo = _CountInfo.CountInfo;
 JsonView.CountInfoExtra = _CountInfoExtra.CountInfoExtra;
 JsonView.KeyName = _KeyName.KeyName;
+JsonView.Row = _Row.Row;
 JsonView.displayName = 'JVR.JsonView';
 var _default = exports["default"] = JsonView;

package/cjs/section/Row.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { type TagType } from '../store/Types';
+import { type SectionElement } from '../store/Section';
+export declare const Row: {
+    <K extends TagType>(props: SectionElement<K>): null;
+    displayName: string;
+};
+export interface RowCompProps<T extends object> extends React.HTMLAttributes<HTMLDivElement> {
+    value?: T;
+    keyName?: string | number;
+    parentValue?: unknown;
+}
+export declare const RowComp: {
+    <T extends object>({ children, value, keyName, parentValue, ...other }: import("react").PropsWithChildren<RowCompProps<T>>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/cjs/section/Row.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RowComp = exports.Row = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _Section = require("../store/Section");
+var _useRender = require("../utils/useRender");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["children", "value", "keyName", "parentValue"],
+  _excluded2 = ["as", "render", "children"];
+var Row = exports.Row = function Row(props) {
+  var _useSectionStore = (0, _Section.useSectionStore)(),
+    _useSectionStore$Row = _useSectionStore.Row,
+    Comp = _useSectionStore$Row === void 0 ? {} : _useSectionStore$Row;
+  (0, _useRender.useSectionRender)(Comp, props, 'Row');
+  return null;
+};
+Row.displayName = 'JVR.Row';
+var RowComp = exports.RowComp = function RowComp(_ref) {
+  var children = _ref.children,
+    value = _ref.value,
+    _ref$keyName = _ref.keyName,
+    keyName = _ref$keyName === void 0 ? '' : _ref$keyName,
+    parentValue = _ref.parentValue,
+    other = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var _useSectionStore2 = (0, _Section.useSectionStore)(),
+    _useSectionStore2$Row = _useSectionStore2.Row,
+    Comp = _useSectionStore2$Row === void 0 ? {} : _useSectionStore2$Row;
+  var as = Comp.as,
+    render = Comp.render,
+    _ = Comp.children,
+    reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded2);
+  var Elm = as || 'div';
+  var child = render && typeof render === 'function' && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, other), reset), {}, {
+    children: children
+  }), {
+    value: value,
+    keyName: keyName,
+    parentValue: parentValue
+  });
+  if (child) return child;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, other), reset), {}, {
+    children: children
+  }));
+};
+RowComp.displayName = 'JVR.RowComp';

package/cjs/store/Section.d.ts

@@ -14,6 +14,7 @@ type InitialState<T extends TagType> = {
     CountInfo?: SectionElement<T>;
     CountInfoExtra?: SectionElement<T>;
     Ellipsis?: SectionElement<T>;
+    Row?: SectionElement<T>;
     KeyName?: SectionElement<T>;
 };
 type Dispatch = React.Dispatch<InitialState<TagType>>;
@@ -23,6 +24,7 @@ export declare function useSection(): [{
     CountInfo?: SectionElement<TagType> | undefined;
     CountInfoExtra?: SectionElement<TagType> | undefined;
     Ellipsis?: SectionElement<TagType> | undefined;
+    Row?: SectionElement<TagType> | undefined;
     KeyName?: SectionElement<TagType> | undefined;
 }, React.Dispatch<InitialState<TagType>>];
 export declare function useSectionDispatch(): Dispatch;

package/cjs/store/Section.js

@@ -49,6 +49,10 @@ var initialState = {
     className: 'w-rjv-ellipsis',
     children: '...'
   },
+  Row: {
+    as: 'div',
+    className: 'w-rjv-line'
+  },
   KeyName: {
     as: 'span',
     className: 'w-rjv-object-key'

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/comps/KeyValues.js

@@ -5,6 +5,7 @@ import { useExpandsStore } from '../store/Expands';
 import { useShowToolsDispatch } from '../store/ShowTools';
 import { Value } from './Value';
 import { KeyNameComp } from '../section/KeyName';
+import { RowComp } from '../section/Row';
 import { Container } from '../Container';
 import { Quote, Colon } from '../symbol';
 import { useHighlight } from '../utils/useHighlight';
@@ -130,8 +131,11 @@ export var KeyValuesItem = props => {
       [subkeyid]: false
     })
   };
-  return /*#__PURE__*/_jsxs("div", _extends({
-    className: "w-rjv-line"
+  return /*#__PURE__*/_jsxs(RowComp, _extends({
+    className: "w-rjv-line",
+    value: value,
+    keyName: keyName,
+    parentValue: parentValue
   }, reset, {
     children: [/*#__PURE__*/_jsx(KayName, {
       keyName: keyName,

package/esm/index.d.ts

@@ -25,6 +25,7 @@ import { CountInfo } from './section/CountInfo';
 import { CountInfoExtra } from './section/CountInfoExtra';
 import { Ellipsis } from './section/Ellipsis';
 import { KeyName } from './section/KeyName';
+import { Row } from './section/Row';
 export * from './store';
 export * from './store/Expands';
 export * from './store/ShowTools';
@@ -89,6 +90,7 @@ type JsonViewComponent = React.FC<React.PropsWithRef<JsonViewProps<object>>> & {
     CountInfo: typeof CountInfo;
     CountInfoExtra: typeof CountInfoExtra;
     KeyName: typeof KeyName;
+    Row: typeof Row;
 };
 declare const JsonView: JsonViewComponent;
 export default JsonView;

package/esm/index.js

@@ -30,6 +30,7 @@ import { CountInfo } from './section/CountInfo';
 import { CountInfoExtra } from './section/CountInfoExtra';
 import { Ellipsis } from './section/Ellipsis';
 import { KeyName } from './section/KeyName';
+import { Row } from './section/Row';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export * from './store';
@@ -113,5 +114,6 @@ JsonView.Copied = Copied;
 JsonView.CountInfo = CountInfo;
 JsonView.CountInfoExtra = CountInfoExtra;
 JsonView.KeyName = KeyName;
+JsonView.Row = Row;
 JsonView.displayName = 'JVR.JsonView';
 export default JsonView;

package/esm/section/Row.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { type TagType } from '../store/Types';
+import { type SectionElement } from '../store/Section';
+export declare const Row: {
+    <K extends TagType>(props: SectionElement<K>): null;
+    displayName: string;
+};
+export interface RowCompProps<T extends object> extends React.HTMLAttributes<HTMLDivElement> {
+    value?: T;
+    keyName?: string | number;
+    parentValue?: unknown;
+}
+export declare const RowComp: {
+    <T extends object>({ children, value, keyName, parentValue, ...other }: import("react").PropsWithChildren<RowCompProps<T>>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/esm/section/Row.js

@@ -0,0 +1,45 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["children", "value", "keyName", "parentValue"],
+  _excluded2 = ["as", "render", "children"];
+import { useSectionStore } from '../store/Section';
+import { useSectionRender } from '../utils/useRender';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var Row = props => {
+  var {
+    Row: Comp = {}
+  } = useSectionStore();
+  useSectionRender(Comp, props, 'Row');
+  return null;
+};
+Row.displayName = 'JVR.Row';
+export var RowComp = _ref => {
+  var {
+      children,
+      value,
+      keyName = '',
+      parentValue
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var {
+    Row: Comp = {}
+  } = useSectionStore();
+  var {
+      as,
+      render
+    } = Comp,
+    reset = _objectWithoutPropertiesLoose(Comp, _excluded2);
+  var Elm = as || 'div';
+  var child = render && typeof render === 'function' && render(_extends({}, other, reset, {
+    children
+  }), {
+    value,
+    keyName,
+    parentValue
+  });
+  if (child) return child;
+  return /*#__PURE__*/_jsx(Elm, _extends({}, other, reset, {
+    children: children
+  }));
+};
+RowComp.displayName = 'JVR.RowComp';

package/esm/store/Section.d.ts

@@ -14,6 +14,7 @@ type InitialState<T extends TagType> = {
     CountInfo?: SectionElement<T>;
     CountInfoExtra?: SectionElement<T>;
     Ellipsis?: SectionElement<T>;
+    Row?: SectionElement<T>;
     KeyName?: SectionElement<T>;
 };
 type Dispatch = React.Dispatch<InitialState<TagType>>;
@@ -23,6 +24,7 @@ export declare function useSection(): [{
     CountInfo?: SectionElement<TagType> | undefined;
     CountInfoExtra?: SectionElement<TagType> | undefined;
     Ellipsis?: SectionElement<TagType> | undefined;
+    Row?: SectionElement<TagType> | undefined;
     KeyName?: SectionElement<TagType> | undefined;
 }, React.Dispatch<InitialState<TagType>>];
 export declare function useSectionDispatch(): Dispatch;

package/esm/store/Section.js

@@ -38,6 +38,10 @@ var initialState = {
     className: 'w-rjv-ellipsis',
     children: '...'
   },
+  Row: {
+    as: 'div',
+    className: 'w-rjv-line'
+  },
   KeyName: {
     as: 'span',
     className: 'w-rjv-object-key'

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.10",
+  "version": "2.0.0-alpha.12",
   "description": "JSON viewer for react.",
   "main": "cjs/index.js",
   "module": "esm/index.js",