feat(editor): add onAdd props. (#5)

jaywcjlove · jaywcjlove · commit 04b47a4cfb2c · 2023-07-11T02:06:52.000+08:00
diff --git a/core/README.md b/core/README.md
diff --git a/core/editor.d.ts b/core/editor.d.ts
@@ -2,14 +2,29 @@
 
 declare module '@uiw/react-json-view/editor' {
   import { JsonViewProps } from '@uiw/react-json-view';
+  import type { CountInfoExtraProps } from '@uiw/react-json-view/cjs/editor/countInfoExtra';
   type Option = {
       value: string;
       prevValue: string;
       keyName: string | number;
   };
 
   export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T> {
-    onEdit?: (option: Option) => void;
+    /** Callback when value edit functionality */
+    onEdit?: (option: {
+        value: unknown;
+        oldValue: unknown;
+        keyName?: string | number;
+        parentName?: string | number;
+        type?: 'value' | 'key';
+    }) => void;
+    /**
+     * 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?: CountInfoExtraProps<T>['onAdd'];
+    /** Whether enable edit feature. @default true */
+    editable?: boolean;
   }
   const JsonViewEditor: import("react").ForwardRefExoticComponent<Omit<JsonViewEditorProps<object>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   export default JsonViewEditor;
diff --git a/core/src/editor/countInfoExtra.tsx b/core/src/editor/countInfoExtra.tsx
@@ -0,0 +1,38 @@
+import { AddIcon } from './icon/add';
+import type { CountInfoProps } from '../';
+
+export interface CountInfoExtraProps<T> extends CountInfoProps {
+  editable: boolean;
+  showTools: boolean;
+  value: T;
+  setValue: 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;
+}
+
+export function CountInfoExtra<T extends object>(props: CountInfoExtraProps<T>) {
+  const { visible, showTools, value, setValue, onAdd } = 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) {
+      const maybeAdd = await onAdd(keyOrValue, result as T, props.value, isAdd);
+      if (maybeAdd) {
+        setValue(result as T);
+      }
+    }
+  }
+  const svgProps: React.SVGProps<SVGSVGElement> = {
+    onClick: click,
+  }
+  return (
+    <AddIcon {...svgProps} />
+  );
+}
diff --git a/core/src/editor/icon/add.tsx b/core/src/editor/icon/add.tsx
@@ -0,0 +1,19 @@
+import { CSSProperties } from 'react';
+
+export interface AddIconProps extends React.SVGAttributes<SVGElement> {}
+export const AddIcon = (props: AddIconProps) => {
+  const { style } = props
+  const defaultStyle: CSSProperties = {
+    verticalAlign: 'middle',
+    display: 'inline-block',
+    cursor: 'pointer',
+    marginLeft: 5,
+    height: '1em',
+    width: '1em',
+  }
+  return (
+    <svg viewBox="0 0 20 20" fill="var(--w-rjv-edit-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>
+  );
+}
diff --git a/core/src/editor/index.tsx b/core/src/editor/index.tsx
@@ -1,7 +1,10 @@
 import { forwardRef } from 'react'
-import JsonView, { JsonViewProps } from '../';
+import JsonView from '../';
+import type { JsonViewProps } from '../';
 import { ObjectKey } from './objectKey';
 import { ReValue } from './value';
+import { CountInfoExtra } from './countInfoExtra';
+import type { CountInfoExtraProps } from './countInfoExtra';
 
 export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T> {
   /** Callback when value edit functionality */
@@ -12,14 +15,20 @@ export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T>
     parentName?: string | number;
     type?: 'value' | 'key';
   }) => void;
