fix: fix onDelete props issue. (#6)

Author: jaywcjlove

core/README.md

@@ -280,47 +280,6 @@ export default function Demo() {
 
 ## Render
 
-```tsx mdx:preview
-import React from 'react';
-import JsonView from '@uiw/react-json-view';
-
-const object = {
-  string: 'Lorem ipsum dolor sit amet',
-  integer: 42,
-  float: 114.514,
-  object: {
-    'first-child': true,
-    'second-child': false,
-    'last-child': null,
-  },
-}
-export default function Demo() {
-  return (
-    <JsonView
-      value={object}
-      keyName="root"
-      quotes=""
-      displayObjectSize={false}
-      displayDataTypes={false}
-      style={{
-        '--w-rjv-background-color': '#ffffff',
-        '--w-rjv-border-left-width': '0',
-      }}
-      components={{
-        braces: () => <span />,
-        ellipsis: () => <React.Fragment />,
-        objectKey: ({ value, keyName, parentName, ...props}) => {
-          if (keyName === 'integer' && typeof value === 'number' && value > 40) {
-            return <del {...props} />
-          }
-          return <span {...props}  />
-        }
-      }}
-    />
-  )
-}
-```
-
 **Preview Picture**
 
 ```tsx mdx:preview
@@ -333,7 +292,7 @@ const object = {
   integer: 42,
 }
 
-function value({ type, children, value, setValue, keyName, visible, ...props }) {
+function value({ type, children, value, setValue, keyName, parentValue, visible, ...props }) {
   if (type === 'string' && /\.(jpg)$/.test(value)) {
     return (
       <span {...props}>
@@ -386,7 +345,7 @@ export default function Demo() {
 import React from 'react';
 import JsonView from '@uiw/react-json-view';
 
-function value({ type, children, visible, keyName, value, setValue, ...props }) {
+function value({ type, children, visible, keyName, parentValue, value, setValue, ...props }) {
   if (value instanceof URL) {
     return (
       <span {...props}>
@@ -513,7 +472,7 @@ const object = {
   nestedArray: [ [1, 2], [3, 4], { a: 1} ],
 }
 
-const ObjectKey = ({ value, keyName, parentName, ...reset }) => {
+const ObjectKey = ({ value, keyName, parentName, parentValue, ...reset }) => {
   if (keyName === 'integer' && typeof value === 'number' && value > 40) {
     return <del {...reset} />
   }
@@ -731,12 +690,23 @@ export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttr
     ellipsis?: EllipsisProps['render'];
     arrow?: JSX.Element;
     objectKey?: SemicolonProps['render'];
-    value?: ValueViewProps<T>['renderValue'];
+    value?: (props: RenderValueProps<T>) => JSX.Element;
     copied?: CopiedProps<T>['render'];
     countInfo?: (props: CountInfoProps) => JSX.Element;
     countInfoExtra?: (props: Omit<CountInfoExtraProps<T>, 'editable'>) => JSX.Element;
   };
 }
+interface RenderValueProps<T extends object> extends React.HTMLAttributes<HTMLSpanElement> {
+  type: TypeProps['type'];
+  value?: unknown;
+  parentValue?: T;
+  data?: T;
+  visible?: boolean;
+  quotes?: JsonViewProps<T>['quotes'];
+  namespace?: Array<string | number>;
+  setValue?: React.Dispatch<React.SetStateAction<T>>;
+  keyName?: ValueViewProps<T>['keyName'];
+}
 declare const JsonView: React.ForwardRefExoticComponent<Omit<JsonViewProps<object>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default JsonView;
 export interface CountInfoProps {

core/src/editor/countInfoExtra.tsx

@@ -9,22 +9,40 @@ export interface CountInfoExtraProps<T> extends Partial<CountInfoProps> {
   value: T;
   parentValue?: T;
   keyName?: string | number;
-  setValue?: React.Dispatch<React.SetStateAction<T>>
-  setParentValue?: React.Dispatch<React.SetStateAction<T>>
+  namespace?: Array<string | number>;
+  setValue?: React.Dispatch<React.SetStateAction<T>>;
+  setParentValue?: React.Dispatch<React.SetStateAction<T>>;
   /**
    * When a callback function is passed in, add functionality is enabled. The callback is invoked before additions are completed.
    * @returns {boolean} Returning false from onAdd will prevent the change from being made.
    */
   onAdd?: (keyOrValue: string, newValue: T, value: T, isAdd: boolean) => boolean;
   /**
-   * When a callback function is passed in, delete functionality is enabled. The callback is invoked before deletions are completed. 
-   * @returns Returning false from onDelete will prevent the change from being made. 
+   * When a callback function is passed in, delete functionality is enabled. The callback is invoked before deletions are completed.
+   * @returns Returning false from onDelete will prevent the change from being made.
    */
-  onDelete?: (keyName: string | number, value: T, parentValue: T) => boolean;
+  onDelete?: (
+    keyName: string | number,
+    value: T,
+    parentValue: T | null,
+    opt: { namespace?: Array<string | number> },
+  ) => boolean;
 }
 
 export function CountInfoExtra<T extends object>(props: CountInfoExtraProps<T>) {
-  const { visible, showTools, editable, keyName, value, parentValue, setValue, setParentValue, onAdd, onDelete } = props;
+  const {
+    visible,
+    showTools,
+    editable,
+    keyName,
+    value,
+    namespace,
+    parentValue,
+    setValue,
+    setParentValue,
+    onAdd,
+    onDelete,
+  } = props;
   if (!visible || !showTools) return null;
   const click = async (event: React.MouseEvent<SVGSVGElement, MouseEvent>) => {
     event.stopPropagation();
@@ -38,25 +56,25 @@ export function CountInfoExtra<T extends object>(props: CountInfoExtraProps<T>)
         setValue!(result as T);
       }
     }
-  }
+  };
   const deleteHandle = async (event: React.MouseEvent<SVGSVGElement, MouseEvent>) => {
     event.stopPropagation();
     if (onDelete && (keyName || typeof keyName === 'number') && parentValue) {
-      const maybeDelete = await onDelete(keyName, value, parentValue as T);
+      const maybeDelete = await onDelete(keyName, value, parentValue as T, { namespace });
       if (maybeDelete && setParentValue) {
         if (Array.isArray(parentValue)) {
           parentValue.splice(keyName as number, 1);
           setParentValue([...parentValue] as T);
         } else if (keyName in parentValue) {
           delete (parentValue as Record<string, any>)[keyName as string];
-          setParentValue({...parentValue} as T);
+          setParentValue({ ...parentValue } as T);
         }
       }
     }
-  }
+  };
   return (
     <Fragment>
-      {editable && onAdd && <AddIcon onClick={click}/>}
+      {editable && onAdd && <AddIcon onClick={click} />}
       {editable && onDelete && parentValue && <DeleteIcon onClick={deleteHandle} />}
     </Fragment>
   );

core/src/editor/value.tsx

@@ -21,6 +21,7 @@ export interface ReValueProps<T extends object> extends React.HTMLAttributes<HTM
   keyName?: JsonViewEditorProps<T>['keyName'];
   type: TypeProps['type'];
   value?: unknown;
+  parentValue?: T;
   data?: T;
   visible?: boolean;
   namespace?: Array<string | number>;
@@ -44,6 +45,7 @@ export function ReValue<T extends object>(props: ReValueProps<T>) {
     namespace,
     displayDataTypes,
     editableValue,
+    parentValue,
     onDelete,
     onEdit,
     ...reset
@@ -116,7 +118,7 @@ export function ReValue<T extends object>(props: ReValueProps<T>) {
         const result = await onEdit({ type: 'value', value: text, oldValue: curentChild, namespace });
         if (result) {
           setCurentType(typeStr);
-          setCurentChild(text);
+          setCurentChild(text as T);
         } else {
           const { content: oldChildStr } = getValueString(curentChild);
           $edit.current.innerHTML = String(oldChildStr);
@@ -145,9 +147,12 @@ export function ReValue<T extends object>(props: ReValueProps<T>) {
   }
   const deleteHandle = async (evn: React.MouseEvent<SVGSVGElement, MouseEvent>) => {
     evn.stopPropagation();
-    if (data && keyName && keyName in data && setValue) {
-      delete (data as Record<string, any>)[keyName as string];
-      setValue({ ...data } as T);
+    if (data && keyName && keyName in data && setValue && onDelete) {
+      const maybeDelete = await onDelete(keyName, value as T, parentValue as T, { namespace });
+      if (maybeDelete) {
+        delete (data as Record<string, any>)[keyName as string];
+        setValue({ ...data } as T);
+      }
     }
   };
   return (

core/src/index.tsx

@@ -2,7 +2,7 @@ import React, { useId } from 'react';
 import { forwardRef } from 'react';
 import { RooNode } from './node';
 import type { SemicolonProps } from './semicolon';
-import type { ValueViewProps } from './value';
+import type { ValueViewProps, TypeProps } from './value';
 import type { CopiedProps } from './copied';
 import type { EllipsisProps } from './comps/ellipsis';
 import type { MetaProps } from './comps/meta';
@@ -17,6 +17,18 @@ export interface CountInfoProps {
   visible: boolean;
 }
 
+interface RenderValueProps<T extends object> extends React.HTMLAttributes<HTMLSpanElement> {
+  type: TypeProps['type'];
+  value?: unknown;
+  parentValue?: T;
+  data?: T;
+  visible?: boolean;
+  quotes?: JsonViewProps<T>['quotes'];
+  namespace?: Array<string | number>;
+  setValue?: React.Dispatch<React.SetStateAction<T>>;
+  keyName?: ValueViewProps<T>['keyName'];
+}
+
 export interface JsonViewProps<T extends object>
   extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
   /** This property contains your input JSON */
@@ -40,7 +52,7 @@ export interface JsonViewProps<T extends object>
   /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. @default false */
   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;
+  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. */
@@ -49,7 +61,7 @@ export interface JsonViewProps<T extends object>
     ellipsis?: EllipsisProps['render'];
     arrow?: JSX.Element;
     objectKey?: SemicolonProps['render'];
-    value?: ValueViewProps<T>['renderValue'];
+    value?: (props: RenderValueProps<T>) => JSX.Element;
     copied?: CopiedProps<T>['render'];
     countInfo?: (props: CountInfoProps) => JSX.Element;
     countInfoExtra?: (props: Omit<CountInfoExtraProps<T>, 'editable'>) => JSX.Element;