@uiw/react-json-view 1.12.0 → 2.0.0-alpha.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.
Files changed (261) hide show
  1. package/README.md +249 -265
  2. package/cjs/Container.d.ts +10 -0
  3. package/cjs/Container.js +67 -0
  4. package/cjs/arrow/TriangleArrow.js +3 -1
  5. package/cjs/arrow/TriangleSolidArrow.js +7 -3
  6. package/cjs/comps/Copied.d.ts +16 -0
  7. package/cjs/{copied.js → comps/Copied.js} +44 -32
  8. package/cjs/comps/CountInfo.d.ts +19 -0
  9. package/cjs/comps/CountInfo.js +72 -0
  10. package/cjs/comps/Ellipsis.d.ts +10 -0
  11. package/cjs/comps/Ellipsis.js +35 -0
  12. package/cjs/comps/Key.d.ts +7 -0
  13. package/cjs/comps/Key.js +39 -0
  14. package/cjs/comps/KeyValues.d.ts +22 -0
  15. package/cjs/comps/KeyValues.js +156 -0
  16. package/cjs/comps/NestedClose.d.ts +10 -0
  17. package/cjs/comps/NestedClose.js +38 -0
  18. package/cjs/comps/NestedOpen.d.ts +11 -0
  19. package/cjs/comps/NestedOpen.js +95 -0
  20. package/cjs/comps/ReRender/Symbols.d.ts +44 -0
  21. package/cjs/comps/ReRender/Symbols.js +144 -0
  22. package/cjs/comps/ReRender/Types.d.ts +36 -0
  23. package/cjs/comps/ReRender/Types.js +590 -0
  24. package/cjs/comps/Value.d.ts +11 -0
  25. package/cjs/comps/Value.js +78 -0
  26. package/cjs/index.d.ts +72 -52
  27. package/cjs/index.js +147 -27
  28. package/cjs/section/Copied.d.ts +6 -0
  29. package/cjs/section/Copied.js +17 -0
  30. package/cjs/section/CountInfo.d.ts +6 -0
  31. package/cjs/section/CountInfo.js +17 -0
  32. package/cjs/section/CountInfoExtra.d.ts +6 -0
  33. package/cjs/section/CountInfoExtra.js +17 -0
  34. package/cjs/section/Ellipsis.d.ts +6 -0
  35. package/cjs/section/Ellipsis.js +17 -0
  36. package/cjs/section/KeyName.d.ts +6 -0
  37. package/cjs/section/KeyName.js +17 -0
  38. package/cjs/store/Expands.d.ts +16 -0
  39. package/cjs/store/Expands.js +44 -0
  40. package/cjs/store/Section.d.ts +33 -0
  41. package/cjs/store/Section.js +86 -0
  42. package/cjs/store/ShowTools.d.ts +14 -0
  43. package/cjs/store/ShowTools.js +44 -0
  44. package/cjs/store/Symbols.d.ts +37 -0
  45. package/cjs/store/Symbols.js +112 -0
  46. package/cjs/store/Types.d.ts +52 -0
  47. package/cjs/store/Types.js +162 -0
  48. package/cjs/store.d.ts +29 -5
  49. package/cjs/store.js +96 -46
  50. package/cjs/symbol/Arrow.d.ts +6 -0
  51. package/cjs/symbol/Arrow.js +17 -0
  52. package/cjs/symbol/BraceLeft.d.ts +6 -0
  53. package/cjs/symbol/BraceLeft.js +17 -0
  54. package/cjs/symbol/BraceRight.d.ts +6 -0
  55. package/cjs/symbol/BraceRight.js +17 -0
  56. package/cjs/symbol/BracketsLeft.d.ts +6 -0
  57. package/cjs/symbol/BracketsLeft.js +17 -0
  58. package/cjs/symbol/BracketsRight.d.ts +6 -0
  59. package/cjs/symbol/BracketsRight.js +17 -0
  60. package/cjs/symbol/Colon.d.ts +6 -0
  61. package/cjs/symbol/Colon.js +17 -0
  62. package/cjs/symbol/Quote.d.ts +6 -0
  63. package/cjs/symbol/Quote.js +17 -0
  64. package/cjs/symbol/ValueQuote.d.ts +6 -0
  65. package/cjs/symbol/ValueQuote.js +17 -0
  66. package/cjs/theme/basic.js +3 -0
  67. package/cjs/theme/dark.js +3 -0
  68. package/cjs/theme/github.dark.js +3 -0
  69. package/cjs/theme/github.light.js +3 -0
  70. package/cjs/theme/gruvbox.js +3 -0
  71. package/cjs/theme/light.js +3 -0
  72. package/cjs/theme/monokai.js +3 -0
  73. package/cjs/theme/nord.js +3 -0
  74. package/cjs/theme/vscode.js +3 -0
  75. package/cjs/type.d.ts +50 -0
  76. package/cjs/type.js +57 -0
  77. package/cjs/types/Bigint.d.ts +5 -0
  78. package/cjs/types/Bigint.js +17 -0
  79. package/cjs/types/Date.d.ts +5 -0
  80. package/cjs/types/Date.js +17 -0
  81. package/cjs/types/False.d.ts +5 -0
  82. package/cjs/types/False.js +17 -0
  83. package/cjs/types/Float.d.ts +5 -0
  84. package/cjs/types/Float.js +17 -0
  85. package/cjs/types/Int.d.ts +5 -0
  86. package/cjs/types/Int.js +17 -0
  87. package/cjs/types/Map.d.ts +5 -0
  88. package/cjs/types/Map.js +17 -0
  89. package/cjs/types/Nan.d.ts +5 -0
  90. package/cjs/types/Nan.js +17 -0
  91. package/cjs/types/Null.d.ts +5 -0
  92. package/cjs/types/Null.js +17 -0
  93. package/cjs/types/Set.d.ts +5 -0
  94. package/cjs/types/Set.js +17 -0
  95. package/cjs/types/String.d.ts +5 -0
  96. package/cjs/types/String.js +17 -0
  97. package/cjs/types/True.d.ts +5 -0
  98. package/cjs/types/True.js +17 -0
  99. package/cjs/types/Undefined.d.ts +5 -0
  100. package/cjs/types/Undefined.js +17 -0
  101. package/cjs/types/Url.d.ts +5 -0
  102. package/cjs/types/Url.js +17 -0
  103. package/cjs/utils/useHighlight.d.ts +9 -0
  104. package/cjs/utils/useHighlight.js +62 -0
  105. package/cjs/utils/useRender.d.ts +6 -0
  106. package/cjs/utils/useRender.js +51 -0
  107. package/esm/Container.d.ts +10 -0
  108. package/esm/Container.js +53 -0
  109. package/esm/arrow/TriangleArrow.js +3 -1
  110. package/esm/arrow/TriangleSolidArrow.js +7 -3
  111. package/esm/comps/Copied.d.ts +16 -0
  112. package/esm/{copied.js → comps/Copied.js} +44 -29
  113. package/esm/comps/CountInfo.d.ts +19 -0
  114. package/esm/comps/CountInfo.js +70 -0
  115. package/esm/comps/Ellipsis.d.ts +10 -0
  116. package/esm/comps/Ellipsis.js +31 -0
  117. package/esm/comps/Key.d.ts +7 -0
  118. package/esm/comps/Key.js +35 -0
  119. package/esm/comps/KeyValues.d.ts +22 -0
  120. package/esm/comps/KeyValues.js +142 -0
  121. package/esm/comps/NestedClose.d.ts +10 -0
  122. package/esm/comps/NestedClose.js +34 -0
  123. package/esm/comps/NestedOpen.d.ts +11 -0
  124. package/esm/comps/NestedOpen.js +91 -0
  125. package/esm/comps/ReRender/Symbols.d.ts +44 -0
  126. package/esm/comps/ReRender/Symbols.js +155 -0
  127. package/esm/comps/ReRender/Types.d.ts +36 -0
  128. package/esm/comps/ReRender/Types.js +621 -0
  129. package/esm/comps/Value.d.ts +11 -0
  130. package/esm/comps/Value.js +69 -0
  131. package/esm/index.d.ts +72 -52
  132. package/esm/index.js +98 -18
  133. package/esm/section/Copied.d.ts +6 -0
  134. package/esm/section/Copied.js +10 -0
  135. package/esm/section/CountInfo.d.ts +6 -0
  136. package/esm/section/CountInfo.js +10 -0
  137. package/esm/section/CountInfoExtra.d.ts +6 -0
  138. package/esm/section/CountInfoExtra.js +10 -0
  139. package/esm/section/Ellipsis.d.ts +6 -0
  140. package/esm/section/Ellipsis.js +10 -0
  141. package/esm/section/KeyName.d.ts +6 -0
  142. package/esm/section/KeyName.js +10 -0
  143. package/esm/store/Expands.d.ts +16 -0
  144. package/esm/store/Expands.js +32 -0
  145. package/esm/store/Section.d.ts +33 -0
  146. package/esm/store/Section.js +73 -0
  147. package/esm/store/ShowTools.d.ts +14 -0
  148. package/esm/store/ShowTools.js +32 -0
  149. package/esm/store/Symbols.d.ts +37 -0
  150. package/esm/store/Symbols.js +100 -0
  151. package/esm/store/Types.d.ts +52 -0
  152. package/esm/store/Types.js +150 -0
  153. package/esm/store.d.ts +29 -5
  154. package/esm/store.js +66 -32
  155. package/esm/symbol/Arrow.d.ts +6 -0
  156. package/esm/symbol/Arrow.js +10 -0
  157. package/esm/symbol/BraceLeft.d.ts +6 -0
  158. package/esm/symbol/BraceLeft.js +10 -0
  159. package/esm/symbol/BraceRight.d.ts +6 -0
  160. package/esm/symbol/BraceRight.js +10 -0
  161. package/esm/symbol/BracketsLeft.d.ts +6 -0
  162. package/esm/symbol/BracketsLeft.js +10 -0
  163. package/esm/symbol/BracketsRight.d.ts +6 -0
  164. package/esm/symbol/BracketsRight.js +10 -0
  165. package/esm/symbol/Colon.d.ts +6 -0
  166. package/esm/symbol/Colon.js +10 -0
  167. package/esm/symbol/Quote.d.ts +6 -0
  168. package/esm/symbol/Quote.js +10 -0
  169. package/esm/symbol/ValueQuote.d.ts +6 -0
  170. package/esm/symbol/ValueQuote.js +10 -0
  171. package/esm/theme/basic.js +3 -0
  172. package/esm/theme/dark.js +3 -0
  173. package/esm/theme/github.dark.js +3 -0
  174. package/esm/theme/github.light.js +3 -0
  175. package/esm/theme/gruvbox.js +3 -0
  176. package/esm/theme/light.js +3 -0
  177. package/esm/theme/monokai.js +3 -0
  178. package/esm/theme/nord.js +3 -0
  179. package/esm/theme/vscode.js +3 -0
  180. package/esm/type.d.ts +50 -0
  181. package/esm/type.js +50 -0
  182. package/esm/types/Bigint.d.ts +5 -0
  183. package/esm/types/Bigint.js +10 -0
  184. package/esm/types/Date.d.ts +5 -0
  185. package/esm/types/Date.js +10 -0
  186. package/esm/types/False.d.ts +5 -0
  187. package/esm/types/False.js +10 -0
  188. package/esm/types/Float.d.ts +5 -0
  189. package/esm/types/Float.js +10 -0
  190. package/esm/types/Int.d.ts +5 -0
  191. package/esm/types/Int.js +10 -0
  192. package/esm/types/Map.d.ts +5 -0
  193. package/esm/types/Map.js +10 -0
  194. package/esm/types/Nan.d.ts +5 -0
  195. package/esm/types/Nan.js +10 -0
  196. package/esm/types/Null.d.ts +5 -0
  197. package/esm/types/Null.js +10 -0
  198. package/esm/types/Set.d.ts +5 -0
  199. package/esm/types/Set.js +10 -0
  200. package/esm/types/String.d.ts +5 -0
  201. package/esm/types/String.js +10 -0
  202. package/esm/types/True.d.ts +5 -0
  203. package/esm/types/True.js +10 -0
  204. package/esm/types/Undefined.d.ts +5 -0
  205. package/esm/types/Undefined.js +10 -0
  206. package/esm/types/Url.d.ts +5 -0
  207. package/esm/types/Url.js +10 -0
  208. package/esm/utils/useHighlight.d.ts +9 -0
  209. package/esm/{semicolon.js → utils/useHighlight.js} +1 -52
  210. package/esm/utils/useRender.d.ts +6 -0
  211. package/esm/utils/useRender.js +41 -0
  212. package/package.json +1 -1
  213. package/cjs/comps/ellipsis.d.ts +0 -7
  214. package/cjs/comps/ellipsis.js +0 -37
  215. package/cjs/comps/meta.d.ts +0 -12
  216. package/cjs/comps/meta.js +0 -46
  217. package/cjs/copied.d.ts +0 -11
  218. package/cjs/editor/countInfoExtra.d.ts +0 -28
  219. package/cjs/editor/countInfoExtra.js +0 -101
  220. package/cjs/editor/icon/add.d.ts +0 -4
  221. package/cjs/editor/icon/add.js +0 -30
  222. package/cjs/editor/icon/delete.d.ts +0 -4
  223. package/cjs/editor/icon/delete.js +0 -30
  224. package/cjs/editor/icon/edit.d.ts +0 -4
  225. package/cjs/editor/icon/edit.js +0 -30
  226. package/cjs/editor/index.d.ts +0 -31
  227. package/cjs/editor/index.js +0 -60
  228. package/cjs/editor/objectKey.d.ts +0 -11
  229. package/cjs/editor/objectKey.js +0 -169
  230. package/cjs/editor/value.d.ts +0 -22
  231. package/cjs/editor/value.js +0 -240
  232. package/cjs/node.d.ts +0 -15
  233. package/cjs/node.js +0 -343
  234. package/cjs/semicolon.d.ts +0 -22
  235. package/cjs/semicolon.js +0 -115
  236. package/cjs/value.d.ts +0 -93
  237. package/cjs/value.js +0 -356
  238. package/esm/comps/ellipsis.d.ts +0 -7
  239. package/esm/comps/ellipsis.js +0 -31
  240. package/esm/comps/meta.d.ts +0 -12
  241. package/esm/comps/meta.js +0 -39
  242. package/esm/copied.d.ts +0 -11
  243. package/esm/editor/countInfoExtra.d.ts +0 -28
  244. package/esm/editor/countInfoExtra.js +0 -68
  245. package/esm/editor/icon/add.d.ts +0 -4
  246. package/esm/editor/icon/add.js +0 -24
  247. package/esm/editor/icon/delete.d.ts +0 -4
  248. package/esm/editor/icon/delete.js +0 -24
  249. package/esm/editor/icon/edit.d.ts +0 -4
  250. package/esm/editor/icon/edit.js +0 -24
  251. package/esm/editor/index.d.ts +0 -31
  252. package/esm/editor/index.js +0 -47
  253. package/esm/editor/objectKey.d.ts +0 -11
  254. package/esm/editor/objectKey.js +0 -135
  255. package/esm/editor/value.d.ts +0 -22
  256. package/esm/editor/value.js +0 -192
  257. package/esm/node.d.ts +0 -15
  258. package/esm/node.js +0 -299
  259. package/esm/semicolon.d.ts +0 -22
  260. package/esm/value.d.ts +0 -93
  261. package/esm/value.js +0 -331
