@uiw/react-json-view 1.0.0 → 1.1.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 +27 -0
- package/cjs/copied.d.ts +2 -1
- package/cjs/copied.js +6 -4
- package/cjs/index.d.ts +14 -1
- package/cjs/node.d.ts +4 -2
- package/cjs/node.js +36 -14
- package/cjs/value.js +17 -16
- package/esm/copied.d.ts +2 -1
- package/esm/copied.js +7 -5
- package/esm/index.d.ts +14 -1
- package/esm/node.d.ts +4 -2
- package/esm/node.js +32 -12
- package/esm/value.js +13 -12
- package/package.json +20 -8
package/README.md
CHANGED
|
@@ -22,6 +22,7 @@ A React component for displaying and editing javascript arrays and JSON objects.
|
|
|
22
22
|
📚 Use Typescript to write, better code hints.
|
|
23
23
|
🎨 Support theme customization & [`online editing`](https://uiwjs.github.io/react-json-view/#online-editing-theme) theme
|
|
24
24
|
🌒 Support dark/light mode
|
|
25
|
+
📦 Zero dependencies
|
|
25
26
|
|
|
26
27
|
## Quick Start
|
|
27
28
|
|
|
@@ -243,6 +244,7 @@ export default function Demo() {
|
|
|
243
244
|
<JsonView
|
|
244
245
|
value={object}
|
|
245
246
|
keyName="root"
|
|
247
|
+
quotes=""
|
|
246
248
|
displayObjectSize={false}
|
|
247
249
|
displayDataTypes={false}
|
|
248
250
|
style={{
|
|
@@ -392,6 +394,15 @@ export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttr
|
|
|
392
394
|
keyName?: string | number;
|
|
393
395
|
/** The user can copy objects and arrays to clipboard by clicking on the clipboard icon. @default true */
|
|
394
396
|
enableClipboard?: boolean;
|
|
397
|
+
/** Display for quotes in object-key @default " */
|
|
398
|
+
quotes?: "'" | '"' | '';
|
|
399
|
+
/** Callback function for when a treeNode is expanded or collapsed */
|
|
400
|
+
onExpand?: (props: {
|
|
401
|
+
expand: boolean;
|
|
402
|
+
value: T;
|
|
403
|
+
keyid: string;
|
|
404
|
+
keyName?: string | number;
|
|
405
|
+
}) => void;
|
|
395
406
|
/** Redefine interface elements to re-render. */
|
|
396
407
|
components?: {
|
|
397
408
|
braces?: MetaProps['render'];
|
|
@@ -405,6 +416,22 @@ declare const JsonView: React.ForwardRefExoticComponent<Omit<JsonViewProps<objec
|
|
|
405
416
|
export default JsonView;
|
|
406
417
|
```
|
|
407
418
|
|
|
419
|
+
## Size and dependencies
|
|
420
|
+
|
|
421
|
+
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)):
|
|
422
|
+
|
|
423
|
+
| Library | Bundle size | Bundle size (gzip) | Deps | Last commit |
|
|
424
|
+
| ------- | ------- | ------- | ------- | ------- |
|
|
425
|
+
| **@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) |
|
|
426
|
+
| 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) |
|
|
427
|
+
| 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) |
|
|
428
|
+
| 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) |
|
|
429
|
+
| 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) |
|
|
430
|
+
| 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) |
|
|
431
|
+
| 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) |
|
|
432
|
+
| 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) |
|
|
433
|
+
| 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) |
|
|
434
|
+
|
|
408
435
|
## Development
|
|
409
436
|
|
|
410
437
|
Runs the project in development mode.
|
package/cjs/copied.d.ts
CHANGED
|
@@ -2,5 +2,6 @@
|
|
|
2
2
|
export interface CopiedProps<T = object> extends React.SVGProps<SVGSVGElement> {
|
|
3
3
|
show?: boolean;
|
|
4
4
|
text?: T;
|
|
5
|
+
render?: (props: Omit<CopiedProps<T>, 'render'>) => JSX.Element;
|
|
5
6
|
}
|
|
6
|
-
export declare function Copied<T>(props: CopiedProps<T>):
|
|
7
|
+
export declare function Copied<T>(props: CopiedProps<T>): JSX.Element | null;
|
package/cjs/copied.js
CHANGED
|
@@ -10,12 +10,13 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
|
|
|
10
10
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
11
11
|
var _react = require("react");
|
|
12
12
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
|
-
var _excluded = ["children", "style", "text", "show"];
|
|
13
|
+
var _excluded = ["children", "style", "text", "render", "show"];
|
|
14
14
|
function Copied(props) {
|
|
15
15
|
var children = props.children,
|
|
16
16
|
style = props.style,
|
|
17
17
|
_props$text = props.text,
|
|
18
18
|
text = _props$text === void 0 ? '' : _props$text,
|
|
19
|
+
render = props.render,
|
|
19
20
|
show = props.show,
|
|
20
21
|
reset = (0, _objectWithoutProperties2["default"])(props, _excluded);
|
|
21
22
|
if (!show) return null;
|
|
@@ -45,13 +46,14 @@ function Copied(props) {
|
|
|
45
46
|
marginLeft: 5
|
|
46
47
|
});
|
|
47
48
|
var svgProps = (0, _objectSpread2["default"])({
|
|
48
|
-
height:
|
|
49
|
-
width:
|
|
50
|
-
fill:
|
|
49
|
+
height: '1em',
|
|
50
|
+
width: '1em',
|
|
51
|
+
fill: 'var(--w-rjv-copied-color, currentColor)',
|
|
51
52
|
onClick: click,
|
|
52
53
|
style: defalutStyle,
|
|
53
54
|
className: 'w-rjv-copied'
|
|
54
55
|
}, reset);
|
|
56
|
+
if (render) return render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), svgProps));
|
|
55
57
|
if (copied) {
|
|
56
58
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
|
|
57
59
|
viewBox: "0 0 38 38"
|
package/cjs/index.d.ts
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { MetaProps, SemicolonProps, EllipsisProps } from './node';
|
|
3
3
|
import { ValueViewProps } from './value';
|
|
4
|
+
import { CopiedProps } from './copied';
|
|
4
5
|
export * from './node';
|
|
5
6
|
export * from './value';
|
|
6
|
-
export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
|
|
7
|
+
export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
|
|
7
8
|
/** This property contains your input JSON */
|
|
8
9
|
value?: T;
|
|
9
10
|
/** Set the indent-width for nested objects @default 15 */
|
|
@@ -16,6 +17,17 @@ export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttr
|
|
|
16
17
|
keyName?: string | number;
|
|
17
18
|
/** The user can copy objects and arrays to clipboard by clicking on the clipboard icon. @default true */
|
|
18
19
|
enableClipboard?: boolean;
|
|
20
|
+
/** Display for quotes in object-key @default " */
|
|
21
|
+
quotes?: "'" | '"' | '';
|
|
22
|
+
/** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. @default false */
|
|
23
|
+
collapsed?: boolean | number;
|
|
24
|
+
/** Callback function for when a treeNode is expanded or collapsed */
|
|
25
|
+
onExpand?: (props: {
|
|
26
|
+
expand: boolean;
|
|
27
|
+
value: T;
|
|
28
|
+
keyid: string;
|
|
29
|
+
keyName?: string | number;
|
|
30
|
+
}) => void;
|
|
19
31
|
/** Redefine interface elements to re-render. */
|
|
20
32
|
components?: {
|
|
21
33
|
braces?: MetaProps['render'];
|
|
@@ -23,6 +35,7 @@ export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttr
|
|
|
23
35
|
arrow?: JSX.Element;
|
|
24
36
|
objectKey?: SemicolonProps['render'];
|
|
25
37
|
value?: ValueViewProps<T>['renderValue'];
|
|
38
|
+
copied?: CopiedProps<T>['render'];
|
|
26
39
|
};
|
|
27
40
|
}
|
|
28
41
|
declare const JsonView: React.ForwardRefExoticComponent<Omit<JsonViewProps<object>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
package/cjs/node.d.ts
CHANGED
|
@@ -6,20 +6,22 @@ export interface MetaProps extends LabelProps {
|
|
|
6
6
|
start?: boolean;
|
|
7
7
|
render?: (props: Pick<MetaProps, 'start' | 'isArray' | 'className' | 'children'>) => JSX.Element;
|
|
8
8
|
}
|
|
9
|
-
export declare function Meta(props: MetaProps):
|
|
9
|
+
export declare function Meta(props: MetaProps): JSX.Element;
|
|
10
10
|
export interface EllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
11
11
|
render?: (props: EllipsisProps) => JSX.Element;
|
|
12
12
|
}
|
|
13
13
|
export declare const Ellipsis: FC<PropsWithChildren<EllipsisProps>>;
|
|
14
14
|
export interface SemicolonProps extends LabelProps {
|
|
15
15
|
show?: boolean;
|
|
16
|
+
quotes?: JsonViewProps<object>['quotes'];
|
|
16
17
|
value?: object;
|
|
17
18
|
render?: (props: Omit<SemicolonProps, 'show'> & {}) => JSX.Element;
|
|
18
19
|
}
|
|
19
20
|
export declare const Semicolon: FC<PropsWithChildren<SemicolonProps>>;
|
|
20
21
|
export declare const CountInfo: FC<PropsWithChildren<LabelProps>>;
|
|
21
|
-
export interface RooNodeProps<T> extends JsonViewProps<T> {
|
|
22
|
+
export interface RooNodeProps<T extends object> extends JsonViewProps<T> {
|
|
22
23
|
keyName?: string | number;
|
|
23
24
|
keyid?: string;
|
|
25
|
+
level?: number;
|
|
24
26
|
}
|
|
25
27
|
export declare function RooNode<T extends object>(props: RooNodeProps<T>): import("react/jsx-runtime").JSX.Element;
|
package/cjs/node.js
CHANGED
|
@@ -20,8 +20,8 @@ var _copied = require("./copied");
|
|
|
20
20
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
21
21
|
var _excluded = ["isArray", "start", "className", "render"],
|
|
22
22
|
_excluded2 = ["style", "render"],
|
|
23
|
-
_excluded3 = ["children", "render", "color", "value", "className", "show"],
|
|
24
|
-
_excluded4 = ["value", "keyName", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "indentWidth", "keyid"];
|
|
23
|
+
_excluded3 = ["children", "render", "color", "value", "className", "show", "quotes"],
|
|
24
|
+
_excluded4 = ["value", "keyName", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "indentWidth", "collapsed", "level", "keyid", "quotes", "onExpand"];
|
|
25
25
|
function Meta(props) {
|
|
26
26
|
var _props$isArray = props.isArray,
|
|
27
27
|
isArray = _props$isArray === void 0 ? false : _props$isArray,
|
|
@@ -77,8 +77,9 @@ var Semicolon = function Semicolon(_ref2) {
|
|
|
77
77
|
_ref2$className = _ref2.className,
|
|
78
78
|
className = _ref2$className === void 0 ? 'w-rjv-object-key' : _ref2$className,
|
|
79
79
|
show = _ref2.show,
|
|
80
|
+
quotes = _ref2.quotes,
|
|
80
81
|
props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded3);
|
|
81
|
-
var content = show ? "
|
|
82
|
+
var content = show ? "".concat(quotes).concat(children).concat(quotes) : children;
|
|
82
83
|
if (render) return render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({
|
|
83
84
|
className: className
|
|
84
85
|
}, props), {}, {
|
|
@@ -124,8 +125,14 @@ function RooNode(props) {
|
|
|
124
125
|
enableClipboard = _props$enableClipboar === void 0 ? true : _props$enableClipboar,
|
|
125
126
|
_props$indentWidth = props.indentWidth,
|
|
126
127
|
indentWidth = _props$indentWidth === void 0 ? 15 : _props$indentWidth,
|
|
128
|
+
collapsed = props.collapsed,
|
|
129
|
+
_props$level = props.level,
|
|
130
|
+
level = _props$level === void 0 ? 1 : _props$level,
|
|
127
131
|
_props$keyid = props.keyid,
|
|
128
132
|
keyid = _props$keyid === void 0 ? 'root' : _props$keyid,
|
|
133
|
+
_props$quotes = props.quotes,
|
|
134
|
+
quotes = _props$quotes === void 0 ? '"' : _props$quotes,
|
|
135
|
+
onExpand = props.onExpand,
|
|
129
136
|
reset = (0, _objectWithoutProperties2["default"])(props, _excluded4);
|
|
130
137
|
var isArray = Array.isArray(value);
|
|
131
138
|
var nameKeys = isArray ? Object.keys(value).map(function (m) {
|
|
@@ -133,12 +140,18 @@ function RooNode(props) {
|
|
|
133
140
|
}) : Object.keys(value);
|
|
134
141
|
var subkeyid = (0, _react.useId)();
|
|
135
142
|
var expands = (0, _store.useExpandsStatus)();
|
|
136
|
-
var expand = (_expands$keyid = expands[keyid]) !== null && _expands$keyid !== void 0 ? _expands$keyid : true;
|
|
143
|
+
var expand = (_expands$keyid = expands[keyid]) !== null && _expands$keyid !== void 0 ? _expands$keyid : typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level <= collapsed : true;
|
|
137
144
|
var arrowStyle = {
|
|
138
145
|
transform: "rotate(".concat(expand ? '0' : '-90', "deg)"),
|
|
139
146
|
transition: 'all 0.3s'
|
|
140
147
|
};
|
|
141
148
|
var handle = function handle() {
|
|
149
|
+
onExpand && typeof onExpand === 'function' && onExpand({
|
|
150
|
+
expand: !expand,
|
|
151
|
+
keyid: keyid,
|
|
152
|
+
keyName: keyName,
|
|
153
|
+
value: value
|
|
154
|
+
});
|
|
142
155
|
!expand ? _store.store.expand(keyid) : _store.store.collapse(keyid);
|
|
143
156
|
};
|
|
144
157
|
var subNodeProps = {
|
|
@@ -146,6 +159,11 @@ function RooNode(props) {
|
|
|
146
159
|
indentWidth: indentWidth,
|
|
147
160
|
displayDataTypes: displayDataTypes,
|
|
148
161
|
displayObjectSize: displayObjectSize,
|
|
162
|
+
enableClipboard: enableClipboard,
|
|
163
|
+
onExpand: onExpand,
|
|
164
|
+
collapsed: collapsed,
|
|
165
|
+
quotes: quotes,
|
|
166
|
+
level: level + 1,
|
|
149
167
|
style: {
|
|
150
168
|
paddingLeft: indentWidth
|
|
151
169
|
}
|
|
@@ -169,17 +187,19 @@ function RooNode(props) {
|
|
|
169
187
|
setShowTools = _useState2[1];
|
|
170
188
|
var tools = enableClipboard ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_copied.Copied, {
|
|
171
189
|
show: showTools,
|
|
172
|
-
text: value
|
|
190
|
+
text: value,
|
|
191
|
+
render: components.copied
|
|
173
192
|
}) : undefined;
|
|
174
|
-
var
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
193
|
+
var eventProps = {};
|
|
194
|
+
if (enableClipboard) {
|
|
195
|
+
eventProps.onMouseEnter = function () {
|
|
196
|
+
return setShowTools(true);
|
|
197
|
+
};
|
|
198
|
+
eventProps.onMouseLeave = function () {
|
|
199
|
+
return setShowTools(false);
|
|
200
|
+
};
|
|
201
|
+
}
|
|
202
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), eventProps), {}, {
|
|
183
203
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_value.Line, {
|
|
184
204
|
style: {
|
|
185
205
|
display: 'inline-flex',
|
|
@@ -189,6 +209,7 @@ function RooNode(props) {
|
|
|
189
209
|
children: [arrowView, (typeof keyName === 'string' || typeof keyName === 'number') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
|
|
190
210
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Semicolon, {
|
|
191
211
|
value: value,
|
|
212
|
+
quotes: quotes,
|
|
192
213
|
render: components.objectKey,
|
|
193
214
|
color: typeof keyName === 'number' ? _value.typeMap['number'].color : '',
|
|
194
215
|
show: typeof keyName === 'string',
|
|
@@ -215,6 +236,7 @@ function RooNode(props) {
|
|
|
215
236
|
var item = value[key];
|
|
216
237
|
var renderKey = /*#__PURE__*/(0, _jsxRuntime.jsx)(Semicolon, {
|
|
217
238
|
value: item,
|
|
239
|
+
quotes: quotes,
|
|
218
240
|
render: components.objectKey,
|
|
219
241
|
color: typeof key === 'number' ? _value.typeMap['number'].color : '',
|
|
220
242
|
show: typeof key === 'string',
|
package/cjs/value.js
CHANGED
|
@@ -142,12 +142,15 @@ function ValueView(props) {
|
|
|
142
142
|
show: showTools,
|
|
143
143
|
text: value
|
|
144
144
|
}) : undefined;
|
|
145
|
-
var
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
145
|
+
var eventProps = {};
|
|
146
|
+
if (enableClipboard) {
|
|
147
|
+
eventProps.onMouseEnter = function () {
|
|
148
|
+
return setShowTools(true);
|
|
149
|
+
};
|
|
150
|
+
eventProps.onMouseLeave = function () {
|
|
151
|
+
return setShowTools(false);
|
|
152
|
+
};
|
|
153
|
+
}
|
|
151
154
|
if (content && typeof content === 'string') {
|
|
152
155
|
var valueView = renderValue ? renderValue({
|
|
153
156
|
className: 'w-rjv-value',
|
|
@@ -162,16 +165,15 @@ function ValueView(props) {
|
|
|
162
165
|
className: "w-rjv-value",
|
|
163
166
|
children: content
|
|
164
167
|
});
|
|
165
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
|
|
168
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
|
|
166
169
|
style: {
|
|
167
170
|
paddingLeft: indentWidth
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
onMouseLeave: mouseLeave,
|
|
171
|
+
}
|
|
172
|
+
}, eventProps), {}, {
|
|
171
173
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Label, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
|
|
172
174
|
children: [renderKey, /*#__PURE__*/(0, _jsxRuntime.jsx)(Colon, {}), typeView, valueView, tools]
|
|
173
175
|
}))
|
|
174
|
-
});
|
|
176
|
+
}));
|
|
175
177
|
}
|
|
176
178
|
var length = Array.isArray(value) ? value.length : Object.keys(value).length;
|
|
177
179
|
var empty = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
|
|
@@ -186,16 +188,15 @@ function ValueView(props) {
|
|
|
186
188
|
children: [length, " items"]
|
|
187
189
|
})]
|
|
188
190
|
});
|
|
189
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
|
|
191
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
|
|
190
192
|
style: {
|
|
191
193
|
paddingLeft: indentWidth
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
onMouseLeave: mouseLeave,
|
|
194
|
+
}
|
|
195
|
+
}, eventProps), {}, {
|
|
195
196
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Label, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
|
|
196
197
|
children: [renderKey, /*#__PURE__*/(0, _jsxRuntime.jsx)(Colon, {}), typeView, empty, tools]
|
|
197
198
|
}))
|
|
198
|
-
});
|
|
199
|
+
}));
|
|
199
200
|
}
|
|
200
201
|
var Label = function Label(_ref2) {
|
|
201
202
|
var children = _ref2.children,
|
package/esm/copied.d.ts
CHANGED
|
@@ -2,5 +2,6 @@
|
|
|
2
2
|
export interface CopiedProps<T = object> extends React.SVGProps<SVGSVGElement> {
|
|
3
3
|
show?: boolean;
|
|
4
4
|
text?: T;
|
|
5
|
+
render?: (props: Omit<CopiedProps<T>, 'render'>) => JSX.Element;
|
|
5
6
|
}
|
|
6
|
-
export declare function Copied<T>(props: CopiedProps<T>):
|
|
7
|
+
export declare function Copied<T>(props: CopiedProps<T>): JSX.Element | null;
|
package/esm/copied.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 = ["children", "style", "text", "show"];
|
|
4
|
-
import { useState } from
|
|
3
|
+
var _excluded = ["children", "style", "text", "render", "show"];
|
|
4
|
+
import { useState } from 'react';
|
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
6
|
export function Copied(props) {
|
|
7
7
|
var {
|
|
8
8
|
style,
|
|
9
9
|
text = '',
|
|
10
|
+
render,
|
|
10
11
|
show
|
|
11
12
|
} = props,
|
|
12
13
|
reset = _objectWithoutPropertiesLoose(props, _excluded);
|
|
@@ -34,13 +35,14 @@ export function Copied(props) {
|
|
|
34
35
|
marginLeft: 5
|
|
35
36
|
});
|
|
36
37
|
var svgProps = _extends({
|
|
37
|
-
height:
|
|
38
|
-
width:
|
|
39
|
-
fill:
|
|
38
|
+
height: '1em',
|
|
39
|
+
width: '1em',
|
|
40
|
+
fill: 'var(--w-rjv-copied-color, currentColor)',
|
|
40
41
|
onClick: click,
|
|
41
42
|
style: defalutStyle,
|
|
42
43
|
className: 'w-rjv-copied'
|
|
43
44
|
}, reset);
|
|
45
|
+
if (render) return render(_extends({}, props, svgProps));
|
|
44
46
|
if (copied) {
|
|
45
47
|
return /*#__PURE__*/_jsx("svg", _extends({
|
|
46
48
|
viewBox: "0 0 38 38"
|
package/esm/index.d.ts
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { MetaProps, SemicolonProps, EllipsisProps } from './node';
|
|
3
3
|
import { ValueViewProps } from './value';
|
|
4
|
+
import { CopiedProps } from './copied';
|
|
4
5
|
export * from './node';
|
|
5
6
|
export * from './value';
|
|
6
|
-
export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
|
|
7
|
+
export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
|
|
7
8
|
/** This property contains your input JSON */
|
|
8
9
|
value?: T;
|
|
9
10
|
/** Set the indent-width for nested objects @default 15 */
|
|
@@ -16,6 +17,17 @@ export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttr
|
|
|
16
17
|
keyName?: string | number;
|
|
17
18
|
/** The user can copy objects and arrays to clipboard by clicking on the clipboard icon. @default true */
|
|
18
19
|
enableClipboard?: boolean;
|
|
20
|
+
/** Display for quotes in object-key @default " */
|
|
21
|
+
quotes?: "'" | '"' | '';
|
|
22
|
+
/** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. @default false */
|
|
23
|
+
collapsed?: boolean | number;
|
|
24
|
+
/** Callback function for when a treeNode is expanded or collapsed */
|
|
25
|
+
onExpand?: (props: {
|
|
26
|
+
expand: boolean;
|
|
27
|
+
value: T;
|
|
28
|
+
keyid: string;
|
|
29
|
+
keyName?: string | number;
|
|
30
|
+
}) => void;
|
|
19
31
|
/** Redefine interface elements to re-render. */
|
|
20
32
|
components?: {
|
|
21
33
|
braces?: MetaProps['render'];
|
|
@@ -23,6 +35,7 @@ export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttr
|
|
|
23
35
|
arrow?: JSX.Element;
|
|
24
36
|
objectKey?: SemicolonProps['render'];
|
|
25
37
|
value?: ValueViewProps<T>['renderValue'];
|
|
38
|
+
copied?: CopiedProps<T>['render'];
|
|
26
39
|
};
|
|
27
40
|
}
|
|
28
41
|
declare const JsonView: React.ForwardRefExoticComponent<Omit<JsonViewProps<object>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
package/esm/node.d.ts
CHANGED
|
@@ -6,20 +6,22 @@ export interface MetaProps extends LabelProps {
|
|
|
6
6
|
start?: boolean;
|
|
7
7
|
render?: (props: Pick<MetaProps, 'start' | 'isArray' | 'className' | 'children'>) => JSX.Element;
|
|
8
8
|
}
|
|
9
|
-
export declare function Meta(props: MetaProps):
|
|
9
|
+
export declare function Meta(props: MetaProps): JSX.Element;
|
|
10
10
|
export interface EllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
11
11
|
render?: (props: EllipsisProps) => JSX.Element;
|
|
12
12
|
}
|
|
13
13
|
export declare const Ellipsis: FC<PropsWithChildren<EllipsisProps>>;
|
|
14
14
|
export interface SemicolonProps extends LabelProps {
|
|
15
15
|
show?: boolean;
|
|
16
|
+
quotes?: JsonViewProps<object>['quotes'];
|
|
16
17
|
value?: object;
|
|
17
18
|
render?: (props: Omit<SemicolonProps, 'show'> & {}) => JSX.Element;
|
|
18
19
|
}
|
|
19
20
|
export declare const Semicolon: FC<PropsWithChildren<SemicolonProps>>;
|
|
20
21
|
export declare const CountInfo: FC<PropsWithChildren<LabelProps>>;
|
|
21
|
-
export interface RooNodeProps<T> extends JsonViewProps<T> {
|
|
22
|
+
export interface RooNodeProps<T extends object> extends JsonViewProps<T> {
|
|
22
23
|
keyName?: string | number;
|
|
23
24
|
keyid?: string;
|
|
25
|
+
level?: number;
|
|
24
26
|
}
|
|
25
27
|
export declare function RooNode<T extends object>(props: RooNodeProps<T>): import("react/jsx-runtime").JSX.Element;
|
package/esm/node.js
CHANGED
|
@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
|
|
3
3
|
var _excluded = ["isArray", "start", "className", "render"],
|
|
4
4
|
_excluded2 = ["style", "render"],
|
|
5
|
-
_excluded3 = ["children", "render", "color", "value", "className", "show"],
|
|
6
|
-
_excluded4 = ["value", "keyName", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "indentWidth", "keyid"];
|
|
5
|
+
_excluded3 = ["children", "render", "color", "value", "className", "show", "quotes"],
|
|
6
|
+
_excluded4 = ["value", "keyName", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "indentWidth", "collapsed", "level", "keyid", "quotes", "onExpand"];
|
|
7
7
|
import { Fragment, useId, cloneElement, useState } from 'react';
|
|
8
8
|
import { ValueView, Colon, Label, Line, typeMap } from './value';
|
|
9
9
|
import { TriangleArrow } from './arrow/TriangleArrow';
|
|
@@ -66,10 +66,11 @@ export var Semicolon = _ref2 => {
|
|
|
66
66
|
color,
|
|
67
67
|
value,
|
|
68
68
|
className = 'w-rjv-object-key',
|
|
69
|
-
show
|
|
69
|
+
show,
|
|
70
|
+
quotes
|
|
70
71
|
} = _ref2,
|
|
71
72
|
props = _objectWithoutPropertiesLoose(_ref2, _excluded3);
|
|
72
|
-
var content = show ? "
|
|
73
|
+
var content = show ? "" + quotes + children + quotes : children;
|
|
73
74
|
if (render) return render(_extends({
|
|
74
75
|
className
|
|
75
76
|
}, props, {
|
|
@@ -110,19 +111,29 @@ export function RooNode(props) {
|
|
|
110
111
|
displayObjectSize = true,
|
|
111
112
|
enableClipboard = true,
|
|
112
113
|
indentWidth = 15,
|
|
113
|
-
|
|
114
|
+
collapsed,
|
|
115
|
+
level = 1,
|
|
116
|
+
keyid = 'root',
|
|
117
|
+
quotes = '"',
|
|
118
|
+
onExpand
|
|
114
119
|
} = props,
|
|
115
120
|
reset = _objectWithoutPropertiesLoose(props, _excluded4);
|
|
116
121
|
var isArray = Array.isArray(value);
|
|
117
122
|
var nameKeys = isArray ? Object.keys(value).map(m => Number(m)) : Object.keys(value);
|
|
118
123
|
var subkeyid = useId();
|
|
119
124
|
var expands = useExpandsStatus();
|
|
120
|
-
var expand = (_expands$keyid = expands[keyid]) != null ? _expands$keyid : true;
|
|
125
|
+
var expand = (_expands$keyid = expands[keyid]) != null ? _expands$keyid : typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level <= collapsed : true;
|
|
121
126
|
var arrowStyle = {
|
|
122
127
|
transform: "rotate(" + (expand ? '0' : '-90') + "deg)",
|
|
123
128
|
transition: 'all 0.3s'
|
|
124
129
|
};
|
|
125
130
|
var handle = () => {
|
|
131
|
+
onExpand && typeof onExpand === 'function' && onExpand({
|
|
132
|
+
expand: !expand,
|
|
133
|
+
keyid,
|
|
134
|
+
keyName,
|
|
135
|
+
value: value
|
|
136
|
+
});
|
|
126
137
|
!expand ? store.expand(keyid) : store.collapse(keyid);
|
|
127
138
|
};
|
|
128
139
|
var subNodeProps = {
|
|
@@ -130,6 +141,11 @@ export function RooNode(props) {
|
|
|
130
141
|
indentWidth,
|
|
131
142
|
displayDataTypes,
|
|
132
143
|
displayObjectSize,
|
|
144
|
+
enableClipboard,
|
|
145
|
+
onExpand,
|
|
146
|
+
collapsed,
|
|
147
|
+
quotes,
|
|
148
|
+
level: level + 1,
|
|
133
149
|
style: {
|
|
134
150
|
paddingLeft: indentWidth
|
|
135
151
|
}
|
|
@@ -150,13 +166,15 @@ export function RooNode(props) {
|
|
|
150
166
|
var [showTools, setShowTools] = useState(false);
|
|
151
167
|
var tools = enableClipboard ? /*#__PURE__*/_jsx(Copied, {
|
|
152
168
|
show: showTools,
|
|
153
|
-
text: value
|
|
169
|
+
text: value,
|
|
170
|
+
render: components.copied
|
|
154
171
|
}) : undefined;
|
|
155
|
-
var
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
172
|
+
var eventProps = {};
|
|
173
|
+
if (enableClipboard) {
|
|
174
|
+
eventProps.onMouseEnter = () => setShowTools(true);
|
|
175
|
+
eventProps.onMouseLeave = () => setShowTools(false);
|
|
176
|
+
}
|
|
177
|
+
return /*#__PURE__*/_jsxs("div", _extends({}, reset, eventProps, {
|
|
160
178
|
children: [/*#__PURE__*/_jsxs(Line, {
|
|
161
179
|
style: {
|
|
162
180
|
display: 'inline-flex',
|
|
@@ -166,6 +184,7 @@ export function RooNode(props) {
|
|
|
166
184
|
children: [arrowView, (typeof keyName === 'string' || typeof keyName === 'number') && /*#__PURE__*/_jsxs(Fragment, {
|
|
167
185
|
children: [/*#__PURE__*/_jsx(Semicolon, {
|
|
168
186
|
value: value,
|
|
187
|
+
quotes: quotes,
|
|
169
188
|
render: components.objectKey,
|
|
170
189
|
color: typeof keyName === 'number' ? typeMap['number'].color : '',
|
|
171
190
|
show: typeof keyName === 'string',
|
|
@@ -192,6 +211,7 @@ export function RooNode(props) {
|
|
|
192
211
|
var item = value[key];
|
|
193
212
|
var renderKey = /*#__PURE__*/_jsx(Semicolon, {
|
|
194
213
|
value: item,
|
|
214
|
+
quotes: quotes,
|
|
195
215
|
render: components.objectKey,
|
|
196
216
|
color: typeof key === 'number' ? typeMap['number'].color : '',
|
|
197
217
|
show: typeof key === 'string',
|
package/esm/value.js
CHANGED
|
@@ -124,8 +124,11 @@ export function ValueView(props) {
|
|
|
124
124
|
show: showTools,
|
|
125
125
|
text: value
|
|
126
126
|
}) : undefined;
|
|
127
|
-
var
|
|
128
|
-
|
|
127
|
+
var eventProps = {};
|
|
128
|
+
if (enableClipboard) {
|
|
129
|
+
eventProps.onMouseEnter = () => setShowTools(true);
|
|
130
|
+
eventProps.onMouseLeave = () => setShowTools(false);
|
|
131
|
+
}
|
|
129
132
|
if (content && typeof content === 'string') {
|
|
130
133
|
var valueView = renderValue ? renderValue({
|
|
131
134
|
className: 'w-rjv-value',
|
|
@@ -140,16 +143,15 @@ export function ValueView(props) {
|
|
|
140
143
|
className: "w-rjv-value",
|
|
141
144
|
children: content
|
|
142
145
|
});
|
|
143
|
-
return /*#__PURE__*/_jsx(Line, {
|
|
146
|
+
return /*#__PURE__*/_jsx(Line, _extends({
|
|
144
147
|
style: {
|
|
145
148
|
paddingLeft: indentWidth
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
onMouseLeave: mouseLeave,
|
|
149
|
+
}
|
|
150
|
+
}, eventProps, {
|
|
149
151
|
children: /*#__PURE__*/_jsxs(Label, _extends({}, reset, {
|
|
150
152
|
children: [renderKey, /*#__PURE__*/_jsx(Colon, {}), typeView, valueView, tools]
|
|
151
153
|
}))
|
|
152
|
-
});
|
|
154
|
+
}));
|
|
153
155
|
}
|
|
154
156
|
var length = Array.isArray(value) ? value.length : Object.keys(value).length;
|
|
155
157
|
var empty = /*#__PURE__*/_jsxs(Fragment, {
|
|
@@ -164,16 +166,15 @@ export function ValueView(props) {
|
|
|
164
166
|
children: [length, " items"]
|
|
165
167
|
})]
|
|
166
168
|
});
|
|
167
|
-
return /*#__PURE__*/_jsx(Line, {
|
|
169
|
+
return /*#__PURE__*/_jsx(Line, _extends({
|
|
168
170
|
style: {
|
|
169
171
|
paddingLeft: indentWidth
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
onMouseLeave: mouseLeave,
|
|
172
|
+
}
|
|
173
|
+
}, eventProps, {
|
|
173
174
|
children: /*#__PURE__*/_jsxs(Label, _extends({}, reset, {
|
|
174
175
|
children: [renderKey, /*#__PURE__*/_jsx(Colon, {}), typeView, empty, tools]
|
|
175
176
|
}))
|
|
176
|
-
});
|
|
177
|
+
}));
|
|
177
178
|
}
|
|
178
179
|
export var Label = _ref2 => {
|
|
179
180
|
var {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uiw/react-json-view",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "JSON viewer for react.",
|
|
5
5
|
"main": "cjs/index.js",
|
|
6
6
|
"module": "esm/index.js",
|
|
@@ -53,13 +53,25 @@
|
|
|
53
53
|
"esm"
|
|
54
54
|
],
|
|
55
55
|
"keywords": [
|
|
56
|
-
"
|
|
57
|
-
"
|
|
58
|
-
"
|
|
59
|
-
"
|
|
60
|
-
"
|
|
61
|
-
"
|
|
62
|
-
"
|
|
56
|
+
"array-viewer",
|
|
57
|
+
"component",
|
|
58
|
+
"interactive",
|
|
59
|
+
"interactive-json",
|
|
60
|
+
"json",
|
|
61
|
+
"json-component",
|
|
62
|
+
"json-display",
|
|
63
|
+
"json-tree",
|
|
64
|
+
"json-view",
|
|
65
|
+
"json-viewer",
|
|
66
|
+
"json-inspector",
|
|
67
|
+
"json-tree",
|
|
68
|
+
"react",
|
|
69
|
+
"react-component",
|
|
70
|
+
"react-json",
|
|
71
|
+
"theme",
|
|
72
|
+
"tree",
|
|
73
|
+
"tree-view",
|
|
74
|
+
"treeview"
|
|
63
75
|
],
|
|
64
76
|
"devDependencies": {
|
|
65
77
|
"react": "^18.2.0",
|