@uiw/react-json-view 2.0.0-alpha.39 → 2.0.0-alpha.40
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 +55 -44
- package/cjs/comps/KeyValues.js +8 -2
- package/cjs/comps/NestedClose.js +8 -2
- package/cjs/index.js +2 -7
- package/esm/comps/KeyValues.js +8 -2
- package/esm/comps/NestedClose.js +8 -2
- package/esm/index.js +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,33 +1,36 @@
|
|
|
1
1
|
<div markdown="1">
|
|
2
2
|
<sup>Using <a href="https://wangchujiang.com/#/app" target="_blank">my app</a> is also a way to <a href="https://wangchujiang.com/#/sponsor" target="_blank">support</a> me:</sup>
|
|
3
3
|
<br>
|
|
4
|
-
<a target="_blank" href="https://apps.apple.com/app/
|
|
5
|
-
<a target="_blank" href="https://apps.apple.com/app/
|
|
6
|
-
<a target="_blank" href="https://
|
|
7
|
-
<a target="_blank" href="https://apps.apple.com/app/
|
|
8
|
-
<a target="_blank" href="https://apps.apple.com/app/
|
|
9
|
-
<a target="_blank" href="https://
|
|
10
|
-
<a target="_blank" href="https://apps.apple.com/app/
|
|
11
|
-
<a target="_blank" href="https://apps.apple.com/app/
|
|
12
|
-
<a target="_blank" href="https://apps.apple.com/app/
|
|
13
|
-
<a target="_blank" href="https://apps.apple.com/app/
|
|
14
|
-
<a target="_blank" href="https://apps.apple.com/app/
|
|
15
|
-
<a target="_blank" href="https://apps.apple.com/app/
|
|
16
|
-
<a target="_blank" href="https://apps.apple.com/app/
|
|
17
|
-
<a target="_blank" href="https://apps.apple.com/app/
|
|
18
|
-
<a target="_blank" href="https://apps.apple.com/app/
|
|
19
|
-
<a target="_blank" href="https://apps.apple.com/app/
|
|
20
|
-
<a target="_blank" href="https://apps.apple.com/app/
|
|
21
|
-
<a target="_blank" href="https://apps.apple.com/app/
|
|
22
|
-
<a target="_blank" href="https://apps.apple.com/app/
|
|
23
|
-
<a target="_blank" href="https://apps.apple.com/app/
|
|
24
|
-
<a target="_blank" href="https://apps.apple.com/app/
|
|
25
|
-
<a target="_blank" href="https://apps.apple.com/app/
|
|
26
|
-
<a target="_blank" href="https://apps.apple.com/app/
|
|
27
|
-
<a target="_blank" href="https://apps.apple.com/app/
|
|
28
|
-
<a target="_blank" href="https://apps.apple.com/app/
|
|
29
|
-
<a target="_blank" href="https://apps.apple.com/app/
|
|
30
|
-
<a target="_blank" href="https://apps.apple.com/app/
|
|
4
|
+
<a target="_blank" href="https://apps.apple.com/app/Deskmark/6755948110" title="Deskmark for macOS"><img alt="Deskmark" height="52" width="52" src="https://wangchujiang.com/appicon/deskmark.png"></a>
|
|
5
|
+
<a target="_blank" href="https://apps.apple.com/app/Keyzer/6500434773" title="Keyzer for macOS"><img alt="Keyzer" height="52" width="52" src="https://wangchujiang.com/appicon/keyzer.png"></a>
|
|
6
|
+
<a target="_blank" href="https://github.com/jaywcjlove/vidwall-hub" title="Vidwall Hub for macOS"><img alt="Vidwall Hub" height="52" width="52" src="https://wangchujiang.com/appicon/vidwall-hub.png"></a>
|
|
7
|
+
<a target="_blank" href="https://apps.apple.com/app/VidCrop/6752624705" title="VidCrop for macOS"><img alt="VidCrop" height="52" width="52" src="https://wangchujiang.com/appicon/vidcrop.png"></a>
|
|
8
|
+
<a target="_blank" href="https://apps.apple.com/app/Vidwall/6747587746" title="Vidwall for macOS"><img alt="Vidwall" height="52" width="52" src="https://wangchujiang.com/appicon/vidwall.png"></a>
|
|
9
|
+
<a target="_blank" href="https://wangchujiang.com/mousio-hint/" title="Mousio Hint for macOS"><img alt="Mousio Hint" height="52" width="52" src="https://wangchujiang.com/appicon/mousio-hint.png"></a>
|
|
10
|
+
<a target="_blank" href="https://apps.apple.com/app/6746747327" title="Mousio for macOS"><img alt="Mousio" height="52" width="52" src="https://wangchujiang.com/appicon/mousio.png"></a>
|
|
11
|
+
<a target="_blank" href="https://apps.apple.com/app/6745227444" title="Musicer for macOS"><img alt="Musicer" height="52" width="52" src="https://wangchujiang.com/appicon/musicer.png"></a>
|
|
12
|
+
<a target="_blank" href="https://apps.apple.com/app/6743841447" title="Audioer for macOS"><img alt="Audioer" height="52" width="52" src="https://wangchujiang.com/appicon/audioer.png"></a>
|
|
13
|
+
<a target="_blank" href="https://apps.apple.com/app/6744690194" title="FileSentinel for macOS"><img alt="FileSentinel" height="52" width="52" src="https://wangchujiang.com/appicon/file-sentinel.png"></a>
|
|
14
|
+
<a target="_blank" href="https://apps.apple.com/app/6743495172" title="FocusCursor for macOS"><img alt="FocusCursor" height="52" width="52" src="https://wangchujiang.com/appicon/focus-cursor.png"></a>
|
|
15
|
+
<a target="_blank" href="https://apps.apple.com/app/6742680573" title="Videoer for macOS"><img alt="Videoer" height="52" width="52" src="https://wangchujiang.com/appicon/videoer.png"></a>
|
|
16
|
+
<a target="_blank" href="https://apps.apple.com/app/6740425504" title="KeyClicker for macOS"><img alt="KeyClicker" height="52" width="52" src="https://wangchujiang.com/appicon/key-clicker.png"></a>
|
|
17
|
+
<a target="_blank" href="https://apps.apple.com/app/6739052447" title="DayBar for macOS"><img alt="DayBar" height="52" width="52" src="https://wangchujiang.com/appicon/daybar.png"></a>
|
|
18
|
+
<a target="_blank" href="https://apps.apple.com/app/6739444407" title="Iconed for macOS"><img alt="Iconed" height="52" width="52" src="https://wangchujiang.com/appicon/iconed.png"></a>
|
|
19
|
+
<a target="_blank" href="https://apps.apple.com/app/6737160756" title="Mousio for macOS"><img alt="Mousio" height="52" width="52" src="https://wangchujiang.com/appicon/rightmenu-master.png"></a>
|
|
20
|
+
<a target="_blank" href="https://apps.apple.com/app/6723903021" title="Paste Quick for macOS"><img alt="Quick RSS" height="52" width="52" src="https://wangchujiang.com/appicon/paste-quick.png"></a>
|
|
21
|
+
<a target="_blank" href="https://apps.apple.com/app/6670696072" title="Quick RSS for macOS/iOS"><img alt="Quick RSS" height="52" width="52" src="https://wangchujiang.com/appicon/quick-rss.png"></a>
|
|
22
|
+
<a target="_blank" href="https://apps.apple.com/app/6670167443" title="Web Serve for macOS"><img alt="Web Serve" height="52" width="52" src="https://wangchujiang.com/appicon/web-serve.png"></a>
|
|
23
|
+
<a target="_blank" href="https://apps.apple.com/app/6503953628" title="Copybook Generator for macOS/iOS"><img alt="Copybook Generator" height="52" width="52" src="https://wangchujiang.com/appicon/copybook-generator.png"></a>
|
|
24
|
+
<a target="_blank" href="https://apps.apple.com/app/6471227008" title="DevTutor for macOS/iOS"><img alt="DevTutor for SwiftUI" height="52" width="52" src="https://wangchujiang.com/appicon/devtutor.png"></a>
|
|
25
|
+
<a target="_blank" href="https://apps.apple.com/app/6479819388" title="RegexMate for macOS/iOS"><img alt="RegexMate" height="52" width="52" src="https://wangchujiang.com/appicon/regex-mate.png"></a>
|
|
26
|
+
<a target="_blank" href="https://apps.apple.com/app/6479194014" title="Time Passage for macOS/iOS"><img alt="Time Passage" height="52" width="52" src="https://wangchujiang.com/appicon/time-passage.png"></a>
|
|
27
|
+
<a target="_blank" href="https://apps.apple.com/app/6478772538" title="IconizeFolder for macOS"><img alt="Iconize Folder" height="52" width="52" src="https://wangchujiang.com/appicon/iconize-folder.png"></a>
|
|
28
|
+
<a target="_blank" href="https://apps.apple.com/app/6478511402" title="Textsound Saver for macOS/iOS"><img alt="Textsound Saver" height="52" width="52" src="https://wangchujiang.com/appicon/textsound-saver.png"></a>
|
|
29
|
+
<a target="_blank" href="https://apps.apple.com/app/6476924627" title="Create Custom Symbols for macOS"><img alt="Create Custom Symbols" height="52" width="52" src="https://wangchujiang.com/appicon/create-custom-symbols.png"></a>
|
|
30
|
+
<a target="_blank" href="https://apps.apple.com/app/6476452351" title="DevHub for macOS"><img alt="DevHub" height="52" width="52" src="https://wangchujiang.com/appicon/devhub.png"></a>
|
|
31
|
+
<a target="_blank" href="https://apps.apple.com/app/6476400184" title="Resume Revise for macOS"><img alt="Resume Revise" height="52" width="52" src="https://wangchujiang.com/appicon/resume-revise.png"></a>
|
|
32
|
+
<a target="_blank" href="https://apps.apple.com/app/6472593276" title="Palette Genius for macOS"><img alt="Palette Genius" height="52" width="52" src="https://wangchujiang.com/appicon/palette-genius.png"></a>
|
|
33
|
+
<a target="_blank" href="https://apps.apple.com/app/6470879005" title="Symbol Scribe for macOS"><img alt="Symbol Scribe" height="52" width="52" src="https://wangchujiang.com/appicon/symbol-scribe.png"></a>
|
|
31
34
|
</div>
|
|
32
35
|
<hr>
|
|
33
36
|
|
|
@@ -744,8 +747,11 @@ export default function Demo() {
|
|
|
744
747
|
|
|
745
748
|
## Default Collapse/Expand
|
|
746
749
|
|
|
750
|
+
Determines whether the node should be expanded on the first render. The default value of `collapsed` is `false`.
|
|
751
|
+
If both `collapsed` and `shouldExpandNodeInitially` are set, `collapsed` takes precedence; `shouldExpandNodeInitially` only takes effect when `collapsed` is `false`.
|
|
752
|
+
|
|
747
753
|
```tsx mdx:preview
|
|
748
|
-
import React from 'react';
|
|
754
|
+
import React, { useState } from 'react';
|
|
749
755
|
import JsonView from '@uiw/react-json-view';
|
|
750
756
|
const object = {
|
|
751
757
|
string: 'Lorem ipsum dolor sit amet',
|
|
@@ -762,21 +768,26 @@ const object = {
|
|
|
762
768
|
],
|
|
763
769
|
}
|
|
764
770
|
export default function Demo() {
|
|
771
|
+
const [collapsed, setCollapsed] = useState(false)
|
|
765
772
|
return (
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
collapsed={2}
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
}
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
773
|
+
<>
|
|
774
|
+
<input type="checkbox" id="collapsed" checked={collapsed} onChange={(e) => setCollapsed(e.target.checked)} />
|
|
775
|
+
<label for="collapsed"> collapsed={collapsed == true ? "false" : "2"} </label>
|
|
776
|
+
<JsonView
|
|
777
|
+
value={object}
|
|
778
|
+
collapsed={collapsed == true ? false : 2}
|
|
779
|
+
shouldExpandNodeInitially={(isExpanded, { value, keys, level }) => {
|
|
780
|
+
if (keys.length > 0 && keys[0] == "object") {
|
|
781
|
+
return false
|
|
782
|
+
}
|
|
783
|
+
return isExpanded
|
|
784
|
+
}}
|
|
785
|
+
style={{
|
|
786
|
+
'--w-rjv-background-color': '#ffffff',
|
|
787
|
+
}}
|
|
788
|
+
>
|
|
789
|
+
</JsonView>
|
|
790
|
+
</>
|
|
780
791
|
)
|
|
781
792
|
}
|
|
782
793
|
```
|
|
@@ -866,13 +877,13 @@ export default function Demo() {
|
|
|
866
877
|
if (!isExpanded) {
|
|
867
878
|
return (
|
|
868
879
|
<svg viewBox="0 0 24 24" {...svgProps}>
|
|
869
|
-
<path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,
|
|
880
|
+
<path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M7,13H17V11H7" />
|
|
870
881
|
</svg>
|
|
871
882
|
);
|
|
872
883
|
}
|
|
873
884
|
return (
|
|
874
885
|
<svg viewBox="0 0 24 24" {...svgProps}>
|
|
875
|
-
<path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,
|
|
886
|
+
<path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z" />
|
|
876
887
|
</svg>
|
|
877
888
|
);
|
|
878
889
|
}}
|
package/cjs/comps/KeyValues.js
CHANGED
|
@@ -48,8 +48,14 @@ var KeyValues = exports.KeyValues = function KeyValues(props) {
|
|
|
48
48
|
keyName: keyName,
|
|
49
49
|
parentValue: parentValue
|
|
50
50
|
});
|
|
51
|
-
if (
|
|
52
|
-
|
|
51
|
+
if (shouldExpandNodeInitially && collapsed === false) {
|
|
52
|
+
if (expands[expandKey] === undefined && !shouldExpand) {
|
|
53
|
+
return null;
|
|
54
|
+
}
|
|
55
|
+
} else {
|
|
56
|
+
if (expands[expandKey] === undefined && shouldExpand) {
|
|
57
|
+
return null;
|
|
58
|
+
}
|
|
53
59
|
}
|
|
54
60
|
if (isExpanded) {
|
|
55
61
|
return null;
|
package/cjs/comps/NestedClose.js
CHANGED
|
@@ -32,8 +32,14 @@ var NestedClose = exports.NestedClose = function NestedClose(props) {
|
|
|
32
32
|
keyName: keyName,
|
|
33
33
|
parentValue: parentValue
|
|
34
34
|
});
|
|
35
|
-
if (
|
|
36
|
-
|
|
35
|
+
if (shouldExpandNodeInitially && collapsed === false) {
|
|
36
|
+
if (expands[expandKey] === undefined && !shouldExpand) {
|
|
37
|
+
return null;
|
|
38
|
+
}
|
|
39
|
+
} else {
|
|
40
|
+
if (expands[expandKey] === undefined && shouldExpand) {
|
|
41
|
+
return null;
|
|
42
|
+
}
|
|
37
43
|
}
|
|
38
44
|
var len = Object.keys(value).length;
|
|
39
45
|
if (isExpanded || len === 0) {
|
package/cjs/index.js
CHANGED
|
@@ -119,10 +119,7 @@ var JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
119
119
|
children = props.children,
|
|
120
120
|
_props$collapsed = props.collapsed,
|
|
121
121
|
collapsed = _props$collapsed === void 0 ? false : _props$collapsed,
|
|
122
|
-
|
|
123
|
-
shouldExpandNodeInitially = _props$shouldExpandNo === void 0 ? function () {
|
|
124
|
-
return true;
|
|
125
|
-
} : _props$shouldExpandNo,
|
|
122
|
+
shouldExpandNodeInitially = props.shouldExpandNodeInitially,
|
|
126
123
|
_props$indentWidth = props.indentWidth,
|
|
127
124
|
indentWidth = _props$indentWidth === void 0 ? 15 : _props$indentWidth,
|
|
128
125
|
_props$displayObjectS = props.displayObjectSize,
|
|
@@ -155,9 +152,7 @@ var JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
155
152
|
value: value,
|
|
156
153
|
objectSortKeys: objectSortKeys,
|
|
157
154
|
indentWidth: indentWidth,
|
|
158
|
-
shouldExpandNodeInitially: collapsed === false ? shouldExpandNodeInitially :
|
|
159
|
-
return false;
|
|
160
|
-
},
|
|
155
|
+
shouldExpandNodeInitially: collapsed === false ? shouldExpandNodeInitially : undefined,
|
|
161
156
|
displayObjectSize: displayObjectSize,
|
|
162
157
|
collapsed: collapsed,
|
|
163
158
|
enableClipboard: enableClipboard,
|
package/esm/comps/KeyValues.js
CHANGED
|
@@ -38,8 +38,14 @@ export var KeyValues = props => {
|
|
|
38
38
|
keyName,
|
|
39
39
|
parentValue
|
|
40
40
|
});
|
|
41
|
-
if (
|
|
42
|
-
|
|
41
|
+
if (shouldExpandNodeInitially && collapsed === false) {
|
|
42
|
+
if (expands[expandKey] === undefined && !shouldExpand) {
|
|
43
|
+
return null;
|
|
44
|
+
}
|
|
45
|
+
} else {
|
|
46
|
+
if (expands[expandKey] === undefined && shouldExpand) {
|
|
47
|
+
return null;
|
|
48
|
+
}
|
|
43
49
|
}
|
|
44
50
|
if (isExpanded) {
|
|
45
51
|
return null;
|
package/esm/comps/NestedClose.js
CHANGED
|
@@ -27,8 +27,14 @@ export var NestedClose = props => {
|
|
|
27
27
|
keyName,
|
|
28
28
|
parentValue
|
|
29
29
|
});
|
|
30
|
-
if (
|
|
31
|
-
|
|
30
|
+
if (shouldExpandNodeInitially && collapsed === false) {
|
|
31
|
+
if (expands[expandKey] === undefined && !shouldExpand) {
|
|
32
|
+
return null;
|
|
33
|
+
}
|
|
34
|
+
} else {
|
|
35
|
+
if (expands[expandKey] === undefined && shouldExpand) {
|
|
36
|
+
return null;
|
|
37
|
+
}
|
|
32
38
|
}
|
|
33
39
|
var len = Object.keys(value).length;
|
|
34
40
|
if (isExpanded || len === 0) {
|
package/esm/index.js
CHANGED
|
@@ -45,7 +45,7 @@ var JsonView = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
45
45
|
value,
|
|
46
46
|
children,
|
|
47
47
|
collapsed = false,
|
|
48
|
-
shouldExpandNodeInitially
|
|
48
|
+
shouldExpandNodeInitially,
|
|
49
49
|
indentWidth = 15,
|
|
50
50
|
displayObjectSize = true,
|
|
51
51
|
shortenTextAfterLength = 30,
|
|
@@ -72,7 +72,7 @@ var JsonView = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
72
72
|
value,
|
|
73
73
|
objectSortKeys,
|
|
74
74
|
indentWidth,
|
|
75
|
-
shouldExpandNodeInitially: collapsed === false ? shouldExpandNodeInitially :
|
|
75
|
+
shouldExpandNodeInitially: collapsed === false ? shouldExpandNodeInitially : undefined,
|
|
76
76
|
displayObjectSize,
|
|
77
77
|
collapsed,
|
|
78
78
|
enableClipboard,
|