feat(editor): add onDelete props.

Author: jaywcjlove

core/README.md

@@ -126,6 +126,7 @@ const customTheme = {
   '--w-rjv-arrow-color': 'var(--w-rjv-color)',
   '--w-rjv-edit-color': 'var(--w-rjv-color)',
   '--w-rjv-add-color': 'var(--w-rjv-color)',
+  '--w-rjv-delete-color': '#dc3545',
   '--w-rjv-info-color': '#656565',
   '--w-rjv-update-color': '#ebcb8b',
   '--w-rjv-copied-color': '#9cdcfe',
@@ -192,6 +193,7 @@ const customTheme = {
   '--w-rjv-arrow-color': '#9cdcfe',
   '--w-rjv-edit-color': '#0184a6',
   '--w-rjv-add-color': '#0184a6',
+  '--w-rjv-delete-color': '#dc3545',
   '--w-rjv-info-color': '#656565',
   '--w-rjv-update-color': '#ebcb8b',
   '--w-rjv-copied-color': '#0184a6',
@@ -331,7 +333,7 @@ const object = {
   integer: 42,
 }
 
-function value({ type, children, value, keyName, visible, ...props }) {
+function value({ type, children, value, setValue, keyName, visible, ...props }) {
   if (type === 'string' && /\.(jpg)$/.test(value)) {
     return (
       <span {...props}>
@@ -384,7 +386,7 @@ export default function Demo() {
 import React from 'react';
 import JsonView from '@uiw/react-json-view';
 
-function value({ type, children, visible, keyName, value, ...props }) {
+function value({ type, children, visible, keyName, value, setValue, ...props }) {
   if (value instanceof URL) {
     return (
       <span {...props}>
@@ -761,6 +763,11 @@ export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T>
    * @returns {boolean} Returning false from onAdd will prevent the change from being made.
    */
   onAdd?: CountInfoExtraProps<T>['onAdd'];
+  /**
+   * 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?: CountInfoExtraProps<T>['onDelete'];
   /** Whether enable edit feature. @default true */
   editable?: boolean;
 }

core/editor.d.ts

@@ -23,6 +23,11 @@ declare module '@uiw/react-json-view/editor' {
      * @returns {boolean} Returning false from onAdd will prevent the change from being made.
      */
     onAdd?: CountInfoExtraProps<T>['onAdd'];
+    /**
+     * 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?: CountInfoExtraProps<T>['onDelete'];
     /** Whether enable edit feature. @default true */
     editable?: boolean;
   }

core/src/editor/countInfoExtra.test.tsx

@@ -22,7 +22,7 @@ it('renders <CountInfoExtra /> onAdd test case', () => {
   expect(tree).toHaveProperty('children');
   expect(tree).toHaveProperty('type', 'svg');
   expect(tree).toHaveProperty('props.fill', 'var(--w-rjv-add-color, currentColor)')
-  expect(tree).toHaveProperty('props.viewBox', '0 0 20 20')
+  expect(tree).toHaveProperty('props.viewBox', '0 0 40 40')
   expect(tree).toHaveProperty('props.style', {
     verticalAlign: 'middle',
     display: 'inline-block',

core/src/editor/countInfoExtra.tsx

@@ -1,39 +1,63 @@
-import { AddIcon } from './icon/add';
+import { Fragment } from 'react';
 import type { CountInfoProps } from '../';
+import { AddIcon } from './icon/add';
+import { DeleteIcon } from './icon/delete';
 
 export interface CountInfoExtraProps<T> extends Partial<CountInfoProps> {
   editable: boolean;
   showTools: boolean;
   value: T;
+  parentValue?: T;
+  keyName?: 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. 
+   */
+  onDelete?: (keyName: string | number, value: T, parentValue: T) => boolean;
 }
 
 export function CountInfoExtra<T extends object>(props: CountInfoExtraProps<T>) {
-  const { visible, showTools, editable, value, setValue, onAdd } = props;
+  const { visible, showTools, editable, keyName, value, parentValue, setValue, setParentValue, onAdd, onDelete } = props;
   if (!visible || !showTools) return null;
   const click = async (event: React.MouseEvent<SVGSVGElement, MouseEvent>) => {
     event.stopPropagation();
     const keyOrValue = 'AddKeyOrValue';
     const isArray = Array.isArray(value);
     const isAdd = isArray ? true : !(keyOrValue in value);
     const result = isArray ? [...value, keyOrValue] : { ...value, [keyOrValue]: undefined };
-    if (onAdd) {
+    if (onAdd && setValue) {
       const maybeAdd = await onAdd(keyOrValue, result as T, props.value, isAdd);
       if (maybeAdd) {
         setValue!(result as T);
       }
     }
   }
-  const svgProps: React.SVGProps<SVGSVGElement> = {
-    onClick: click,
+  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);
+      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);
+        }
+      }
+    }
   }
-  if (!editable || !onAdd) return;
   return (
-    <AddIcon {...svgProps} />
+    <Fragment>
+      {editable && onAdd && <AddIcon onClick={click}/>}
+      {editable && onDelete && parentValue && <DeleteIcon onClick={deleteHandle} />}
+    </Fragment>
   );
 }

core/src/editor/icon/add.test.tsx

@@ -12,7 +12,7 @@ it('renders <AddIcon /> test case', () => {
   expect(tree).toHaveProperty('children');
   expect(tree).toHaveProperty('type', 'svg');
   expect(tree).toHaveProperty('props', {
-    viewBox: '0 0 20 20',
+    viewBox: '0 0 40 40',
     fill: 'var(--w-rjv-add-color, currentColor)',
     style: {
       verticalAlign: 'middle',

core/src/editor/icon/add.tsx

@@ -12,8 +12,8 @@ export const AddIcon = (props: AddIconProps) => {
     width: '1em',
   }
   return (
-    <svg viewBox="0 0 20 20" fill="var(--w-rjv-add-color, currentColor)" {...props} style={{ ...style, ...defaultStyle}}>
-      <path d="M14.1970498,0 L5.81288651,0 C2.17107809,0 0,2.17 0,5.81 L0,14.18 C0,17.83 2.17107809,20 5.81288651,20 L14.1870449,20 C17.8288533,20 19.9999658,17.83 19.9999658,14.19 L19.9999658,5.81 C20.0099363,2.17 17.8388583,0 14.1970498,0 Z M16.0079491,10.75 L10.7553408,10.75 L10.7553408,16 C10.7553408,16.41 10.4151719,16.75 10.0049682,16.75 C9.59476448,16.75 9.25459556,16.41 9.25459556,16 L9.25459556,10.75 L4.00198727,10.75 C3.59178357,10.75 3.25161466,10.41 3.25161466,10 C3.25161466,9.59 3.59178357,9.25 4.00198727,9.25 L9.25459556,9.25 L9.25459556,4 C9.25459556,3.59 9.59476448,3.25 10.0049682,3.25 C10.4151719,3.25 10.7553408,3.59 10.7553408,4 L10.7553408,9.25 L16.0079491,9.25 C16.4181528,9.25 16.7583217,9.59 16.7583217,10 C16.7583217,10.41 16.4181528,10.75 16.0079491,10.75 Z" />
+    <svg viewBox="0 0 40 40" fill="var(--w-rjv-add-color, currentColor)" {...props} style={{ ...style, ...defaultStyle}}>
+      <path d="M28.3940997,0 L11.625773,0 C4.34215619,0 0,4.34 0,11.62 L0,28.36 C0,35.66 4.34215619,40 11.625773,40 L28.3740897,40 C35.6577066,40 39.9999316,35.66 39.9999316,28.38 L39.9999316,11.62 C40.0198727,4.34 35.6777165,0 28.3940997,0 Z M30.12022,21.8947368 L21.9056145,21.8947368 L21.9056145,30.1052632 C21.9056145,31.1410526 21.0462404,32 20.0099363,32 C18.9736323,32 18.1142582,31.1410526 18.1142582,30.1052632 L18.1142582,21.8947368 L9.89965272,21.8947368 C8.86334865,21.8947368 8.00397454,21.0357895 8.00397454,20 C8.00397454,18.9642105 8.86334865,18.1052632 9.89965272,18.1052632 L18.1142582,18.1052632 L18.1142582,9.89473684 C18.1142582,8.85894737 18.9736323,8 20.0099363,8 C21.0462404,8 21.9056145,8.85894737 21.9056145,9.89473684 L21.9056145,18.1052632 L30.12022,18.1052632 C31.156524,18.1052632 32.0158982,18.9642105 32.0158982,20 C32.0158982,21.0357895 31.156524,21.8947368 30.12022,21.8947368 Z" />
     </svg>
   );
 }

core/src/editor/icon/delete.test.tsx

@@ -0,0 +1,26 @@
+import renderer from 'react-test-renderer';
+import { DeleteIcon } from './delete';
+
+
+it('renders <DeleteIcon /> test case', () => {
+  const component = renderer.create(
+    <DeleteIcon />,
+  );
+  let tree = component.toJSON();
+  expect(tree).toHaveProperty('type');
+  expect(tree).toHaveProperty('props');
+  expect(tree).toHaveProperty('children');
+  expect(tree).toHaveProperty('type', 'svg');
+  expect(tree).toHaveProperty('props', {
+    viewBox: '0 0 40 40',
+    fill: 'var(--w-rjv-delete-color, #dc3545)',
+    style: {
+      verticalAlign: 'middle',
+      display: 'inline-block',
+      cursor: 'pointer',
+      marginLeft: 5,
+      height: '1em',
+      width: '1em',
+    }
+  });
+});

core/src/editor/icon/delete.tsx

@@ -0,0 +1,19 @@
+import { CSSProperties } from 'react';
+
+export interface DeleteIconProps extends React.SVGAttributes<SVGElement> {}
+export const DeleteIcon = (props: DeleteIconProps) => {
+  const { style } = props
+  const defaultStyle: CSSProperties = {
+    verticalAlign: 'middle',
+    display: 'inline-block',
+    cursor: 'pointer',
+    marginLeft: 5,
+    height: '1em',
+    width: '1em',
+  }
+  return (
+    <svg viewBox="0 0 40 40" fill="var(--w-rjv-delete-color, #dc3545)" {...props} style={{ ...style, ...defaultStyle}}>
+      <path d="M28.3940997,0 L11.625773,0 C4.34215619,0 0,4.34 0,11.62 L0,28.36 C0,35.66 4.34215619,40 11.625773,40 L28.3740897,40 C35.6577066,40 39.9999316,35.66 39.9999316,28.38 L39.9999316,11.62 C40.0198727,4.34 35.6777165,0 28.3940997,0 Z M30.3428039,27.0681654 C31.2346195,27.9595381 31.2346195,29.4349136 30.3428039,30.3262862 C29.88152,30.7873411 29.2972271,31.0025 28.7129341,31.0025 C28.1286412,31.0025 27.5443483,30.7873411 27.0830644,30.3262862 L20.0100446,23.2567787 L12.9370249,30.3262862 C12.475741,30.7873411 11.891448,31.0025 11.3071551,31.0025 C10.7228621,31.0025 10.1385692,30.7873411 9.67728531,30.3262862 C8.78464325,29.4234847 8.78464325,27.9709669 9.67728531,27.0681654 L16.7503051,19.9986579 L9.67728531,12.9291504 C8.78464325,12.0263488 8.78464325,10.573831 9.67728531,9.67102951 C10.5691008,8.77965683 12.0452093,8.77965683 12.9370249,9.67102951 L20.0100446,16.740537 L27.0830644,9.67102951 C27.9748799,8.77965683 29.4509884,8.77965683 30.3428039,9.67102951 C31.2346195,10.5624022 31.2346195,12.0377777 30.3428039,12.9291504 L23.2697842,19.9986579 L30.3428039,27.0681654 L30.3428039,27.0681654 Z" />
+    </svg>
+  );
+}

core/src/editor/index.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react'
+import { forwardRef } from 'react';
 import JsonView from '../';
 import type { JsonViewProps } from '../';
 import { ObjectKey } from './objectKey';
@@ -23,18 +23,23 @@ export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T>
    * @returns {boolean} Returning false from onAdd will prevent the change from being made.
    */
   onAdd?: CountInfoExtraProps<T>['onAdd'];
+  /**
+   * 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?: CountInfoExtraProps<T>['onDelete'];
   /** Whether enable edit feature. @default true */
   editable?: boolean;
 }
 
 const JsonViewEditor = forwardRef<HTMLDivElement, JsonViewEditorProps<object>>((props, ref) => {
-  const { onEdit, components, editable = true, displayDataTypes = true, onAdd, ...reset } = props;
+  const { onEdit, components, editable = true, displayDataTypes = true, onAdd, onDelete, ...reset } = props;
   const comps: JsonViewEditorProps<object>['components'] = {
     ...components,
-    countInfoExtra: (reprops) => <CountInfoExtra {...reprops} editable={editable} onAdd={onAdd} />,
+    countInfoExtra: (reprops) => <CountInfoExtra {...reprops} editable={editable} onAdd={onAdd} onDelete={onDelete} />,
     objectKey: (reprops) => <ObjectKey {...reprops} editableValue={editable} onEdit={onEdit} render={components?.objectKey} />,
     value: (reprops) => {
-      return <ReValue {...reprops} editableValue={editable} displayDataTypes={displayDataTypes} onEdit={onEdit} />
+      return <ReValue {...reprops} editableValue={editable} displayDataTypes={displayDataTypes} onDelete={onDelete} onEdit={onEdit} />
     }
   }
   return (

core/src/editor/value.tsx

@@ -3,6 +3,7 @@ import { Fragment, PropsWithChildren, useEffect, useRef, useState } from 'react'
 import type { TypeProps } from '../value';
 import { getValueString, isFloat, Type, typeMap } from '../value';
 import { EditIcon } from './icon/edit';
+import { DeleteIcon } from './icon/delete';
 import type { JsonViewEditorProps } from './';
 
 const Quotes: FC<PropsWithChildren<React.HTMLAttributes<HTMLSpanElement> & { quotes?: JsonViewEditorProps<object>['quotes']; show?: boolean; }>> = ({ show, style, quotes }) => {
@@ -16,13 +17,16 @@ export interface ReValueProps<T extends object> extends React.HTMLAttributes<HTM
   keyName?: JsonViewEditorProps<T>['keyName'];
   type: TypeProps['type'];
   value?: unknown;
+  data?: T;
   visible?: boolean;
   editableValue?: boolean;
   displayDataTypes?: boolean;
+  setValue?: React.Dispatch<React.SetStateAction<T>>;
+  onDelete?: JsonViewEditorProps<T>['onDelete'];
 }
 
 export function ReValue<T extends object>(props: ReValueProps<T>) {
-  const { type, value, keyName, visible, quotes, style, children, displayDataTypes, editableValue, onEdit, ...reset } = props;
+  const { type, value, setValue, data, keyName, visible, quotes, style, children, displayDataTypes, editableValue, onDelete, onEdit, ...reset } = props;
   const [editable, setEditable] = useState(false);
   const $edit = useRef<HTMLSpanElement>(null);
   const [curentType, setCurentType] = useState(type);
@@ -111,13 +115,21 @@ export function ReValue<T extends object>(props: ReValueProps<T>) {
   if (typeStr === 'null' || typeStr === 'undefined') {
     typeView = <Fragment />;
   }
+  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);
+    }
+  }
   return (
     <Fragment>
       {displayDataTypes && typeView}
       <Quotes style={style} quotes={quotes} show={typeStr === 'string'} />
       <span {...spanProps} ref={$edit} data-value={childStr}>{typeof curentChild === 'string' ? curentChild :  childStr}</span>
       <Quotes style={style} quotes={quotes} show={typeStr === 'string'} />
       {visible && editableValue && onEdit && <EditIcon onClick={click} />}
+      {visible && editableValue && onDelete && <DeleteIcon onClick={deleteHandle} />}
     </Fragment>
   );