@uiw/react-json-view 1.6.0 → 1.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +51 -21
- package/cjs/editor/countInfoExtra.d.ts +14 -0
- package/cjs/editor/countInfoExtra.js +60 -0
- package/cjs/editor/icon/add.d.ts +4 -0
- package/cjs/editor/icon/add.js +30 -0
- package/cjs/editor/index.d.ts +12 -3
- package/cjs/editor/index.js +9 -1
- package/cjs/editor/objectKey.d.ts +2 -2
- package/cjs/editor/value.d.ts +1 -1
- package/cjs/editor/value.js +99 -63
- package/cjs/index.d.ts +13 -10
- package/cjs/node.js +24 -11
- package/cjs/semicolon.d.ts +3 -3
- package/cjs/value.d.ts +3 -3
- package/editor.d.ts +16 -1
- package/esm/editor/countInfoExtra.d.ts +14 -0
- package/esm/editor/countInfoExtra.js +40 -0
- package/esm/editor/icon/add.d.ts +4 -0
- package/esm/editor/icon/add.js +24 -0
- package/esm/editor/index.d.ts +12 -3
- package/esm/editor/index.js +8 -2
- package/esm/editor/objectKey.d.ts +2 -2
- package/esm/editor/value.d.ts +1 -1
- package/esm/editor/value.js +74 -58
- package/esm/index.d.ts +13 -10
- package/esm/node.js +18 -10
- package/esm/semicolon.d.ts +3 -3
- package/esm/value.d.ts +3 -3
- package/package.json +1 -1
- package/cjs/tools.d.ts +0 -10
- package/cjs/tools.js +0 -24
- package/esm/tools.d.ts +0 -10
- package/esm/tools.js +0 -20
package/README.md
CHANGED
|
@@ -3,7 +3,7 @@ react-json-view
|
|
|
3
3
|
|
|
4
4
|
[](https://github.com/uiwjs/react-json-view/actions/workflows/ci.yml)
|
|
5
5
|
[](https://www.npmjs.com/package/@uiw/react-json-view)
|
|
6
|
-
[](https://www.npmjs.com/package/@uiw/react-json-view)
|
|
6
|
+
[](https://www.npmjs.com/package/@uiw/react-json-view)
|
|
7
7
|
[](https://github.com/facebook/react/releases)
|
|
8
8
|
[](https://uiwjs.github.io/react-json-view/lcov-report/)
|
|
9
9
|
|
|
@@ -123,6 +123,7 @@ const customTheme = {
|
|
|
123
123
|
'--w-rjv-line-color': '#323232',
|
|
124
124
|
'--w-rjv-arrow-color': 'var(--w-rjv-color)',
|
|
125
125
|
'--w-rjv-edit-color': 'var(--w-rjv-color)',
|
|
126
|
+
'--w-rjv-add-color': 'var(--w-rjv-color)',
|
|
126
127
|
'--w-rjv-info-color': '#656565',
|
|
127
128
|
'--w-rjv-update-color': '#ebcb8b',
|
|
128
129
|
'--w-rjv-copied-color': '#9cdcfe',
|
|
@@ -187,7 +188,8 @@ const customTheme = {
|
|
|
187
188
|
'--w-rjv-background-color': '#1e1e1e',
|
|
188
189
|
'--w-rjv-line-color': '#323232',
|
|
189
190
|
'--w-rjv-arrow-color': '#9cdcfe',
|
|
190
|
-
'--w-rjv-edit-color': '#
|
|
191
|
+
'--w-rjv-edit-color': '#0184a6',
|
|
192
|
+
'--w-rjv-add-color': '#0184a6',
|
|
191
193
|
'--w-rjv-info-color': '#656565',
|
|
192
194
|
'--w-rjv-update-color': '#ebcb8b',
|
|
193
195
|
'--w-rjv-copied-color': '#0184a6',
|
|
@@ -237,7 +239,18 @@ export default function Demo() {
|
|
|
237
239
|
<input type="checkbox" checked={editable} onChange={changeEditable} /> Editable
|
|
238
240
|
</label>
|
|
239
241
|
<div style={{ display: 'flex', gap: '1rem', alignItems: 'flex-start' }}>
|
|
240
|
-
<JsonView
|
|
242
|
+
<JsonView
|
|
243
|
+
editable={editable}
|
|
244
|
+
value={src}
|
|
245
|
+
keyName="root"
|
|
246
|
+
onAdd={(keyOrValue, newValue, value, isAdd) => {
|
|
247
|
+
return isAdd;
|
|
248
|
+
}}
|
|
249
|
+
onEdit={(opts) => {
|
|
250
|
+
return true;
|
|
251
|
+
}}
|
|
252
|
+
style={{ flex: 1, overflow: 'auto', ...theme }}
|
|
253
|
+
/>
|
|
241
254
|
<div>
|
|
242
255
|
<Colorful color={hex} onChange={onChange} />
|
|
243
256
|
<div style={{ display: 'flex', gap: '0.4rem', flexDirection: 'column' }}>
|
|
@@ -247,7 +260,7 @@ export default function Demo() {
|
|
|
247
260
|
setHex(customTheme[varname]);
|
|
248
261
|
};
|
|
249
262
|
const active = cssvar === varname ? '#a8a8a8' : '';
|
|
250
|
-
return <button key={idx} style={{ background: active }} onClick={click}>{varname}</button>
|
|
263
|
+
return <button key={idx} style={{ background: active, border: 0,boxShadow: 'inset 0px 0px 1px #000' }} onClick={click}>{varname}</button>
|
|
251
264
|
})}
|
|
252
265
|
</div>
|
|
253
266
|
</div>
|
|
@@ -316,11 +329,11 @@ const object = {
|
|
|
316
329
|
integer: 42,
|
|
317
330
|
}
|
|
318
331
|
|
|
319
|
-
function value({ type, children, keyName, visible, ...props }) {
|
|
320
|
-
if (type === 'string' && /\.(jpg)$/.test(
|
|
332
|
+
function value({ type, children, value, keyName, visible, ...props }) {
|
|
333
|
+
if (type === 'string' && /\.(jpg)$/.test(value)) {
|
|
321
334
|
return (
|
|
322
335
|
<span {...props}>
|
|
323
|
-
<img src={
|
|
336
|
+
<img src={value} height="36" />
|
|
324
337
|
</span>
|
|
325
338
|
);
|
|
326
339
|
}
|
|
@@ -672,6 +685,7 @@ export default function Demo() {
|
|
|
672
685
|
```ts
|
|
673
686
|
import React from 'react';
|
|
674
687
|
import { MetaProps, SemicolonProps, EllipsisProps, ValueViewProps } from '@uiw/react-json-view';
|
|
688
|
+
import type { CountInfoExtraProps } from '@uiw/react-json-view/cjs/editor/countInfoExtra';
|
|
675
689
|
export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
|
|
676
690
|
/** This property contains your input JSON */
|
|
677
691
|
value?: T;
|
|
@@ -710,25 +724,41 @@ export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttr
|
|
|
710
724
|
objectKey?: SemicolonProps['render'];
|
|
711
725
|
value?: ValueViewProps<T>['renderValue'];
|
|
712
726
|
copied?: CopiedProps<T>['render'];
|
|
727
|
+
countInfo?: (props: CountInfoProps) => JSX.Element;
|
|
728
|
+
countInfoExtra?: (props: Omit<CountInfoExtraProps<T>, 'editable'>) => JSX.Element;
|
|
713
729
|
};
|
|
714
730
|
}
|
|
715
731
|
declare const JsonView: React.ForwardRefExoticComponent<Omit<JsonViewProps<object>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
716
732
|
export default JsonView;
|
|
733
|
+
export interface CountInfoProps {
|
|
734
|
+
count: number;
|
|
735
|
+
level: number;
|
|
736
|
+
visible: boolean;
|
|
737
|
+
}
|
|
717
738
|
```
|
|
718
739
|
|
|
719
740
|
### JsonView Editor Props
|
|
720
741
|
|
|
721
742
|
```ts
|
|
722
743
|
import { JsonViewProps } from '@uiw/react-json-view';
|
|
744
|
+
import type { CountInfoExtraProps } from '@uiw/react-json-view/cjs/editor/countInfoExtra';
|
|
723
745
|
export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T> {
|
|
724
|
-
/**
|
|
746
|
+
/**
|
|
747
|
+
* When a callback function is passed in, edit functionality is enabled. The callback is invoked before edits are completed.
|
|
748
|
+
* @returns {boolean} Returning false from onEdit will prevent the change from being made.
|
|
749
|
+
*/
|
|
725
750
|
onEdit?: (option: {
|
|
726
751
|
value: unknown;
|
|
727
752
|
oldValue: unknown;
|
|
728
753
|
keyName?: string | number;
|
|
729
754
|
parentName?: string | number;
|
|
730
755
|
type?: 'value' | 'key';
|
|
731
|
-
}) =>
|
|
756
|
+
}) => boolean;
|
|
757
|
+
/**
|
|
758
|
+
* When a callback function is passed in, add functionality is enabled. The callback is invoked before additions are completed.
|
|
759
|
+
* @returns {boolean} Returning false from onAdd will prevent the change from being made.
|
|
760
|
+
*/
|
|
761
|
+
onAdd?: CountInfoExtraProps<T>['onAdd'];
|
|
732
762
|
/** Whether enable edit feature. @default true */
|
|
733
763
|
editable?: boolean;
|
|
734
764
|
}
|
|
@@ -740,19 +770,19 @@ export default JsonViewEditor;
|
|
|
740
770
|
|
|
741
771
|
Here is the size benchmark (using [bundlephobia.com](https://bundlephobia.com)) against similar React libraries (found by [`npmjs.com/search`](https://www.npmjs.com/search?q=react%20json&ranking=popularity)):
|
|
742
772
|
|
|
743
|
-
| Library | Bundle size
|
|
773
|
+
| Library | Bundle size (gzip) | Deps | Last commit | Download | Editable |
|
|
744
774
|
| ------- | ------- | ------- | ------- | ------- | ------- |
|
|
745
|
-
| **@uiw/react-json-view** | [](https://bundlephobia.com/result?p=@uiw/react-json-view)
|
|
746
|
-
| react-json-view-lite | [](https://bundlephobia.com/result?p=react-json-view-lite)
|
|
747
|
-
| react-json-pretty | [](https://bundlephobia.com/result?p=react-json-pretty)
|
|
748
|
-
| react-json-inspector | [](https://bundlephobia.com/result?p=react-json-inspector)
|
|
749
|
-
| react-json-tree | [](https://bundlephobia.com/result?p=react-json-tree)
|
|
750
|
-
| react-json-view | [](https://bundlephobia.com/result?p=react-json-view)
|
|
751
|
-
| react-json-tree-viewer | [](https://bundlephobia.com/result?p=react-json-tree-viewer)
|
|
752
|
-
| react-inspector | [](https://bundlephobia.com/result?p=react-inspector)
|
|
753
|
-
| react-domify | [](https://bundlephobia.com/result?p=react-domify)
|
|
754
|
-
| react18-json-view | [](https://bundlephobia.com/result?p=react18-json-view)
|
|
755
|
-
| @textea/json-viewer | [](https://bundlephobia.com/result?p=@textea/json-viewer)
|
|
775
|
+
| **@uiw/react-json-view** | [](https://bundlephobia.com/result?p=@uiw/react-json-view) [](https://bundlephobia.com/result?p=@uiw/react-json-view) | [](https://bundlephobia.com/result?p=@uiw/react-json-view) | [](https://github.com/uiwjs/react-json-view/commits) | [](https://www.npmjs.com/package/@uiw/react-json-view) | ✅ |
|
|
776
|
+
| react-json-view-lite | [](https://bundlephobia.com/result?p=react-json-view-lite) [](https://bundlephobia.com/result?p=react-json-view-lite) | [](https://bundlephobia.com/result?p=react-json-view-lite) | [](https://github.com/AnyRoad/react-json-view-lite/commits) | [](https://www.npmjs.com/package/react-json-view-lite) | ❌ |
|
|
777
|
+
| react-json-pretty | [](https://bundlephobia.com/result?p=react-json-pretty) [](https://bundlephobia.com/result?p=react-json-pretty) | [](https://bundlephobia.com/result?p=react-json-pretty) | [](https://github.com/chenckang/react-json-pretty/commits) | [](https://www.npmjs.com/package/react-json-pretty) | ❌ |
|
|
778
|
+
| react-json-inspector | [](https://bundlephobia.com/result?p=react-json-inspector) [](https://bundlephobia.com/result?p=react-json-inspector) | [](https://bundlephobia.com/result?p=react-json-inspector) | [](https://github.com/Lapple/react-json-inspector/commits) | [](https://www.npmjs.com/package/react-json-inspector) | ❌ |
|
|
779
|
+
| react-json-tree | [](https://bundlephobia.com/result?p=react-json-tree) [](https://bundlephobia.com/result?p=react-json-tree) | [](https://bundlephobia.com/result?p=react-json-tree) | [](https://github.com/reduxjs/redux-devtools/commits) | [](https://www.npmjs.com/package/react-json-tree) | ❌ |
|
|
780
|
+
| ~~react-json-view~~ | [](https://bundlephobia.com/result?p=react-json-view) [](https://bundlephobia.com/result?p=react-json-view) | [](https://bundlephobia.com/result?p=react-json-view) | [](https://github.com/mac-s-g/react-json-view/commits) | [](https://www.npmjs.com/package/react-json-view) | ✅ |
|
|
781
|
+
| ~~react-json-tree-viewer~~ | [](https://bundlephobia.com/result?p=react-json-tree-viewer) [](https://bundlephobia.com/result?p=react-json-tree-viewer) | [](https://bundlephobia.com/result?p=react-json-tree-viewer) | [](https://github.com/nsisodiya/react-json-viewer/commits) | [](https://www.npmjs.com/package/react-json-tree-viewer) | ❌ |
|
|
782
|
+
| react-inspector | [](https://bundlephobia.com/result?p=react-inspector) [](https://bundlephobia.com/result?p=react-inspector) | [](https://bundlephobia.com/result?p=react-inspector) | [](https://github.com/storybookjs/react-inspector/commits) | [](https://www.npmjs.com/package/react-inspector) | ❌ |
|
|
783
|
+
| react-domify | [](https://bundlephobia.com/result?p=react-domify) [](https://bundlephobia.com/result?p=react-domify) | [](https://bundlephobia.com/result?p=react-domify) | [](https://github.com/JedWatson/react-domify/commits) | [](https://www.npmjs.com/package/react-domify) | ❌ |
|
|
784
|
+
| react18-json-view | [](https://bundlephobia.com/result?p=react18-json-view) [](https://bundlephobia.com/result?p=react18-json-view) | [](https://bundlephobia.com/result?p=react18-json-view) | [](https://github.com/YYsuni/react18-json-view/commits) | [](https://www.npmjs.com/package/react18-json-view) | ❌ |
|
|
785
|
+
| @textea/json-viewer | [](https://bundlephobia.com/result?p=@textea/json-viewer) [](https://bundlephobia.com/result?p=@textea/json-viewer) | [](https://bundlephobia.com/result?p=@textea/json-viewer) | [](https://github.com/TexteaInc/json-viewer/commits) | [](https://www.npmjs.com/package/@textea/json-viewer) | ✅ |
|
|
756
786
|
|
|
757
787
|
## Development
|
|
758
788
|
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { CountInfoProps } from '../';
|
|
3
|
+
export interface CountInfoExtraProps<T> extends Partial<CountInfoProps> {
|
|
4
|
+
editable: boolean;
|
|
5
|
+
showTools: boolean;
|
|
6
|
+
value: T;
|
|
7
|
+
setValue?: React.Dispatch<React.SetStateAction<T>>;
|
|
8
|
+
/**
|
|
9
|
+
* When a callback function is passed in, add functionality is enabled. The callback is invoked before additions are completed.
|
|
10
|
+
* @returns {boolean} Returning false from onAdd will prevent the change from being made.
|
|
11
|
+
*/
|
|
12
|
+
onAdd?: (keyOrValue: string, newValue: T, value: T, isAdd: boolean) => boolean;
|
|
13
|
+
}
|
|
14
|
+
export declare function CountInfoExtra<T extends object>(props: CountInfoExtraProps<T>): import("react/jsx-runtime").JSX.Element | null | undefined;
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.CountInfoExtra = CountInfoExtra;
|
|
8
|
+
var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
|
|
9
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
|
+
var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
11
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
12
|
+
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
13
|
+
var _add = require("./icon/add");
|
|
14
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
15
|
+
function CountInfoExtra(props) {
|
|
16
|
+
var visible = props.visible,
|
|
17
|
+
showTools = props.showTools,
|
|
18
|
+
editable = props.editable,
|
|
19
|
+
value = props.value,
|
|
20
|
+
setValue = props.setValue,
|
|
21
|
+
onAdd = props.onAdd;
|
|
22
|
+
if (!visible || !showTools) return null;
|
|
23
|
+
var click = /*#__PURE__*/function () {
|
|
24
|
+
var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee(event) {
|
|
25
|
+
var keyOrValue, isArray, isAdd, result, maybeAdd;
|
|
26
|
+
return (0, _regeneratorRuntime2["default"])().wrap(function _callee$(_context) {
|
|
27
|
+
while (1) switch (_context.prev = _context.next) {
|
|
28
|
+
case 0:
|
|
29
|
+
event.stopPropagation();
|
|
30
|
+
keyOrValue = 'AddKeyOrValue';
|
|
31
|
+
isArray = Array.isArray(value);
|
|
32
|
+
isAdd = isArray ? true : !(keyOrValue in value);
|
|
33
|
+
result = isArray ? [].concat((0, _toConsumableArray2["default"])(value), [keyOrValue]) : (0, _objectSpread3["default"])((0, _objectSpread3["default"])({}, value), {}, (0, _defineProperty2["default"])({}, keyOrValue, undefined));
|
|
34
|
+
if (!onAdd) {
|
|
35
|
+
_context.next = 10;
|
|
36
|
+
break;
|
|
37
|
+
}
|
|
38
|
+
_context.next = 8;
|
|
39
|
+
return onAdd(keyOrValue, result, props.value, isAdd);
|
|
40
|
+
case 8:
|
|
41
|
+
maybeAdd = _context.sent;
|
|
42
|
+
if (maybeAdd) {
|
|
43
|
+
setValue(result);
|
|
44
|
+
}
|
|
45
|
+
case 10:
|
|
46
|
+
case "end":
|
|
47
|
+
return _context.stop();
|
|
48
|
+
}
|
|
49
|
+
}, _callee);
|
|
50
|
+
}));
|
|
51
|
+
return function click(_x) {
|
|
52
|
+
return _ref.apply(this, arguments);
|
|
53
|
+
};
|
|
54
|
+
}();
|
|
55
|
+
var svgProps = {
|
|
56
|
+
onClick: click
|
|
57
|
+
};
|
|
58
|
+
if (!editable || !onAdd) return;
|
|
59
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_add.AddIcon, (0, _objectSpread3["default"])({}, svgProps));
|
|
60
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.AddIcon = void 0;
|
|
8
|
+
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
9
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
|
+
var AddIcon = function AddIcon(props) {
|
|
11
|
+
var style = props.style;
|
|
12
|
+
var defaultStyle = {
|
|
13
|
+
verticalAlign: 'middle',
|
|
14
|
+
display: 'inline-block',
|
|
15
|
+
cursor: 'pointer',
|
|
16
|
+
marginLeft: 5,
|
|
17
|
+
height: '1em',
|
|
18
|
+
width: '1em'
|
|
19
|
+
};
|
|
20
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
|
|
21
|
+
viewBox: "0 0 20 20",
|
|
22
|
+
fill: "var(--w-rjv-add-color, currentColor)"
|
|
23
|
+
}, props), {}, {
|
|
24
|
+
style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), defaultStyle),
|
|
25
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
|
|
26
|
+
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"
|
|
27
|
+
})
|
|
28
|
+
}));
|
|
29
|
+
};
|
|
30
|
+
exports.AddIcon = AddIcon;
|
package/cjs/editor/index.d.ts
CHANGED
|
@@ -1,14 +1,23 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { JsonViewProps } from '../';
|
|
2
|
+
import type { JsonViewProps } from '../';
|
|
3
|
+
import type { CountInfoExtraProps } from './countInfoExtra';
|
|
3
4
|
export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T> {
|
|
4
|
-
/**
|
|
5
|
+
/**
|
|
6
|
+
* When a callback function is passed in, edit functionality is enabled. The callback is invoked before edits are completed.
|
|
7
|
+
* @returns {boolean} Returning false from onEdit will prevent the change from being made.
|
|
8
|
+
*/
|
|
5
9
|
onEdit?: (option: {
|
|
6
10
|
value: unknown;
|
|
7
11
|
oldValue: unknown;
|
|
8
12
|
keyName?: string | number;
|
|
9
13
|
parentName?: string | number;
|
|
10
14
|
type?: 'value' | 'key';
|
|
11
|
-
}) =>
|
|
15
|
+
}) => boolean;
|
|
16
|
+
/**
|
|
17
|
+
* When a callback function is passed in, add functionality is enabled. The callback is invoked before additions are completed.
|
|
18
|
+
* @returns {boolean} Returning false from onAdd will prevent the change from being made.
|
|
19
|
+
*/
|
|
20
|
+
onAdd?: CountInfoExtraProps<T>['onAdd'];
|
|
12
21
|
/** Whether enable edit feature. @default true */
|
|
13
22
|
editable?: boolean;
|
|
14
23
|
}
|
package/cjs/editor/index.js
CHANGED
|
@@ -11,8 +11,9 @@ var _react = require("react");
|
|
|
11
11
|
var _ = _interopRequireDefault(require("../"));
|
|
12
12
|
var _objectKey = require("./objectKey");
|
|
13
13
|
var _value = require("./value");
|
|
14
|
+
var _countInfoExtra = require("./countInfoExtra");
|
|
14
15
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
15
|
-
var _excluded = ["onEdit", "components", "editable", "displayDataTypes"];
|
|
16
|
+
var _excluded = ["onEdit", "components", "editable", "displayDataTypes", "onAdd"];
|
|
16
17
|
var JsonViewEditor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
17
18
|
var onEdit = props.onEdit,
|
|
18
19
|
components = props.components,
|
|
@@ -20,8 +21,15 @@ var JsonViewEditor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
20
21
|
editable = _props$editable === void 0 ? true : _props$editable,
|
|
21
22
|
_props$displayDataTyp = props.displayDataTypes,
|
|
22
23
|
displayDataTypes = _props$displayDataTyp === void 0 ? true : _props$displayDataTyp,
|
|
24
|
+
onAdd = props.onAdd,
|
|
23
25
|
reset = (0, _objectWithoutProperties2["default"])(props, _excluded);
|
|
24
26
|
var comps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, components), {}, {
|
|
27
|
+
countInfoExtra: function countInfoExtra(reprops) {
|
|
28
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_countInfoExtra.CountInfoExtra, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reprops), {}, {
|
|
29
|
+
editable: editable,
|
|
30
|
+
onAdd: onAdd
|
|
31
|
+
}));
|
|
32
|
+
},
|
|
25
33
|
objectKey: function objectKey(reprops) {
|
|
26
34
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_objectKey.ObjectKey, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reprops), {}, {
|
|
27
35
|
editableValue: editable,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
-
import { SemicolonProps } from '../semicolon';
|
|
3
|
-
import { JsonViewEditorProps } from './';
|
|
2
|
+
import type { SemicolonProps } from '../semicolon';
|
|
3
|
+
import type { JsonViewEditorProps } from './';
|
|
4
4
|
export interface ObjectKeyProps<T extends object> extends SemicolonProps {
|
|
5
5
|
onEdit?: JsonViewEditorProps<T>['onEdit'];
|
|
6
6
|
render?: (props: SemicolonProps & {
|
package/cjs/editor/value.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { TypeProps } from '../value';
|
|
3
|
-
import { JsonViewEditorProps } from './';
|
|
3
|
+
import type { JsonViewEditorProps } from './';
|
|
4
4
|
export interface ReValueProps<T extends object> extends React.HTMLAttributes<HTMLSpanElement> {
|
|
5
5
|
onEdit?: JsonViewEditorProps<T>['onEdit'];
|
|
6
6
|
quotes?: JsonViewEditorProps<T>['quotes'];
|
package/cjs/editor/value.js
CHANGED
|
@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.ReValue = ReValue;
|
|
8
8
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
9
|
+
var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
|
|
10
|
+
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
9
11
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
12
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
11
13
|
var _react = require("react");
|
|
@@ -71,60 +73,96 @@ function ReValue(props) {
|
|
|
71
73
|
$edit.current.contentEditable = 'false';
|
|
72
74
|
}
|
|
73
75
|
};
|
|
74
|
-
var blur = function
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
76
|
+
var blur = /*#__PURE__*/function () {
|
|
77
|
+
var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee() {
|
|
78
|
+
var text, _typeStr, dt, result, _getValueString, oldChildStr;
|
|
79
|
+
return (0, _regeneratorRuntime2["default"])().wrap(function _callee$(_context) {
|
|
80
|
+
while (1) switch (_context.prev = _context.next) {
|
|
81
|
+
case 0:
|
|
82
|
+
if (editableValue) {
|
|
83
|
+
_context.next = 2;
|
|
84
|
+
break;
|
|
85
|
+
}
|
|
86
|
+
return _context.abrupt("return");
|
|
87
|
+
case 2:
|
|
88
|
+
setEditable(false);
|
|
89
|
+
if (!$edit.current) {
|
|
90
|
+
_context.next = 16;
|
|
91
|
+
break;
|
|
92
|
+
}
|
|
93
|
+
$edit.current.contentEditable = 'false';
|
|
94
|
+
text = $edit.current.innerText;
|
|
95
|
+
_typeStr = curentType;
|
|
96
|
+
if (curentType === 'number' || curentType === 'float') {
|
|
97
|
+
text = Number(text);
|
|
98
|
+
_typeStr = (0, _value.isFloat)(text) ? 'float' : 'number';
|
|
99
|
+
}
|
|
100
|
+
if (curentType === 'url' && typeof text === 'string') {
|
|
101
|
+
text = new URL(text);
|
|
102
|
+
_typeStr = 'url';
|
|
103
|
+
}
|
|
104
|
+
if (Number.isNaN(text)) {
|
|
105
|
+
_typeStr = 'number';
|
|
106
|
+
}
|
|
107
|
+
if (typeof text === 'string' && /^(true|false)$/ig.test(text)) {
|
|
108
|
+
text = /^(true)$/ig.test(text) ? true : false;
|
|
109
|
+
_typeStr = 'boolean';
|
|
110
|
+
} else if (typeof text === 'string' && /^[\d]+n$/ig.test(text)) {
|
|
111
|
+
text = BigInt(text.replace(/n$/ig, ''));
|
|
112
|
+
_typeStr = 'bigint';
|
|
113
|
+
} else if (typeof text === 'string' && /^(null)$/ig.test(text)) {
|
|
114
|
+
text = null;
|
|
115
|
+
_typeStr = 'null';
|
|
116
|
+
} else if (typeof text === 'string' && /^(undefined)$/ig.test(text)) {
|
|
117
|
+
text = undefined;
|
|
118
|
+
_typeStr = 'undefined';
|
|
119
|
+
} else if (typeof text === 'string') {
|
|
120
|
+
try {
|
|
121
|
+
if (text && text.length > 10 && !isNaN(Date.parse(text))) {
|
|
122
|
+
dt = new Date(text);
|
|
123
|
+
text = dt;
|
|
124
|
+
_typeStr = 'date';
|
|
125
|
+
}
|
|
126
|
+
} catch (error) {}
|
|
127
|
+
}
|
|
128
|
+
if (!onEdit) {
|
|
129
|
+
_context.next = 16;
|
|
130
|
+
break;
|
|
131
|
+
}
|
|
132
|
+
_context.next = 14;
|
|
133
|
+
return onEdit({
|
|
134
|
+
type: 'value',
|
|
135
|
+
value: text,
|
|
136
|
+
oldValue: curentChild
|
|
137
|
+
});
|
|
138
|
+
case 14:
|
|
139
|
+
result = _context.sent;
|
|
140
|
+
if (result) {
|
|
141
|
+
setCurentType(_typeStr);
|
|
142
|
+
setCurentChild(text);
|
|
143
|
+
} else {
|
|
144
|
+
_getValueString = (0, _value.getValueString)(curentChild), oldChildStr = _getValueString.content;
|
|
145
|
+
$edit.current.innerHTML = String(oldChildStr);
|
|
146
|
+
}
|
|
147
|
+
case 16:
|
|
148
|
+
case "end":
|
|
149
|
+
return _context.stop();
|
|
150
|
+
}
|
|
151
|
+
}, _callee);
|
|
152
|
+
}));
|
|
153
|
+
return function blur() {
|
|
154
|
+
return _ref2.apply(this, arguments);
|
|
155
|
+
};
|
|
156
|
+
}();
|
|
119
157
|
var defaultStyle = {
|
|
120
158
|
minWidth: 34,
|
|
121
159
|
minHeight: 18,
|
|
122
160
|
paddingInline: 3,
|
|
123
161
|
display: 'inline-block'
|
|
124
162
|
};
|
|
125
|
-
var
|
|
126
|
-
typeStr =
|
|
127
|
-
childStr =
|
|
163
|
+
var _getValueString2 = (0, _value.getValueString)(curentChild),
|
|
164
|
+
typeStr = _getValueString2.type,
|
|
165
|
+
childStr = _getValueString2.content;
|
|
128
166
|
var color = ((_typeMap$typeStr = _value.typeMap[typeStr]) === null || _typeMap$typeStr === void 0 ? void 0 : _typeMap$typeStr.color) || '';
|
|
129
167
|
var spanProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
|
|
130
168
|
onBlur: blur,
|
|
@@ -143,21 +181,19 @@ function ReValue(props) {
|
|
|
143
181
|
typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
|
|
144
182
|
}
|
|
145
183
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
|
|
146
|
-
children: [displayDataTypes && typeView, /*#__PURE__*/(0, _jsxRuntime.
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
})]
|
|
160
|
-
}), visible && editableValue && /*#__PURE__*/(0, _jsxRuntime.jsx)(_edit.EditIcon, {
|
|
184
|
+
children: [displayDataTypes && typeView, /*#__PURE__*/(0, _jsxRuntime.jsx)(Quotes, {
|
|
185
|
+
style: style,
|
|
186
|
+
quotes: quotes,
|
|
187
|
+
show: typeStr === 'string'
|
|
188
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, spanProps), {}, {
|
|
189
|
+
ref: $edit,
|
|
190
|
+
"data-value": childStr,
|
|
191
|
+
children: typeof curentChild === 'string' ? curentChild : childStr
|
|
192
|
+
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(Quotes, {
|
|
193
|
+
style: style,
|
|
194
|
+
quotes: quotes,
|
|
195
|
+
show: typeStr === 'string'
|
|
196
|
+
}), visible && editableValue && onEdit && /*#__PURE__*/(0, _jsxRuntime.jsx)(_edit.EditIcon, {
|
|
161
197
|
onClick: click
|
|
162
198
|
})]
|
|
163
199
|
});
|
package/cjs/index.d.ts
CHANGED
|
@@ -1,11 +1,17 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { SemicolonProps } from './semicolon';
|
|
3
|
-
import { ValueViewProps } from './value';
|
|
4
|
-
import { CopiedProps } from './copied';
|
|
5
|
-
import { EllipsisProps } from './comps/ellipsis';
|
|
6
|
-
import { MetaProps } from './comps/meta';
|
|
2
|
+
import type { SemicolonProps } from './semicolon';
|
|
3
|
+
import type { ValueViewProps } from './value';
|
|
4
|
+
import type { CopiedProps } from './copied';
|
|
5
|
+
import type { EllipsisProps } from './comps/ellipsis';
|
|
6
|
+
import type { MetaProps } from './comps/meta';
|
|
7
|
+
import type { CountInfoExtraProps } from './editor/countInfoExtra';
|
|
7
8
|
export * from './node';
|
|
8
9
|
export * from './value';
|
|
10
|
+
export interface CountInfoProps {
|
|
11
|
+
count: number;
|
|
12
|
+
level: number;
|
|
13
|
+
visible: boolean;
|
|
14
|
+
}
|
|
9
15
|
export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
|
|
10
16
|
/** This property contains your input JSON */
|
|
11
17
|
value?: T;
|
|
@@ -44,11 +50,8 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
|
|
|
44
50
|
objectKey?: SemicolonProps['render'];
|
|
45
51
|
value?: ValueViewProps<T>['renderValue'];
|
|
46
52
|
copied?: CopiedProps<T>['render'];
|
|
47
|
-
countInfo?: (props:
|
|
48
|
-
|
|
49
|
-
level: number;
|
|
50
|
-
visible: boolean;
|
|
51
|
-
}) => JSX.Element;
|
|
53
|
+
countInfo?: (props: CountInfoProps) => JSX.Element;
|
|
54
|
+
countInfoExtra?: (props: Omit<CountInfoExtraProps<T>, 'editable'>) => JSX.Element;
|
|
52
55
|
};
|
|
53
56
|
}
|
|
54
57
|
declare const JsonView: React.ForwardRefExoticComponent<Omit<JsonViewProps<object>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|