feat: add onExpand props.

Author: jaywcjlove

core/README.md

@@ -396,6 +396,13 @@ export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttr
   enableClipboard?: boolean;
   /** Display for quotes in object-key @default " */
   quotes?: "'" | '"' | '';
+  /** Callback function for when a treeNode is expanded or collapsed */
+  onExpand?: (props: {
+    expand: boolean;
+    value: T;
+    keyid: string;
+    keyName?: string | number;
+  }) => void;
   /** Redefine interface elements to re-render. */
   components?: {
     braces?: MetaProps['render'];

core/src/index.tsx

@@ -22,6 +22,8 @@ export interface JsonViewProps<T extends object>
   enableClipboard?: boolean;
   /** Display for quotes in object-key @default " */
   quotes?: "'" | '"' | '';
+  /** Callback function for when a treeNode is expanded or collapsed */
+  onExpand?: (props: { expand: boolean; value: T; keyid: string; keyName?: string | number; }) => void;
   /** Redefine interface elements to re-render. */
   components?: {
     braces?: MetaProps['render'];

core/src/node.tsx

@@ -93,6 +93,7 @@ export function RooNode<T extends object>(props: RooNodeProps<T>) {
     indentWidth = 15,
     keyid = 'root',
     quotes = '"',
+    onExpand,
     ...reset
   } = props;
   const isArray = Array.isArray(value);
@@ -102,6 +103,7 @@ export function RooNode<T extends object>(props: RooNodeProps<T>) {
   const expand = expands[keyid] ?? true;
   const arrowStyle = { transform: `rotate(${expand ? '0' : '-90'}deg)`, transition: 'all 0.3s' };
   const handle = () => {
+    onExpand && typeof onExpand === 'function' && onExpand({ expand: !expand, keyid, keyName, value: value as T })
     !expand ? store.expand(keyid) : store.collapse(keyid);
   };
   const subNodeProps: RooNodeProps<T> = {
@@ -110,6 +112,7 @@ export function RooNode<T extends object>(props: RooNodeProps<T>) {
     displayDataTypes,
     displayObjectSize,
     enableClipboard,
+    onExpand,
     quotes,
     style: { paddingLeft: indentWidth },
   };