@uiw/react-json-view - npm Package Compare versions

Comparing version 1.7.1 to 1.8.0

cjs/editor/countInfoExtra.d.ts

@@ -7,3 +7,6 @@ /// <reference types="react" />
     value: T;
+    parentValue?: T;
+    keyName?: string | number;
     setValue?: React.Dispatch<React.SetStateAction<T>>;
+    setParentValue?: React.Dispatch<React.SetStateAction<T>>;
     /**
@@ -14,3 +17,8 @@ * When a callback function is passed in, add functionality is enabled. The callback is invoked before additions are completed.
     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 declare function CountInfoExtra<T extends object>(props: CountInfoExtraProps<T>): import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare function CountInfoExtra<T extends object>(props: CountInfoExtraProps<T>): import("react/jsx-runtime").JSX.Element | null;

cjs/editor/countInfoExtra.js

@@ -13,3 +13,5 @@ "use strict";
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = require("react");
 var _add = require("./icon/add");
+var _delete = require("./icon/delete");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -20,5 +22,9 @@ function CountInfoExtra(props) {
     editable = props.editable,
+    keyName = props.keyName,
     value = props.value,
+    parentValue = props.parentValue,
     setValue = props.setValue,
-    onAdd = props.onAdd;
+    setParentValue = props.setParentValue,
+    onAdd = props.onAdd,
+    onDelete = props.onDelete;
   if (!visible || !showTools) return null;
@@ -36,3 +42,3 @@ var click = /*#__PURE__*/function () {
             result = isArray ? [].concat((0, _toConsumableArray2["default"])(value), [keyOrValue]) : (0, _objectSpread3["default"])((0, _objectSpread3["default"])({}, value), {}, (0, _defineProperty2["default"])({}, keyOrValue, undefined));
-            if (!onAdd) {
+            if (!(onAdd && setValue)) {
               _context.next = 10;
@@ -58,7 +64,43 @@ break;
   }();
-  var svgProps = {
-    onClick: click
-  };
-  if (!editable || !onAdd) return;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_add.AddIcon, (0, _objectSpread3["default"])({}, svgProps));
+  var deleteHandle = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee2(event) {
+      var maybeDelete;
+      return (0, _regeneratorRuntime2["default"])().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            event.stopPropagation();
+            if (!(onDelete && (keyName || typeof keyName === 'number') && parentValue)) {
+              _context2.next = 6;
+              break;
+            }
+            _context2.next = 4;
+            return onDelete(keyName, value, parentValue);
+          case 4:
+            maybeDelete = _context2.sent;
+            if (maybeDelete && setParentValue) {
+              if (Array.isArray(parentValue)) {
+                parentValue.splice(keyName, 1);
+                setParentValue((0, _toConsumableArray2["default"])(parentValue));
+              } else if (keyName in parentValue) {
+                delete parentValue[keyName];
+                setParentValue((0, _objectSpread3["default"])({}, parentValue));
+              }
+            }
+          case 6:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function deleteHandle(_x2) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+    children: [editable && onAdd && /*#__PURE__*/(0, _jsxRuntime.jsx)(_add.AddIcon, {
+      onClick: click
+    }), editable && onDelete && parentValue && /*#__PURE__*/(0, _jsxRuntime.jsx)(_delete.DeleteIcon, {
+      onClick: deleteHandle
+    })]
+  });
 }

cjs/editor/icon/add.js

@@ -21,3 +21,3 @@ "use strict";
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
-    viewBox: "0 0 20 20",
+    viewBox: "0 0 40 40",
     fill: "var(--w-rjv-add-color, currentColor)"
@@ -27,3 +27,3 @@ }, props), {}, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("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"
+      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"
     })
@@ -30,0 +30,0 @@ }));

cjs/editor/index.d.ts

@@ -21,2 +21,7 @@ /// <reference types="react" />
     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 */
@@ -23,0 +28,0 @@ editable?: boolean;

cjs/editor/index.js

@@ -16,3 +16,3 @@ "use strict";
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["onEdit", "components", "editable", "displayDataTypes", "onAdd"];
+var _excluded = ["onEdit", "components", "editable", "displayDataTypes", "onAdd", "onDelete"];
 var JsonViewEditor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
@@ -26,2 +26,3 @@ var onEdit = props.onEdit,
     onAdd = props.onAdd,
+    onDelete = props.onDelete,
     reset = (0, _objectWithoutProperties2["default"])(props, _excluded);