package/cjs/semicolon.js DELETED
@@ -1,115 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.Semicolon = void 0;
8
- exports.useHighlight = useHighlight;
9
- exports.usePrevious = usePrevious;
10
- var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
11
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
12
- var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
13
- var _react = require("react");
14
- var _value = require("./value");
15
- var _jsxRuntime = require("react/jsx-runtime");
16
- var _excluded = ["children", "render", "color", "value", "className", "keyName", "highlightUpdates", "quotes", "style", "namespace", "parentName"];
17
- function usePrevious(value) {
18
- var ref = (0, _react.useRef)();
19
- (0, _react.useEffect)(function () {
20
- ref.current = value;
21
- });
22
- return ref.current;
23
- }
24
- function useHighlight(_ref) {
25
- var value = _ref.value,
26
- highlightUpdates = _ref.highlightUpdates,
27
- highlightContainer = _ref.highlightContainer;
28
- var prevValue = usePrevious(value);
29
- var isHighlight = (0, _react.useMemo)(function () {
30
- if (!highlightUpdates || prevValue === undefined) return false;
31
- // highlight if value type changed
32
- if ((0, _typeof2["default"])(value) !== (0, _typeof2["default"])(prevValue)) {
33
- return true;
34
- }
35
- if (typeof value === 'number') {
36
- // notice: NaN !== NaN
37
- if (isNaN(value) && isNaN(prevValue)) return false;
38
- return value !== prevValue;
39
- }
40
- // highlight if isArray changed
41
- if (Array.isArray(value) !== Array.isArray(prevValue)) {
42
- return true;
43
- }
44
- // not highlight object/function
45
- // deep compare they will be slow
46
- if ((0, _typeof2["default"])(value) === 'object' || typeof value === 'function') {
47
- return false;
48
- }
49
-
50
- // highlight if not equal
51
- if (value !== prevValue) {
52
- return true;
53
- }
54
- return false;
55
- }, [highlightUpdates, value]);
56
- (0, _react.useEffect)(function () {
57
- if (highlightContainer && highlightContainer.current && isHighlight && 'animate' in highlightContainer.current) {
58
- highlightContainer.current.animate([{
59
- backgroundColor: 'var(--w-rjv-update-color, #ebcb8b)'
60
- }, {
61
- backgroundColor: ''
62
- }], {
63
- duration: 1000,
64
- easing: 'ease-in'
65
- });
66
- }
67
- }, [isHighlight, value, highlightContainer]);
68
- }
69
- var Semicolon = function Semicolon(_ref2) {
70
- var children = _ref2.children,
71
- render = _ref2.render,
72
- color = _ref2.color,
73
- value = _ref2.value,
74
- _ref2$className = _ref2.className,
75
- className = _ref2$className === void 0 ? 'w-rjv-object-key' : _ref2$className,
76
- keyName = _ref2.keyName,
77
- highlightUpdates = _ref2.highlightUpdates,
78
- quotes = _ref2.quotes,
79
- style = _ref2.style,
80
- namespace = _ref2.namespace,
81
- parentName = _ref2.parentName,
82
- props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
83
- var highlightContainer = (0, _react.useRef)(null);
84
- var content = typeof keyName === 'string' ? "".concat(quotes).concat(keyName).concat(quotes) : keyName;
85
- if (render) {
86
- return render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({
87
- className: className
88
- }, props), {}, {
89
- value: value,
90
- namespace: namespace,
91
- style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), {}, {
92
- color: color
93
- }),
94
- parentName: parentName,
95
- keyName: keyName,
96
- quotes: quotes,
97
- label: keyName,
98
- children: content
99
- }));
100
- }
101
- useHighlight({
102
- value: value,
103
- highlightUpdates: highlightUpdates,
104
- highlightContainer: highlightContainer
105
- });
106
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Label, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
107
- className: className,
108
- color: color
109
- }, props), {}, {
110
- ref: highlightContainer,
111
- children: content
112
- }));
113
- };
114
- exports.Semicolon = Semicolon;
115
- Semicolon.displayName = 'JSR.Semicolon';
package/cjs/value.d.ts DELETED
@@ -1,93 +0,0 @@
1
- import type { FC, PropsWithChildren } from 'react';
2
- import type { JsonViewProps } from './';
3
- export declare const Line: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>>;
4
- export declare const isFloat: (n: number) => boolean;
5
- export declare const typeMap: {
6
- string: {
7
- color: string;
8
- label: string;
9
- };
10
- number: {
11
- color: string;
12
- label: string;
13
- };
14
- float: {
15
- color: string;
16
- label: string;
17
- };
18
- bigint: {
19
- color: string;
20
- label: string;
21
- };
22
- boolean: {
23
- color: string;
24
- label: string;
25
- };
26
- date: {
27
- color: string;
28
- label: string;
29
- };
30
- url: {
31
- color: string;
32
- label: string;
33
- };
34
- null: {
35
- color: string;
36
- label: string;
37
- };
38
- Set: {
39
- color: string;
40
- label: string;
41
- };
42
- Map: {
43
- color: string;
44
- label: string;
45
- };
46
- NaN: {
47
- color: string;
48
- label: string;
49
- };
50
- undefined: {
51
- color: string;
52
- label: string;
53
- };
54
- };
55
- export declare const Colon: FC<PropsWithChildren<React.HTMLAttributes<HTMLSpanElement>>>;
56
- export interface ValueViewProps<T extends object> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
57
- keyName?: string | number;
58
- value?: unknown;
59
- parentValue?: T;
60
- data?: T;
61
- displayDataTypes: boolean;
62
- displayObjectSize: boolean;
63
- enableClipboard: boolean;
64
- isSet: boolean;
65
- indentWidth: number;
66
- level?: number;
67
- shortenTextAfterLength?: JsonViewProps<T>['shortenTextAfterLength'];
68
- namespace?: Array<string | number>;
69
- quotes?: JsonViewProps<T>['quotes'];
70
- components?: JsonViewProps<T>['components'];
71
- renderKey?: JSX.Element;
72
- countInfo?: JSX.Element;
73
- setValue?: React.Dispatch<React.SetStateAction<T>>;
74
- }
75
- export declare function getValueString<T>(value: T): {
76
- type: "string" | "number" | "bigint" | "boolean" | "undefined" | "date" | "url" | "float" | "null" | "Set" | "Map" | "NaN";
77
- content: string;
78
- };
79
- export declare function ValueView<T extends object>(props: ValueViewProps<T>): import("react/jsx-runtime").JSX.Element;
80
- export declare namespace ValueView {
81
- var displayName: string;
82
- }
83
- export interface LabelProps extends React.HTMLAttributes<HTMLSpanElement> {
84
- color?: string;
85
- fontSize?: number;
86
- opacity?: number;
87
- paddingRight?: number;
88
- }
89
- export declare const Label: import("react").ForwardRefExoticComponent<LabelProps & import("react").RefAttributes<HTMLSpanElement>>;
90
- export interface TypeProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
91
- type: keyof typeof typeMap;
92
- }
93
- export declare const Type: FC<PropsWithChildren<TypeProps>>;
package/cjs/value.js DELETED
@@ -1,356 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.Type = exports.Line = exports.Label = exports.Colon = void 0;
8
- exports.ValueView = ValueView;
9
- exports.getValueString = getValueString;
10
- exports.typeMap = exports.isFloat = void 0;
11
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
12
- var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
13
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
14
- var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
15
- var _react = require("react");
16
- var _meta = require("./comps/meta");
17
- var _copied = require("./copied");
18
- var _jsxRuntime = require("react/jsx-runtime");
19
- var _excluded = ["children", "style"],
20
- _excluded2 = ["children", "length", "style"],
21
- _excluded3 = ["color", "style", "isURL", "href", "children"],
22
- _excluded4 = ["value", "parentValue", "setValue", "countInfo", "data", "keyName", "indentWidth", "isSet", "namespace", "renderKey", "components", "quotes", "level", "enableClipboard", "displayObjectSize", "displayDataTypes", "shortenTextAfterLength"],
23
- _excluded5 = ["children", "color", "fontSize", "opacity", "paddingRight", "style"];
24
- var Line = function Line(props) {
25
- return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2["default"])({}, props));
26
- };
27
- exports.Line = Line;
28
- Line.displayName = 'JVR.Line';
29
- var isFloat = function isFloat(n) {
30
- return Number(n) === n && n % 1 !== 0 || isNaN(n);
31
- };
32
- exports.isFloat = isFloat;
33
- var typeMap = {
34
- string: {
35
- color: 'var(--w-rjv-type-string-color, #cb4b16)',
36
- label: 'string'
37
- },
38
- number: {
39
- color: 'var(--w-rjv-type-int-color, #268bd2)',
40
- label: 'int'
41
- },
42
- "float": {
43
- color: 'var(--w-rjv-type-float-color, #859900)',
44
- label: 'float'
45
- },
46
- bigint: {
47
- color: 'var(--w-rjv-type-bigint-color, #268bd2)',
48
- label: 'bigint'
49
- },
50
- "boolean": {
51
- color: 'var(--w-rjv-type-boolean-color, #2aa198)',
52
- label: 'bool'
53
- },
54
- date: {
55
- color: 'var(--w-rjv-type-date-color, #586e75)',
56
- label: 'date'
57
- },
58
- url: {
59
- color: 'var(--w-rjv-type-url-color, #0969da)',
60
- label: 'url'
61
- },
62
- "null": {
63
- color: 'var(--w-rjv-type-null-color, #d33682)',
64
- label: 'null'
65
- },
66
- Set: {
67
- color: 'var(--w-rjv-type-set-color, #268bd2)',
68
- label: 'Set'
69
- },
70
- Map: {
71
- color: 'var(--w-rjv-type-map-color, #268bd2)',
72
- label: 'Map'
73
- },
74
- NaN: {
75
- color: 'var(--w-rjv-type-nan-color, #859900)',
76
- label: 'NaN'
77
- },
78
- undefined: {
79
- color: 'var(--w-rjv-type-undefined-color, #586e75)',
80
- label: 'undefined'
81
- }
82
- };
83
- exports.typeMap = typeMap;
84
- var Colon = function Colon(_ref) {
85
- var _ref$children = _ref.children,
86
- children = _ref$children === void 0 ? ':' : _ref$children,
87
- style = _ref.style,
88
- props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
89
- return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
90
- className: "w-rjv-colon",
91
- style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
92
- paddingRight: 3
93
- }, style), {}, {
94
- color: 'var(--w-rjv-colon-color, var(--w-rjv-color))'
95
- })
96
- }, props), {}, {
97
- children: children
98
- }));
99
- };
100
- exports.Colon = Colon;
101
- Colon.displayName = 'JVR.Colon';
102
- function getValueString(value) {
103
- var type = (0, _typeof2["default"])(value);
104
- var content = '';
105
- if (typeof value === 'number') {
106
- type = isFloat(value) ? 'float' : 'number';
107
- content = value.toString();
108
- if (isNaN(value)) {
109
- type = 'NaN';
110
- content = 'NaN';
111
- }
112
- }
113
- if (typeof value === 'boolean') {
114
- type = 'boolean';
115
- content = value.toString();
116
- }
117
- if ((0, _typeof2["default"])(value) === 'object' && value instanceof Date) {
118
- type = 'date';
119
- content = value.toString();
120
- }
121
- if (value === null) {
122
- type = 'null';
123
- content = "".concat(value).toLocaleUpperCase();
124
- }
125
- if (value === undefined) {
126
- type = 'undefined';
127
- content = String(value);
128
- }
129
- if (typeof value === 'bigint') {
130
- type = 'bigint';
131
- content = "".concat(value, "n");
132
- }
133
- var isURL = value instanceof URL;
134
- if (isURL) {
135
- type = 'url';
136
- content = "\"".concat(value.href, "\"");
137
- }
138
- if (typeof value === 'string') {
139
- content = "\"".concat(value, "\"");
140
- }
141
- return {
142
- type: type,
143
- content: content
144
- };
145
- }
146
- var RenderShortenTextValue = function RenderShortenTextValue(_ref2) {
147
- var children = _ref2.children,
148
- length = _ref2.length,
149
- style = _ref2.style,
150
- rest = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
151
- var childrenStr = children;
152
- var _useState = (0, _react.useState)(length && childrenStr.length >= length),
153
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
154
- shorten = _useState2[0],
155
- setShorten = _useState2[1];
156
- var click = function click() {
157
- if (length && childrenStr.length <= length) return setShorten(false);
158
- setShorten(!shorten);
159
- };
160
- var text = shorten ? "".concat(childrenStr.slice(0, length), "...") : childrenStr;
161
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(RenderStringValue, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, rest), {}, {
162
- style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), {}, {
163
- cursor: 'pointer'
164
- }),
165
- onClick: click,
166
- children: text
167
- }));
168
- };
169
- RenderShortenTextValue.displayName = 'JVR.RenderShortenTextValue';
170
- var RenderStringValue = function RenderStringValue(_ref3) {
171
- var color = _ref3.color,
172
- style = _ref3.style,
173
- isURL = _ref3.isURL,
174
- href = _ref3.href,
175
- children = _ref3.children,
176
- rest = (0, _objectWithoutProperties2["default"])(_ref3, _excluded3);
177
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Label, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
178
- color: color,
179
- style: style
180
- }, rest), {}, {
181
- className: "w-rjv-value",
182
- children: [isURL && /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
183
- href: href,
184
- style: {
185
- color: color
186
- },
187
- target: "_blank",
188
- rel: "noopener noreferrer",
189
- children: children
190
- }), !isURL && children]
191
- }));
192
- };
193
- RenderStringValue.displayName = 'JVR.RenderStringValue';
194
- function ValueView(props) {
195
- var _typeMap$type;
196
- var value = props.value,
197
- parentValue = props.parentValue,
198
- setValue = props.setValue,
199
- countInfo = props.countInfo,
200
- data = props.data,
201
- keyName = props.keyName,
202
- indentWidth = props.indentWidth,
203
- isSet = props.isSet,
204
- namespace = props.namespace,
205
- renderKey = props.renderKey,
206
- _props$components = props.components,
207
- components = _props$components === void 0 ? {} : _props$components,
208
- quotes = props.quotes,
209
- level = props.level,
210
- enableClipboard = props.enableClipboard,
211
- displayObjectSize = props.displayObjectSize,
212
- displayDataTypes = props.displayDataTypes,
213
- shortenTextAfterLength = props.shortenTextAfterLength,
214
- reset = (0, _objectWithoutProperties2["default"])(props, _excluded4);
215
- var color = '';
216
- var style = {};
217
- var _getValueString = getValueString(value),
218
- type = _getValueString.type,
219
- content = _getValueString.content;
220
- var typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
221
- type: type
222
- });
223
- if (value === null) {
224
- typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
225
- style = {
226
- fontWeight: 'bold'
227
- };
228
- }
229
- if (value === undefined || type.toLocaleLowerCase() === 'nan' || !displayDataTypes) {
230
- typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
231
- }
232
- var isURL = value instanceof URL;
233
- color = ((_typeMap$type = typeMap[type]) === null || _typeMap$type === void 0 ? void 0 : _typeMap$type.color) || '';
234
- var _useState3 = (0, _react.useState)(false),
235
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
236
- showTools = _useState4[0],
237
- setShowTools = _useState4[1];
238
- var tools = (0, _react.useMemo)(function () {
239
- return enableClipboard && showTools && /*#__PURE__*/(0, _jsxRuntime.jsx)(_copied.Copied, {
240
- show: showTools,
241
- text: value
242
- });
243
- }, [enableClipboard, showTools, value]);
244
- // const tools = enableClipboard ? <Copied show={showTools} text={value} /> : undefined;
245
- var eventProps = {
246
- className: 'w-rjv-line',
247
- style: {
248
- paddingLeft: indentWidth
249
- }
250
- };
251
- if (enableClipboard) {
252
- eventProps.onMouseEnter = function () {
253
- return setShowTools(true);
254
- };
255
- eventProps.onMouseLeave = function () {
256
- return setShowTools(false);
257
- };
258
- }
259
- if (content && typeof content === 'string') {
260
- var reView = components.value && components.value({
261
- className: 'w-rjv-value',
262
- style: (0, _objectSpread2["default"])({
263
- color: color
264
- }, style),
265
- type: type,
266
- value: value,
267
- setValue: setValue,
268
- data: data,
269
- parentValue: parentValue,
270
- quotes: quotes,
271
- keyName: keyName,
272
- namespace: namespace,
273
- visible: showTools,
274
- content: content,
275
- children: content
276
- });
277
- var valueView = shortenTextAfterLength && type === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(RenderShortenTextValue, {
278
- color: color,
279
- href: isURL ? value.href : '',
280
- style: style,
281
- isURL: isURL,
282
- length: shortenTextAfterLength,
283
- children: content
284
- }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(RenderStringValue, {
285
- color: color,
286
- href: isURL ? value.href : '',
287
- style: style,
288
- isURL: isURL,
289
- children: content
290
- });
291
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, eventProps), {}, {
292
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Label, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
293
- ref: null,
294
- children: [renderKey, /*#__PURE__*/(0, _jsxRuntime.jsx)(Colon, {}), typeView, reView ? reView : valueView, tools]
295
- }))
296
- }));
297
- }
298
- var empty = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
299
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_meta.Meta, {
300
- render: components.braces,
301
- start: true,
302
- isArray: Array.isArray(value)
303
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_meta.Meta, {
304
- render: components.braces,
305
- isArray: Array.isArray(value)
306
- }), countInfo]
307
- });
308
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, eventProps), {}, {
309
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Label, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
310
- ref: null,
311
- children: [renderKey, /*#__PURE__*/(0, _jsxRuntime.jsx)(Colon, {}), typeView, empty, tools]
312
- }))
313
- }));
314
- }
315
- ValueView.displayName = 'JVR.ValueView';
316
- var Label = /*#__PURE__*/(0, _react.forwardRef)(function (_ref4, ref) {
317
- var children = _ref4.children,
318
- color = _ref4.color,
319
- fontSize = _ref4.fontSize,
320
- opacity = _ref4.opacity,
321
- paddingRight = _ref4.paddingRight,
322
- style = _ref4.style,
323
- reset = (0, _objectWithoutProperties2["default"])(_ref4, _excluded5);
324
- return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
325
- style: (0, _objectSpread2["default"])({
326
- color: color,
327
- fontSize: fontSize,
328
- opacity: opacity,
329
- paddingRight: paddingRight
330
- }, style)
331
- }, reset), {}, {
332
- ref: ref,
333
- children: children
334
- }));
335
- });
336
- exports.Label = Label;
337
- Label.displayName = 'JVR.Label';
338
- var Type = function Type(props) {
339
- var _typeMap$type2, _typeMap$type3;
340
- var type = props.type;
341
- var color = (_typeMap$type2 = typeMap[type]) === null || _typeMap$type2 === void 0 ? void 0 : _typeMap$type2.color;
342
- var label = (_typeMap$type3 = typeMap[type]) === null || _typeMap$type3 === void 0 ? void 0 : _typeMap$type3.label;
343
- if (color && label) {
344
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
345
- color: color,
346
- fontSize: 11,
347
- opacity: 0.8,
348
- paddingRight: 4,
349
- className: "w-rjv-type",
350
- "data-type": type,
351
- children: label
352
- });
353
- }
354
- };
355
- exports.Type = Type;
356
- Type.displayName = 'JVR.Type';
@@ -1,7 +0,0 @@
1
- import { FC, PropsWithChildren } from 'react';
2
- export interface EllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
3
- count: number;
4
- level: number;
5
- render?: (props: EllipsisProps) => JSX.Element;
6
- }
7
- export declare const Ellipsis: FC<PropsWithChildren<EllipsisProps>>;
@@ -1,31 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/extends";
2
- import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
3
- var _excluded = ["style", "render", "count", "level"];
4
- import { jsx as _jsx } from "react/jsx-runtime";
5
- export var Ellipsis = _ref => {
6
- var {
7
- style,
8
- render,
9
- count,
10
- level
11
- } = _ref,
12
- props = _objectWithoutPropertiesLoose(_ref, _excluded);
13
- var styl = _extends({
14
- cursor: 'pointer'
15
- }, style);
16
- var className = "w-rjv-ellipsis " + (props.className || '');
17
- if (render) return render(_extends({
18
- style: styl,
19
- count,
20
- level
21
- }, props, {
22
- className
23
- }));
24
- return /*#__PURE__*/_jsx("span", _extends({
25
- className: className,
26
- style: styl
27
- }, props, {
28
- children: "..."
29
- }));
30
- };
31
- Ellipsis.displayName = 'JVR.Ellipsis';
@@ -1,12 +0,0 @@
1
- /// <reference types="react" />
2
- import { LabelProps } from '../value';
3
- export interface MetaProps extends LabelProps {
4
- isArray?: boolean;
5
- start?: boolean;
6
- level?: number;
7
- render?: (props: Pick<MetaProps, 'start' | 'level' | 'isArray' | 'className' | 'children'>) => JSX.Element;
8
- }
9
- export declare function Meta(props: MetaProps): JSX.Element;
10
- export declare namespace Meta {
11
- var displayName: string;
12
- }
package/esm/comps/meta.js DELETED
@@ -1,39 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/extends";
2
- import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
3
- var _excluded = ["isArray", "start", "level", "className", "render"];
4
- import { Label } from '../value';
5
- import { jsx as _jsx } from "react/jsx-runtime";
6
- export function Meta(props) {
7
- var {
8
- isArray = false,
9
- start = false,
10
- level,
11
- className,
12
- render
13
- } = props,
14
- reset = _objectWithoutPropertiesLoose(props, _excluded);
15
- var mark = isArray ? '[]' : '{}';
16
- var cls = "w-rjv-" + (isArray ? 'brackets' : 'curlybraces') + "-" + (start ? 'start' : 'end') + " " + (className || '');
17
- var color = "var(--w-rjv-" + (isArray ? 'brackets' : 'curlybraces') + "-color, #236a7c)";
18
- if (render) {
19
- var viev = render(_extends({
20
- isArray,
21
- level,
22
- className: cls,
23
- style: {
24
- color
25
- },
26
- children: start ? mark.charAt(0) : mark.charAt(1)
27
- }, reset));
28
- if (viev) {
29
- return viev;
30
- }
31
- }
32
- return /*#__PURE__*/_jsx(Label, _extends({
33
- color: color,
34
- className: cls
35
- }, reset, {
36
- children: start ? mark.charAt(0) : mark.charAt(1)
37
- }));
38
- }
39
- Meta.displayName = 'JVR.Meta';
package/esm/copied.d.ts DELETED
@@ -1,11 +0,0 @@
1
- /// <reference types="react" />
2
- export interface CopiedProps<T = object> extends React.SVGProps<SVGSVGElement> {
3
- show?: boolean;
4
- text?: T;
5
- onCopied?: (text: string, obj: T | '') => void;
6
- render?: (props: Omit<CopiedProps<T>, 'render'>) => JSX.Element;
7
- }
8
- export declare function Copied<T>(props: CopiedProps<T>): JSX.Element | null;
9
- export declare namespace Copied {
10
- var displayName: string;
11
- }