feat: add Row component. (#27)

Author: jaywcjlove

core/README.md

@@ -363,7 +363,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 +580,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 +823,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 +837,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 +868,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;

core/src/comps/KeyValues.tsx

@@ -4,6 +4,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';
@@ -101,10 +102,10 @@ export const KeyValuesItem = <T extends object>(props: KeyValuesProps<T>) => {
     onMouseLeave: () => dispatch({ [subkeyid]: false }),
   };
   return (
-    <div className="w-rjv-line" {...reset}>
+    <RowComp className="w-rjv-line" value={value} keyName={keyName} parentValue={parentValue} {...reset}>
       <KayName keyName={keyName} value={value} parentValue={parentValue} />
       <Value keyName={keyName!} value={value} expandKey={subkeyid} />
-    </div>
+    </RowComp>
   );
 };
 

core/src/editor/store.tsx

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren, createContext, useContext, useReducer } from 'react';
+import { createContext, useContext, useReducer } from 'react';
 
 type InitialState = {
   /**

core/src/index.tsx

@@ -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';
 
 export * from './store';
 export * from './store/Expands';
@@ -96,6 +97,7 @@ type JsonViewComponent = React.FC<React.PropsWithRef<JsonViewProps<object>>> & {
   CountInfo: typeof CountInfo;
   CountInfoExtra: typeof CountInfoExtra;
   KeyName: typeof KeyName;
+  Row: typeof Row;
 };
 
 const JsonView: JsonViewComponent = forwardRef<HTMLDivElement, JsonViewProps<object>>((props, ref) => {
@@ -173,6 +175,7 @@ JsonView.Copied = Copied;
 JsonView.CountInfo = CountInfo;
 JsonView.CountInfoExtra = CountInfoExtra;
 JsonView.KeyName = KeyName;
+JsonView.Row = Row;
 
 JsonView.displayName = 'JVR.JsonView';
 

core/src/section/Row.tsx

@@ -0,0 +1,39 @@
+import { type TagType } from '../store/Types';
+import { type SectionElement, useSectionStore } from '../store/Section';
+import { useSectionRender } from '../utils/useRender';
+
+export const Row = <K extends TagType>(props: SectionElement<K>) => {
+  const { Row: Comp = {} } = useSectionStore();
+  useSectionRender(Comp, props, 'Row');
+  return null;
+};
+
+Row.displayName = 'JVR.Row';
+
+export interface RowCompProps<T extends object> extends React.HTMLAttributes<HTMLDivElement> {
+  value?: T;
+  keyName?: string | number;
+  parentValue?: unknown;
+}
+
+export const RowComp = <T extends object>({
+  children,
+  value,
+  keyName = '',
+  parentValue,
+  ...other
+}: React.PropsWithChildren<RowCompProps<T>>) => {
+  const { Row: Comp = {} } = useSectionStore();
+  const { as, render, children: _, ...reset } = Comp;
+  const Elm = as || 'div';
+  const child =
+    render && typeof render === 'function' && render({ ...other, ...reset, children }, { value, keyName, parentValue });
+  if (child) return child;
+  return (
+    <Elm {...other} {...reset}>
+      {children}
+    </Elm>
+  );
+};
+
+RowComp.displayName = 'JVR.RowComp';

core/src/store/Section.tsx

@@ -16,6 +16,7 @@ type InitialState<T extends TagType> = {
   CountInfo?: SectionElement<T>;
   CountInfoExtra?: SectionElement<T>;
   Ellipsis?: SectionElement<T>;
+  Row?: SectionElement<T>;
   KeyName?: SectionElement<T>;
 };
 
@@ -57,6 +58,10 @@ const initialState: InitialState<TagType> = {
     className: 'w-rjv-ellipsis',
     children: '...',
   },
+  Row: {
+    as: 'div',
+    className: 'w-rjv-line',
+  },
   KeyName: {
     as: 'span',
     className: 'w-rjv-object-key',