@uiw/react-json-view 1.5.1 → 1.6.0
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 +96 -12
- package/cjs/comps/ellipsis.d.ts +2 -0
- package/cjs/comps/ellipsis.js +6 -2
- package/cjs/comps/meta.d.ts +2 -1
- package/cjs/comps/meta.js +16 -9
- package/cjs/editor/value.js +2 -3
- package/cjs/index.d.ts +5 -0
- package/cjs/index.js +1 -1
- package/cjs/node.js +17 -4
- package/cjs/value.d.ts +1 -0
- package/cjs/value.js +2 -1
- package/esm/comps/ellipsis.d.ts +2 -0
- package/esm/comps/ellipsis.js +7 -3
- package/esm/comps/meta.d.ts +2 -1
- package/esm/comps/meta.js +16 -9
- package/esm/editor/value.js +2 -3
- package/esm/index.d.ts +5 -0
- package/esm/index.js +1 -1
- package/esm/node.js +17 -4
- package/esm/value.d.ts +1 -0
- package/esm/value.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -3,6 +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
7
|
[](https://github.com/facebook/react/releases)
|
|
7
8
|
[](https://uiwjs.github.io/react-json-view/lcov-report/)
|
|
8
9
|
|
|
@@ -32,6 +33,15 @@ A React component for displaying and editing javascript arrays and JSON objects.
|
|
|
32
33
|
npm install @uiw/react-json-view
|
|
33
34
|
```
|
|
34
35
|
|
|
36
|
+
```jsx
|
|
37
|
+
import JsonView from '@uiw/react-json-view';
|
|
38
|
+
import JsonViewEditor from '@uiw/react-json-view/editor';
|
|
39
|
+
import { lightTheme } from '@uiw/react-json-view/light';
|
|
40
|
+
import { darkTheme } from '@uiw/react-json-view/dark';
|
|
41
|
+
import { TriangleArrow } from '@uiw/react-json-view/triangle-arrow';
|
|
42
|
+
import { TriangleSolidArrow } from '@uiw/react-json-view/triangle-solid-arrow';
|
|
43
|
+
```
|
|
44
|
+
|
|
35
45
|
```jsx
|
|
36
46
|
import JsonView from '@uiw/react-json-view';
|
|
37
47
|
|
|
@@ -390,6 +400,79 @@ export default function Demo() {
|
|
|
390
400
|
}
|
|
391
401
|
```
|
|
392
402
|
|
|
403
|
+
Inspector
|
|
404
|
+
|
|
405
|
+
```tsx mdx:preview
|
|
406
|
+
import React from 'react';
|
|
407
|
+
import JsonView from '@uiw/react-json-view';
|
|
408
|
+
|
|
409
|
+
const object = [
|
|
410
|
+
{
|
|
411
|
+
"_id": "56dcf573b09c217d39fd7621",
|
|
412
|
+
"name": "Howard Christensen",
|
|
413
|
+
"email": "howardchristensen@gmail.com",
|
|
414
|
+
"phone": "+1 (830) 529-3176",
|
|
415
|
+
"address": "511 Royce Street, Hilltop, Tennessee, 9712"
|
|
416
|
+
},
|
|
417
|
+
{
|
|
418
|
+
"_id": "56dcf57323630b06251e93cd",
|
|
419
|
+
"name": "Eleanor Lynn",
|
|
420
|
+
"email": "eleanorlynn@gmail.com",
|
|
421
|
+
"phone": "+1 (911) 576-2345",
|
|
422
|
+
"address": "547 Dearborn Court, Trona, California, 8629"
|
|
423
|
+
},
|
|
424
|
+
{
|
|
425
|
+
"_id": "56dcf5738279cac6b081e512",
|
|
426
|
+
"name": "Baxter Mooney",
|
|
427
|
+
"email": "baxtermooney@gmail.com",
|
|
428
|
+
"phone": "+1 (954) 456-3456",
|
|
429
|
+
"address": "349 Cumberland Walk, Washington, Alaska, 3154"
|
|
430
|
+
},
|
|
431
|
+
{
|
|
432
|
+
"_id": "56dcf57303accabd43740957",
|
|
433
|
+
"name": "Calhoun Tyson",
|
|
434
|
+
"email": "calhountyson@gmail.com",
|
|
435
|
+
"phone": "+1 (818) 456-2529",
|
|
436
|
+
"address": "367 Lyme Avenue, Ladera, Louisiana, 6292"
|
|
437
|
+
},
|
|
438
|
+
]
|
|
439
|
+
|
|
440
|
+
const customTheme = {
|
|
441
|
+
'--w-rjv-background-color': '#fff',
|
|
442
|
+
'--w-rjv-border-left-width': 0,
|
|
443
|
+
'--w-rjv-color': '#881391',
|
|
444
|
+
'--w-rjv-type-int-color': '#881391',
|
|
445
|
+
};
|
|
446
|
+
|
|
447
|
+
export default function Demo() {
|
|
448
|
+
return (
|
|
449
|
+
<JsonView
|
|
450
|
+
value={object}
|
|
451
|
+
style={customTheme}
|
|
452
|
+
quotes=""
|
|
453
|
+
enableClipboard={false}
|
|
454
|
+
displayDataTypes={false}
|
|
455
|
+
components={{
|
|
456
|
+
braces: ({ level }) => level !== 1 && <span />,
|
|
457
|
+
countInfo: ({ level, count, visible }) => {
|
|
458
|
+
if (level === 1) {
|
|
459
|
+
return <span />;
|
|
460
|
+
//return visible ? <span>{Array.from({ length: 3 }, () => 'Object').join(', ')}</span> : <span />
|
|
461
|
+
}
|
|
462
|
+
return <span style={{ color: '#222' }}>Object</span>;
|
|
463
|
+
},
|
|
464
|
+
ellipsis: ({ level, count }) => {
|
|
465
|
+
if (level === 1) {
|
|
466
|
+
return <span>{Array.from({ length: 3 }, () => 'Object').join(', ')}</span>;
|
|
467
|
+
}
|
|
468
|
+
return <span />;
|
|
469
|
+
},
|
|
470
|
+
}}
|
|
471
|
+
/>
|
|
472
|
+
);
|
|
473
|
+
}
|
|
474
|
+
```
|
|
475
|
+
|
|
393
476
|
## Editor JSON
|
|
394
477
|
|
|
395
478
|
```tsx mdx:preview
|
|
@@ -657,18 +740,19 @@ export default JsonViewEditor;
|
|
|
657
740
|
|
|
658
741
|
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)):
|
|
659
742
|
|
|
660
|
-
| Library | Bundle size | Bundle size (gzip) | Deps | Last commit |
|
|
661
|
-
| ------- | ------- | ------- | ------- | ------- |
|
|
662
|
-
| **@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://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://bundlephobia.com/result?p=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-inspector) | [](https://bundlephobia.com/result?p=react-json-inspector) | [](https://bundlephobia.com/result?p=react-json-inspector) | [](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://bundlephobia.com/result?p=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-tree-viewer) | [](https://bundlephobia.com/result?p=react-json-tree-viewer) | [](https://bundlephobia.com/result?p=react-json-tree-viewer) | [ | Deps | Last commit | Download |
|
|
744
|
+
| ------- | ------- | ------- | ------- | ------- | ------- |
|
|
745
|
+
| **@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) |
|
|
746
|
+
| 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) |
|
|
747
|
+
| 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) |
|
|
748
|
+
| 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) |
|
|
749
|
+
| 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) |
|
|
750
|
+
| 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) |
|
|
751
|
+
| 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) |
|
|
752
|
+
| 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) |
|
|
753
|
+
| 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) |
|
|
754
|
+
| 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) |
|
|
755
|
+
| @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) |
|
|
672
756
|
|
|
673
757
|
## Development
|
|
674
758
|
|
package/cjs/comps/ellipsis.d.ts
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { FC, PropsWithChildren } from 'react';
|
|
2
2
|
export interface EllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
3
|
+
count: number;
|
|
4
|
+
level: number;
|
|
3
5
|
render?: (props: EllipsisProps) => JSX.Element;
|
|
4
6
|
}
|
|
5
7
|
export declare const Ellipsis: FC<PropsWithChildren<EllipsisProps>>;
|
package/cjs/comps/ellipsis.js
CHANGED
|
@@ -8,17 +8,21 @@ exports.Ellipsis = void 0;
|
|
|
8
8
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
9
9
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
10
10
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
|
-
var _excluded = ["style", "render"];
|
|
11
|
+
var _excluded = ["style", "render", "count", "level"];
|
|
12
12
|
var Ellipsis = function Ellipsis(_ref) {
|
|
13
13
|
var style = _ref.style,
|
|
14
14
|
render = _ref.render,
|
|
15
|
+
count = _ref.count,
|
|
16
|
+
level = _ref.level,
|
|
15
17
|
props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
|
16
18
|
var styl = (0, _objectSpread2["default"])({
|
|
17
19
|
cursor: 'pointer'
|
|
18
20
|
}, style);
|
|
19
21
|
var className = "w-rjv-ellipsis ".concat(props.className || '');
|
|
20
22
|
if (render) return render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({
|
|
21
|
-
style: styl
|
|
23
|
+
style: styl,
|
|
24
|
+
count: count,
|
|
25
|
+
level: level
|
|
22
26
|
}, props), {}, {
|
|
23
27
|
className: className
|
|
24
28
|
}));
|
package/cjs/comps/meta.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ import { LabelProps } from '../value';
|
|
|
3
3
|
export interface MetaProps extends LabelProps {
|
|
4
4
|
isArray?: boolean;
|
|
5
5
|
start?: boolean;
|
|
6
|
-
|
|
6
|
+
level?: number;
|
|
7
|
+
render?: (props: Pick<MetaProps, 'start' | 'level' | 'isArray' | 'className' | 'children'>) => JSX.Element;
|
|
7
8
|
}
|
|
8
9
|
export declare function Meta(props: MetaProps): JSX.Element;
|
package/cjs/comps/meta.js
CHANGED
|
@@ -9,26 +9,33 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/obje
|
|
|
9
9
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
10
10
|
var _value = require("../value");
|
|
11
11
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
|
-
var _excluded = ["isArray", "start", "className", "render"];
|
|
12
|
+
var _excluded = ["isArray", "start", "level", "className", "render"];
|
|
13
13
|
function Meta(props) {
|
|
14
14
|
var _props$isArray = props.isArray,
|
|
15
15
|
isArray = _props$isArray === void 0 ? false : _props$isArray,
|
|
16
16
|
_props$start = props.start,
|
|
17
17
|
start = _props$start === void 0 ? false : _props$start,
|
|
18
|
+
level = props.level,
|
|
18
19
|
className = props.className,
|
|
19
20
|
render = props.render,
|
|
20
21
|
reset = (0, _objectWithoutProperties2["default"])(props, _excluded);
|
|
21
22
|
var mark = isArray ? '[]' : '{}';
|
|
22
23
|
var cls = "w-rjv-".concat(isArray ? 'brackets' : 'curlybraces', "-").concat(start ? 'start' : 'end', " ").concat(className || '');
|
|
23
24
|
var color = "var(--w-rjv-".concat(isArray ? 'brackets' : 'curlybraces', "-color, #236a7c)");
|
|
24
|
-
if (render)
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
25
|
+
if (render) {
|
|
26
|
+
var viev = render((0, _objectSpread2["default"])({
|
|
27
|
+
isArray: isArray,
|
|
28
|
+
level: level,
|
|
29
|
+
className: cls,
|
|
30
|
+
style: {
|
|
31
|
+
color: color
|
|
32
|
+
},
|
|
33
|
+
children: start ? mark.charAt(0) : mark.charAt(1)
|
|
34
|
+
}, reset));
|
|
35
|
+
if (viev) {
|
|
36
|
+
return viev;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
32
39
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Label, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
|
|
33
40
|
color: color,
|
|
34
41
|
className: cls
|
package/cjs/editor/value.js
CHANGED
|
@@ -12,7 +12,7 @@ var _react = require("react");
|
|
|
12
12
|
var _value = require("../value");
|
|
13
13
|
var _edit = require("./icon/edit");
|
|
14
14
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
15
|
-
var _excluded = ["type", "value", "keyName", "visible", "quotes", "style", "
|
|
15
|
+
var _excluded = ["type", "value", "keyName", "visible", "quotes", "style", "children", "displayDataTypes", "editableValue", "onEdit"];
|
|
16
16
|
var Quotes = function Quotes(_ref) {
|
|
17
17
|
var show = _ref.show,
|
|
18
18
|
style = _ref.style,
|
|
@@ -31,7 +31,6 @@ function ReValue(props) {
|
|
|
31
31
|
visible = props.visible,
|
|
32
32
|
quotes = props.quotes,
|
|
33
33
|
style = props.style,
|
|
34
|
-
content = props.content,
|
|
35
34
|
children = props.children,
|
|
36
35
|
displayDataTypes = props.displayDataTypes,
|
|
37
36
|
editableValue = props.editableValue,
|
|
@@ -151,7 +150,7 @@ function ReValue(props) {
|
|
|
151
150
|
show: typeStr === 'string'
|
|
152
151
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, spanProps), {}, {
|
|
153
152
|
ref: $edit,
|
|
154
|
-
"data-value":
|
|
153
|
+
"data-value": childStr,
|
|
155
154
|
children: typeof curentChild === 'string' ? curentChild : childStr
|
|
156
155
|
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(Quotes, {
|
|
157
156
|
style: style,
|
package/cjs/index.d.ts
CHANGED
|
@@ -44,6 +44,11 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
|
|
|
44
44
|
objectKey?: SemicolonProps['render'];
|
|
45
45
|
value?: ValueViewProps<T>['renderValue'];
|
|
46
46
|
copied?: CopiedProps<T>['render'];
|
|
47
|
+
countInfo?: (props: {
|
|
48
|
+
count: number;
|
|
49
|
+
level: number;
|
|
50
|
+
visible: boolean;
|
|
51
|
+
}) => JSX.Element;
|
|
47
52
|
};
|
|
48
53
|
}
|
|
49
54
|
declare const JsonView: React.ForwardRefExoticComponent<Omit<JsonViewProps<object>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
package/cjs/index.js
CHANGED
|
@@ -43,7 +43,7 @@ var JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
43
43
|
reset = (0, _objectWithoutProperties2["default"])(props, _excluded);
|
|
44
44
|
var defaultStyle = (0, _objectSpread2["default"])({
|
|
45
45
|
lineHeight: 1.4,
|
|
46
|
-
fontFamily: 'monospace',
|
|
46
|
+
fontFamily: 'var(--w-rjv-font-family, Menlo, monospace)',
|
|
47
47
|
color: 'var(--w-rjv-color, #002b36)',
|
|
48
48
|
backgroundColor: 'var(--w-rjv-background-color, #00000000)'
|
|
49
49
|
}, style);
|
package/cjs/node.js
CHANGED
|
@@ -149,6 +149,16 @@ function RooNode(props) {
|
|
|
149
149
|
return typeof a === 'string' && typeof b === 'string' ? objectSortKeys(a, b) : 0;
|
|
150
150
|
});
|
|
151
151
|
}
|
|
152
|
+
var countInfo = /*#__PURE__*/(0, _jsxRuntime.jsxs)(CountInfo, {
|
|
153
|
+
children: [nameKeys.length, " items"]
|
|
154
|
+
});
|
|
155
|
+
if (components.countInfo) {
|
|
156
|
+
countInfo = components.countInfo({
|
|
157
|
+
count: nameKeys.length,
|
|
158
|
+
level: level,
|
|
159
|
+
visible: expand
|
|
160
|
+
}) || countInfo;
|
|
161
|
+
}
|
|
152
162
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
|
|
153
163
|
className: "".concat(className, " w-rjv-inner")
|
|
154
164
|
}, eventProps), {}, {
|
|
@@ -171,15 +181,17 @@ function RooNode(props) {
|
|
|
171
181
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_meta.Meta, {
|
|
172
182
|
start: true,
|
|
173
183
|
isArray: isArray,
|
|
184
|
+
level: level,
|
|
174
185
|
render: components.braces
|
|
175
186
|
}), !expand && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ellipsis.Ellipsis, {
|
|
176
|
-
render: components.ellipsis
|
|
187
|
+
render: components.ellipsis,
|
|
188
|
+
count: nameKeys.length,
|
|
189
|
+
level: level
|
|
177
190
|
}), !expand && /*#__PURE__*/(0, _jsxRuntime.jsx)(_meta.Meta, {
|
|
178
191
|
isArray: isArray,
|
|
192
|
+
level: level,
|
|
179
193
|
render: components.braces
|
|
180
|
-
}), displayObjectSize && /*#__PURE__*/(0, _jsxRuntime.
|
|
181
|
-
children: [nameKeys.length, " items"]
|
|
182
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tools.Tools, {
|
|
194
|
+
}), displayObjectSize && countInfo, /*#__PURE__*/(0, _jsxRuntime.jsx)(_tools.Tools, {
|
|
183
195
|
value: value,
|
|
184
196
|
enableClipboard: enableClipboard,
|
|
185
197
|
onCopied: onCopied,
|
|
@@ -245,6 +257,7 @@ function RooNode(props) {
|
|
|
245
257
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_meta.Meta, {
|
|
246
258
|
render: components.braces,
|
|
247
259
|
isArray: isArray,
|
|
260
|
+
level: level,
|
|
248
261
|
style: {
|
|
249
262
|
paddingLeft: 2,
|
|
250
263
|
display: 'inline-block'
|
package/cjs/value.d.ts
CHANGED
|
@@ -53,6 +53,7 @@ export interface ValueViewProps<T extends object> extends React.DetailedHTMLProp
|
|
|
53
53
|
displayObjectSize: boolean;
|
|
54
54
|
enableClipboard: boolean;
|
|
55
55
|
indentWidth: number;
|
|
56
|
+
level?: number;
|
|
56
57
|
quotes?: JsonViewProps<T>['quotes'];
|
|
57
58
|
renderKey?: JSX.Element;
|
|
58
59
|
renderBraces?: MetaProps['render'];
|
package/cjs/value.js
CHANGED
|
@@ -18,7 +18,7 @@ var _meta = require("./comps/meta");
|
|
|
18
18
|
var _copied = require("./copied");
|
|
19
19
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
20
20
|
var _excluded = ["children", "style"],
|
|
21
|
-
_excluded2 = ["value", "keyName", "indentWidth", "renderKey", "quotes", "renderValue", "renderBraces", "enableClipboard", "displayObjectSize", "displayDataTypes"],
|
|
21
|
+
_excluded2 = ["value", "keyName", "indentWidth", "renderKey", "quotes", "level", "renderValue", "renderBraces", "enableClipboard", "displayObjectSize", "displayDataTypes"],
|
|
22
22
|
_excluded3 = ["children", "color", "fontSize", "opacity", "paddingRight", "style"];
|
|
23
23
|
var Line = function Line(props) {
|
|
24
24
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2["default"])({}, props));
|
|
@@ -133,6 +133,7 @@ function ValueView(props) {
|
|
|
133
133
|
indentWidth = props.indentWidth,
|
|
134
134
|
renderKey = props.renderKey,
|
|
135
135
|
quotes = props.quotes,
|
|
136
|
+
level = props.level,
|
|
136
137
|
renderValue = props.renderValue,
|
|
137
138
|
renderBraces = props.renderBraces,
|
|
138
139
|
enableClipboard = props.enableClipboard,
|
package/esm/comps/ellipsis.d.ts
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { FC, PropsWithChildren } from 'react';
|
|
2
2
|
export interface EllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
3
|
+
count: number;
|
|
4
|
+
level: number;
|
|
3
5
|
render?: (props: EllipsisProps) => JSX.Element;
|
|
4
6
|
}
|
|
5
7
|
export declare const Ellipsis: FC<PropsWithChildren<EllipsisProps>>;
|
package/esm/comps/ellipsis.js
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
|
|
3
|
-
var _excluded = ["style", "render"];
|
|
3
|
+
var _excluded = ["style", "render", "count", "level"];
|
|
4
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
5
|
export var Ellipsis = _ref => {
|
|
6
6
|
var {
|
|
7
7
|
style,
|
|
8
|
-
render
|
|
8
|
+
render,
|
|
9
|
+
count,
|
|
10
|
+
level
|
|
9
11
|
} = _ref,
|
|
10
12
|
props = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
11
13
|
var styl = _extends({
|
|
@@ -13,7 +15,9 @@ export var Ellipsis = _ref => {
|
|
|
13
15
|
}, style);
|
|
14
16
|
var className = "w-rjv-ellipsis " + (props.className || '');
|
|
15
17
|
if (render) return render(_extends({
|
|
16
|
-
style: styl
|
|
18
|
+
style: styl,
|
|
19
|
+
count,
|
|
20
|
+
level
|
|
17
21
|
}, props, {
|
|
18
22
|
className
|
|
19
23
|
}));
|
package/esm/comps/meta.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ import { LabelProps } from '../value';
|
|
|
3
3
|
export interface MetaProps extends LabelProps {
|
|
4
4
|
isArray?: boolean;
|
|
5
5
|
start?: boolean;
|
|
6
|
-
|
|
6
|
+
level?: number;
|
|
7
|
+
render?: (props: Pick<MetaProps, 'start' | 'level' | 'isArray' | 'className' | 'children'>) => JSX.Element;
|
|
7
8
|
}
|
|
8
9
|
export declare function Meta(props: MetaProps): JSX.Element;
|
package/esm/comps/meta.js
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
|
|
3
|
-
var _excluded = ["isArray", "start", "className", "render"];
|
|
3
|
+
var _excluded = ["isArray", "start", "level", "className", "render"];
|
|
4
4
|
import { Label } from '../value';
|
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
6
|
export function Meta(props) {
|
|
7
7
|
var {
|
|
8
8
|
isArray = false,
|
|
9
9
|
start = false,
|
|
10
|
+
level,
|
|
10
11
|
className,
|
|
11
12
|
render
|
|
12
13
|
} = props,
|
|
@@ -14,14 +15,20 @@ export function Meta(props) {
|
|
|
14
15
|
var mark = isArray ? '[]' : '{}';
|
|
15
16
|
var cls = "w-rjv-" + (isArray ? 'brackets' : 'curlybraces') + "-" + (start ? 'start' : 'end') + " " + (className || '');
|
|
16
17
|
var color = "var(--w-rjv-" + (isArray ? 'brackets' : 'curlybraces') + "-color, #236a7c)";
|
|
17
|
-
if (render)
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
18
|
+
if (render) {
|
|
19
|
+
var viev = render(_extends({
|
|
20
|
+
isArray,
|
|
21
|
+
level,
|
|
22
|
+
className: cls,
|
|
23
|
+
style: {
|
|
24
|
+
color
|
|
25
|
+
},
|
|
26
|
+
children: start ? mark.charAt(0) : mark.charAt(1)
|
|
27
|
+
}, reset));
|
|
28
|
+
if (viev) {
|
|
29
|
+
return viev;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
25
32
|
return /*#__PURE__*/_jsx(Label, _extends({
|
|
26
33
|
color: color,
|
|
27
34
|
className: cls
|
package/esm/editor/value.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
|
|
3
|
-
var _excluded = ["type", "value", "keyName", "visible", "quotes", "style", "
|
|
3
|
+
var _excluded = ["type", "value", "keyName", "visible", "quotes", "style", "children", "displayDataTypes", "editableValue", "onEdit"];
|
|
4
4
|
import { Fragment, useEffect, useRef, useState } from 'react';
|
|
5
5
|
import { getValueString, isFloat, Type, typeMap } from '../value';
|
|
6
6
|
import { EditIcon } from './icon/edit';
|
|
@@ -26,7 +26,6 @@ export function ReValue(props) {
|
|
|
26
26
|
visible,
|
|
27
27
|
quotes,
|
|
28
28
|
style,
|
|
29
|
-
content,
|
|
30
29
|
displayDataTypes,
|
|
31
30
|
editableValue,
|
|
32
31
|
onEdit
|
|
@@ -136,7 +135,7 @@ export function ReValue(props) {
|
|
|
136
135
|
show: typeStr === 'string'
|
|
137
136
|
}), /*#__PURE__*/_jsx("span", _extends({}, spanProps, {
|
|
138
137
|
ref: $edit,
|
|
139
|
-
"data-value":
|
|
138
|
+
"data-value": childStr,
|
|
140
139
|
children: typeof curentChild === 'string' ? curentChild : childStr
|
|
141
140
|
})), /*#__PURE__*/_jsx(Quotes, {
|
|
142
141
|
style: style,
|
package/esm/index.d.ts
CHANGED
|
@@ -44,6 +44,11 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
|
|
|
44
44
|
objectKey?: SemicolonProps['render'];
|
|
45
45
|
value?: ValueViewProps<T>['renderValue'];
|
|
46
46
|
copied?: CopiedProps<T>['render'];
|
|
47
|
+
countInfo?: (props: {
|
|
48
|
+
count: number;
|
|
49
|
+
level: number;
|
|
50
|
+
visible: boolean;
|
|
51
|
+
}) => JSX.Element;
|
|
47
52
|
};
|
|
48
53
|
}
|
|
49
54
|
declare const JsonView: React.ForwardRefExoticComponent<Omit<JsonViewProps<object>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
package/esm/index.js
CHANGED
|
@@ -16,7 +16,7 @@ var JsonView = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
16
16
|
reset = _objectWithoutPropertiesLoose(props, _excluded);
|
|
17
17
|
var defaultStyle = _extends({
|
|
18
18
|
lineHeight: 1.4,
|
|
19
|
-
fontFamily: 'monospace',
|
|
19
|
+
fontFamily: 'var(--w-rjv-font-family, Menlo, monospace)',
|
|
20
20
|
color: 'var(--w-rjv-color, #002b36)',
|
|
21
21
|
backgroundColor: 'var(--w-rjv-background-color, #00000000)'
|
|
22
22
|
}, style);
|
package/esm/node.js
CHANGED
|
@@ -117,6 +117,16 @@ export function RooNode(props) {
|
|
|
117
117
|
return typeof a === 'string' && typeof b === 'string' ? objectSortKeys(a, b) : 0;
|
|
118
118
|
});
|
|
119
119
|
}
|
|
120
|
+
var countInfo = /*#__PURE__*/_jsxs(CountInfo, {
|
|
121
|
+
children: [nameKeys.length, " items"]
|
|
122
|
+
});
|
|
123
|
+
if (components.countInfo) {
|
|
124
|
+
countInfo = components.countInfo({
|
|
125
|
+
count: nameKeys.length,
|
|
126
|
+
level,
|
|
127
|
+
visible: expand
|
|
128
|
+
}) || countInfo;
|
|
129
|
+
}
|
|
120
130
|
return /*#__PURE__*/_jsxs("div", _extends({}, reset, {
|
|
121
131
|
className: className + " w-rjv-inner"
|
|
122
132
|
}, eventProps, {
|
|
@@ -139,15 +149,17 @@ export function RooNode(props) {
|
|
|
139
149
|
}), /*#__PURE__*/_jsx(Meta, {
|
|
140
150
|
start: true,
|
|
141
151
|
isArray: isArray,
|
|
152
|
+
level: level,
|
|
142
153
|
render: components.braces
|
|
143
154
|
}), !expand && /*#__PURE__*/_jsx(Ellipsis, {
|
|
144
|
-
render: components.ellipsis
|
|
155
|
+
render: components.ellipsis,
|
|
156
|
+
count: nameKeys.length,
|
|
157
|
+
level: level
|
|
145
158
|
}), !expand && /*#__PURE__*/_jsx(Meta, {
|
|
146
159
|
isArray: isArray,
|
|
160
|
+
level: level,
|
|
147
161
|
render: components.braces
|
|
148
|
-
}), displayObjectSize && /*#__PURE__*/
|
|
149
|
-
children: [nameKeys.length, " items"]
|
|
150
|
-
}), /*#__PURE__*/_jsx(Tools, {
|
|
162
|
+
}), displayObjectSize && countInfo, /*#__PURE__*/_jsx(Tools, {
|
|
151
163
|
value: value,
|
|
152
164
|
enableClipboard: enableClipboard,
|
|
153
165
|
onCopied: onCopied,
|
|
@@ -211,6 +223,7 @@ export function RooNode(props) {
|
|
|
211
223
|
children: /*#__PURE__*/_jsx(Meta, {
|
|
212
224
|
render: components.braces,
|
|
213
225
|
isArray: isArray,
|
|
226
|
+
level: level,
|
|
214
227
|
style: {
|
|
215
228
|
paddingLeft: 2,
|
|
216
229
|
display: 'inline-block'
|
package/esm/value.d.ts
CHANGED
|
@@ -53,6 +53,7 @@ export interface ValueViewProps<T extends object> extends React.DetailedHTMLProp
|
|
|
53
53
|
displayObjectSize: boolean;
|
|
54
54
|
enableClipboard: boolean;
|
|
55
55
|
indentWidth: number;
|
|
56
|
+
level?: number;
|
|
56
57
|
quotes?: JsonViewProps<T>['quotes'];
|
|
57
58
|
renderKey?: JSX.Element;
|
|
58
59
|
renderBraces?: MetaProps['render'];
|
package/esm/value.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
|
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
3
|
var _excluded = ["children", "style"],
|
|
4
|
-
_excluded2 = ["value", "keyName", "indentWidth", "renderKey", "quotes", "renderValue", "renderBraces", "enableClipboard", "displayObjectSize", "displayDataTypes"],
|
|
4
|
+
_excluded2 = ["value", "keyName", "indentWidth", "renderKey", "quotes", "level", "renderValue", "renderBraces", "enableClipboard", "displayObjectSize", "displayDataTypes"],
|
|
5
5
|
_excluded3 = ["children", "color", "fontSize", "opacity", "paddingRight", "style"];
|
|
6
6
|
import { Fragment, forwardRef, useState } from 'react';
|
|
7
7
|
import { CountInfo } from './node';
|