@uiw/react-json-view 1.5.1 → 1.7.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 +113 -15
- 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/countInfoExtra.d.ts +14 -0
- package/cjs/editor/countInfoExtra.js +58 -0
- package/cjs/editor/icon/add.d.ts +4 -0
- package/cjs/editor/icon/add.js +30 -0
- package/cjs/editor/index.d.ts +7 -1
- 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 +2 -3
- package/cjs/index.d.ts +13 -5
- package/cjs/index.js +1 -1
- package/cjs/node.js +40 -14
- package/cjs/semicolon.d.ts +3 -3
- package/cjs/value.d.ts +4 -3
- package/cjs/value.js +2 -1
- package/editor.d.ts +16 -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/countInfoExtra.d.ts +14 -0
- package/esm/editor/countInfoExtra.js +38 -0
- package/esm/editor/icon/add.d.ts +4 -0
- package/esm/editor/icon/add.js +24 -0
- package/esm/editor/index.d.ts +7 -1
- 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 +2 -3
- package/esm/index.d.ts +13 -5
- package/esm/index.js +1 -1
- package/esm/node.js +34 -13
- package/esm/semicolon.d.ts +3 -3
- package/esm/value.d.ts +4 -3
- package/esm/value.js +1 -1
- 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,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
|
|
|
@@ -306,11 +316,11 @@ const object = {
|
|
|
306
316
|
integer: 42,
|
|
307
317
|
}
|
|
308
318
|
|
|
309
|
-
function value({ type, children, keyName, visible, ...props }) {
|
|
310
|
-
if (type === 'string' && /\.(jpg)$/.test(
|
|
319
|
+
function value({ type, children, value, keyName, visible, ...props }) {
|
|
320
|
+
if (type === 'string' && /\.(jpg)$/.test(value)) {
|
|
311
321
|
return (
|
|
312
322
|
<span {...props}>
|
|
313
|
-
<img src={
|
|
323
|
+
<img src={value} height="36" />
|
|
314
324
|
</span>
|
|
315
325
|
);
|
|
316
326
|
}
|
|
@@ -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
|
|
@@ -589,6 +672,7 @@ export default function Demo() {
|
|
|
589
672
|
```ts
|
|
590
673
|
import React from 'react';
|
|
591
674
|
import { MetaProps, SemicolonProps, EllipsisProps, ValueViewProps } from '@uiw/react-json-view';
|
|
675
|
+
import type { CountInfoExtraProps } from '@uiw/react-json-view/cjs/editor/countInfoExtra';
|
|
592
676
|
export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
|
|
593
677
|
/** This property contains your input JSON */
|
|
594
678
|
value?: T;
|
|
@@ -627,16 +711,24 @@ export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttr
|
|
|
627
711
|
objectKey?: SemicolonProps['render'];
|
|
628
712
|
value?: ValueViewProps<T>['renderValue'];
|
|
629
713
|
copied?: CopiedProps<T>['render'];
|
|
714
|
+
countInfo?: (props: CountInfoProps) => JSX.Element;
|
|
715
|
+
countInfoExtra?: (props: Omit<CountInfoExtraProps<T>, 'editable'>) => JSX.Element;
|
|
630
716
|
};
|
|
631
717
|
}
|
|
632
718
|
declare const JsonView: React.ForwardRefExoticComponent<Omit<JsonViewProps<object>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
633
719
|
export default JsonView;
|
|
720
|
+
export interface CountInfoProps {
|
|
721
|
+
count: number;
|
|
722
|
+
level: number;
|
|
723
|
+
visible: boolean;
|
|
724
|
+
}
|
|
634
725
|
```
|
|
635
726
|
|
|
636
727
|
### JsonView Editor Props
|
|
637
728
|
|
|
638
729
|
```ts
|
|
639
730
|
import { JsonViewProps } from '@uiw/react-json-view';
|
|
731
|
+
import type { CountInfoExtraProps } from '@uiw/react-json-view/cjs/editor/countInfoExtra';
|
|
640
732
|
export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T> {
|
|
641
733
|
/** Callback when value edit functionality */
|
|
642
734
|
onEdit?: (option: {
|
|
@@ -646,6 +738,11 @@ export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T>
|
|
|
646
738
|
parentName?: string | number;
|
|
647
739
|
type?: 'value' | 'key';
|
|
648
740
|
}) => void;
|
|
741
|
+
/**
|
|
742
|
+
* When a callback function is passed in, add functionality is enabled. The callback is invoked before additions are completed.
|
|
743
|
+
* @returns {boolean} Returning false from onAdd will prevent the change from being made.
|
|
744
|
+
*/
|
|
745
|
+
onAdd?: CountInfoExtraProps<T>['onAdd'];
|
|
649
746
|
/** Whether enable edit feature. @default true */
|
|
650
747
|
editable?: boolean;
|
|
651
748
|
}
|
|
@@ -657,18 +754,19 @@ export default JsonViewEditor;
|
|
|
657
754
|
|
|
658
755
|
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
756
|
|
|
660
|
-
| Library | Bundle size
|
|
661
|
-
| ------- | ------- | ------- | ------- | ------- |
|
|
662
|
-
| **@uiw/react-json-view** | [](https://bundlephobia.com/result?p=@uiw/react-json-view)
|
|
663
|
-
| react-json-view-lite | [](https://bundlephobia.com/result?p=react-json-view-lite)
|
|
664
|
-
| react-json-pretty | [](https://bundlephobia.com/result?p=react-json-pretty)
|
|
665
|
-
| react-json-inspector | [](https://bundlephobia.com/result?p=react-json-inspector)
|
|
666
|
-
| react-json-tree | [](https://bundlephobia.com/result?p=react-json-tree)
|
|
667
|
-
| react-json-view | [](https://bundlephobia.com/result?p=react-json-view)
|
|
668
|
-
| react-json-tree-viewer | [](https://bundlephobia.com/result?p=react-json-tree-viewer)
|
|
669
|
-
| react-
|
|
670
|
-
|
|
|
671
|
-
|
|
|
757
|
+
| Library | Bundle size (gzip) | Deps | Last commit | Download | Editable |
|
|
758
|
+
| ------- | ------- | ------- | ------- | ------- | ------- |
|
|
759
|
+
| **@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) | ✅ |
|
|
760
|
+
| 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) | ❌ |
|
|
761
|
+
| 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) | ❌ |
|
|
762
|
+
| 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) | ❌ |
|
|
763
|
+
| 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) | ❌ |
|
|
764
|
+
| ~~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) | ✅ |
|
|
765
|
+
| ~~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) | ❌ |
|
|
766
|
+
| 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) | ❌ |
|
|
767
|
+
| 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) | ❌ |
|
|
768
|
+
| 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) | ❌ |
|
|
769
|
+
| @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
770
|
|
|
673
771
|
## Development
|
|
674
772
|
|
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
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { CountInfoProps } from '../';
|
|
3
|
+
export interface CountInfoExtraProps<T> extends 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;
|
|
@@ -0,0 +1,58 @@
|
|
|
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
|
+
value = props.value,
|
|
19
|
+
setValue = props.setValue,
|
|
20
|
+
onAdd = props.onAdd;
|
|
21
|
+
if (!visible || !showTools) return null;
|
|
22
|
+
var click = /*#__PURE__*/function () {
|
|
23
|
+
var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee(event) {
|
|
24
|
+
var keyOrValue, isArray, isAdd, result, maybeAdd;
|
|
25
|
+
return (0, _regeneratorRuntime2["default"])().wrap(function _callee$(_context) {
|
|
26
|
+
while (1) switch (_context.prev = _context.next) {
|
|
27
|
+
case 0:
|
|
28
|
+
event.stopPropagation();
|
|
29
|
+
keyOrValue = 'AddKeyOrValue';
|
|
30
|
+
isArray = Array.isArray(value);
|
|
31
|
+
isAdd = isArray ? true : !(keyOrValue in value);
|
|
32
|
+
result = isArray ? [].concat((0, _toConsumableArray2["default"])(value), [keyOrValue]) : (0, _objectSpread3["default"])((0, _objectSpread3["default"])({}, value), {}, (0, _defineProperty2["default"])({}, keyOrValue, undefined));
|
|
33
|
+
if (!onAdd) {
|
|
34
|
+
_context.next = 10;
|
|
35
|
+
break;
|
|
36
|
+
}
|
|
37
|
+
_context.next = 8;
|
|
38
|
+
return onAdd(keyOrValue, result, props.value, isAdd);
|
|
39
|
+
case 8:
|
|
40
|
+
maybeAdd = _context.sent;
|
|
41
|
+
if (maybeAdd) {
|
|
42
|
+
setValue(result);
|
|
43
|
+
}
|
|
44
|
+
case 10:
|
|
45
|
+
case "end":
|
|
46
|
+
return _context.stop();
|
|
47
|
+
}
|
|
48
|
+
}, _callee);
|
|
49
|
+
}));
|
|
50
|
+
return function click(_x) {
|
|
51
|
+
return _ref.apply(this, arguments);
|
|
52
|
+
};
|
|
53
|
+
}();
|
|
54
|
+
var svgProps = {
|
|
55
|
+
onClick: click
|
|
56
|
+
};
|
|
57
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_add.AddIcon, (0, _objectSpread3["default"])({}, svgProps));
|
|
58
|
+
}
|
|
@@ -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-edit-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,5 +1,6 @@
|
|
|
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
|
/** Callback when value edit functionality */
|
|
5
6
|
onEdit?: (option: {
|
|
@@ -9,6 +10,11 @@ export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T>
|
|
|
9
10
|
parentName?: string | number;
|
|
10
11
|
type?: 'value' | 'key';
|
|
11
12
|
}) => void;
|
|
13
|
+
/**
|
|
14
|
+
* When a callback function is passed in, add functionality is enabled. The callback is invoked before additions are completed.
|
|
15
|
+
* @returns {boolean} Returning false from onAdd will prevent the change from being made.
|
|
16
|
+
*/
|
|
17
|
+
onAdd?: CountInfoExtraProps<T>['onAdd'];
|
|
12
18
|
/** Whether enable edit feature. @default true */
|
|
13
19
|
editable?: boolean;
|
|
14
20
|
}
|
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
|
@@ -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
|
@@ -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,6 +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'];
|
|
53
|
+
countInfo?: (props: CountInfoProps) => JSX.Element;
|
|
54
|
+
countInfoExtra?: (props: Omit<CountInfoExtraProps<T>, 'editable'>) => JSX.Element;
|
|
47
55
|
};
|
|
48
56
|
}
|
|
49
57
|
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);
|