@uiw/react-json-view 1.7.0 → 1.7.1

package/README.md

@@ -123,6 +123,7 @@ const customTheme = {
   '--w-rjv-line-color': '#323232',
   '--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-info-color': '#656565',
   '--w-rjv-update-color': '#ebcb8b',
   '--w-rjv-copied-color': '#9cdcfe',
@@ -187,7 +188,8 @@ const customTheme = {
   '--w-rjv-background-color': '#1e1e1e',
   '--w-rjv-line-color': '#323232',
   '--w-rjv-arrow-color': '#9cdcfe',
-  '--w-rjv-edit-color': '#9cdcfe',
+  '--w-rjv-edit-color': '#0184a6',
+  '--w-rjv-add-color': '#0184a6',
   '--w-rjv-info-color': '#656565',
   '--w-rjv-update-color': '#ebcb8b',
   '--w-rjv-copied-color': '#0184a6',
@@ -237,7 +239,18 @@ export default function Demo() {
         <input type="checkbox" checked={editable} onChange={changeEditable} /> Editable
       </label>
       <div style={{ display: 'flex', gap: '1rem', alignItems: 'flex-start' }}>
-        <JsonView editable={editable} value={src} keyName="root" style={{ flex: 1, overflow: 'auto', ...theme }} />
+        <JsonView
+          editable={editable}
+          value={src}
+          keyName="root"
+          onAdd={(keyOrValue, newValue, value, isAdd) => {
+            return isAdd;
+          }}
+          onEdit={(opts) => {
+            return true;
+          }}
+          style={{ flex: 1, overflow: 'auto', ...theme }}
+        />
         <div>
           <Colorful color={hex} onChange={onChange} />
           <div style={{ display: 'flex', gap: '0.4rem', flexDirection: 'column' }}>
@@ -247,7 +260,7 @@ export default function Demo() {
                 setHex(customTheme[varname]);
               };
               const active = cssvar === varname ? '#a8a8a8' : '';
-              return <button key={idx} style={{ background: active }} onClick={click}>{varname}</button>
+              return <button key={idx} style={{ background: active, border: 0,boxShadow: 'inset 0px 0px 1px #000' }} onClick={click}>{varname}</button>
             })}
           </div>
         </div>