@@ -32,3 +33,4 @@ var comps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, components), {}, {
         editable: editable,
-        onAdd: onAdd
+        onAdd: onAdd,
+        onDelete: onDelete
       }));
@@ -47,2 +49,3 @@ },
         displayDataTypes: displayDataTypes,
+        onDelete: onDelete,
         onEdit: onEdit
@@ -49,0 +52,0 @@ }));

cjs/editor/value.d.ts

@@ -10,6 +10,9 @@ /// <reference types="react" />
     value?: unknown;
+    data?: T;
     visible?: boolean;
     editableValue?: boolean;
     displayDataTypes?: boolean;
+    setValue?: React.Dispatch<React.SetStateAction<T>>;
+    onDelete?: JsonViewEditorProps<T>['onDelete'];
 }
 export declare function ReValue<T extends object>(props: ReValueProps<T>): import("react/jsx-runtime").JSX.Element;

cjs/editor/value.js

@@ -16,4 +16,5 @@ "use strict";
 var _edit = require("./icon/edit");
+var _delete = require("./icon/delete");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["type", "value", "keyName", "visible", "quotes", "style", "children", "displayDataTypes", "editableValue", "onEdit"];
+var _excluded = ["type", "value", "setValue", "data", "keyName", "visible", "quotes", "style", "children", "displayDataTypes", "editableValue", "onDelete", "onEdit"];
 var Quotes = function Quotes(_ref) {
@@ -33,2 +34,4 @@ var show = _ref.show,
     value = props.value,
+    setValue = props.setValue,
+    data = props.data,
     keyName = props.keyName,
@@ -41,2 +44,3 @@ visible = props.visible,
     editableValue = props.editableValue,
+    onDelete = props.onDelete,
     onEdit = props.onEdit,
@@ -186,2 +190,22 @@ reset = (0, _objectWithoutProperties2["default"])(props, _excluded);
   }
+  var deleteHandle = /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee2(evn) {
+      return (0, _regeneratorRuntime2["default"])().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            evn.stopPropagation();
+            if (data && keyName && keyName in data && setValue) {
+              delete data[keyName];
+              setValue((0, _objectSpread2["default"])({}, data));
+            }
+          case 2:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function deleteHandle(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
@@ -202,4 +226,6 @@ children: [displayDataTypes && typeView, /*#__PURE__*/(0, _jsxRuntime.jsx)(Quotes, {
       onClick: click
+    }), visible && editableValue && onDelete && /*#__PURE__*/(0, _jsxRuntime.jsx)(_delete.DeleteIcon, {
+      onClick: deleteHandle
     })]
   });
 }

cjs/node.d.ts

@@ -9,3 +9,5 @@ import { FC, PropsWithChildren } from 'react';
     level?: number;
+    parentValue?: T;
+    setParentValue?: React.Dispatch<React.SetStateAction<T>>;
 }
 export declare function RooNode<T extends object>(props: RooNodeProps<T>): import("react/jsx-runtime").JSX.Element;

cjs/node.js

@@ -11,2 +11,3 @@ "use strict";
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -23,3 +24,3 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _jsxRuntime = require("react/jsx-runtime");
-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", "onCopied", "onExpand", "parentValue", "setParentValue"];
 var CountInfo = function CountInfo(_ref) {
@@ -67,2 +68,4 @@ var children = _ref.children;
     onExpand = props.onExpand,
+    parentValue = props.parentValue,
+    setParentValue = props.setParentValue,
     reset = (0, _objectWithoutProperties2["default"])(props, _excluded);
@@ -86,2 +89,6 @@ var isArray = Array.isArray(value);
   };
+  var _useState = (0, _react.useState)(value),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    valueData = _useState2[0],
+    setValueData = _useState2[1];
   var subNodeProps = {
@@ -97,2 +104,4 @@ components: components,
     collapsed: collapsed,
+    parentValue: value,
+    setParentValue: setValueData,
     quotes: quotes,
@@ -109,3 +118,5 @@ level: level + 1,
     indentWidth: indentWidth,
+    data: valueData,
     quotes: quotes,
+    setValue: setValueData,
     renderBraces: components.braces,
@@ -122,6 +133,6 @@ renderValue: components.value
   });
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    showTools = _useState2[0],
-    setShowTools = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    showTools = _useState4[0],
+    setShowTools = _useState4[1];
   var eventProps = {};
@@ -136,6 +147,2 @@ if (enableClipboard) {
   }
