@uiw/react-json-view 1.6.0 → 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 +30 -16
- 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/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 +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/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
|
|
|
@@ -316,11 +316,11 @@ const object = {
|
|
|
316
316
|
integer: 42,
|
|
317
317
|
}
|
|
318
318
|
|
|
319
|
-
function value({ type, children, keyName, visible, ...props }) {
|
|
320
|
-
if (type === 'string' && /\.(jpg)$/.test(
|
|
319
|
+
function value({ type, children, value, keyName, visible, ...props }) {
|
|
320
|
+
if (type === 'string' && /\.(jpg)$/.test(value)) {
|
|
321
321
|
return (
|
|
322
322
|
<span {...props}>
|
|
323
|
-
<img src={
|
|
323
|
+
<img src={value} height="36" />
|
|
324
324
|
</span>
|
|
325
325
|
);
|
|
326
326
|
}
|
|
@@ -672,6 +672,7 @@ export default function Demo() {
|
|
|
672
672
|
```ts
|
|
673
673
|
import React from 'react';
|
|
674
674
|
import { MetaProps, SemicolonProps, EllipsisProps, ValueViewProps } from '@uiw/react-json-view';
|
|
675
|
+
import type { CountInfoExtraProps } from '@uiw/react-json-view/cjs/editor/countInfoExtra';
|
|
675
676
|
export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
|
|
676
677
|
/** This property contains your input JSON */
|
|
677
678
|
value?: T;
|
|
@@ -710,16 +711,24 @@ export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttr
|
|
|
710
711
|
objectKey?: SemicolonProps['render'];
|
|
711
712
|
value?: ValueViewProps<T>['renderValue'];
|
|
712
713
|
copied?: CopiedProps<T>['render'];
|
|
714
|
+
countInfo?: (props: CountInfoProps) => JSX.Element;
|
|
715
|
+
countInfoExtra?: (props: Omit<CountInfoExtraProps<T>, 'editable'>) => JSX.Element;
|
|
713
716
|
};
|
|
714
717
|
}
|
|
715
718
|
declare const JsonView: React.ForwardRefExoticComponent<Omit<JsonViewProps<object>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
716
719
|
export default JsonView;
|
|
720
|
+
export interface CountInfoProps {
|
|
721
|
+
count: number;
|
|
722
|
+
level: number;
|
|
723
|
+
visible: boolean;
|
|
724
|
+
}
|
|
717
725
|
```
|
|
718
726
|
|
|
719
727
|
### JsonView Editor Props
|
|
720
728
|
|
|
721
729
|
```ts
|
|
722
730
|
import { JsonViewProps } from '@uiw/react-json-view';
|
|
731
|
+
import type { CountInfoExtraProps } from '@uiw/react-json-view/cjs/editor/countInfoExtra';
|
|
723
732
|
export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T> {
|
|
724
733
|
/** Callback when value edit functionality */
|
|
725
734
|
onEdit?: (option: {
|
|
@@ -729,6 +738,11 @@ export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T>
|
|
|
729
738
|
parentName?: string | number;
|
|
730
739
|
type?: 'value' | 'key';
|
|
731
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'];
|
|
732
746
|
/** Whether enable edit feature. @default true */
|
|
733
747
|
editable?: boolean;
|
|
734
748
|
}
|
|
@@ -740,19 +754,19 @@ export default JsonViewEditor;
|
|
|
740
754
|
|
|
741
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)):
|
|
742
756
|
|
|
743
|
-
| Library | Bundle size
|
|
757
|
+
| Library | Bundle size (gzip) | Deps | Last commit | Download | Editable |
|
|
744
758
|
| ------- | ------- | ------- | ------- | ------- | ------- |
|
|
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)
|
|
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) | ✅ |
|
|
756
770
|
|
|
757
771
|
## Development
|
|
758
772
|
|
|
@@ -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/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>>;
|
package/cjs/node.js
CHANGED
|
@@ -15,7 +15,7 @@ var _value = require("./value");
|
|
|
15
15
|
var _TriangleArrow = require("./arrow/TriangleArrow");
|
|
16
16
|
var _store = require("./store");
|
|
17
17
|
var _semicolon = require("./semicolon");
|
|
18
|
-
var
|
|
18
|
+
var _copied = require("./copied");
|
|
19
19
|
var _ellipsis = require("./comps/ellipsis");
|
|
20
20
|
var _meta = require("./comps/meta");
|
|
21
21
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
@@ -126,14 +126,21 @@ function RooNode(props) {
|
|
|
126
126
|
return setShowTools(false);
|
|
127
127
|
};
|
|
128
128
|
}
|
|
129
|
-
var
|
|
129
|
+
var _useState3 = (0, _react.useState)(value),
|
|
130
|
+
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
|
131
|
+
valueData = _useState4[0],
|
|
132
|
+
setValueData = _useState4[1];
|
|
133
|
+
(0, _react.useEffect)(function () {
|
|
134
|
+
return setValueData(value);
|
|
135
|
+
}, [value]);
|
|
136
|
+
var nameKeys = isArray ? Object.keys(valueData).map(function (m) {
|
|
130
137
|
return Number(m);
|
|
131
|
-
}) : Object.keys(
|
|
138
|
+
}) : Object.keys(valueData);
|
|
132
139
|
|
|
133
140
|
// object
|
|
134
|
-
var entries = isArray ? Object.entries(
|
|
141
|
+
var entries = isArray ? Object.entries(valueData).map(function (m) {
|
|
135
142
|
return [Number(m[0]), m[1]];
|
|
136
|
-
}) : Object.entries(
|
|
143
|
+
}) : Object.entries(valueData);
|
|
137
144
|
if (objectSortKeys) {
|
|
138
145
|
entries = objectSortKeys === true ? entries.sort(function (_ref2, _ref3) {
|
|
139
146
|
var _ref4 = (0, _slicedToArray2["default"])(_ref2, 1),
|
|
@@ -170,7 +177,7 @@ function RooNode(props) {
|
|
|
170
177
|
onClick: handle,
|
|
171
178
|
children: [arrowView, (typeof keyName === 'string' || typeof keyName === 'number') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
|
|
172
179
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_semicolon.Semicolon, {
|
|
173
|
-
value:
|
|
180
|
+
value: valueData,
|
|
174
181
|
quotes: quotes,
|
|
175
182
|
"data-keys": keyid,
|
|
176
183
|
render: components.objectKey,
|
|
@@ -191,12 +198,18 @@ function RooNode(props) {
|
|
|
191
198
|
isArray: isArray,
|
|
192
199
|
level: level,
|
|
193
200
|
render: components.braces
|
|
194
|
-
}), displayObjectSize && countInfo,
|
|
195
|
-
|
|
196
|
-
|
|
201
|
+
}), displayObjectSize && countInfo, components.countInfoExtra && components.countInfoExtra({
|
|
202
|
+
count: nameKeys.length,
|
|
203
|
+
level: level,
|
|
204
|
+
showTools: showTools,
|
|
205
|
+
visible: expand,
|
|
206
|
+
value: valueData,
|
|
207
|
+
setValue: setValueData
|
|
208
|
+
}), enableClipboard && /*#__PURE__*/(0, _jsxRuntime.jsx)(_copied.Copied, {
|
|
209
|
+
show: showTools,
|
|
210
|
+
text: valueData,
|
|
197
211
|
onCopied: onCopied,
|
|
198
|
-
components: components
|
|
199
|
-
showTools: showTools
|
|
212
|
+
render: components === null || components === void 0 ? void 0 : components.copied
|
|
200
213
|
})]
|
|
201
214
|
}), expand && /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Line, {
|
|
202
215
|
className: "w-rjv-content",
|
package/cjs/semicolon.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { FC, PropsWithChildren } from 'react';
|
|
2
|
-
import { LabelProps } from './value';
|
|
3
|
-
import { JsonViewProps } from './';
|
|
1
|
+
import type { FC, PropsWithChildren } from 'react';
|
|
2
|
+
import type { LabelProps } from './value';
|
|
3
|
+
import type { JsonViewProps } from './';
|
|
4
4
|
export declare function usePrevious<T>(value: T): T | undefined;
|
|
5
5
|
interface UseHighlight {
|
|
6
6
|
value: any;
|
package/cjs/value.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { FC, PropsWithChildren } from 'react';
|
|
2
|
-
import { MetaProps } from './comps/meta';
|
|
3
|
-
import { JsonViewProps } from './';
|
|
1
|
+
import type { FC, PropsWithChildren } from 'react';
|
|
2
|
+
import type { MetaProps } from './comps/meta';
|
|
3
|
+
import type { JsonViewProps } from './';
|
|
4
4
|
export declare const Line: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>>;
|
|
5
5
|
export declare const isFloat: (n: number) => boolean;
|
|
6
6
|
export declare const typeMap: {
|
package/editor.d.ts
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
declare module '@uiw/react-json-view/editor' {
|
|
4
4
|
import { JsonViewProps } from '@uiw/react-json-view';
|
|
5
|
+
import type { CountInfoExtraProps } from '@uiw/react-json-view/cjs/editor/countInfoExtra';
|
|
5
6
|
type Option = {
|
|
6
7
|
value: string;
|
|
7
8
|
prevValue: string;
|
|
@@ -9,7 +10,21 @@ declare module '@uiw/react-json-view/editor' {
|
|
|
9
10
|
};
|
|
10
11
|
|
|
11
12
|
export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T> {
|
|
12
|
-
|
|
13
|
+
/** Callback when value edit functionality */
|
|
14
|
+
onEdit?: (option: {
|
|
15
|
+
value: unknown;
|
|
16
|
+
oldValue: unknown;
|
|
17
|
+
keyName?: string | number;
|
|
18
|
+
parentName?: string | number;
|
|
19
|
+
type?: 'value' | 'key';
|
|
20
|
+
}) => void;
|
|
21
|
+
/**
|
|
22
|
+
* When a callback function is passed in, add functionality is enabled. The callback is invoked before additions are completed.
|
|
23
|
+
* @returns {boolean} Returning false from onAdd will prevent the change from being made.
|
|
24
|
+
*/
|
|
25
|
+
onAdd?: CountInfoExtraProps<T>['onAdd'];
|
|
26
|
+
/** Whether enable edit feature. @default true */
|
|
27
|
+
editable?: boolean;
|
|
13
28
|
}
|
|
14
29
|
const JsonViewEditor: import("react").ForwardRefExoticComponent<Omit<JsonViewEditorProps<object>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
15
30
|
export default JsonViewEditor;
|
|
@@ -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,38 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
|
|
3
|
+
import { AddIcon } from './icon/add';
|
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
|
+
export function CountInfoExtra(props) {
|
|
6
|
+
var {
|
|
7
|
+
visible,
|
|
8
|
+
showTools,
|
|
9
|
+
value,
|
|
10
|
+
setValue,
|
|
11
|
+
onAdd
|
|
12
|
+
} = props;
|
|
13
|
+
if (!visible || !showTools) return null;
|
|
14
|
+
var click = /*#__PURE__*/function () {
|
|
15
|
+
var _ref = _asyncToGenerator(function* (event) {
|
|
16
|
+
event.stopPropagation();
|
|
17
|
+
var keyOrValue = 'AddKeyOrValue';
|
|
18
|
+
var isArray = Array.isArray(value);
|
|
19
|
+
var isAdd = isArray ? true : !(keyOrValue in value);
|
|
20
|
+
var result = isArray ? [...value, keyOrValue] : _extends({}, value, {
|
|
21
|
+
[keyOrValue]: undefined
|
|
22
|
+
});
|
|
23
|
+
if (onAdd) {
|
|
24
|
+
var maybeAdd = yield onAdd(keyOrValue, result, props.value, isAdd);
|
|
25
|
+
if (maybeAdd) {
|
|
26
|
+
setValue(result);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
return function click(_x) {
|
|
31
|
+
return _ref.apply(this, arguments);
|
|
32
|
+
};
|
|
33
|
+
}();
|
|
34
|
+
var svgProps = {
|
|
35
|
+
onClick: click
|
|
36
|
+
};
|
|
37
|
+
return /*#__PURE__*/_jsx(AddIcon, _extends({}, svgProps));
|
|
38
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
export var AddIcon = props => {
|
|
4
|
+
var {
|
|
5
|
+
style
|
|
6
|
+
} = props;
|
|
7
|
+
var defaultStyle = {
|
|
8
|
+
verticalAlign: 'middle',
|
|
9
|
+
display: 'inline-block',
|
|
10
|
+
cursor: 'pointer',
|
|
11
|
+
marginLeft: 5,
|
|
12
|
+
height: '1em',
|
|
13
|
+
width: '1em'
|
|
14
|
+
};
|
|
15
|
+
return /*#__PURE__*/_jsx("svg", _extends({
|
|
16
|
+
viewBox: "0 0 20 20",
|
|
17
|
+
fill: "var(--w-rjv-edit-color, currentColor)"
|
|
18
|
+
}, props, {
|
|
19
|
+
style: _extends({}, style, defaultStyle),
|
|
20
|
+
children: /*#__PURE__*/_jsx("path", {
|
|
21
|
+
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"
|
|
22
|
+
})
|
|
23
|
+
}));
|
|
24
|
+
};
|
package/esm/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/esm/editor/index.js
CHANGED
|
@@ -1,20 +1,26 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
|
|
3
|
-
var _excluded = ["onEdit", "components", "editable", "displayDataTypes"];
|
|
3
|
+
var _excluded = ["onEdit", "components", "editable", "displayDataTypes", "onAdd"];
|
|
4
4
|
import { forwardRef } from 'react';
|
|
5
5
|
import JsonView from '../';
|
|
6
6
|
import { ObjectKey } from './objectKey';
|
|
7
7
|
import { ReValue } from './value';
|
|
8
|
+
import { CountInfoExtra } from './countInfoExtra';
|
|
8
9
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
10
|
var JsonViewEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
10
11
|
var {
|
|
11
12
|
onEdit,
|
|
12
13
|
components,
|
|
13
14
|
editable = true,
|
|
14
|
-
displayDataTypes = true
|
|
15
|
+
displayDataTypes = true,
|
|
16
|
+
onAdd
|
|
15
17
|
} = props,
|
|
16
18
|
reset = _objectWithoutPropertiesLoose(props, _excluded);
|
|
17
19
|
var comps = _extends({}, components, {
|
|
20
|
+
countInfoExtra: reprops => /*#__PURE__*/_jsx(CountInfoExtra, _extends({}, reprops, {
|
|
21
|
+
editable: editable,
|
|
22
|
+
onAdd: onAdd
|
|
23
|
+
})),
|
|
18
24
|
objectKey: reprops => /*#__PURE__*/_jsx(ObjectKey, _extends({}, reprops, {
|
|
19
25
|
editableValue: editable,
|
|
20
26
|
onEdit: onEdit,
|
|
@@ -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/esm/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/esm/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>>;
|
package/esm/node.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
|
|
3
3
|
var _excluded = ["value", "keyName", "className", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "highlightUpdates", "objectSortKeys", "indentWidth", "collapsed", "level", "keyid", "quotes", "onCopied", "onExpand"];
|
|
4
|
-
import { Fragment, useId, cloneElement, useState } from 'react';
|
|
4
|
+
import { Fragment, useId, cloneElement, useState, useEffect } from 'react';
|
|
5
5
|
import { ValueView, Colon, Label, Line, typeMap } from './value';
|
|
6
6
|
import { TriangleArrow } from './arrow/TriangleArrow';
|
|
7
7
|
import { useExpandsStatus, store } from './store';
|
|
8
8
|
import { Semicolon } from './semicolon';
|
|
9
|
-
import {
|
|
9
|
+
import { Copied } from './copied';
|
|
10
10
|
import { Ellipsis } from './comps/ellipsis';
|
|
11
11
|
import { Meta } from './comps/meta';
|
|
12
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -102,10 +102,12 @@ export function RooNode(props) {
|
|
|
102
102
|
eventProps.onMouseEnter = () => setShowTools(true);
|
|
103
103
|
eventProps.onMouseLeave = () => setShowTools(false);
|
|
104
104
|
}
|
|
105
|
-
var
|
|
105
|
+
var [valueData, setValueData] = useState(value);
|
|
106
|
+
useEffect(() => setValueData(value), [value]);
|
|
107
|
+
var nameKeys = isArray ? Object.keys(valueData).map(m => Number(m)) : Object.keys(valueData);
|
|
106
108
|
|
|
107
109
|
// object
|
|
108
|
-
var entries = isArray ? Object.entries(
|
|
110
|
+
var entries = isArray ? Object.entries(valueData).map(m => [Number(m[0]), m[1]]) : Object.entries(valueData);
|
|
109
111
|
if (objectSortKeys) {
|
|
110
112
|
entries = objectSortKeys === true ? entries.sort((_ref2, _ref3) => {
|
|
111
113
|
var [a] = _ref2;
|
|
@@ -138,7 +140,7 @@ export function RooNode(props) {
|
|
|
138
140
|
onClick: handle,
|
|
139
141
|
children: [arrowView, (typeof keyName === 'string' || typeof keyName === 'number') && /*#__PURE__*/_jsxs(Fragment, {
|
|
140
142
|
children: [/*#__PURE__*/_jsx(Semicolon, {
|
|
141
|
-
value:
|
|
143
|
+
value: valueData,
|
|
142
144
|
quotes: quotes,
|
|
143
145
|
"data-keys": keyid,
|
|
144
146
|
render: components.objectKey,
|
|
@@ -159,12 +161,18 @@ export function RooNode(props) {
|
|
|
159
161
|
isArray: isArray,
|
|
160
162
|
level: level,
|
|
161
163
|
render: components.braces
|
|
162
|
-
}), displayObjectSize && countInfo,
|
|
163
|
-
|
|
164
|
-
|
|
164
|
+
}), displayObjectSize && countInfo, components.countInfoExtra && components.countInfoExtra({
|
|
165
|
+
count: nameKeys.length,
|
|
166
|
+
level,
|
|
167
|
+
showTools,
|
|
168
|
+
visible: expand,
|
|
169
|
+
value: valueData,
|
|
170
|
+
setValue: setValueData
|
|
171
|
+
}), enableClipboard && /*#__PURE__*/_jsx(Copied, {
|
|
172
|
+
show: showTools,
|
|
173
|
+
text: valueData,
|
|
165
174
|
onCopied: onCopied,
|
|
166
|
-
components: components
|
|
167
|
-
showTools: showTools
|
|
175
|
+
render: components == null ? void 0 : components.copied
|
|
168
176
|
})]
|
|
169
177
|
}), expand && /*#__PURE__*/_jsx(Line, {
|
|
170
178
|
className: "w-rjv-content",
|
package/esm/semicolon.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { FC, PropsWithChildren } from 'react';
|
|
2
|
-
import { LabelProps } from './value';
|
|
3
|
-
import { JsonViewProps } from './';
|
|
1
|
+
import type { FC, PropsWithChildren } from 'react';
|
|
2
|
+
import type { LabelProps } from './value';
|
|
3
|
+
import type { JsonViewProps } from './';
|
|
4
4
|
export declare function usePrevious<T>(value: T): T | undefined;
|
|
5
5
|
interface UseHighlight {
|
|
6
6
|
value: any;
|
package/esm/value.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { FC, PropsWithChildren } from 'react';
|
|
2
|
-
import { MetaProps } from './comps/meta';
|
|
3
|
-
import { JsonViewProps } from './';
|
|
1
|
+
import type { FC, PropsWithChildren } from 'react';
|
|
2
|
+
import type { MetaProps } from './comps/meta';
|
|
3
|
+
import type { JsonViewProps } from './';
|
|
4
4
|
export declare const Line: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>>;
|
|
5
5
|
export declare const isFloat: (n: number) => boolean;
|
|
6
6
|
export declare const typeMap: {
|
package/package.json
CHANGED
package/cjs/tools.d.ts
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { JsonViewProps } from './';
|
|
2
|
-
interface ToolsProps<T extends object> {
|
|
3
|
-
enableClipboard?: boolean;
|
|
4
|
-
value?: T | {};
|
|
5
|
-
onCopied?: JsonViewProps<T>['onCopied'];
|
|
6
|
-
components?: JsonViewProps<T>['components'];
|
|
7
|
-
showTools?: boolean;
|
|
8
|
-
}
|
|
9
|
-
export declare function Tools<T extends object>(props: ToolsProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
10
|
-
export {};
|
package/cjs/tools.js
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.Tools = Tools;
|
|
7
|
-
var _react = require("react");
|
|
8
|
-
var _copied = require("./copied");
|
|
9
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
|
-
function Tools(props) {
|
|
11
|
-
var enableClipboard = props.enableClipboard,
|
|
12
|
-
value = props.value,
|
|
13
|
-
showTools = props.showTools,
|
|
14
|
-
components = props.components,
|
|
15
|
-
onCopied = props.onCopied;
|
|
16
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
|
|
17
|
-
children: enableClipboard && /*#__PURE__*/(0, _jsxRuntime.jsx)(_copied.Copied, {
|
|
18
|
-
show: showTools,
|
|
19
|
-
text: value,
|
|
20
|
-
onCopied: onCopied,
|
|
21
|
-
render: components === null || components === void 0 ? void 0 : components.copied
|
|
22
|
-
})
|
|
23
|
-
});
|
|
24
|
-
}
|
package/esm/tools.d.ts
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { JsonViewProps } from './';
|
|
2
|
-
interface ToolsProps<T extends object> {
|
|
3
|
-
enableClipboard?: boolean;
|
|
4
|
-
value?: T | {};
|
|
5
|
-
onCopied?: JsonViewProps<T>['onCopied'];
|
|
6
|
-
components?: JsonViewProps<T>['components'];
|
|
7
|
-
showTools?: boolean;
|
|
8
|
-
}
|
|
9
|
-
export declare function Tools<T extends object>(props: ToolsProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
10
|
-
export {};
|
package/esm/tools.js
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { Fragment } from "react";
|
|
2
|
-
import { Copied } from './copied';
|
|
3
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
4
|
-
export function Tools(props) {
|
|
5
|
-
var {
|
|
6
|
-
enableClipboard,
|
|
7
|
-
value,
|
|
8
|
-
showTools,
|
|
9
|
-
components,
|
|
10
|
-
onCopied
|
|
11
|
-
} = props;
|
|
12
|
-
return /*#__PURE__*/_jsx(Fragment, {
|
|
13
|
-
children: enableClipboard && /*#__PURE__*/_jsx(Copied, {
|
|
14
|
-
show: showTools,
|
|
15
|
-
text: value,
|
|
16
|
-
onCopied: onCopied,
|
|
17
|
-
render: components == null ? void 0 : components.copied
|
|
18
|
-
})
|
|
19
|
-
});
|
|
20
|
-
}
|