feat: add onCopied props.

Author: jaywcjlove

core/src/copied.tsx

@@ -3,6 +3,7 @@ import { useState } from 'react';
 export interface CopiedProps<T = object> extends React.SVGProps<SVGSVGElement> {
   show?: boolean;
   text?: T;
+  onCopied?: (text: string, obj: T) => void;
   render?: (props: Omit<CopiedProps<T>, 'render'>) => JSX.Element;
 }
 

core/src/index.tsx

@@ -26,6 +26,8 @@ export interface JsonViewProps<T extends object>
   collapsed?: boolean | number;
   /** Callback function for when a treeNode is expanded or collapsed */
   onExpand?: (props: { expand: boolean; value: T; keyid: string; keyName?: string | number; }) => void;
+  /** Fires event when you copy */
+  onCopied?: CopiedProps<T>['onCopied'];
   /** Redefine interface elements to re-render. */
   components?: {
     braces?: MetaProps['render'];

core/src/node.tsx

@@ -96,6 +96,7 @@ export function RooNode<T extends object>(props: RooNodeProps<T>) {
     level = 1,
     keyid = 'root',
     quotes = '"',
+    onCopied,
     onExpand,
     ...reset
   } = props;
@@ -115,6 +116,7 @@ export function RooNode<T extends object>(props: RooNodeProps<T>) {
     displayDataTypes,
     displayObjectSize,
     enableClipboard,
+    onCopied,
     onExpand,
     collapsed,
     quotes,
@@ -126,6 +128,7 @@ export function RooNode<T extends object>(props: RooNodeProps<T>) {
     displayObjectSize,
     enableClipboard,
     indentWidth,
+    renderBraces: components.braces,
     renderValue: components.value,
   } as ValueViewProps<T>;
 
@@ -135,7 +138,7 @@ export function RooNode<T extends object>(props: RooNodeProps<T>) {
     <TriangleArrow style={arrowStyle} className="w-rjv-arrow" />
   );
   const [showTools, setShowTools] = useState(false);
-  const tools = enableClipboard ? <Copied show={showTools} text={value as T} render={components.copied} /> : undefined;
+  const tools = enableClipboard ? <Copied show={showTools} text={value as T} onCopied={onCopied} render={components.copied} /> : undefined;
   const eventProps: React.HTMLAttributes<HTMLDivElement> = {};
   if (enableClipboard) {
     eventProps.onMouseEnter = () => setShowTools(true);
@@ -201,7 +204,7 @@ export function RooNode<T extends object>(props: RooNodeProps<T>) {
                 return;
               }
               return (
-                <ValueView key={idx} {...valueViewProps} renderBraces={components.braces} renderKey={renderKey} keyName={key} value={item} />
+                <ValueView key={idx} {...valueViewProps} renderKey={renderKey} keyName={key} value={item} />
               );
             })}
         </Line>

www/src/Example.tsx

@@ -74,7 +74,7 @@ export function Example() {
         displayDataTypes={displayDataTypes}
         quotes={quotes}
         enableClipboard={clipboard}
-        style={theme}
+        style={{ ...theme, padding: 6, borderRadius: 6 }}
         collapsed={collapsed}
       />
       <Options>