-  var _useState3 = (0, _react.useState)(value),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    valueData = _useState4[0],
-    setValueData = _useState4[1];
   (0, _react.useEffect)(function () {
@@ -213,4 +220,7 @@ return setValueData(value);
         showTools: showTools,
+        keyName: keyName,
         visible: expand,
         value: valueData,
+        parentValue: parentValue,
+        setParentValue: setParentValue,
         setValue: setValueData
@@ -229,3 +239,3 @@ }), enableClipboard && /*#__PURE__*/(0, _jsxRuntime.jsx)(_copied.Copied, {
       },
-      children: entries.length > 0 && entries.map(function (_ref10, idx) {
+      children: entries.length > 0 && (0, _toConsumableArray2["default"])(entries).map(function (_ref10, idx) {
         var _ref11 = (0, _slicedToArray2["default"])(_ref10, 2),
@@ -232,0 +242,0 @@ key = _ref11[0],

cjs/value.d.ts

@@ -49,5 +49,15 @@ import type { FC, PropsWithChildren } from 'react';
 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'];
+    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;
@@ -61,9 +71,4 @@ displayObjectSize: boolean;
     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;
 }
@@ -86,1 +91,2 @@ export declare function getValueString<T>(value: T): {
 export declare const Type: FC<PropsWithChildren<TypeProps>>;
+export {};

cjs/value.js

@@ -21,3 +21,3 @@ "use strict";
 var _excluded = ["children", "style"],
-  _excluded2 = ["value", "keyName", "indentWidth", "renderKey", "quotes", "level", "renderValue", "renderBraces", "enableClipboard", "displayObjectSize", "displayDataTypes"],
+  _excluded2 = ["value", "setValue", "data", "keyName", "indentWidth", "renderKey", "quotes", "level", "renderValue", "renderBraces", "enableClipboard", "displayObjectSize", "displayDataTypes"],
   _excluded3 = ["children", "color", "fontSize", "opacity", "paddingRight", "style"];
@@ -59,3 +59,3 @@ var Line = function Line(props) {
     color: 'var(--w-rjv-type-url-color, #0969da)',
-    label: 'URL'
+    label: 'url'
   },
@@ -134,2 +134,4 @@ "null": {
   var value = props.value,
+    setValue = props.setValue,
+    data = props.data,
     keyName = props.keyName,
@@ -198,2 +200,4 @@ indentWidth = props.indentWidth,
       value: value,
+      setValue: setValue,
+      data: data,
       quotes: quotes,
@@ -200,0 +204,0 @@ keyName: keyName,

editor.d.ts

@@ -26,2 +26,7 @@ /// <reference types="react" />
     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 */
@@ -28,0 +33,0 @@ editable?: boolean;

esm/editor/countInfoExtra.d.ts

@@ -7,3 +7,6 @@ /// <reference types="react" />
     value: T;
+    parentValue?: T;
+    keyName?: string | number;
     setValue?: React.Dispatch<React.SetStateAction<T>>;
+    setParentValue?: React.Dispatch<React.SetStateAction<T>>;
     /**
@@ -14,3 +17,8 @@ * When a callback function is passed in, add functionality is enabled. The callback is invoked before additions are completed.
     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 declare function CountInfoExtra<T extends object>(props: CountInfoExtraProps<T>): import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare function CountInfoExtra<T extends object>(props: CountInfoExtraProps<T>): import("react/jsx-runtime").JSX.Element | null;

esm/editor/countInfoExtra.js

 import _extends from "@babel/runtime/helpers/extends";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import { Fragment } from 'react';
 import { AddIcon } from './icon/add';
+import { DeleteIcon } from './icon/delete';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export function CountInfoExtra(props) {
@@ -10,5 +13,9 @@ var {
     editable,
+    keyName,
     value,
+    parentValue,
     setValue,
-    onAdd
+    setParentValue,
+    onAdd,
+    onDelete
   } = props;
@@ -25,3 +32,3 @@ if (!visible || !showTools) return null;
       });
-      if (onAdd) {
+      if (onAdd && setValue) {
         var maybeAdd = yield onAdd(keyOrValue, result, props.value, isAdd);
@@ -37,7 +44,29 @@ if (maybeAdd) {
   }();
-  var svgProps = {
-    onClick: click
-  };
-  if (!editable || !onAdd) return;
-  return /*#__PURE__*/_jsx(AddIcon, _extends({}, svgProps));
+  var deleteHandle = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(function* (event) {
+      event.stopPropagation();
+      if (onDelete && (keyName || typeof keyName === 'number') && parentValue) {
+        var maybeDelete = yield onDelete(keyName, value, parentValue);
+        if (maybeDelete && setParentValue) {
+          if (Array.isArray(parentValue)) {
+            parentValue.splice(keyName, 1);
+            setParentValue([...parentValue]);
+          } else if (keyName in parentValue) {
+            delete parentValue[keyName];
+            setParentValue(_extends({}, parentValue));
+          }
+        }
+      }
+    });
+    return function deleteHandle(_x2) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/_jsxs(Fragment, {
+    children: [editable && onAdd && /*#__PURE__*/_jsx(AddIcon, {
+      onClick: click
+    }), editable && onDelete && parentValue && /*#__PURE__*/_jsx(DeleteIcon, {
+      onClick: deleteHandle
+    })]
+  });
 }

esm/editor/icon/add.js

@@ -16,3 +16,3 @@ import _extends from "@babel/runtime/helpers/extends";
   return /*#__PURE__*/_jsx("svg", _extends({
-    viewBox: "0 0 20 20",
+    viewBox: "0 0 40 40",
     fill: "var(--w-rjv-add-color, currentColor)"
@@ -22,5 +22,5 @@ }, props, {
     children: /*#__PURE__*/_jsx("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"
+      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"
     })
   }));
 };

esm/editor/index.d.ts

@@ -21,2 +21,7 @@ /// <reference types="react" />
     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 */
@@ -23,0 +28,0 @@ editable?: boolean;

esm/editor/index.js

 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["onEdit", "components", "editable", "displayDataTypes", "onAdd"];
+var _excluded = ["onEdit", "components", "editable", "displayDataTypes", "onAdd", "onDelete"];
 import { forwardRef } from 'react';
@@ -16,3 +16,4 @@ import JsonView from '../';
       displayDataTypes = true,
-      onAdd
+      onAdd,
+      onDelete
     } = props,
@@ -23,3 +24,4 @@ reset = _objectWithoutPropertiesLoose(props, _excluded);
       editable: editable,
-      onAdd: onAdd
+      onAdd: onAdd,
+      onDelete: onDelete
     })),