@@ -730,14 +743,17 @@ export interface CountInfoProps {
 import { JsonViewProps } from '@uiw/react-json-view';
 import type { CountInfoExtraProps } from '@uiw/react-json-view/cjs/editor/countInfoExtra';
 export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T> {
-  /** Callback when value edit functionality */
+  /**
+   * When a callback function is passed in, edit functionality is enabled. The callback is invoked before edits are completed.
+   * @returns {boolean}  Returning false from onEdit will prevent the change from being made.
+   */
   onEdit?: (option: {
     value: unknown;
     oldValue: unknown;
     keyName?: string | number;
     parentName?: string | number;
     type?: 'value' | 'key';
-  }) => void;
+  }) => boolean;
   /**
    * 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.

package/cjs/editor/countInfoExtra.d.ts

@@ -1,14 +1,14 @@
 /// <reference types="react" />
 import type { CountInfoProps } from '../';
-export interface CountInfoExtraProps<T> extends CountInfoProps {
+export interface CountInfoExtraProps<T> extends Partial<CountInfoProps> {
     editable: boolean;
     showTools: boolean;
     value: T;
-    setValue: React.Dispatch<React.SetStateAction<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 declare function CountInfoExtra<T extends object>(props: CountInfoExtraProps<T>): import("react/jsx-runtime").JSX.Element | null;
+export declare function CountInfoExtra<T extends object>(props: CountInfoExtraProps<T>): import("react/jsx-runtime").JSX.Element | null | undefined;

package/cjs/editor/countInfoExtra.js

@@ -15,6 +15,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 function CountInfoExtra(props) {
   var visible = props.visible,
     showTools = props.showTools,
+    editable = props.editable,
     value = props.value,
     setValue = props.setValue,
     onAdd = props.onAdd;
@@ -54,5 +55,6 @@ function CountInfoExtra(props) {
   var svgProps = {
     onClick: click
   };
+  if (!editable || !onAdd) return;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_add.AddIcon, (0, _objectSpread3["default"])({}, svgProps));
 }

package/cjs/editor/icon/add.js

@@ -19,7 +19,7 @@ var AddIcon = function AddIcon(props) {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
     viewBox: "0 0 20 20",
-    fill: "var(--w-rjv-edit-color, currentColor)"
+    fill: "var(--w-rjv-add-color, currentColor)"
   }, props), {}, {
     style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), defaultStyle),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {

package/cjs/editor/index.d.ts

@@ -2,14 +2,17 @@
 import type { JsonViewProps } from '../';
 import type { CountInfoExtraProps } from './countInfoExtra';
 export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T> {
-    /** Callback when value edit functionality */
+    /**
+     * When a callback function is passed in, edit functionality is enabled. The callback is invoked before edits are completed.
+     * @returns {boolean}  Returning false from onEdit will prevent the change from being made.
+     */
     onEdit?: (option: {
         value: unknown;
         oldValue: unknown;
         keyName?: string | number;
         parentName?: string | number;
         type?: 'value' | 'key';
-    }) => void;
+    }) => boolean;
     /**
      * 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.

package/cjs/editor/value.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ReValue = ReValue;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
@@ -71,60 +73,96 @@ function ReValue(props) {
       $edit.current.contentEditable = 'false';
     }
   };
-  var blur = function blur() {
-    if (!editableValue) return;
-    setEditable(false);
-    if ($edit.current) {
-      $edit.current.contentEditable = 'false';
-      var text = $edit.current.innerText;
-      if (curentType === 'number' || curentType === 'float') {
-        text = Number(text);
-        setCurentType((0, _value.isFloat)(text) ? 'float' : 'number');
-      }
-      if (curentType === 'url' && typeof text === 'string') {
-        text = new URL(text);
-      }
-      if (Number.isNaN(text)) {
-        setCurentType('number');
-      }
-      if (typeof text === 'string' && /^(true|false)$/ig.test(text)) {
-        text = /^(true)$/ig.test(text) ? true : false;
-        setCurentType('boolean');
-      } else if (typeof text === 'string' && /^[\d]+n$/ig.test(text)) {
-        text = BigInt(text.replace(/n$/ig, ''));
-        setCurentType('bigint');
-      } else if (typeof text === 'string' && /^(null)$/ig.test(text)) {
-        text = null;
-        setCurentType('null');
-      } else if (typeof text === 'string' && /^(undefined)$/ig.test(text)) {
-        text = undefined;
-        setCurentType('undefined');
-      } else if (typeof text === 'string') {
-        try {
-          var dt = new Date(text);
-          if (dt.toString() !== 'Invalid Date') {
-            text = dt;
-            setCurentType('date');
-          }
-        } catch (error) {}
-      }
-      setCurentChild(text);
-      onEdit && onEdit({
-        type: 'value',
-        value: text,
-        oldValue: curentChild
-      });
-    }
-  };
+  var blur = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee() {
+      var text, _typeStr, dt, result, _getValueString, oldChildStr;
+      return (0, _regeneratorRuntime2["default"])().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (editableValue) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            setEditable(false);
+            if (!$edit.current) {
+              _context.next = 16;
+              break;
+            }
+            $edit.current.contentEditable = 'false';
+            text = $edit.current.innerText;
+            _typeStr = curentType;
+            if (curentType === 'number' || curentType === 'float') {
+              text = Number(text);
+              _typeStr = (0, _value.isFloat)(text) ? 'float' : 'number';
+            }
+            if (curentType === 'url' && typeof text === 'string') {
+              text = new URL(text);
+              _typeStr = 'url';
+            }
+            if (Number.isNaN(text)) {
+              _typeStr = 'number';
+            }
+            if (typeof text === 'string' && /^(true|false)$/ig.test(text)) {
+              text = /^(true)$/ig.test(text) ? true : false;
+              _typeStr = 'boolean';
+            } else if (typeof text === 'string' && /^[\d]+n$/ig.test(text)) {
+              text = BigInt(text.replace(/n$/ig, ''));
+              _typeStr = 'bigint';
+            } else if (typeof text === 'string' && /^(null)$/ig.test(text)) {
+              text = null;
+              _typeStr = 'null';
+            } else if (typeof text === 'string' && /^(undefined)$/ig.test(text)) {
+              text = undefined;
+              _typeStr = 'undefined';
+            } else if (typeof text === 'string') {
+              try {
+                if (text && text.length > 10 && !isNaN(Date.parse(text))) {
+                  dt = new Date(text);
+                  text = dt;
+                  _typeStr = 'date';
+                }
+              } catch (error) {}
+            }
+            if (!onEdit) {
+              _context.next = 16;
+              break;
+            }
+            _context.next = 14;
+            return onEdit({
+              type: 'value',
+              value: text,
+              oldValue: curentChild
+            });
+          case 14:
+            result = _context.sent;
+            if (result) {
+              setCurentType(_typeStr);
+              setCurentChild(text);
+            } else {
+              _getValueString = (0, _value.getValueString)(curentChild), oldChildStr = _getValueString.content;
+              $edit.current.innerHTML = String(oldChildStr);
+            }
+          case 16:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function blur() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
   var defaultStyle = {
     minWidth: 34,
     minHeight: 18,
     paddingInline: 3,
     display: 'inline-block'
   };
-  var _getValueString = (0, _value.getValueString)(curentChild),
-    typeStr = _getValueString.type,
-    childStr = _getValueString.content;
+  var _getValueString2 = (0, _value.getValueString)(curentChild),
+    typeStr = _getValueString2.type,
+    childStr = _getValueString2.content;
   var color = ((_typeMap$typeStr = _value.typeMap[typeStr]) === null || _typeMap$typeStr === void 0 ? void 0 : _typeMap$typeStr.color) || '';
   var spanProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
     onBlur: blur,
@@ -143,21 +181,19 @@ function ReValue(props) {
     typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
-    children: [displayDataTypes && typeView, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Quotes, {
-        style: style,
-        quotes: quotes,
-        show: typeStr === 'string'
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, spanProps), {}, {
-        ref: $edit,
-        "data-value": childStr,
-        children: typeof curentChild === 'string' ? curentChild : childStr
-      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Quotes, {
-        style: style,
-        quotes: quotes,
-        show: typeStr === 'string'
-      })]
-    }), visible && editableValue && /*#__PURE__*/(0, _jsxRuntime.jsx)(_edit.EditIcon, {
+    children: [displayDataTypes && typeView, /*#__PURE__*/(0, _jsxRuntime.jsx)(Quotes, {
+      style: style,
+      quotes: quotes,
+      show: typeStr === 'string'
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, spanProps), {}, {
+      ref: $edit,
+      "data-value": childStr,
+      children: typeof curentChild === 'string' ? curentChild : childStr
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Quotes, {
+      style: style,
+      quotes: quotes,
+      show: typeStr === 'string'
+    }), visible && editableValue && onEdit && /*#__PURE__*/(0, _jsxRuntime.jsx)(_edit.EditIcon, {
       onClick: click
     })]
   });

package/esm/editor/countInfoExtra.d.ts

@@ -1,14 +1,14 @@
 /// <reference types="react" />
 import type { CountInfoProps } from '../';
-export interface CountInfoExtraProps<T> extends CountInfoProps {
+export interface CountInfoExtraProps<T> extends Partial<CountInfoProps> {
     editable: boolean;
     showTools: boolean;
     value: T;
-    setValue: React.Dispatch<React.SetStateAction<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 declare function CountInfoExtra<T extends object>(props: CountInfoExtraProps<T>): import("react/jsx-runtime").JSX.Element | null;
+export declare function CountInfoExtra<T extends object>(props: CountInfoExtraProps<T>): import("react/jsx-runtime").JSX.Element | null | undefined;

package/esm/editor/countInfoExtra.js

@@ -6,6 +6,7 @@ export function CountInfoExtra(props) {
   var {
     visible,
     showTools,
+    editable,
     value,
     setValue,
     onAdd
@@ -34,5 +35,6 @@ export function CountInfoExtra(props) {
   var svgProps = {
     onClick: click
   };
+  if (!editable || !onAdd) return;
   return /*#__PURE__*/_jsx(AddIcon, _extends({}, svgProps));
 }

package/esm/editor/icon/add.js

@@ -14,7 +14,7 @@ export var AddIcon = props => {
   };
   return /*#__PURE__*/_jsx("svg", _extends({
     viewBox: "0 0 20 20",
-    fill: "var(--w-rjv-edit-color, currentColor)"
+    fill: "var(--w-rjv-add-color, currentColor)"
   }, props, {
     style: _extends({}, style, defaultStyle),
     children: /*#__PURE__*/_jsx("path", {

package/esm/editor/index.d.ts

@@ -2,14 +2,17 @@
 import type { JsonViewProps } from '../';
 import type { CountInfoExtraProps } from './countInfoExtra';
 export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T> {
-    /** Callback when value edit functionality */
+    /**
+     * When a callback function is passed in, edit functionality is enabled. The callback is invoked before edits are completed.
+     * @returns {boolean}  Returning false from onEdit will prevent the change from being made.
+     */
     onEdit?: (option: {
         value: unknown;
         oldValue: unknown;
         keyName?: string | number;
         parentName?: string | number;
         type?: 'value' | 'key';
-    }) => void;
+    }) => boolean;
     /**
      * 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.

package/esm/editor/value.js

@@ -1,4 +1,5 @@
 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"];
 import { Fragment, useEffect, useRef, useState } from 'react';
@@ -55,51 +56,68 @@ export function ReValue(props) {
       $edit.current.contentEditable = 'false';
     }
   };
-  var blur = () => {
-    if (!editableValue) return;
-    setEditable(false);
-    if ($edit.current) {
-      $edit.current.contentEditable = 'false';
-      var text = $edit.current.innerText;
-      if (curentType === 'number' || curentType === 'float') {
-        text = Number(text);
-        setCurentType(isFloat(text) ? 'float' : 'number');
-      }
-      if (curentType === 'url' && typeof text === 'string') {
-        text = new URL(text);
-      }
-      if (Number.isNaN(text)) {
-        setCurentType('number');
-      }
-      if (typeof text === 'string' && /^(true|false)$/ig.test(text)) {
-        text = /^(true)$/ig.test(text) ? true : false;
-        setCurentType('boolean');
-      } else if (typeof text === 'string' && /^[\d]+n$/ig.test(text)) {
-        text = BigInt(text.replace(/n$/ig, ''));
-        setCurentType('bigint');
-      } else if (typeof text === 'string' && /^(null)$/ig.test(text)) {
-        text = null;
-        setCurentType('null');
-      } else if (typeof text === 'string' && /^(undefined)$/ig.test(text)) {
-        text = undefined;
-        setCurentType('undefined');
-      } else if (typeof text === 'string') {
-        try {
-          var dt = new Date(text);
-          if (dt.toString() !== 'Invalid Date') {
-            text = dt;
-            setCurentType('date');
+  var blur = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(function* () {
+      if (!editableValue) return;
+      setEditable(false);
+      if ($edit.current) {
+        $edit.current.contentEditable = 'false';
+        var text = $edit.current.innerText;
+        var _typeStr = curentType;
+        if (curentType === 'number' || curentType === 'float') {
+          text = Number(text);
+          _typeStr = isFloat(text) ? 'float' : 'number';
+        }
+        if (curentType === 'url' && typeof text === 'string') {
+          text = new URL(text);
+          _typeStr = 'url';
+        }
+        if (Number.isNaN(text)) {
+          _typeStr = 'number';
+        }
+        if (typeof text === 'string' && /^(true|false)$/ig.test(text)) {
+          text = /^(true)$/ig.test(text) ? true : false;
+          _typeStr = 'boolean';
+        } else if (typeof text === 'string' && /^[\d]+n$/ig.test(text)) {
+          text = BigInt(text.replace(/n$/ig, ''));
+          _typeStr = 'bigint';
+        } else if (typeof text === 'string' && /^(null)$/ig.test(text)) {
+          text = null;
+          _typeStr = 'null';
+        } else if (typeof text === 'string' && /^(undefined)$/ig.test(text)) {
+          text = undefined;
+          _typeStr = 'undefined';
+        } else if (typeof text === 'string') {
+          try {
+            if (text && text.length > 10 && !isNaN(Date.parse(text))) {
+              var dt = new Date(text);
+              text = dt;
+              _typeStr = 'date';
+            }
+          } catch (error) {}
+        }
+        if (onEdit) {
+          var result = yield onEdit({
+            type: 'value',
+            value: text,
+            oldValue: curentChild
+          });
+          if (result) {
+            setCurentType(_typeStr);
+            setCurentChild(text);
+          } else {
+            var {
+              content: oldChildStr
+            } = getValueString(curentChild);
+            $edit.current.innerHTML = String(oldChildStr);
           }
-        } catch (error) {}
+        }
       }
-      setCurentChild(text);
-      onEdit && onEdit({
-        type: 'value',
-        value: text,
-        oldValue: curentChild
-      });
-    }
-  };
+    });
+    return function blur() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
   var defaultStyle = {
     minWidth: 34,
     minHeight: 18,
@@ -128,21 +146,19 @@ export function ReValue(props) {
     typeView = /*#__PURE__*/_jsx(Fragment, {});
   }
   return /*#__PURE__*/_jsxs(Fragment, {
-    children: [displayDataTypes && typeView, /*#__PURE__*/_jsxs(Fragment, {
-      children: [/*#__PURE__*/_jsx(Quotes, {
-        style: style,
-        quotes: quotes,
-        show: typeStr === 'string'
-      }), /*#__PURE__*/_jsx("span", _extends({}, spanProps, {
-        ref: $edit,
-        "data-value": childStr,
-        children: typeof curentChild === 'string' ? curentChild : childStr
-      })), /*#__PURE__*/_jsx(Quotes, {
-        style: style,
-        quotes: quotes,
-        show: typeStr === 'string'
-      })]
-    }), visible && editableValue && /*#__PURE__*/_jsx(EditIcon, {
+    children: [displayDataTypes && typeView, /*#__PURE__*/_jsx(Quotes, {
+      style: style,
+      quotes: quotes,
+      show: typeStr === 'string'
+    }), /*#__PURE__*/_jsx("span", _extends({}, spanProps, {
+      ref: $edit,
+      "data-value": childStr,
+      children: typeof curentChild === 'string' ? curentChild : childStr
+    })), /*#__PURE__*/_jsx(Quotes, {
+      style: style,
+      quotes: quotes,
+      show: typeStr === 'string'
+    }), visible && editableValue && onEdit && /*#__PURE__*/_jsx(EditIcon, {
       onClick: click
     })]
   });

package/package.json

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