feat: enhance the render method of the Copied component. #35

uiwjs · Feb 29, 2024 · 2101c36 · 2101c36
1 parent 2e21ade
commit 2101c36
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 53 deletions.
diff --git a/core/src/Container.tsx b/core/src/Container.tsx
@@ -36,8 +36,23 @@ export const Container = forwardRef(<T extends object>(props: ContainerProps<T>,
   };
   return (
     <div className={defaultClassNames} ref={ref} {...elmProps} {...reset}>
-      <NestedOpen expandKey={subkeyid} value={value} level={level} keyName={keyName} initialValue={initialValue} />
-      <KeyValues expandKey={subkeyid} value={value} level={level} keys={keys} />
+      <NestedOpen
+        expandKey={subkeyid}
+        value={value}
+        level={level}
+        keys={keys}
+        parentValue={parentValue}
+        keyName={keyName}
+        initialValue={initialValue}
+      />
+      <KeyValues
+        expandKey={subkeyid}
+        value={value}
+        level={level}
+        keys={keys}
+        parentValue={parentValue}
+        keyName={keyName}
+      />
       <NestedClose expandKey={subkeyid} value={value} level={level} />
     </div>
   );

diff --git a/core/src/comps/Copied.tsx b/core/src/comps/Copied.tsx
@@ -3,21 +3,20 @@ import { useStore } from '../store';
 import { useShowToolsStore } from '../store/ShowTools';
 import { useSectionStore } from '../store/Section';
 import { type TagType } from '../store/Types';
+import { type SectionElementResult } from '../store/Section';
 
 export type CopiedOption<T extends object> = {
   value?: T;
   copied: boolean;
   setCopied: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-export interface CopiedProps<T extends object> extends React.SVGProps<SVGSVGElement> {
-  value?: T;
-  keyName: string | number;
+export interface CopiedProps<T extends object> extends React.SVGProps<SVGSVGElement>, SectionElementResult<T> {
   expandKey: string;
 }
 
 export const Copied = <T extends object, K extends TagType>(props: CopiedProps<T>) => {
-  const { keyName, value, expandKey, ...other } = props;
+  const { keyName, value, parentValue, expandKey, keys, ...other } = props;
   const { onCopied, enableClipboard } = useStore();
   const showTools = useShowToolsStore();
   const isShowTools = showTools[expandKey];
@@ -67,7 +66,8 @@ export const Copied = <T extends object, K extends TagType>(props: CopiedProps<T
   } as React.SVGProps<SVGSVGElement>;
   const isRender = render && typeof render === 'function';
   const child =
-    isRender && render({ ...elmProps, 'data-copied': copied } as React.HTMLAttributes<K>, { value, keyName });
+    isRender &&
+    render({ ...elmProps, 'data-copied': copied } as React.HTMLAttributes<K>, { value, keyName, keys, parentValue });
   if (child) return child;
   if (copied) {
     return (

diff --git a/core/src/comps/KeyValues.tsx b/core/src/comps/KeyValues.tsx
@@ -5,10 +5,11 @@ import { useShowToolsDispatch } from '../store/ShowTools';
 import { Value } from './Value';
 import { KeyNameComp } from '../section/KeyName';
 import { RowComp } from '../section/Row';
-import { Container, type ContainerProps } from '../Container';
+import { Container } from '../Container';
 import { Quote, Colon } from '../symbol';
 import { useHighlight } from '../utils/useHighlight';
 import { type SectionElementResult } from '../store/Section';
+import { Copied } from '../comps/Copied';
 
 interface KeyValuesProps<T extends object> extends SectionElementResult<T> {
   expandKey?: string;
@@ -59,7 +60,7 @@ KeyValues.displayName = 'JVR.KeyValues';
 
 interface KayNameProps<T extends object> extends Omit<KeyValuesProps<T>, 'level'> {}
 export const KayName = <T extends object>(props: KayNameProps<T>) => {
-  const { keyName, parentValue, value } = props;
+  const { keyName, parentValue, keys, value } = props;
   const { highlightUpdates } = useStore();
   const isNumber = typeof keyName === 'number';
   const highlightContainer = useRef<HTMLSpanElement>(null);
@@ -68,7 +69,7 @@ export const KayName = <T extends object>(props: KayNameProps<T>) => {
     <Fragment>
       <span ref={highlightContainer}>
         <Quote isNumber={isNumber} data-placement="left" />
-        <KeyNameComp keyName={keyName!} value={value} parentValue={parentValue}>
+        <KeyNameComp keyName={keyName!} value={value} keys={keys} parentValue={parentValue}>
           {keyName}
         </KeyNameComp>
         <Quote isNumber={isNumber} data-placement="right" />
@@ -110,8 +111,9 @@ export const KeyValuesItem = <T extends object>(props: KeyValuesProps<T>) => {
   };
   return (
     <RowComp className="w-rjv-line" value={value} keyName={keyName} keys={keys} parentValue={parentValue} {...reset}>
-      <KayName keyName={keyName} value={value} parentValue={parentValue} />
-      <Value keyName={keyName!} value={value} expandKey={subkeyid} />
+      <KayName keyName={keyName} value={value} keys={keys} parentValue={parentValue} />
+      <Value keyName={keyName!} value={value} />
+      <Copied keyName={keyName} value={value as object} keys={keys} parentValue={parentValue} expandKey={subkeyid} />
     </RowComp>
   );
 };

diff --git a/core/src/comps/NestedOpen.tsx b/core/src/comps/NestedOpen.tsx
@@ -7,17 +7,16 @@ import { CountInfoComp } from '../section/CountInfo';
 import { Arrow, BracketsOpen, BracketsClose } from '../symbol';
 import { EllipsisComp } from '../section/Ellipsis';
 import { SetComp, MapComp } from '../types';
+import { type SectionElementResult } from '../store/Section';
 
-export interface NestedOpenProps<T extends object> {
-  keyName?: string | number;
-  value?: T;
+export interface NestedOpenProps<T extends object> extends SectionElementResult<T> {
   initialValue?: T;
   expandKey: string;
   level: number;
 }
 
 export const NestedOpen = <T extends object>(props: NestedOpenProps<T>) => {
-  const { keyName, expandKey, initialValue, value, level } = props;
+  const { keyName, expandKey, keys, initialValue, value, parentValue, level } = props;
   const expands = useExpandsStore();
   const dispatchExpands = useExpandsDispatch();
   const { onExpand, collapsed } = useStore();
@@ -52,7 +51,7 @@ export const NestedOpen = <T extends object>(props: NestedOpenProps<T>) => {
       <BracketsClose isVisiable={isExpanded || !showArrow} isBrackets={isArray || isMySet} />
       <CountInfoComp value={value} keyName={keyName!} />
       <CountInfoExtraComps value={value} keyName={keyName!} />
-      <Copied keyName={keyName!} value={value} expandKey={expandKey} />
+      <Copied keyName={keyName!} value={value} expandKey={expandKey} parentValue={parentValue} keys={keys} />
     </span>
   );
 };

diff --git a/core/src/comps/Value.tsx b/core/src/comps/Value.tsx
@@ -11,18 +11,16 @@ import {
   TypeNan,
   TypeUrl,
 } from '../types';
-
 export const isFloat = (n: number) => (Number(n) === n && n % 1 !== 0) || isNaN(n);
 
 interface ValueProps {
-  value?: unknown;
+  value: unknown;
   keyName: string | number;
-  expandKey: string;
 }
 
 export const Value = (props: ValueProps) => {
-  const { value, keyName, expandKey } = props;
-  const reset = { keyName, expandKey };
+  const { value, keyName } = props;
+  const reset = { keyName };
   if (value instanceof URL) {
     return <TypeUrl {...reset}>{value}</TypeUrl>;
   }
@@ -35,7 +33,6 @@ export const Value = (props: ValueProps) => {
   if (value === false) {
     return <TypeFalse {...reset}>{value}</TypeFalse>;
   }
-
   if (value === null) {
     return <TypeNull {...reset}>{value}</TypeNull>;
   }

diff --git a/core/src/editor/KeyName.tsx b/core/src/editor/KeyName.tsx
@@ -1,5 +1,5 @@
-import { FC, useRef, useState } from 'react';
-import { SectionElementProps } from '../store/Section';
+import { useRef, useState } from 'react';
+import { type SectionElementProps } from '../store/Section';
 import { useStore } from './store';
 import { type SectionElementResult } from '../store/Section';
 

diff --git a/core/src/store/Types.tsx b/core/src/store/Types.tsx
@@ -1,5 +1,4 @@
 import { PropsWithChildren, ComponentPropsWithoutRef, createContext, useContext, useReducer } from 'react';
-
 export type TagType = React.ElementType | keyof JSX.IntrinsicElements;
 
 type TypesElementProps<T extends TagType = 'span'> = {

diff --git a/core/src/types/index.tsx b/core/src/types/index.tsx
@@ -40,11 +40,10 @@ const defalutStyle: React.CSSProperties = {
 };
 
 type TypeProps = PropsWithChildren<{
-  expandKey: string;
   keyName: string | number;
 }>;
 
-export const TypeString: FC<TypeProps> = ({ children = '', expandKey, keyName }) => {
+export const TypeString: FC<TypeProps> = ({ children = '', keyName }) => {
   const { Str = {}, displayDataTypes } = useTypesStore();
   const { shortenTextAfterLength: length = 30 } = useStore();
   const { as, render, ...reset } = Str;
@@ -87,14 +86,13 @@ export const TypeString: FC<TypeProps> = ({ children = '', expandKey, keyName })
           <ValueQuote />
         </Fragment>
       )}
-      <Copied keyName={keyName} value={children as object} expandKey={expandKey} />
     </Fragment>
   );
 };
 
 TypeString.displayName = 'JVR.TypeString';
 
-export const TypeTrue: FC<TypeProps> = ({ children, expandKey, keyName }) => {
+export const TypeTrue: FC<TypeProps> = ({ children, keyName }) => {
   const { True = {}, displayDataTypes } = useTypesStore();
   const { as, render, ...reset } = True;
   const Comp = as || 'span';
@@ -115,14 +113,13 @@ export const TypeTrue: FC<TypeProps> = ({ children, expandKey, keyName }) => {
           {children?.toString()}
         </Comp>
       )}
-      <Copied keyName={keyName} value={children as object} expandKey={expandKey} />
     </Fragment>
   );
 };
 
 TypeTrue.displayName = 'JVR.TypeTrue';
 
-export const TypeFalse: FC<TypeProps> = ({ children, expandKey, keyName }) => {
+export const TypeFalse: FC<TypeProps> = ({ children, keyName }) => {
   const { False = {}, displayDataTypes } = useTypesStore();
   const { as, render, ...reset } = False;
   const Comp = as || 'span';
@@ -144,14 +141,13 @@ export const TypeFalse: FC<TypeProps> = ({ children, expandKey, keyName }) => {
           {children?.toString()}
         </Comp>
       )}
-      <Copied keyName={keyName} value={children as object} expandKey={expandKey} />
     </Fragment>
   );
 };
 
 TypeFalse.displayName = 'JVR.TypeFalse';
 
-export const TypeFloat: FC<TypeProps> = ({ children, expandKey, keyName }) => {
+export const TypeFloat: FC<TypeProps> = ({ children, keyName }) => {
   const { Float = {}, displayDataTypes } = useTypesStore();
   const { as, render, ...reset } = Float;
   const Comp = as || 'span';
@@ -173,14 +169,13 @@ export const TypeFloat: FC<TypeProps> = ({ children, expandKey, keyName }) => {
           {children?.toString()}
         </Comp>
       )}
-      <Copied keyName={keyName} value={children as object} expandKey={expandKey} />
     </Fragment>
   );
 };
 
 TypeFloat.displayName = 'JVR.TypeFloat';
 
-export const TypeInt: FC<TypeProps> = ({ children, expandKey, keyName }) => {
+export const TypeInt: FC<TypeProps> = ({ children, keyName }) => {
   const { Int = {}, displayDataTypes } = useTypesStore();
   const { as, render, ...reset } = Int;
   const Comp = as || 'span';
@@ -202,18 +197,13 @@ export const TypeInt: FC<TypeProps> = ({ children, expandKey, keyName }) => {
           {children?.toString()}
         </Comp>
       )}
-      <Copied keyName={keyName} value={children as object} expandKey={expandKey} />
     </Fragment>
   );
 };
 
 TypeInt.displayName = 'JVR.TypeInt';
 
-export const TypeBigint: FC<{ children?: BigInt } & Omit<TypeProps, 'children'>> = ({
-  children,
-  expandKey,
-  keyName,
-}) => {
+export const TypeBigint: FC<{ children?: BigInt } & Omit<TypeProps, 'children'>> = ({ children, keyName }) => {
   const { Bigint: CompBigint = {}, displayDataTypes } = useTypesStore();
   const { as, render, ...reset } = CompBigint;
   const Comp = as || 'span';
@@ -235,14 +225,13 @@ export const TypeBigint: FC<{ children?: BigInt } & Omit<TypeProps, 'children'>>
           {children?.toString() + 'n'}
         </Comp>
       )}
-      <Copied keyName={keyName} value={children as object} expandKey={expandKey} />
     </Fragment>
   );
 };
 
 TypeBigint.displayName = 'JVR.TypeFloat';
 
-export const TypeUrl: FC<{ children?: URL } & Omit<TypeProps, 'children'>> = ({ children, expandKey, keyName }) => {
+export const TypeUrl: FC<{ children?: URL } & Omit<TypeProps, 'children'>> = ({ children, keyName }) => {
   const { Url = {}, displayDataTypes } = useTypesStore();
   const { as, render, ...reset } = Url;
   const Comp = as || 'span';
@@ -270,14 +259,13 @@ export const TypeUrl: FC<{ children?: URL } & Omit<TypeProps, 'children'>> = ({
           <ValueQuote />
         </a>
       )}
-      <Copied keyName={keyName} value={children as object} expandKey={expandKey} />
     </Fragment>
   );
 };
 
 TypeUrl.displayName = 'JVR.TypeUrl';
 
-export const TypeDate: FC<{ children?: Date } & Omit<TypeProps, 'children'>> = ({ children, expandKey, keyName }) => {
+export const TypeDate: FC<{ children?: Date } & Omit<TypeProps, 'children'>> = ({ children, keyName }) => {
   const { Date: CompData = {}, displayDataTypes } = useTypesStore();
   const { as, render, ...reset } = CompData;
   const Comp = as || 'span';
@@ -301,14 +289,13 @@ export const TypeDate: FC<{ children?: Date } & Omit<TypeProps, 'children'>> = (
           {childStr}
         </Comp>
       )}
-      <Copied keyName={keyName} value={children as object} expandKey={expandKey} />
     </Fragment>
   );
 };
 
 TypeDate.displayName = 'JVR.TypeDate';
 
-export const TypeUndefined: FC<TypeProps> = ({ children, expandKey, keyName }) => {
+export const TypeUndefined: FC<TypeProps> = ({ children, keyName }) => {
   const { Undefined = {}, displayDataTypes } = useTypesStore();
   const { as, render, ...reset } = Undefined;
   const Comp = as || 'span';
@@ -326,14 +313,13 @@ export const TypeUndefined: FC<TypeProps> = ({ children, expandKey, keyName }) =
     <Fragment>
       {displayDataTypes && (type || <Comp {...reset} style={style} />)}
       {child}
-      <Copied keyName={keyName} value={children as object} expandKey={expandKey} />
     </Fragment>
   );
 };
 
 TypeUndefined.displayName = 'JVR.TypeUndefined';
 
-export const TypeNull: FC<TypeProps> = ({ children, expandKey, keyName }) => {
+export const TypeNull: FC<TypeProps> = ({ children, keyName }) => {
   const { Null = {}, displayDataTypes } = useTypesStore();
   const { as, render, ...reset } = Null;
   const Comp = as || 'span';
@@ -351,14 +337,13 @@ export const TypeNull: FC<TypeProps> = ({ children, expandKey, keyName }) => {
     <Fragment>
       {displayDataTypes && (type || <Comp {...reset} style={style} />)}
       {child}
-      <Copied keyName={keyName} value={children as object} expandKey={expandKey} />
     </Fragment>
   );
 };
 
 TypeNull.displayName = 'JVR.TypeNull';
 
-export const TypeNan: FC<TypeProps> = ({ children, expandKey, keyName }) => {
+export const TypeNan: FC<TypeProps> = ({ children, keyName }) => {
   const { Nan = {}, displayDataTypes } = useTypesStore();
   const { as, render, ...reset } = Nan;
   const Comp = as || 'span';
@@ -380,7 +365,6 @@ export const TypeNan: FC<TypeProps> = ({ children, expandKey, keyName }) => {
     <Fragment>
       {displayDataTypes && (type || <Comp {...reset} style={style} />)}
       {child}
-      <Copied keyName={keyName} value={children as object} expandKey={expandKey} />
     </Fragment>
   );
 };