@@ -35,2 +37,3 @@ objectKey: reprops => /*#__PURE__*/_jsx(ObjectKey, _extends({}, reprops, {
         displayDataTypes: displayDataTypes,
+        onDelete: onDelete,
         onEdit: onEdit
@@ -37,0 +40,0 @@ }));

esm/editor/value.d.ts

@@ -10,6 +10,9 @@ /// <reference types="react" />
     value?: unknown;
+    data?: T;
     visible?: boolean;
     editableValue?: boolean;
     displayDataTypes?: boolean;
+    setValue?: React.Dispatch<React.SetStateAction<T>>;
+    onDelete?: JsonViewEditorProps<T>['onDelete'];
 }
 export declare function ReValue<T extends object>(props: ReValueProps<T>): import("react/jsx-runtime").JSX.Element;

esm/editor/value.js

 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", "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";
@@ -27,2 +28,5 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
       value,
+      setValue,
+      data,
+      keyName,
       visible,
@@ -33,2 +37,3 @@ quotes,
       editableValue,
+      onDelete,
       onEdit
@@ -150,2 +155,14 @@ } = props,
   }
+  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, {
@@ -166,4 +183,6 @@ children: [displayDataTypes && typeView, /*#__PURE__*/_jsx(Quotes, {
       onClick: click
+    }), visible && editableValue && onDelete && /*#__PURE__*/_jsx(DeleteIcon, {
+      onClick: deleteHandle
     })]
   });
 }

esm/node.d.ts

@@ -9,3 +9,5 @@ import { FC, PropsWithChildren } from 'react';
     level?: number;
+    parentValue?: T;
+    setParentValue?: React.Dispatch<React.SetStateAction<T>>;
 }
 export declare function RooNode<T extends object>(props: RooNodeProps<T>): import("react/jsx-runtime").JSX.Element;

esm/node.js

 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", "onCopied", "onExpand", "parentValue", "setParentValue"];
 import { Fragment, useId, cloneElement, useState, useEffect } from 'react';
@@ -46,3 +46,5 @@ import { ValueView, Colon, Label, Line, typeMap } from './value';
       onCopied,
-      onExpand
+      onExpand,
+      parentValue,
+      setParentValue
     } = props,
@@ -67,2 +69,3 @@ reset = _objectWithoutPropertiesLoose(props, _excluded);
   };
