@uiw/react-json-view 1.7.1 → 1.8.1

package/esm/editor/value.js

@@ -1,10 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["type", "value", "keyName", "visible", "quotes", "style", "children", "displayDataTypes", "editableValue", "onEdit"];
+var _excluded = ["type", "value", "setValue", "data", "keyName", "visible", "quotes", "style", "children", "namespace", "displayDataTypes", "editableValue", "onDelete", "onEdit"];
 import { Fragment, useEffect, useRef, useState } from 'react';
 import { getValueString, isFloat, Type, typeMap } from '../value';
 import { EditIcon } from './icon/edit';
+import { DeleteIcon } from './icon/delete';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var Quotes = _ref => {
@@ -24,11 +25,16 @@ export function ReValue(props) {
   var {
       type,
       value,
+      setValue,
+      data,
+      keyName,
       visible,
       quotes,
       style,
+      namespace,
       displayDataTypes,
       editableValue,
+      onDelete,
       onEdit
     } = props,
     reset = _objectWithoutPropertiesLoose(props, _excluded);
@@ -43,7 +49,7 @@ export function ReValue(props) {
     if ($edit.current) {
       var _$edit$current;
       setEditable(true);
-      $edit.current.contentEditable = 'true';
+      $edit.current.setAttribute('contentEditable', 'true');
       (_$edit$current = $edit.current) == null ? void 0 : _$edit$current.focus();
     }
   };
@@ -53,7 +59,9 @@ export function ReValue(props) {
       evn.stopPropagation();
       evn.preventDefault();
       setEditable(false);
-      $edit.current.contentEditable = 'false';
+      if ($edit.current) {
+        $edit.current.setAttribute('contentEditable', 'false');
+      }
     }
   };
   var blur = /*#__PURE__*/function () {
@@ -61,8 +69,8 @@ export function ReValue(props) {
       if (!editableValue) return;
       setEditable(false);
       if ($edit.current) {
-        $edit.current.contentEditable = 'false';
-        var text = $edit.current.innerText;
+        $edit.current.setAttribute('contentEditable', 'false');
+        var text = $edit.current.innerHTML;
         var _typeStr = curentType;
         if (curentType === 'number' || curentType === 'float') {
           text = Number(text);
@@ -75,16 +83,16 @@ export function ReValue(props) {
         if (Number.isNaN(text)) {
           _typeStr = 'number';
         }
-        if (typeof text === 'string' && /^(true|false)$/ig.test(text)) {
-          text = /^(true)$/ig.test(text) ? true : false;
+        if (typeof text === 'string' && /^(true|false)$/gi.test(text)) {
+          text = /^(true)$/gi.test(text) ? true : false;
           _typeStr = 'boolean';
-        } else if (typeof text === 'string' && /^[\d]+n$/ig.test(text)) {
-          text = BigInt(text.replace(/n$/ig, ''));
+        } else if (typeof text === 'string' && /^[\d]+n$/gi.test(text)) {
+          text = BigInt(text.replace(/n$/gi, ''));
           _typeStr = 'bigint';
-        } else if (typeof text === 'string' && /^(null)$/ig.test(text)) {
+        } else if (typeof text === 'string' && /^(null)$/gi.test(text)) {
           text = null;
           _typeStr = 'null';
-        } else if (typeof text === 'string' && /^(undefined)$/ig.test(text)) {
+        } else if (typeof text === 'string' && /^(undefined)$/gi.test(text)) {
           text = undefined;
           _typeStr = 'undefined';
         } else if (typeof text === 'string') {
@@ -100,7 +108,8 @@ export function ReValue(props) {
           var result = yield onEdit({
             type: 'value',
             value: text,
-            oldValue: curentChild
+            oldValue: curentChild,
+            namespace
           });
           if (result) {
             setCurentType(_typeStr);
@@ -145,6 +154,18 @@ export function ReValue(props) {
   if (typeStr === 'null' || typeStr === 'undefined') {
     typeView = /*#__PURE__*/_jsx(Fragment, {});
   }
+  var deleteHandle = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(function* (evn) {
+      evn.stopPropagation();
+      if (data && keyName && keyName in data && setValue) {
+        delete data[keyName];
+        setValue(_extends({}, data));
+      }
+    });
+    return function deleteHandle(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [displayDataTypes && typeView, /*#__PURE__*/_jsx(Quotes, {
       style: style,
@@ -160,6 +181,8 @@ export function ReValue(props) {
       show: typeStr === 'string'
     }), visible && editableValue && onEdit && /*#__PURE__*/_jsx(EditIcon, {
       onClick: click
+    }), visible && editableValue && onDelete && /*#__PURE__*/_jsx(DeleteIcon, {
+      onClick: deleteHandle
     })]
   });
 }

package/esm/node.d.ts

@@ -6,5 +6,8 @@ export interface RooNodeProps<T extends object> extends JsonViewProps<T> {
     keyName?: string | number;
     keyid?: string;
     level?: number;
+    parentValue?: T;
+    namespace?: Array<string | number>;
+    setParentValue?: React.Dispatch<React.SetStateAction<T>>;
 }
 export declare function RooNode<T extends object>(props: RooNodeProps<T>): import("react/jsx-runtime").JSX.Element;

package/esm/node.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["value", "keyName", "className", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "highlightUpdates", "objectSortKeys", "indentWidth", "collapsed", "level", "keyid", "quotes", "onCopied", "onExpand"];
+var _excluded = ["value", "keyName", "className", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "highlightUpdates", "objectSortKeys", "indentWidth", "collapsed", "level", "keyid", "quotes", "namespace", "onCopied", "onExpand", "parentValue", "setParentValue"];
 import { Fragment, useId, cloneElement, useState, useEffect } from 'react';
 import { ValueView, Colon, Label, Line, typeMap } from './value';
 import { TriangleArrow } from './arrow/TriangleArrow';
@@ -42,18 +42,17 @@ export function RooNode(props) {
       level = 1,
       keyid = 'root',
       quotes = '"',
+      namespace = [],
       onCopied,
-      onExpand
+      onExpand,
+      parentValue,
+      setParentValue
     } = props,
     reset = _objectWithoutPropertiesLoose(props, _excluded);
   var isArray = Array.isArray(value);
   var subkeyid = useId();
   var expands = useExpandsStatus();
   var expand = (_expands$keyid = expands[keyid]) != null ? _expands$keyid : typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level <= collapsed : true;
-  var arrowStyle = {
-    transform: "rotate(" + (expand ? '0' : '-90') + "deg)",
-    transition: 'all 0.3s'
-  };
   var handle = () => {
     onExpand && typeof onExpand === 'function' && onExpand({
       expand: !expand,
@@ -63,6 +62,7 @@ export function RooNode(props) {
     });
     !expand ? store.expand(keyid) : store.collapse(keyid);
   };
+  var [valueData, setValueData] = useState(value);
   var subNodeProps = {
     components,
     indentWidth,
@@ -73,6 +73,8 @@ export function RooNode(props) {
     onCopied,
     onExpand,
     collapsed,
+    parentValue: value,
+    setParentValue: setValueData,
     quotes,
     level: level + 1,
     style: {
@@ -84,14 +86,20 @@ export function RooNode(props) {
     displayObjectSize,
     enableClipboard,
     indentWidth,
+    data: valueData,
     quotes,
+    setValue: setValueData,
     renderBraces: components.braces,
     renderValue: components.value
   };
+  var arrowStyle = {
+    transform: "rotate(" + (expand ? '0' : '-90') + "deg)",
+    transition: 'all 0.3s'
+  };
   var arrowView = components.arrow ? /*#__PURE__*/cloneElement(components.arrow, {
     style: arrowStyle,
     'data-expand': expand,
-    className: "w-rjv-arrow"
+    className: 'w-rjv-arrow'
   }) : /*#__PURE__*/_jsx(TriangleArrow, {
     style: arrowStyle,
     className: "w-rjv-arrow"
@@ -102,7 +110,6 @@ export function RooNode(props) {
     eventProps.onMouseEnter = () => setShowTools(true);
     eventProps.onMouseLeave = () => setShowTools(false);
   }
-  var [valueData, setValueData] = useState(value);
   useEffect(() => setValueData(value), [value]);
   var nameKeys = isArray ? Object.keys(valueData).map(m => Number(m)) : Object.keys(valueData);
 
@@ -143,6 +150,7 @@ export function RooNode(props) {
           value: valueData,
           quotes: quotes,
           "data-keys": keyid,
+          namespace: [...namespace],
           render: components.objectKey,
           keyName: keyName,
           parentName: keyName,
@@ -165,8 +173,11 @@ export function RooNode(props) {
         count: nameKeys.length,
         level,
         showTools,
+        keyName,
         visible: expand,
         value: valueData,
+        parentValue,
+        setParentValue,
         setValue: setValueData
       }), enableClipboard && /*#__PURE__*/_jsx(Copied, {
         show: showTools,
@@ -180,13 +191,14 @@ export function RooNode(props) {
         borderLeft: 'var(--w-rjv-border-left-width, 1px) var(--w-rjv-line-style, solid) var(--w-rjv-line-color, #ebebeb)',
         marginLeft: 6
       },
-      children: entries.length > 0 && entries.map((_ref6, idx) => {
+      children: entries.length > 0 && [...entries].map((_ref6, idx) => {
         var [key, itemVal] = _ref6;
         var item = itemVal;
         var renderKey = /*#__PURE__*/_jsx(Semicolon, {
           value: item,
           "data-keys": keyid,
           quotes: quotes,
+          namespace: [...namespace, key],
           parentName: keyName,
           highlightUpdates: highlightUpdates,
           render: components.objectKey,
@@ -200,6 +212,7 @@ export function RooNode(props) {
             className: "w-rjv-wrap",
             children: /*#__PURE__*/_jsx(RooNode, _extends({
               value: item,
+              namespace: [...namespace, label],
               keyName: label,
               keyid: keyid + subkeyid + label
             }, subNodeProps))
@@ -210,6 +223,7 @@ export function RooNode(props) {
             className: "w-rjv-wrap",
             children: /*#__PURE__*/_jsx(RooNode, _extends({
               value: item,
+              namespace: [...namespace, key],
               keyName: key,
               keyid: keyid + subkeyid + key
             }, subNodeProps))
@@ -218,7 +232,9 @@ export function RooNode(props) {
         if (typeof item === 'function') {
           return;
         }
-        return /*#__PURE__*/_jsx(ValueView, _extends({}, valueViewProps, {
+        return /*#__PURE__*/_jsx(ValueView, _extends({
+          namespace: [...namespace, key]
+        }, valueViewProps, {
           renderKey: renderKey,
           keyName: key,
           value: item

package/esm/semicolon.d.ts

@@ -15,6 +15,7 @@ export interface SemicolonProps extends LabelProps {
     quotes?: JsonViewProps<object>['quotes'];
     value?: object;
     label?: string;
+    namespace?: Array<string | number>;
     render?: (props: SemicolonProps) => React.ReactNode;
 }
 export declare const Semicolon: FC<PropsWithChildren<SemicolonProps>>;

package/esm/semicolon.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["children", "render", "color", "value", "className", "keyName", "highlightUpdates", "quotes", "style", "parentName"];
+var _excluded = ["children", "render", "color", "value", "className", "keyName", "highlightUpdates", "quotes", "style", "namespace", "parentName"];
 import { useMemo, useRef, useEffect } from 'react';
 import { Label } from './value';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -68,6 +68,7 @@ export var Semicolon = _ref2 => {
       highlightUpdates,
       quotes,
       style,
+      namespace,
       parentName
     } = _ref2,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded);
@@ -78,6 +79,7 @@ export var Semicolon = _ref2 => {
       className
     }, props, {
       value,
+      namespace,
       style: _extends({}, style, {
         color
       }),
@@ -88,7 +90,6 @@ export var Semicolon = _ref2 => {
       children: content
     }));
   }
-  ;
   useHighlight({
     value,
     highlightUpdates,

package/esm/value.d.ts

@@ -46,24 +46,31 @@ export declare const typeMap: {
     };
 };
 export declare const Colon: FC<PropsWithChildren<React.HTMLAttributes<HTMLSpanElement>>>;
+interface RenderValueProps<T extends object> extends React.HTMLAttributes<HTMLSpanElement> {
+    type: TypeProps['type'];
+    value?: unknown;
+    data?: T;
+    visible?: boolean;
+    quotes?: JsonViewProps<T>['quotes'];
+    namespace?: Array<string | number>;
+    setValue?: React.Dispatch<React.SetStateAction<T>>;
+    keyName?: ValueViewProps<T>['keyName'];
+}
 export interface ValueViewProps<T extends object> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
     keyName?: string | number;
     value?: unknown;
+    data?: T;
     displayDataTypes: boolean;
     displayObjectSize: boolean;
     enableClipboard: boolean;
     indentWidth: number;
     level?: number;
+    namespace?: Array<string | number>;
     quotes?: JsonViewProps<T>['quotes'];
     renderKey?: JSX.Element;
     renderBraces?: MetaProps['render'];
-    renderValue?: (props: React.HTMLAttributes<HTMLSpanElement> & {
-        type: TypeProps['type'];
-        value?: unknown;
-        visible?: boolean;
-        quotes?: JsonViewProps<T>['quotes'];
-        keyName?: ValueViewProps<T>['keyName'];
-    }) => JSX.Element;
+    setValue?: React.Dispatch<React.SetStateAction<T>>;
+    renderValue?: (props: RenderValueProps<T>) => JSX.Element;
 }
 export declare function getValueString<T>(value: T): {
     type: "string" | "number" | "bigint" | "boolean" | "undefined" | "date" | "url" | "float" | "null" | "NaN";
@@ -81,3 +88,4 @@ export interface TypeProps extends React.DetailedHTMLProps<React.HTMLAttributes<
     type: keyof typeof typeMap;
 }
 export declare const Type: FC<PropsWithChildren<TypeProps>>;
+export {};

package/esm/value.js

@@ -1,7 +1,7 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/extends";
 var _excluded = ["children", "style"],
-  _excluded2 = ["value", "keyName", "indentWidth", "renderKey", "quotes", "level", "renderValue", "renderBraces", "enableClipboard", "displayObjectSize", "displayDataTypes"],
+  _excluded2 = ["value", "setValue", "data", "keyName", "indentWidth", "namespace", "renderKey", "quotes", "level", "renderValue", "renderBraces", "enableClipboard", "displayObjectSize", "displayDataTypes"],
   _excluded3 = ["children", "color", "fontSize", "opacity", "paddingRight", "style"];
 import { Fragment, forwardRef, useState } from 'react';
 import { CountInfo } from './node';
@@ -38,7 +38,7 @@ export var typeMap = {
   },
   url: {
     color: 'var(--w-rjv-type-url-color, #0969da)',
-    label: 'URL'
+    label: 'url'
   },
   null: {
     color: 'var(--w-rjv-type-null-color, #d33682)',
@@ -112,8 +112,11 @@ export function ValueView(props) {
   var _typeMap$type;
   var {
       value,
+      setValue,
+      data,
       keyName,
       indentWidth,
+      namespace,
       renderKey,
       quotes,
       renderValue,
@@ -169,8 +172,11 @@ export function ValueView(props) {
       }, style),
       type,
       value,
+      setValue,
+      data,
       quotes,
       keyName,
+      namespace,
       visible: showTools,
       content,
       children: content

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-json-view",
-  "version": "1.7.1",
+  "version": "1.8.1",
   "description": "JSON viewer for react.",
   "main": "cjs/index.js",
   "module": "esm/index.js",