feat: enhance render props for Quote/KeyName/Colon/Arrow/BracketsOpen/BracketsClose. #32

jaywcjlove · jaywcjlove · commit 1869f0ddff4f · 2024-10-17T03:14:49.000+08:00
diff --git a/core/README.md b/core/README.md
@@ -127,7 +127,6 @@ export default function Demo() {
 }
 ```
 
-
 Example of custom `vscode` theme styles: 
 
 ```tsx mdx:preview
@@ -682,6 +681,35 @@ export default function Demo() {
 
 This feature can be disabled with `highlightUpdates={false}`, and the default color can be changed with `--w-rjv-update-color`.
 
+## Do not display array index
+
+```tsx mdx:preview
+import React, { Fragment } from 'react';
+import JsonView from '@uiw/react-json-view';
+
+export default function Demo() {
+  const value = { data: ["123", 23] }
+  return (
+    <JsonView value={value} style={{ '--w-rjv-background-color': '#ffffff' }}>
+        <JsonView.Colon render={(props, { parentValue, value, keyName }) => {
+            if (Array.isArray(parentValue) && props.children == ":") {
+              return <span />
+            }
+            return <span {...props} />
+        }}/>
+        <JsonView.KeyName 
+          render={({ ...props }, { type, parentValue, value, keyName }) => {
+            if (Array.isArray(parentValue) && Number.isFinite( props.children)) {
+              return <span />
+            }
+            return <span {...props} />
+          }}
+        />
+    </JsonView>
+  )
+}
+```
+
 ## Modify Icon Style
 
 Use built-in default icons.
diff --git a/core/src/comps/KeyValues.tsx b/core/src/comps/KeyValues.tsx
@@ -66,16 +66,15 @@ export const KayName = <T extends object>(props: KayNameProps<T>) => {
   const isNumber = typeof keyName === 'number';
   const highlightContainer = useRef<HTMLSpanElement>(null);
   useHighlight({ value, highlightUpdates, highlightContainer });
+  const compProps = { keyName, value, keys, parentValue };
   return (
     <Fragment>
       <span ref={highlightContainer}>
-        <Quote isNumber={isNumber} data-placement="left" />
-        <KeyNameComp keyName={keyName!} value={value} keys={keys} parentValue={parentValue}>
-          {keyName}
-        </KeyNameComp>
-        <Quote isNumber={isNumber} data-placement="right" />
+        <Quote isNumber={isNumber} data-placement="left" {...compProps} />
+        <KeyNameComp {...compProps}>{keyName}</KeyNameComp>
+        <Quote isNumber={isNumber} data-placement="right" {...compProps} />
       </span>
-      <Colon />
+      <Colon {...compProps} />
     </Fragment>
   );
 };
diff --git a/core/src/comps/NestedOpen.tsx b/core/src/comps/NestedOpen.tsx
@@ -40,15 +40,16 @@ export const NestedOpen = <T extends object>(props: NestedOpenProps<T>) => {
   if (showArrow) {
     reset.onClick = click;
   }
+  const compProps = { keyName, value, keys, parentValue };
   return (
     <span {...reset}>
-      {showArrow && <Arrow style={arrowStyle} expandKey={expandKey} />}
+      {showArrow && <Arrow style={arrowStyle} expandKey={expandKey} {...compProps} />}
       {(keyName || typeof keyName === 'number') && <KayName keyName={keyName} />}
       <SetComp value={initialValue} keyName={keyName!} />
       <MapComp value={initialValue} keyName={keyName!} />
-      <BracketsOpen isBrackets={isArray || isMySet} />
+      <BracketsOpen isBrackets={isArray || isMySet} {...compProps} />
       <EllipsisComp keyName={keyName!} value={value} isExpanded={isExpanded} />
-      <BracketsClose isVisiable={isExpanded || !showArrow} isBrackets={isArray || isMySet} />
+      <BracketsClose isVisiable={isExpanded || !showArrow} isBrackets={isArray || isMySet} {...compProps} />
       <CountInfoComp value={value} keyName={keyName!} />
       <CountInfoExtraComps value={value} keyName={keyName!} />
       <Copied keyName={keyName!} value={value} expandKey={expandKey} parentValue={parentValue} keys={keys} />
diff --git a/core/src/store/Symbols.tsx b/core/src/store/Symbols.tsx
@@ -10,9 +10,17 @@ import {
 import { type TagType } from './Types';
 import { TriangleArrow } from '../arrow/TriangleArrow';
 
+export interface SymbolsElementResult<T extends object, K = string | number> {
+  value?: T;
+  parentValue?: T;
+  keyName?: K;
+  /** Index of the parent `keyName` */
+  keys?: K[];
+}
+
 type SymbolsElementProps<T extends TagType = 'span'> = {
   as?: T;
-  render?: (props: SymbolsElement<T>) => React.ReactNode;
+  render?: (props: SymbolsElement<T>, result: SymbolsElementResult<object>) => React.ReactNode;
   'data-type'?: string;
 };
 export type SymbolsElement<T extends TagType = 'span'> = SymbolsElementProps<T> & ComponentPropsWithoutRef<T>;
diff --git a/core/src/symbol/index.tsx b/core/src/symbol/index.tsx
@@ -1,15 +1,18 @@
-import { useSymbolsStore, type SymbolsElement } from '../store/Symbols';
+import { useSymbolsStore, type SymbolsElement, type SymbolsElementResult } from '../store/Symbols';
 import { type TagType } from '../store/Types';
 import { useExpandsStore } from '../store/Expands';
 
-export const Quote = (props: { isNumber?: boolean } & React.HTMLAttributes<HTMLElement>) => {
+export const Quote = <T extends object>(
+  props: { isNumber?: boolean } & React.HTMLAttributes<HTMLElement> & SymbolsElementResult<T>,
+) => {
   const { Quote: Comp = {} } = useSymbolsStore();
-  const { isNumber, ...other } = props;
+  const { isNumber, value, parentValue, keyName, keys, ...other } = props;
   if (isNumber) return null;
   const { as, render, ...reset } = Comp;
   const Elm = as || 'span';
   const elmProps = { ...other, ...reset };
-  const child = render && typeof render === 'function' && render(elmProps);
+  let result = { value, parentValue, keyName, keys: keys || (keyName ? [keyName] : []) };
+  const child = render && typeof render === 'function' && render(elmProps, result);
   if (child) return child;
   return <Elm {...elmProps} />;
 };
@@ -22,59 +25,68 @@ export const ValueQuote = (props: React.HTMLAttributes<HTMLElement>) => {
   const { as, render, ...reset } = Comp;
   const Elm = as || 'span';
   const elmProps = { ...other, ...reset };
-  const child = render && typeof render === 'function' && render(elmProps);
+  const child = render && typeof render === 'function' && render(elmProps, {});
   if (child) return child;
   return <Elm {...elmProps} />;
 };
 
 ValueQuote.displayName = 'JVR.ValueQuote';
 
-export const Colon = () => {
+export const Colon = <T extends object>(props: SymbolsElementResult<T>) => {
+  const { value, parentValue, keyName, keys } = props;
   const { Colon: Comp = {} } = useSymbolsStore();
   const { as, render, ...reset } = Comp;
   const Elm = as || 'span';
-  const child = render && typeof render === 'function' && render(reset);
+  const child =
+    render &&
+    typeof render === 'function' &&
+    render(reset, {
+      value,
+      parentValue,
+      keyName,
+      keys: keys || (keyName ? [keyName] : []),
+    });
   if (child) return child;
   return <Elm {...reset} />;
 };
 
 Colon.displayName = 'JVR.Colon';
 
-export const Arrow = <T extends TagType>(props: SymbolsElement<T> & { expandKey: string }) => {
+export const Arrow = <T extends TagType, K extends object>(
+  props: SymbolsElement<T> & { expandKey: string } & SymbolsElementResult<K>,
+) => {
   const { Arrow: Comp = {} } = useSymbolsStore();
   const expands = useExpandsStore();
-  const { expandKey } = props;
+  const { expandKey, style: resetStyle, value, parentValue, keyName, keys } = props;
   const isExpanded = !!expands[expandKey];
   const { as, style, render, ...reset } = Comp;
   const Elm = as || 'span';
   const isRender = render && typeof render === 'function';
-  const child = isRender && render({ ...reset, 'data-expanded': isExpanded, style: { ...style, ...props.style } });
+  const elmProps = { ...reset, 'data-expanded': isExpanded, style: { ...style, ...resetStyle } };
+  const result = { value, parentValue, keyName, keys: keys || (keyName ? [keyName] : []) };
+  const child = isRender && render(elmProps, result);
   if (child) return child;
-  return <Elm {...reset} style={{ ...style, ...props.style }} />;
+  return <Elm {...reset} style={{ ...style, ...resetStyle }} />;
 };
 
 Arrow.displayName = 'JVR.Arrow';
 
-type EllipsisProps<T extends object> = {
-  isExpanded?: boolean;
-  keyName: string | number;
-  value?: T;
-};
-
-export const BracketsOpen = ({ isBrackets }: { isBrackets?: boolean }) => {
+export const BracketsOpen = <K extends object>(props: { isBrackets?: boolean } & SymbolsElementResult<K>) => {
+  const { isBrackets, value, parentValue, keyName, keys } = props;
   const { BracketsLeft = {}, BraceLeft = {} } = useSymbolsStore();
+  const result = { value, parentValue, keyName, keys: keys || (keyName ? [keyName] : []) };
   if (isBrackets) {
     const { as, render, ...reset } = BracketsLeft;
     const BracketsLeftComp = as || 'span';
-    const child = render && typeof render === 'function' && render(reset);
+    const child = render && typeof render === 'function' && render(reset, result);
     if (child) return child;
     return <BracketsLeftComp {...reset} />;
   }
-  const { as: elm, render, ...props } = BraceLeft;
+  const { as: elm, render, ...resetProps } = BraceLeft;
   const BraceLeftComp = elm || 'span';
-  const child = render && typeof render === 'function' && render(props);
+  const child = render && typeof render === 'function' && render(resetProps, result);
   if (child) return child;
-  return <BraceLeftComp {...props} />;
+  return <BraceLeftComp {...resetProps} />;
 };
 
 BracketsOpen.displayName = 'JVR.BracketsOpen';
@@ -84,19 +96,21 @@ type BracketsCloseProps = {
   isVisiable?: boolean;
 };
 
-export const BracketsClose = ({ isBrackets, isVisiable }: BracketsCloseProps) => {
+export const BracketsClose = <K extends object>(props: BracketsCloseProps & SymbolsElementResult<K>) => {
+  const { isBrackets, isVisiable, value, parentValue, keyName, keys } = props;
+  const result = { value, parentValue, keyName, keys: keys || (keyName ? [keyName] : []) };
   if (!isVisiable) return null;
   const { BracketsRight = {}, BraceRight = {} } = useSymbolsStore();
   if (isBrackets) {
     const { as, render, ...reset } = BracketsRight;
     const BracketsRightComp = as || 'span';
-    const child = render && typeof render === 'function' && render(reset);
+    const child = render && typeof render === 'function' && render(reset, result);
     if (child) return child;
     return <BracketsRightComp {...reset} />;
   }
   const { as: elm, render, ...reset } = BraceRight;
   const BraceRightComp = elm || 'span';
-  const child = render && typeof render === 'function' && render(reset);
+  const child = render && typeof render === 'function' && render(reset, result);
   if (child) return child;
   return <BraceRightComp {...reset} />;
 };