+  var [valueData, setValueData] = useState(value);
   var subNodeProps = {
@@ -78,2 +81,4 @@ components,
     collapsed,
+    parentValue: value,
+    setParentValue: setValueData,
     quotes,
@@ -90,3 +95,5 @@ level: level + 1,
     indentWidth,
+    data: valueData,
     quotes,
+    setValue: setValueData,
     renderBraces: components.braces,
@@ -109,3 +116,2 @@ renderValue: components.value
   }
-  var [valueData, setValueData] = useState(value);
   useEffect(() => setValueData(value), [value]);
@@ -173,4 +179,7 @@ var nameKeys = isArray ? Object.keys(valueData).map(m => Number(m)) : Object.keys(valueData);
         showTools,
+        keyName,
         visible: expand,
         value: valueData,
+        parentValue,
+        setParentValue,
         setValue: setValueData
@@ -189,3 +198,3 @@ }), enableClipboard && /*#__PURE__*/_jsx(Copied, {
       },
-      children: entries.length > 0 && entries.map((_ref6, idx) => {
+      children: entries.length > 0 && [...entries].map((_ref6, idx) => {
         var [key, itemVal] = _ref6;
@@ -192,0 +201,0 @@ var item = itemVal;

esm/value.d.ts

@@ -49,5 +49,15 @@ import type { FC, PropsWithChildren } from 'react';
 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'];
+    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;
@@ -61,9 +71,4 @@ displayObjectSize: boolean;
     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;
 }
@@ -86,1 +91,2 @@ export declare function getValueString<T>(value: T): {
 export declare const Type: FC<PropsWithChildren<TypeProps>>;
+export {};

esm/value.js

 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", "renderKey", "quotes", "level", "renderValue", "renderBraces", "enableClipboard", "displayObjectSize", "displayDataTypes"],
   _excluded3 = ["children", "color", "fontSize", "opacity", "paddingRight", "style"];
@@ -41,3 +41,3 @@ import { Fragment, forwardRef, useState } from 'react';
     color: 'var(--w-rjv-type-url-color, #0969da)',
-    label: 'URL'
+    label: 'url'
   },
@@ -116,2 +116,4 @@ null: {
       value,
+      setValue,
+      data,
       keyName,
@@ -174,2 +176,4 @@ indentWidth,
       value,
+      setValue,
+      data,
       quotes,
@@ -176,0 +180,0 @@ keyName,

package.json

 {
   "name": "@uiw/react-json-view",
-  "version": "1.7.1",
+  "version": "1.8.0",
   "description": "JSON viewer for react.",
@@ -5,0 +5,0 @@ "main": "cjs/index.js",

README.md

@@ -28,2 +28,4 @@ react-json-view
 📦 Zero dependencies  
+📋 Copy to Clipboard  
+✏️ Support editing and adding features  
 ♻️ Whether to highlight updates.
@@ -128,2 +130,3 @@
   '--w-rjv-add-color': 'var(--w-rjv-color)',
+  '--w-rjv-delete-color': '#dc3545',
   '--w-rjv-info-color': '#656565',
@@ -195,2 +198,3 @@ '--w-rjv-update-color': '#ebcb8b',
   '--w-rjv-add-color': '#0184a6',
+  '--w-rjv-delete-color': '#dc3545',
   '--w-rjv-info-color': '#656565',
@@ -266,3 +270,3 @@ '--w-rjv-update-color': '#ebcb8b',
               const active = cssvar === varname ? '#a8a8a8' : '';
-              return <button key={idx} style={{ background: active, border: 0,boxShadow: 'inset 0px 0px 1px #000' }} onClick={click}>{varname}</button>
+              return <button key={idx} style={{ background: active, border: 0,boxShadow: 'inset 0px 0px 1px #000', textAlign: 'left' }} onClick={click}>{varname}</button>
             })}
@@ -336,3 +340,3 @@ </div>
 
-function value({ type, children, value, keyName, visible, ...props }) {
+function value({ type, children, value, setValue, keyName, visible, ...props }) {
   if (type === 'string' && /\.(jpg)$/.test(value)) {
@@ -390,3 +394,3 @@ return (
 
-function value({ type, children, visible, keyName, value, ...props }) {
+function value({ type, children, visible, keyName, value, setValue, ...props }) {
   if (value instanceof URL) {
@@ -768,2 +772,7 @@ return (
   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 */
@@ -770,0 +779,0 @@ editable?: boolean;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

182195

increased by7.68%

Number of package files

83

increased by5.06%

Lines of code

3882

increased by7.5%

Number of lines in readme file

830

increased by1.1%

Worsened metrics

Number of low supply chain risk alerts

4

increased by100%

No dependency changes