+  /**
+   * 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?: CountInfoExtraProps<T>['onAdd'];
   /** Whether enable edit feature. @default true */
   editable?: boolean;
 }
 
 const JsonViewEditor = forwardRef<HTMLDivElement, JsonViewEditorProps<object>>((props, ref) => {
-  const { onEdit, components, editable = true, displayDataTypes = true, ...reset } = props;
+  const { onEdit, components, editable = true, displayDataTypes = true, onAdd, ...reset } = props;
   const comps: JsonViewEditorProps<object>['components'] = {
     ...components,
+    countInfoExtra: (reprops) => <CountInfoExtra {...reprops} editable={editable} onAdd={onAdd} />,
     objectKey: (reprops) => <ObjectKey {...reprops} editableValue={editable} onEdit={onEdit} render={components?.objectKey} />,
     value: (reprops) => {
       return <ReValue {...reprops} editableValue={editable} displayDataTypes={displayDataTypes} onEdit={onEdit} />
diff --git a/core/src/editor/objectKey.tsx b/core/src/editor/objectKey.tsx
@@ -1,7 +1,8 @@
 import { FC, useEffect, useRef, useState } from 'react';
-import { SemicolonProps, useHighlight } from '../semicolon';
+import { useHighlight } from '../semicolon';
+import type { SemicolonProps } from '../semicolon';
 import { Label } from '../value';
-import { JsonViewEditorProps } from './';
+import type { JsonViewEditorProps } from './';
 
 export interface ObjectKeyProps<T extends object> extends SemicolonProps {
   onEdit?: JsonViewEditorProps<T>['onEdit'];
diff --git a/core/src/editor/value.tsx b/core/src/editor/value.tsx
@@ -1,8 +1,9 @@
-import { FC, Fragment, PropsWithChildren, useEffect, useRef, useState } from 'react';
+import type { FC } from 'react';
+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 { JsonViewEditorProps } from './';
+import type { JsonViewEditorProps } from './';
 
 const Quotes: FC<PropsWithChildren<React.HTMLAttributes<HTMLSpanElement> & { quotes?: JsonViewEditorProps<object>['quotes']; show?: boolean; }>> = ({ show, style, quotes }) => {
   if (!quotes || !show) return;
diff --git a/core/src/index.tsx b/core/src/index.tsx
@@ -1,14 +1,22 @@
 import React, { useId } from 'react';
 import { forwardRef } from 'react';
 import { RooNode } from './node';
-import { SemicolonProps } from './semicolon';
-import { ValueViewProps } from './value';
-import { CopiedProps } from './copied';
-import { EllipsisProps } from './comps/ellipsis'
-import { MetaProps } from './comps/meta'
+import type { SemicolonProps } from './semicolon';
+import type { ValueViewProps } from './value';
+import type { CopiedProps } from './copied';
+import type { EllipsisProps } from './comps/ellipsis';
+import type { MetaProps } from './comps/meta';
+import type { CountInfoExtraProps } from './editor/countInfoExtra';
 
 export * from './node';
 export * from './value';
+
+export interface CountInfoProps {
+  count: number;
+  level: number;
+  visible: boolean;
+}
+
 export interface JsonViewProps<T extends object>
   extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
   /** This property contains your input JSON */
@@ -43,7 +51,8 @@ export interface JsonViewProps<T extends object>
     objectKey?: SemicolonProps['render'];
     value?: ValueViewProps<T>['renderValue'];
     copied?: CopiedProps<T>['render'];
-    countInfo?: (props: { count: number; level: number; visible: boolean }) => JSX.Element;
+    countInfo?: (props: CountInfoProps) => JSX.Element;
+    countInfoExtra?: (props: Omit<CountInfoExtraProps<T>, 'editable'>) => JSX.Element;
   };
 }
 
diff --git a/core/src/node.tsx b/core/src/node.tsx
@@ -1,10 +1,10 @@
-import { FC, Fragment, PropsWithChildren, useId, cloneElement, useState } from 'react';
+import { FC, Fragment, PropsWithChildren, useId, cloneElement, useState, useEffect } from 'react';
 import { ValueView, ValueViewProps, Colon, Label, LabelProps, Line, typeMap } from './value';
 import { TriangleArrow } from './arrow/TriangleArrow';
 import { useExpandsStatus, store } from './store';
 import { JsonViewProps } from './';
 import { Semicolon } from './semicolon';
-import { Tools } from './tools';
+import { Copied } from './copied';
 import { Ellipsis } from './comps/ellipsis';
 import { Meta } from './comps/meta';
 
@@ -86,10 +86,14 @@ export function RooNode<T extends object>(props: RooNodeProps<T>) {
     eventProps.onMouseEnter = () => setShowTools(true);
     eventProps.onMouseLeave = () => setShowTools(false);
   }
-  const nameKeys = (isArray ? Object.keys(value).map(m => Number(m)) : Object.keys(value)) as (keyof typeof value)[];
+  const [valueData, setValueData] = useState<T>(value as T);
+
+  useEffect(() => setValueData(value as T), [value]);
+
+  const nameKeys = (isArray ? Object.keys(valueData).map(m => Number(m)) : Object.keys(valueData)) as (keyof typeof valueData)[];
 
   // object
-  let entries: [key: string | number, value: unknown][] = isArray ? Object.entries(value).map(m => [Number(m[0]), m[1]]) : Object.entries(value);
+  let entries: [key: string | number, value: unknown][] = isArray ? Object.entries(valueData).map(m => [Number(m[0]), m[1]]) : Object.entries(valueData);
   if (objectSortKeys) {
     entries = objectSortKeys === true
       ? entries.sort(([a], [b]) => typeof a === 'string' && typeof b === 'string' ? a.localeCompare(b) : 0)
@@ -106,7 +110,7 @@ export function RooNode<T extends object>(props: RooNodeProps<T>) {
         {(typeof keyName === 'string' || typeof keyName === 'number') && (
           <Fragment>
             <Semicolon
-              value={value}
+              value={valueData}
               quotes={quotes}
               data-keys={keyid}
               render={components.objectKey}
@@ -121,13 +125,15 @@ export function RooNode<T extends object>(props: RooNodeProps<T>) {
         {!expand && <Ellipsis render={components.ellipsis} count={nameKeys.length} level={level} />}
         {!expand && <Meta isArray={isArray} level={level} render={components.braces} />}
         {displayObjectSize && countInfo}
-        <Tools
-          value={value}
-          enableClipboard={enableClipboard}
-          onCopied={onCopied}
-          components={components}
-          showTools={showTools}
-        />
+        {components.countInfoExtra && components.countInfoExtra({
+          count: nameKeys.length,
+          level,
+          showTools,
+          visible: expand,
+          value: valueData,
+          setValue: setValueData,
+        })}
+        {enableClipboard && <Copied show={showTools} text={valueData as T} onCopied={onCopied} render={components?.copied} />}
       </Line>
       {expand && (
         <Line className="w-rjv-content" style={{ borderLeft: 'var(--w-rjv-border-left-width, 1px) var(--w-rjv-line-style, solid) var(--w-rjv-line-color, #ebebeb)', marginLeft: 6 }}>
diff --git a/core/src/semicolon.tsx b/core/src/semicolon.tsx
@@ -1,6 +1,8 @@
-import { FC, PropsWithChildren, useMemo, useRef, useEffect } from 'react';
-import { Label, LabelProps } from './value';
-import { JsonViewProps } from './';
+import type { FC, PropsWithChildren } from 'react';
+import { useMemo, useRef, useEffect } from 'react';
+import { Label } from './value';
+import type { LabelProps } from './value';
+import type { JsonViewProps } from './';
 
 export function usePrevious<T>(value: T) {
   const ref = useRef<T>();
diff --git a/core/src/tools.tsx b/core/src/tools.tsx
diff --git a/core/src/value.tsx b/core/src/value.tsx
@@ -1,8 +1,10 @@
-import { FC, Fragment, PropsWithChildren, forwardRef, useState } from 'react';
+import type { FC, PropsWithChildren } from 'react';
+import { Fragment, forwardRef, useState } from 'react';
 import { CountInfo } from './node';
-import { Meta, MetaProps } from './comps/meta';
+import { Meta } from './comps/meta';
+import type { MetaProps } from './comps/meta';
 import { Copied } from './copied';
-import { JsonViewProps } from './';
+import type { JsonViewProps } from './';
 
 export const Line: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>> = (props) => <div {...props} />;
 export const isFloat = (n: number) => (Number(n) === n && n % 1 !== 0) || isNaN(n);
diff --git a/www/src/Markdown.tsx b/www/src/Markdown.tsx
@@ -15,7 +15,7 @@ const MarkdownStyle = styled(MarkdownPreview)`
   box-shadow: rgb(8 15 41 / 8%) 0.5rem 0.5rem 2rem 0px, rgb(8 15 41 / 8%) 0px 0px 1px 0px;
   border: 1px solid var(--color-border-muted);
   text-align: left;
-  max-width: 54rem;
+  max-width: 56rem;
   overflow: auto;
   padding: 2.3rem 3rem;
   border-radius: 5px;
diff --git a/www/src/example/editor.tsx b/www/src/example/editor.tsx
@@ -81,6 +81,13 @@ export function ExampleEditor() {
         onEdit={(opts) => {
           console.log('opts:', opts)
         }}
+        onAdd={(keyOrValue, newValue, value, isAdd) => {
+          console.log('keyOrValue:', keyOrValue)
+          console.log('newValue:', newValue)
+          console.log('value:', value)
+          console.log('isAdd:', isAdd)
+          return isAdd;
+        }}
         style={{ ...theme, padding: 6, borderRadius: 6 }}
         components={{
           objectKey: ({ value, keyName, parentName, ...props}) => {
