@uiw/react-json-view 2.0.0-alpha.41 → 2.0.0-alpha.43
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 +73 -50
- package/cjs/index.d.ts +5 -0
- package/cjs/index.js +202 -2
- package/cjs/types/index.js +12 -3
- package/esm/Container.js +11 -9
- package/esm/arrow/TriangleArrow.js +1 -3
- package/esm/arrow/TriangleSolidArrow.js +1 -3
- package/esm/comps/Copied.js +18 -20
- package/esm/comps/KeyValues.js +34 -35
- package/esm/comps/NestedClose.js +10 -12
- package/esm/comps/NestedOpen.js +12 -14
- package/esm/comps/Value.js +3 -5
- package/esm/editor/KeyName.js +12 -16
- package/esm/editor/index.js +9 -8
- package/esm/index.d.ts +5 -0
- package/esm/index.js +37 -19
- package/esm/section/Copied.js +3 -3
- package/esm/section/CountInfo.js +13 -17
- package/esm/section/CountInfoExtra.js +11 -14
- package/esm/section/Ellipsis.js +11 -15
- package/esm/section/KeyName.js +13 -17
- package/esm/section/Row.js +14 -17
- package/esm/store/Expands.js +3 -5
- package/esm/store/Section.js +3 -5
- package/esm/store/ShowTools.js +3 -5
- package/esm/store/Symbols.js +3 -5
- package/esm/store/Types.js +3 -5
- package/esm/store.js +21 -11
- package/esm/symbol/Arrow.js +3 -3
- package/esm/symbol/BraceLeft.js +3 -3
- package/esm/symbol/BraceRight.js +3 -3
- package/esm/symbol/BracketsLeft.js +3 -3
- package/esm/symbol/BracketsRight.js +3 -3
- package/esm/symbol/Colon.js +3 -3
- package/esm/symbol/Quote.js +3 -3
- package/esm/symbol/ValueQuote.js +3 -3
- package/esm/symbol/index.js +65 -89
- package/esm/types/Bigint.js +3 -3
- package/esm/types/Date.js +3 -3
- package/esm/types/False.js +3 -3
- package/esm/types/Float.js +3 -3
- package/esm/types/Int.js +3 -3
- package/esm/types/Map.js +3 -3
- package/esm/types/Nan.js +3 -3
- package/esm/types/Null.js +3 -3
- package/esm/types/Set.js +3 -3
- package/esm/types/String.js +3 -3
- package/esm/types/True.js +3 -3
- package/esm/types/Undefined.js +3 -3
- package/esm/types/Url.js +3 -3
- package/esm/types/index.js +136 -175
- package/esm/utils/useHighlight.js +3 -5
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,44 +1,64 @@
|
|
|
1
|
+
<div align="center" markdown="1">
|
|
2
|
+
<sup>Special thanks to:</sup>
|
|
3
|
+
<br>
|
|
4
|
+
<br>
|
|
5
|
+
|
|
6
|
+
<a href="https://apps.apple.com/app/apple-store/id6757860829?pt=80185800&ct=jay&mt=8">
|
|
7
|
+
<img alt="SubList" width="400" src="https://jaywcjlove.github.io/sponsor/SubList.jpg">
|
|
8
|
+
</a>
|
|
9
|
+
<br>
|
|
10
|
+
<a href="https://apps.apple.com/app/apple-store/id6757860829?pt=80185800&ct=jay&mt=8">
|
|
11
|
+
SubList - Bill Reminder & Renewal Alerts
|
|
12
|
+
</a>
|
|
13
|
+
<br><br>
|
|
14
|
+
|
|
15
|
+
</div>
|
|
16
|
+
<hr>
|
|
17
|
+
|
|
1
18
|
<div markdown="1">
|
|
2
19
|
<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
20
|
<br>
|
|
4
|
-
<a target="_blank" href="https://
|
|
5
|
-
<a target="_blank" href="https://
|
|
6
|
-
<a target="_blank" href="https://
|
|
7
|
-
<a target="_blank" href="https://github.
|
|
8
|
-
<a target="_blank" href="https://
|
|
9
|
-
<a target="_blank" href="https://
|
|
10
|
-
<a target="_blank" href="https://
|
|
11
|
-
<a target="_blank" href="https://
|
|
12
|
-
<a target="_blank" href="https://
|
|
13
|
-
<a target="_blank" href="https://
|
|
14
|
-
<a target="_blank" href="https://
|
|
15
|
-
<a target="_blank" href="https://
|
|
16
|
-
<a target="_blank" href="https://
|
|
17
|
-
<a target="_blank" href="https://
|
|
18
|
-
<a target="_blank" href="https://
|
|
19
|
-
<a target="_blank" href="https://
|
|
20
|
-
<a target="_blank" href="https://
|
|
21
|
-
<a target="_blank" href="https://
|
|
22
|
-
<a target="_blank" href="https://
|
|
23
|
-
<a target="_blank" href="https://
|
|
24
|
-
<a target="_blank" href="https://
|
|
25
|
-
<a target="_blank" href="https://
|
|
26
|
-
<a target="_blank" href="https://
|
|
27
|
-
<a target="_blank" href="https://
|
|
28
|
-
<a target="_blank" href="https://
|
|
29
|
-
<a target="_blank" href="https://
|
|
30
|
-
<a target="_blank" href="https://
|
|
31
|
-
<a target="_blank" href="https://
|
|
32
|
-
<a target="_blank" href="https://
|
|
33
|
-
<a target="_blank" href="https://
|
|
34
|
-
<a target="_blank" href="https://
|
|
21
|
+
<a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6766860898" title="Zipora: Zip/RAR/7Z Unarchiver"><img alt="Zipora: Zip/RAR/7Z Unarchiver" height="52" src="https://wangchujiang.com/appicon/zipora.png"></a>
|
|
22
|
+
<a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6758053530" title="Scap: Screenshot & Markup Edit for macOS"><img alt="Scap: Screenshot & Markup Edit" height="52" src="https://wangchujiang.com/appicon/scap.png"></a>
|
|
23
|
+
<a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6757317079" title="Screen Test for macOS"><img alt="Screen Test" height="52" src="https://wangchujiang.com/appicon/screen-test.png"></a>
|
|
24
|
+
<a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6755948110" title="Deskmark for macOS"><img alt="Deskmark" height="52" src="https://wangchujiang.com/appicon/deskmark.png"></a>
|
|
25
|
+
<a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6500434773" title="Keyzer for macOS"><img alt="Keyzer" height="52" src="https://wangchujiang.com/appicon/keyzer.png"></a>
|
|
26
|
+
<a target="_blank" href="https://github.com/jaywcjlove/vidwall-hub" title="Vidwall Hub for macOS"><img alt="Vidwall Hub" height="52" src="https://wangchujiang.com/appicon/vidwall-hub.png"></a>
|
|
27
|
+
<a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6752624705" title="VidCrop for macOS"><img alt="VidCrop" height="52" src="https://wangchujiang.com/appicon/vidcrop.png"></a>
|
|
28
|
+
<a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6747587746" title="Vidwall for macOS"><img alt="Vidwall" height="52" src="https://wangchujiang.com/appicon/vidwall.png"></a>
|
|
29
|
+
<a target="_blank" href="https://wangchujiang.com/mousio-hint/" title="Mousio Hint for macOS"><img alt="Mousio Hint" height="52" src="https://wangchujiang.com/appicon/mousio-hint.png"></a>
|
|
30
|
+
<a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6746747327" title="Mousio for macOS"><img alt="Mousio" height="52" src="https://wangchujiang.com/appicon/mousio.png"></a>
|
|
31
|
+
<a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6745227444" title="Musicer for macOS"><img alt="Musicer" height="52" src="https://wangchujiang.com/appicon/musicer.png"></a>
|
|
32
|
+
<a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6743841447" title="Audioer for macOS"><img alt="Audioer" height="52" src="https://wangchujiang.com/appicon/audioer.png"></a>
|
|
33
|
+
<a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6744690194" title="FileSentinel for macOS"><img alt="FileSentinel" height="52" src="https://wangchujiang.com/appicon/file-sentinel.png"></a>
|
|
34
|
+
<a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6743495172" title="FocusCursor for macOS"><img alt="FocusCursor" height="52" src="https://wangchujiang.com/appicon/focus-cursor.png"></a>
|
|
35
|
+
<a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6742680573" title="Videoer for macOS"><img alt="Videoer" height="52" src="https://wangchujiang.com/appicon/videoer.png"></a>
|
|
36
|
+
<a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6740425504" title="KeyClicker for macOS"><img alt="KeyClicker" height="52" src="https://wangchujiang.com/appicon/key-clicker.png"></a>
|
|
37
|
+
<a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6739052447" title="DayBar for macOS"><img alt="DayBar" height="52" src="https://wangchujiang.com/appicon/daybar.png"></a>
|
|
38
|
+
<a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6739444407" title="Iconed for macOS"><img alt="Iconed" height="52" src="https://wangchujiang.com/appicon/iconed.png"></a>
|
|
39
|
+
<a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6737160756" title="Menuist for macOS"><img alt="Menuist" height="52" src="https://wangchujiang.com/appicon/rightmenu-master.png"></a>
|
|
40
|
+
<a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6723903021" title="Paste Quick for macOS"><img alt="Quick RSS" height="52" src="https://wangchujiang.com/appicon/paste-quick.png"></a>
|
|
41
|
+
<a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6670696072&platform=mac" title="Quick RSS for macOS/iOS"><img alt="Quick RSS" height="52" src="https://wangchujiang.com/appicon/quick-rss.png"></a>
|
|
42
|
+
<a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6670167443" title="Web Serve for macOS"><img alt="Web Serve" height="52" src="https://wangchujiang.com/appicon/web-serve.png"></a>
|
|
43
|
+
<a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6503953628&platform=mac" title="Copybook Generator for macOS/iOS"><img alt="Copybook Generator" height="52" src="https://wangchujiang.com/appicon/copybook-generator.png"></a>
|
|
44
|
+
<a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6471227008&platform=mac" title="DevTutor for macOS/iOS"><img alt="DevTutor for SwiftUI" height="52" src="https://wangchujiang.com/appicon/devtutor.png"></a>
|
|
45
|
+
<a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6479819388&platform=mac" title="RegexMate for macOS/iOS"><img alt="RegexMate" height="52" src="https://wangchujiang.com/appicon/regex-mate.png"></a>
|
|
46
|
+
<a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6479194014&platform=mac" title="Time Passage for macOS/iOS"><img alt="Time Passage" height="52" src="https://wangchujiang.com/appicon/time-passage.png"></a>
|
|
47
|
+
<a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6478772538" title="IconizeFolder for macOS"><img alt="Iconize Folder" height="52" src="https://wangchujiang.com/appicon/iconize-folder.png"></a>
|
|
48
|
+
<a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6478511402&platform=mac" title="Textsound Saver for macOS/iOS"><img alt="Textsound Saver" height="52" src="https://wangchujiang.com/appicon/textsound-saver.png"></a>
|
|
49
|
+
<a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6476924627" title="Create Custom Symbols for macOS"><img alt="Create Custom Symbols" height="52" src="https://wangchujiang.com/appicon/create-custom-symbols.png"></a>
|
|
50
|
+
<a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6476452351" title="DevHub for macOS"><img alt="DevHub" height="52" src="https://wangchujiang.com/appicon/devhub.png"></a>
|
|
51
|
+
<a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6476400184" title="Resume Revise for macOS"><img alt="Resume Revise" height="52" src="https://wangchujiang.com/appicon/resume-revise.png"></a>
|
|
52
|
+
<a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6472593276" title="Palette Genius for macOS"><img alt="Palette Genius" height="52" src="https://wangchujiang.com/appicon/palette-genius.png"></a>
|
|
53
|
+
<a target="_blank" href="https://jaywcjlove.github.io/maslink/?id=6470879005" title="Symbol Scribe for macOS"><img alt="Symbol Scribe" height="52" src="https://wangchujiang.com/appicon/symbol-scribe.png"></a>
|
|
35
54
|
</div>
|
|
36
55
|
<hr>
|
|
37
56
|
|
|
38
57
|
react-json-view
|
|
39
58
|
===
|
|
40
59
|
|
|
41
|
-
[](https://jaywcjlove.github.io/#/sponsor)
|
|
61
|
+
[](https://x.com/jaywcjlove)
|
|
42
62
|
[](https://github.com/uiwjs/react-json-view/actions/workflows/ci.yml)
|
|
43
63
|
[](https://www.npmjs.com/package/@uiw/react-json-view)
|
|
44
64
|
[](https://www.npmjs.com/package/@uiw/react-json-view)
|
|
@@ -119,7 +139,7 @@ const example = {
|
|
|
119
139
|
|
|
120
140
|
## Theme
|
|
121
141
|
|
|
122
|
-
By default, the `lightTheme` light theme is used, and a `darkTheme` dark theme configuration is built in
|
|
142
|
+
By default, the `lightTheme` light theme is used, and a `darkTheme` dark theme configuration is built in. The library provides multiple built-in themes including dark, light, nord, github themes, gruvbox, vscode, monokai, and basic themes.
|
|
123
143
|
|
|
124
144
|
```tsx mdx:preview
|
|
125
145
|
import React from 'react';
|
|
@@ -163,7 +183,7 @@ export default function Demo() {
|
|
|
163
183
|
}
|
|
164
184
|
```
|
|
165
185
|
|
|
166
|
-
Example of custom `vscode` theme styles:
|
|
186
|
+
Example of custom `vscode` theme styles using CSS custom properties:
|
|
167
187
|
|
|
168
188
|
```tsx mdx:preview
|
|
169
189
|
import React from 'react';
|
|
@@ -221,7 +241,7 @@ export default function Demo() {
|
|
|
221
241
|
|
|
222
242
|
## Online Editing Theme
|
|
223
243
|
|
|
224
|
-
|
|
244
|
+
Interactive theme customization example with real-time color picker. You can modify theme colors and see changes instantly. Check the full interactive editor in the [documentation website](https://uiwjs.github.io/react-json-view/)
|
|
225
245
|
|
|
226
246
|
```tsx mdx:preview:&title=Online Editing Theme
|
|
227
247
|
import React, { useState, useEffect } from 'react';
|
|
@@ -349,9 +369,9 @@ export default function Demo() {
|
|
|
349
369
|
}
|
|
350
370
|
```
|
|
351
371
|
|
|
352
|
-
##
|
|
372
|
+
## Custom Rendering
|
|
353
373
|
|
|
354
|
-
**`v2`** version allows flexible customization of each "part" by providing small sub-components for customization, including value and type components: `<Bigint />`, `<Date />`, `<False />`, `<Float />`, `<Int />`, `<Map />`, `<Nan />`, `<Null />`, `<Set />`, `<String />`, `<True />`, `<Undefined />`, `<Url />`, and symbol components: `<ValueQuote />`, `<Arrow />`, `<Colon />`, `<Quote />`, `<BraceLeft />`, `<BraceRight />`, `<BracketsLeft />`, `<BracketsRight />`.
|
|
374
|
+
**`v2`** version allows flexible customization of each "part" by providing small sub-components for customization, including value and type components: `<Bigint />`, `<Date />`, `<False />`, `<Float />`, `<Int />`, `<Map />`, `<Nan />`, `<Null />`, `<Set />`, `<String />`, `<True />`, `<Undefined />`, `<Url />`, and symbol components: `<ValueQuote />`, `<Arrow />`, `<Colon />`, `<Quote />`, `<BraceLeft />`, `<BraceRight />`, `<BracketsLeft />`, `<BracketsRight />`. This example shows custom rendering of string values as images and custom colon symbols.
|
|
355
375
|
|
|
356
376
|
```tsx mdx:preview
|
|
357
377
|
import React from 'react';
|
|
@@ -390,7 +410,7 @@ export default function Demo() {
|
|
|
390
410
|
}
|
|
391
411
|
```
|
|
392
412
|
|
|
393
|
-
**Support
|
|
413
|
+
**URL Type Support** - Automatic recognition and display of URL objects with proper styling.
|
|
394
414
|
|
|
395
415
|
```tsx mdx:preview
|
|
396
416
|
import React from 'react';
|
|
@@ -412,7 +432,7 @@ export default function Demo() {
|
|
|
412
432
|
}
|
|
413
433
|
```
|
|
414
434
|
|
|
415
|
-
Supports
|
|
435
|
+
**Component Customization** - Example showing custom copy functionality and URL rendering with clickable links. Supports partial customizations such as: `<Copied />`, `<CountInfo />`, `<CountInfoExtra />`, `<Ellipsis />`, `<KeyName />`, `<Row />`
|
|
416
436
|
|
|
417
437
|
```tsx mdx:preview
|
|
418
438
|
import React, { Fragment } from 'react';
|
|
@@ -465,7 +485,7 @@ export default function Demo() {
|
|
|
465
485
|
}
|
|
466
486
|
```
|
|
467
487
|
|
|
468
|
-
|
|
488
|
+
**Advanced Customization** - Deep customization example showing how to hide type indicators and quotes for a cleaner MongoDB-like object display ([#19](https://github.com/uiwjs/react-json-view/issues/19))
|
|
469
489
|
|
|
470
490
|
```tsx mdx:preview
|
|
471
491
|
import React from 'react';
|
|
@@ -518,7 +538,7 @@ export default function Demo() {
|
|
|
518
538
|
}
|
|
519
539
|
```
|
|
520
540
|
|
|
521
|
-
Inspector
|
|
541
|
+
**Array Inspector Style** - Example showing how to create a table-like inspector view for arrays, similar to browser DevTools object inspection.
|
|
522
542
|
|
|
523
543
|
```tsx mdx:preview
|
|
524
544
|
import React from 'react';
|
|
@@ -615,7 +635,7 @@ export default function Demo() {
|
|
|
615
635
|
}
|
|
616
636
|
```
|
|
617
637
|
|
|
618
|
-
Passing **as="tagName"** will automatically infer the type.
|
|
638
|
+
**Component Type Inference** - Passing **as="tagName"** will automatically infer the TypeScript type for better type safety.
|
|
619
639
|
|
|
620
640
|
```tsx
|
|
621
641
|
<JsonView.CountInfo
|
|
@@ -629,7 +649,7 @@ Passing **as="tagName"** will automatically infer the type.
|
|
|
629
649
|
/>
|
|
630
650
|
```
|
|
631
651
|
|
|
632
|
-
|
|
652
|
+
**Row Click Events** - Example showing how to add click event handlers to data rows for interactive functionality.
|
|
633
653
|
|
|
634
654
|
```tsx mdx:preview
|
|
635
655
|
import React from 'react';
|
|
@@ -677,6 +697,8 @@ export default function Demo() {
|
|
|
677
697
|
|
|
678
698
|
## Highlight Updates
|
|
679
699
|
|
|
700
|
+
Demonstration of automatic highlighting when JSON values change. The timer value updates every second and gets highlighted to show the change.
|
|
701
|
+
|
|
680
702
|
```tsx mdx:preview
|
|
681
703
|
import React, { useState, useEffect } from 'react';
|
|
682
704
|
import JsonView from '@uiw/react-json-view';
|
|
@@ -717,7 +739,9 @@ export default function Demo() {
|
|
|
717
739
|
|
|
718
740
|
This feature can be disabled with `highlightUpdates={false}`, and the default color can be changed with `--w-rjv-update-color`.
|
|
719
741
|
|
|
720
|
-
##
|
|
742
|
+
## Hide Array Indices
|
|
743
|
+
|
|
744
|
+
Example showing how to hide array indices for a cleaner display by customizing the Colon and KeyName components.
|
|
721
745
|
|
|
722
746
|
```tsx mdx:preview
|
|
723
747
|
import React, { Fragment } from 'react';
|
|
@@ -746,10 +770,9 @@ export default function Demo() {
|
|
|
746
770
|
}
|
|
747
771
|
```
|
|
748
772
|
|
|
749
|
-
##
|
|
773
|
+
## Control Collapse/Expand State
|
|
750
774
|
|
|
751
|
-
|
|
752
|
-
If both `collapsed` and `shouldExpandNodeInitially` are set, `collapsed` takes precedence; `shouldExpandNodeInitially` only takes effect when `collapsed` is `false`.
|
|
775
|
+
Controls the initial expand/collapse state of JSON nodes. Demonstrates both the `collapsed` prop and `shouldExpandNodeInitially` callback. The default value of `collapsed` is `false`. If both `collapsed` and `shouldExpandNodeInitially` are set, `collapsed` takes precedence; `shouldExpandNodeInitially` only takes effect when `collapsed` is `false`.
|
|
753
776
|
|
|
754
777
|
```tsx mdx:preview
|
|
755
778
|
import React, { useState } from 'react';
|
|
@@ -793,9 +816,9 @@ export default function Demo() {
|
|
|
793
816
|
}
|
|
794
817
|
```
|
|
795
818
|
|
|
796
|
-
##
|
|
819
|
+
## Custom Arrow Icons
|
|
797
820
|
|
|
798
|
-
|
|
821
|
+
Example showing how to customize expand/collapse arrow icons using built-in icon components.
|
|
799
822
|
|
|
800
823
|
```tsx mdx:preview
|
|
801
824
|
import React from 'react';
|
|
@@ -835,7 +858,7 @@ export default function Demo() {
|
|
|
835
858
|
}
|
|
836
859
|
```
|
|
837
860
|
|
|
838
|
-
|
|
861
|
+
**Custom SVG Icons** - Example showing how to implement completely custom SVG icons for expand/collapse arrows with plus/minus symbols.
|
|
839
862
|
|
|
840
863
|
```tsx mdx:preview
|
|
841
864
|
import React from 'react';
|
package/cjs/index.d.ts
CHANGED
|
@@ -113,4 +113,9 @@ type JsonViewComponent = React.FC<React.PropsWithRef<JsonViewProps<object>>> & {
|
|
|
113
113
|
Row: typeof Row;
|
|
114
114
|
};
|
|
115
115
|
declare const JsonView: JsonViewComponent;
|
|
116
|
+
export { JsonView };
|
|
117
|
+
export type { JsonViewComponent };
|
|
118
|
+
export { Bigint, Date as JsonDate, False, Float, Int, Map as JsonMap, Nan, Null, Set as JsonSet, StringText as JsonString, True, Undefined, Url, };
|
|
119
|
+
export { BraceLeft, BraceRight, BracketsLeft, BracketsRight, Arrow, Colon, Quote, ValueQuote };
|
|
120
|
+
export { Copied, CountInfo, CountInfoExtra, Ellipsis, KeyName, Row };
|
|
116
121
|
export default JsonView;
|
package/cjs/index.js
CHANGED
|
@@ -4,7 +4,199 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
var _exportNames = {
|
|
7
|
+
var _exportNames = {
|
|
8
|
+
JsonView: true,
|
|
9
|
+
BraceLeft: true,
|
|
10
|
+
BraceRight: true,
|
|
11
|
+
BracketsLeft: true,
|
|
12
|
+
BracketsRight: true,
|
|
13
|
+
Arrow: true,
|
|
14
|
+
Colon: true,
|
|
15
|
+
Quote: true,
|
|
16
|
+
ValueQuote: true,
|
|
17
|
+
Bigint: true,
|
|
18
|
+
JsonDate: true,
|
|
19
|
+
False: true,
|
|
20
|
+
Float: true,
|
|
21
|
+
Int: true,
|
|
22
|
+
JsonMap: true,
|
|
23
|
+
Nan: true,
|
|
24
|
+
Null: true,
|
|
25
|
+
JsonSet: true,
|
|
26
|
+
JsonString: true,
|
|
27
|
+
True: true,
|
|
28
|
+
Undefined: true,
|
|
29
|
+
Url: true,
|
|
30
|
+
Copied: true,
|
|
31
|
+
CountInfo: true,
|
|
32
|
+
CountInfoExtra: true,
|
|
33
|
+
Ellipsis: true,
|
|
34
|
+
KeyName: true,
|
|
35
|
+
Row: true
|
|
36
|
+
};
|
|
37
|
+
Object.defineProperty(exports, "Arrow", {
|
|
38
|
+
enumerable: true,
|
|
39
|
+
get: function get() {
|
|
40
|
+
return _Arrow.Arrow;
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
Object.defineProperty(exports, "Bigint", {
|
|
44
|
+
enumerable: true,
|
|
45
|
+
get: function get() {
|
|
46
|
+
return _Bigint.Bigint;
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
Object.defineProperty(exports, "BraceLeft", {
|
|
50
|
+
enumerable: true,
|
|
51
|
+
get: function get() {
|
|
52
|
+
return _BraceLeft.BraceLeft;
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
Object.defineProperty(exports, "BraceRight", {
|
|
56
|
+
enumerable: true,
|
|
57
|
+
get: function get() {
|
|
58
|
+
return _BraceRight.BraceRight;
|
|
59
|
+
}
|
|
60
|
+
});
|
|
61
|
+
Object.defineProperty(exports, "BracketsLeft", {
|
|
62
|
+
enumerable: true,
|
|
63
|
+
get: function get() {
|
|
64
|
+
return _BracketsLeft.BracketsLeft;
|
|
65
|
+
}
|
|
66
|
+
});
|
|
67
|
+
Object.defineProperty(exports, "BracketsRight", {
|
|
68
|
+
enumerable: true,
|
|
69
|
+
get: function get() {
|
|
70
|
+
return _BracketsRight.BracketsRight;
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
Object.defineProperty(exports, "Colon", {
|
|
74
|
+
enumerable: true,
|
|
75
|
+
get: function get() {
|
|
76
|
+
return _Colon.Colon;
|
|
77
|
+
}
|
|
78
|
+
});
|
|
79
|
+
Object.defineProperty(exports, "Copied", {
|
|
80
|
+
enumerable: true,
|
|
81
|
+
get: function get() {
|
|
82
|
+
return _Copied.Copied;
|
|
83
|
+
}
|
|
84
|
+
});
|
|
85
|
+
Object.defineProperty(exports, "CountInfo", {
|
|
86
|
+
enumerable: true,
|
|
87
|
+
get: function get() {
|
|
88
|
+
return _CountInfo.CountInfo;
|
|
89
|
+
}
|
|
90
|
+
});
|
|
91
|
+
Object.defineProperty(exports, "CountInfoExtra", {
|
|
92
|
+
enumerable: true,
|
|
93
|
+
get: function get() {
|
|
94
|
+
return _CountInfoExtra.CountInfoExtra;
|
|
95
|
+
}
|
|
96
|
+
});
|
|
97
|
+
Object.defineProperty(exports, "Ellipsis", {
|
|
98
|
+
enumerable: true,
|
|
99
|
+
get: function get() {
|
|
100
|
+
return _Ellipsis.Ellipsis;
|
|
101
|
+
}
|
|
102
|
+
});
|
|
103
|
+
Object.defineProperty(exports, "False", {
|
|
104
|
+
enumerable: true,
|
|
105
|
+
get: function get() {
|
|
106
|
+
return _False.False;
|
|
107
|
+
}
|
|
108
|
+
});
|
|
109
|
+
Object.defineProperty(exports, "Float", {
|
|
110
|
+
enumerable: true,
|
|
111
|
+
get: function get() {
|
|
112
|
+
return _Float.Float;
|
|
113
|
+
}
|
|
114
|
+
});
|
|
115
|
+
Object.defineProperty(exports, "Int", {
|
|
116
|
+
enumerable: true,
|
|
117
|
+
get: function get() {
|
|
118
|
+
return _Int.Int;
|
|
119
|
+
}
|
|
120
|
+
});
|
|
121
|
+
Object.defineProperty(exports, "JsonDate", {
|
|
122
|
+
enumerable: true,
|
|
123
|
+
get: function get() {
|
|
124
|
+
return _Date.Date;
|
|
125
|
+
}
|
|
126
|
+
});
|
|
127
|
+
Object.defineProperty(exports, "JsonMap", {
|
|
128
|
+
enumerable: true,
|
|
129
|
+
get: function get() {
|
|
130
|
+
return _Map.Map;
|
|
131
|
+
}
|
|
132
|
+
});
|
|
133
|
+
Object.defineProperty(exports, "JsonSet", {
|
|
134
|
+
enumerable: true,
|
|
135
|
+
get: function get() {
|
|
136
|
+
return _Set.Set;
|
|
137
|
+
}
|
|
138
|
+
});
|
|
139
|
+
Object.defineProperty(exports, "JsonString", {
|
|
140
|
+
enumerable: true,
|
|
141
|
+
get: function get() {
|
|
142
|
+
return _String.StringText;
|
|
143
|
+
}
|
|
144
|
+
});
|
|
145
|
+
exports.JsonView = void 0;
|
|
146
|
+
Object.defineProperty(exports, "KeyName", {
|
|
147
|
+
enumerable: true,
|
|
148
|
+
get: function get() {
|
|
149
|
+
return _KeyName.KeyName;
|
|
150
|
+
}
|
|
151
|
+
});
|
|
152
|
+
Object.defineProperty(exports, "Nan", {
|
|
153
|
+
enumerable: true,
|
|
154
|
+
get: function get() {
|
|
155
|
+
return _Nan.Nan;
|
|
156
|
+
}
|
|
157
|
+
});
|
|
158
|
+
Object.defineProperty(exports, "Null", {
|
|
159
|
+
enumerable: true,
|
|
160
|
+
get: function get() {
|
|
161
|
+
return _Null.Null;
|
|
162
|
+
}
|
|
163
|
+
});
|
|
164
|
+
Object.defineProperty(exports, "Quote", {
|
|
165
|
+
enumerable: true,
|
|
166
|
+
get: function get() {
|
|
167
|
+
return _Quote.Quote;
|
|
168
|
+
}
|
|
169
|
+
});
|
|
170
|
+
Object.defineProperty(exports, "Row", {
|
|
171
|
+
enumerable: true,
|
|
172
|
+
get: function get() {
|
|
173
|
+
return _Row.Row;
|
|
174
|
+
}
|
|
175
|
+
});
|
|
176
|
+
Object.defineProperty(exports, "True", {
|
|
177
|
+
enumerable: true,
|
|
178
|
+
get: function get() {
|
|
179
|
+
return _True.True;
|
|
180
|
+
}
|
|
181
|
+
});
|
|
182
|
+
Object.defineProperty(exports, "Undefined", {
|
|
183
|
+
enumerable: true,
|
|
184
|
+
get: function get() {
|
|
185
|
+
return _Undefined.Undefined;
|
|
186
|
+
}
|
|
187
|
+
});
|
|
188
|
+
Object.defineProperty(exports, "Url", {
|
|
189
|
+
enumerable: true,
|
|
190
|
+
get: function get() {
|
|
191
|
+
return _Url.Url;
|
|
192
|
+
}
|
|
193
|
+
});
|
|
194
|
+
Object.defineProperty(exports, "ValueQuote", {
|
|
195
|
+
enumerable: true,
|
|
196
|
+
get: function get() {
|
|
197
|
+
return _ValueQuote.ValueQuote;
|
|
198
|
+
}
|
|
199
|
+
});
|
|
8
200
|
exports["default"] = void 0;
|
|
9
201
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
10
202
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
@@ -111,7 +303,7 @@ Object.keys(_symbol).forEach(function (key) {
|
|
|
111
303
|
});
|
|
112
304
|
});
|
|
113
305
|
var _excluded = ["className", "style", "value", "children", "collapsed", "shouldExpandNodeInitially", "indentWidth", "displayObjectSize", "shortenTextAfterLength", "stringEllipsis", "highlightUpdates", "enableClipboard", "displayDataTypes", "objectSortKeys", "onExpand", "onCopied", "beforeCopy"];
|
|
114
|
-
var JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
306
|
+
var JsonView = exports.JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
115
307
|
var _props$className = props.className,
|
|
116
308
|
className = _props$className === void 0 ? '' : _props$className,
|
|
117
309
|
style = props.style,
|
|
@@ -203,4 +395,12 @@ JsonView.CountInfoExtra = _CountInfoExtra.CountInfoExtra;
|
|
|
203
395
|
JsonView.KeyName = _KeyName.KeyName;
|
|
204
396
|
JsonView.Row = _Row.Row;
|
|
205
397
|
JsonView.displayName = 'JVR.JsonView';
|
|
398
|
+
|
|
399
|
+
// Named exports for better import flexibility
|
|
400
|
+
|
|
401
|
+
// Named exports for type components
|
|
402
|
+
|
|
403
|
+
// Named exports for symbol components
|
|
404
|
+
|
|
405
|
+
// Named exports for section components
|
|
206
406
|
var _default = exports["default"] = JsonView;
|
package/cjs/types/index.js
CHANGED
|
@@ -482,7 +482,10 @@ var TypeUndefined = exports.TypeUndefined = function TypeUndefined(_ref1) {
|
|
|
482
482
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
|
|
483
483
|
children: [displayDataTypes && (type || /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
|
|
484
484
|
style: style
|
|
485
|
-
}))), child]
|
|
485
|
+
}))), child || /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
|
|
486
|
+
className: "w-rjv-value",
|
|
487
|
+
children: "undefined"
|
|
488
|
+
}))]
|
|
486
489
|
});
|
|
487
490
|
};
|
|
488
491
|
TypeUndefined.displayName = 'JVR.TypeUndefined';
|
|
@@ -520,7 +523,10 @@ var TypeNull = exports.TypeNull = function TypeNull(_ref10) {
|
|
|
520
523
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
|
|
521
524
|
children: [displayDataTypes && (type || /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
|
|
522
525
|
style: style
|
|
523
|
-
}))), child]
|
|
526
|
+
}))), child || /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
|
|
527
|
+
className: "w-rjv-value",
|
|
528
|
+
children: "null"
|
|
529
|
+
}))]
|
|
524
530
|
});
|
|
525
531
|
};
|
|
526
532
|
TypeNull.displayName = 'JVR.TypeNull';
|
|
@@ -558,7 +564,10 @@ var TypeNan = exports.TypeNan = function TypeNan(_ref11) {
|
|
|
558
564
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
|
|
559
565
|
children: [displayDataTypes && (type || /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
|
|
560
566
|
style: style
|
|
561
|
-
}))), child]
|
|
567
|
+
}))), child || /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
|
|
568
|
+
className: "w-rjv-value",
|
|
569
|
+
children: "NaN"
|
|
570
|
+
}))]
|
|
562
571
|
});
|
|
563
572
|
};
|
|
564
573
|
TypeNan.displayName = 'JVR.TypeNan';
|
package/esm/Container.js
CHANGED
|
@@ -9,15 +9,17 @@ import { useIdCompat } from "./comps/useIdCompat.js";
|
|
|
9
9
|
import { useShowToolsDispatch } from "./store/ShowTools.js";
|
|
10
10
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
11
11
|
export var Container = /*#__PURE__*/forwardRef((props, ref) => {
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
12
|
+
var _props$className = props.className,
|
|
13
|
+
className = _props$className === void 0 ? '' : _props$className,
|
|
14
|
+
children = props.children,
|
|
15
|
+
parentValue = props.parentValue,
|
|
16
|
+
keyid = props.keyid,
|
|
17
|
+
_props$level = props.level,
|
|
18
|
+
level = _props$level === void 0 ? 1 : _props$level,
|
|
19
|
+
value = props.value,
|
|
20
|
+
initialValue = props.initialValue,
|
|
21
|
+
keys = props.keys,
|
|
22
|
+
keyName = props.keyName,
|
|
21
23
|
elmProps = _objectWithoutPropertiesLoose(props, _excluded);
|
|
22
24
|
var dispatch = useShowToolsDispatch();
|
|
23
25
|
var subkeyid = useIdCompat();
|
|
@@ -4,9 +4,7 @@ var _excluded = ["style"];
|
|
|
4
4
|
import React from 'react';
|
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
6
|
export function TriangleArrow(props) {
|
|
7
|
-
var
|
|
8
|
-
style
|
|
9
|
-
} = props,
|
|
7
|
+
var style = props.style,
|
|
10
8
|
reset = _objectWithoutPropertiesLoose(props, _excluded);
|
|
11
9
|
var defaultStyle = _extends({
|
|
12
10
|
cursor: 'pointer',
|
|
@@ -4,9 +4,7 @@ var _excluded = ["style"];
|
|
|
4
4
|
import React from 'react';
|
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
6
|
export function TriangleSolidArrow(props) {
|
|
7
|
-
var
|
|
8
|
-
style
|
|
9
|
-
} = props,
|
|
7
|
+
var style = props.style,
|
|
10
8
|
reset = _objectWithoutPropertiesLoose(props, _excluded);
|
|
11
9
|
var defaultStyle = _extends({
|
|
12
10
|
cursor: 'pointer',
|
package/esm/comps/Copied.js
CHANGED
|
@@ -9,26 +9,25 @@ import { useShowToolsStore } from "../store/ShowTools.js";
|
|
|
9
9
|
import { bigIntToString } from "../types/index.js";
|
|
10
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
11
|
export var Copied = props => {
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
beforeCopy
|
|
19
|
-
} = props,
|
|
12
|
+
var keyName = props.keyName,
|
|
13
|
+
value = props.value,
|
|
14
|
+
parentValue = props.parentValue,
|
|
15
|
+
expandKey = props.expandKey,
|
|
16
|
+
keys = props.keys,
|
|
17
|
+
beforeCopy = props.beforeCopy,
|
|
20
18
|
other = _objectWithoutPropertiesLoose(props, _excluded);
|
|
21
|
-
var
|
|
22
|
-
onCopied,
|
|
23
|
-
enableClipboard,
|
|
24
|
-
beforeCopy
|
|
25
|
-
} = useStore();
|
|
19
|
+
var _useStore = useStore(),
|
|
20
|
+
onCopied = _useStore.onCopied,
|
|
21
|
+
enableClipboard = _useStore.enableClipboard,
|
|
22
|
+
globalBeforeCopy = _useStore.beforeCopy;
|
|
26
23
|
var showTools = useShowToolsStore();
|
|
27
24
|
var isShowTools = showTools[expandKey];
|
|
28
|
-
var
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
25
|
+
var _useState = useState(false),
|
|
26
|
+
copied = _useState[0],
|
|
27
|
+
setCopied = _useState[1];
|
|
28
|
+
var _useSectionStore = useSectionStore(),
|
|
29
|
+
_useSectionStore$Copi = _useSectionStore.Copied,
|
|
30
|
+
Comp = _useSectionStore$Copi === void 0 ? {} : _useSectionStore$Copi;
|
|
32
31
|
var sectionBeforeCopy = Comp == null ? void 0 : Comp.beforeCopy;
|
|
33
32
|
if (enableClipboard === false || !isShowTools) return null;
|
|
34
33
|
var click = event => {
|
|
@@ -87,9 +86,8 @@ export var Copied = props => {
|
|
|
87
86
|
fill: copied ? 'var(--w-rjv-copied-success-color, #28a745)' : 'var(--w-rjv-copied-color, currentColor)',
|
|
88
87
|
onClick: click
|
|
89
88
|
};
|
|
90
|
-
var
|
|
91
|
-
|
|
92
|
-
} = Comp,
|
|
89
|
+
var as = Comp.as,
|
|
90
|
+
render = Comp.render,
|
|
93
91
|
reset = _objectWithoutPropertiesLoose(Comp, _excluded2);
|
|
94
92
|
var elmProps = _extends({}, reset, other, svgProps, {
|
|
95
93
|
style: _extends({}, reset.style, other.style, svgProps.style)
|