@uiw/react-json-view 1.11.1 → 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 -263
  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 -13
  233. package/cjs/node.js +0 -329
  234. package/cjs/semicolon.d.ts +0 -22
  235. package/cjs/semicolon.js +0 -115
  236. package/cjs/value.d.ts +0 -84
  237. package/cjs/value.js +0 -348
  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 -13
  258. package/esm/node.js +0 -287
  259. package/esm/semicolon.d.ts +0 -22
  260. package/esm/value.d.ts +0 -84
  261. package/esm/value.js +0 -324
@@ -1,240 +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.ReValue = ReValue;
8
- var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
9
- var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
10
- var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
11
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
12
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
13
- var _react = require("react");
14
- var _value = require("../value");
15
- var _edit = require("./icon/edit");
16
- var _delete = require("./icon/delete");
17
- var _jsxRuntime = require("react/jsx-runtime");
18
- var _excluded = ["type", "value", "setValue", "data", "keyName", "visible", "quotes", "style", "children", "namespace", "displayDataTypes", "editableValue", "parentValue", "onDelete", "onEdit"];
19
- var Quotes = function Quotes(_ref) {
20
- var show = _ref.show,
21
- style = _ref.style,
22
- quotes = _ref.quotes;
23
- if (!quotes || !show) return;
24
- return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
25
- style: style,
26
- children: quotes
27
- });
28
- };
29
- function ReValue(props) {
30
- var _ref2, _typeMap$typeStr, _ref3;
31
- var type = props.type,
32
- value = props.value,
33
- setValue = props.setValue,
34
- data = props.data,
35
- keyName = props.keyName,
36
- visible = props.visible,
37
- quotes = props.quotes,
38
- style = props.style,
39
- children = props.children,
40
- namespace = props.namespace,
41
- displayDataTypes = props.displayDataTypes,
42
- editableValue = props.editableValue,
43
- parentValue = props.parentValue,
44
- onDelete = props.onDelete,
45
- onEdit = props.onEdit,
46
- reset = (0, _objectWithoutProperties2["default"])(props, _excluded);
47
- var _useState = (0, _react.useState)(false),
48
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
49
- editable = _useState2[0],
50
- setEditable = _useState2[1];
51
- var $edit = (0, _react.useRef)(null);
52
- var _useState3 = (0, _react.useState)(type),
53
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
54
- curentType = _useState4[0],
55
- setCurentType = _useState4[1];
56
- var _useState5 = (0, _react.useState)(value),
57
- _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
58
- curentChild = _useState6[0],
59
- setCurentChild = _useState6[1];
60
- (0, _react.useEffect)(function () {
61
- return setCurentChild(value);
62
- }, [value]);
63
- var click = function click(evn) {
64
- evn.stopPropagation();
65
- if (!editableValue) return;
66
- if ($edit.current) {
67
- var _$edit$current;
68
- setEditable(true);
69
- $edit.current.setAttribute('contentEditable', 'true');
70
- (_$edit$current = $edit.current) === null || _$edit$current === void 0 || _$edit$current.focus();
71
- }
72
- };
73
- var keyDown = function keyDown(evn) {
74
- if (!editableValue) return;
75
- if (evn.key === 'Enter') {
76
- evn.stopPropagation();
77
- evn.preventDefault();
78
- setEditable(false);
79
- if ($edit.current) {
80
- $edit.current.setAttribute('contentEditable', 'false');
81
- }
82
- }
83
- };
84
- var blur = function blur() {
85
- return (_ref2 = _ref2 || (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee() {
86
- var text, _typeStr, dt, result, _getValueString, oldChildStr;
87
- return (0, _regeneratorRuntime2["default"])().wrap(function _callee$(_context) {
88
- while (1) switch (_context.prev = _context.next) {
89
- case 0:
90
- if (editableValue) {
91
- _context.next = 2;
92
- break;
93
- }
94
- return _context.abrupt("return");
95
- case 2:
96
- setEditable(false);
97
- if (!$edit.current) {
98
- _context.next = 16;
99
- break;
100
- }
101
- $edit.current.setAttribute('contentEditable', 'false');
102
- text = $edit.current.innerHTML;
103
- _typeStr = curentType;
104
- if (curentType === 'number' || curentType === 'float') {
105
- text = Number(text);
106
- _typeStr = (0, _value.isFloat)(text) ? 'float' : 'number';
107
- }
108
- if (curentType === 'url' && typeof text === 'string') {
109
- text = new URL(text);
110
- _typeStr = 'url';
111
- }
112
- if (Number.isNaN(text)) {
113
- _typeStr = 'number';
114
- }
115
- if (typeof text === 'string' && /^(true|false)$/gi.test(text)) {
116
- text = /^(true)$/gi.test(text) ? true : false;
117
- _typeStr = 'boolean';
118
- } else if (typeof text === 'string' && /^[\d]+n$/gi.test(text)) {
119
- text = BigInt(text.replace(/n$/gi, ''));
120
- _typeStr = 'bigint';
121
- } else if (typeof text === 'string' && /^(null)$/gi.test(text)) {
122
- text = null;
123
- _typeStr = 'null';
124
- } else if (typeof text === 'string' && /^(NaN)$/gi.test(text)) {
125
- text = NaN;
126
- _typeStr = 'NaN';
127
- } else if (typeof text === 'string' && /^(undefined)$/gi.test(text)) {
128
- text = undefined;
129
- _typeStr = 'undefined';
130
- } else if (typeof text === 'string') {
131
- try {
132
- if (text && text.length > 10 && !isNaN(Date.parse(text))) {
133
- dt = new Date(text);
134
- text = dt;
135
- _typeStr = 'date';
136
- }
137
- } catch (error) {}
138
- }
139
- if (!onEdit) {
140
- _context.next = 16;
141
- break;
142
- }
143
- _context.next = 14;
144
- return onEdit({
145
- type: 'value',
146
- value: text,
147
- oldValue: curentChild,
148
- namespace: namespace
149
- });
150
- case 14:
151
- result = _context.sent;
152
- if (result) {
153
- setCurentType(_typeStr);
154
- setCurentChild(text);
155
- } else {
156
- _getValueString = (0, _value.getValueString)(curentChild), oldChildStr = _getValueString.content;
157
- $edit.current.innerHTML = String(oldChildStr);
158
- }
159
- case 16:
160
- case "end":
161
- return _context.stop();
162
- }
163
- }, _callee);
164
- }))).apply(this, arguments);
165
- };
166
- var defaultStyle = {
167
- minWidth: 34,
168
- minHeight: 18,
169
- paddingInline: 3,
170
- display: 'inline-block'
171
- };
172
- var _getValueString2 = (0, _value.getValueString)(curentChild),
173
- typeStr = _getValueString2.type,
174
- childStr = _getValueString2.content;
175
- var color = ((_typeMap$typeStr = _value.typeMap[typeStr]) === null || _typeMap$typeStr === void 0 ? void 0 : _typeMap$typeStr.color) || '';
176
- var spanProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
177
- onBlur: blur,
178
- onKeyDown: keyDown,
179
- spellCheck: false,
180
- style: editable ? (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), defaultStyle), {}, {
181
- color: color
182
- }) : (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), {}, {
183
- color: color
184
- })
185
- });
186
- var typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Type, {
187
- type: typeStr
188
- });
189
- if (typeStr === 'null' || typeStr === 'undefined' || type.toLocaleLowerCase() === 'nan') {
190
- typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
191
- }
192
- var deleteHandle = function deleteHandle(_x) {
193
- return (_ref3 = _ref3 || (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee2(evn) {
194
- var maybeDelete;
195
- return (0, _regeneratorRuntime2["default"])().wrap(function _callee2$(_context2) {
196
- while (1) switch (_context2.prev = _context2.next) {
197
- case 0:
198
- evn.stopPropagation();
199
- if (!(data && keyName && keyName in data && setValue && onDelete)) {
200
- _context2.next = 6;
201
- break;
202
- }
203
- _context2.next = 4;
204
- return onDelete(keyName, value, parentValue, {
205
- namespace: namespace
206
- });
207
- case 4:
208
- maybeDelete = _context2.sent;
209
- if (maybeDelete) {
210
- delete data[keyName];
211
- setValue((0, _objectSpread2["default"])({}, data));
212
- }
213
- case 6:
214
- case "end":
215
- return _context2.stop();
216
- }
217
- }, _callee2);
218
- }))).apply(this, arguments);
219
- };
220
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
221
- children: [displayDataTypes && typeView, /*#__PURE__*/(0, _jsxRuntime.jsx)(Quotes, {
222
- style: style,
223
- quotes: quotes,
224
- show: typeStr === 'string'
225
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, spanProps), {}, {
226
- ref: $edit,
227
- "data-value": childStr,
228
- children: typeof curentChild === 'string' ? curentChild : childStr
229
- })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Quotes, {
230
- style: style,
231
- quotes: quotes,
232
- show: typeStr === 'string'
233
- }), visible && editableValue && onEdit && /*#__PURE__*/(0, _jsxRuntime.jsx)(_edit.EditIcon, {
234
- onClick: click
235
- }), visible && editableValue && onDelete && /*#__PURE__*/(0, _jsxRuntime.jsx)(_delete.DeleteIcon, {
236
- onClick: deleteHandle
237
- })]
238
- });
239
- }
240
- ReValue.displayName = 'JVR.ReValue';
package/cjs/node.d.ts DELETED
@@ -1,13 +0,0 @@
1
- import { FC, PropsWithChildren } from 'react';
2
- import { LabelProps } from './value';
3
- import { JsonViewProps } from './';
4
- export declare const CountInfo: FC<PropsWithChildren<LabelProps>>;
5
- export interface RootNodeProps<T extends object> extends JsonViewProps<T> {
6
- keyName?: string | number;
7
- keyid?: string;
8
- level?: number;
9
- parentValue?: T;
10
- namespace?: Array<string | number>;
11
- setParentValue?: React.Dispatch<React.SetStateAction<T>>;
12
- }
13
- export declare const RootNode: import("react").ForwardRefExoticComponent<Omit<RootNodeProps<object>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
package/cjs/node.js DELETED
@@ -1,329 +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.RootNode = exports.CountInfo = void 0;
8
- var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
9
- var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
10
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
11
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
12
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
13
- var _react = require("react");
14
- var _value = require("./value");
15
- var _TriangleArrow = require("./arrow/TriangleArrow");
16
- var _store = require("./store");
17
- var _semicolon = require("./semicolon");
18
- var _copied = require("./copied");
19
- var _ellipsis = require("./comps/ellipsis");
20
- var _meta = require("./comps/meta");
21
- var _jsxRuntime = require("react/jsx-runtime");
22
- var _excluded = ["value", "keyName", "className", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "highlightUpdates", "objectSortKeys", "indentWidth", "shortenTextAfterLength", "collapsed", "level", "keyid", "quotes", "namespace", "onCopied", "onExpand", "parentValue", "setParentValue"];
23
- function getLength(obj) {
24
- try {
25
- return Object.keys(obj).length;
26
- } catch (error) {
27
- return -1;
28
- }
29
- }
30
- var CountInfo = function CountInfo(_ref) {
31
- var children = _ref.children;
32
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_value.Label, {
33
- style: {
34
- paddingLeft: 4,
35
- fontStyle: 'italic'
36
- },
37
- color: "var(--w-rjv-info-color, #0000004d)",
38
- className: "w-rjv-object-size",
39
- children: [children, " items"]
40
- });
41
- };
42
- exports.CountInfo = CountInfo;
43
- CountInfo.displayName = 'JVR.CountInfo';
44
- var RootNode = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
45
- var _expands$keyid;
46
- var _props$value = props.value,
47
- value = _props$value === void 0 ? {} : _props$value,
48
- keyName = props.keyName,
49
- className = props.className,
50
- _props$displayDataTyp = props.displayDataTypes,
51
- displayDataTypes = _props$displayDataTyp === void 0 ? true : _props$displayDataTyp,
52
- _props$components = props.components,
53
- components = _props$components === void 0 ? {} : _props$components,
54
- _props$displayObjectS = props.displayObjectSize,
55
- displayObjectSize = _props$displayObjectS === void 0 ? true : _props$displayObjectS,
56
- _props$enableClipboar = props.enableClipboard,
57
- enableClipboard = _props$enableClipboar === void 0 ? true : _props$enableClipboar,
58
- _props$highlightUpdat = props.highlightUpdates,
59
- highlightUpdates = _props$highlightUpdat === void 0 ? true : _props$highlightUpdat,
60
- _props$objectSortKeys = props.objectSortKeys,
61
- objectSortKeys = _props$objectSortKeys === void 0 ? false : _props$objectSortKeys,
62
- _props$indentWidth = props.indentWidth,
63
- indentWidth = _props$indentWidth === void 0 ? 15 : _props$indentWidth,
64
- _props$shortenTextAft = props.shortenTextAfterLength,
65
- shortenTextAfterLength = _props$shortenTextAft === void 0 ? 20 : _props$shortenTextAft,
66
- collapsed = props.collapsed,
67
- _props$level = props.level,
68
- level = _props$level === void 0 ? 1 : _props$level,
69
- _props$keyid = props.keyid,
70
- keyid = _props$keyid === void 0 ? 'root' : _props$keyid,
71
- _props$quotes = props.quotes,
72
- quotes = _props$quotes === void 0 ? '"' : _props$quotes,
73
- _props$namespace = props.namespace,
74
- namespace = _props$namespace === void 0 ? [] : _props$namespace,
75
- onCopied = props.onCopied,
76
- onExpand = props.onExpand,
77
- parentValue = props.parentValue,
78
- setParentValue = props.setParentValue,
79
- reset = (0, _objectWithoutProperties2["default"])(props, _excluded);
80
- var isArray = Array.isArray(value);
81
- var subkeyid = (0, _react.useId)();
82
- var expands = (0, _store.useExpandsStatus)();
83
- var expand = (_expands$keyid = expands[keyid]) !== null && _expands$keyid !== void 0 ? _expands$keyid : typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level <= collapsed : true;
84
- var handle = function handle() {
85
- onExpand && typeof onExpand === 'function' && onExpand({
86
- expand: !expand,
87
- keyid: keyid,
88
- keyName: keyName,
89
- value: value
90
- });
91
- !expand ? _store.store.expand(keyid) : _store.store.collapse(keyid);
92
- };
93
- var _useState = (0, _react.useState)(value),
94
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
95
- valueData = _useState2[0],
96
- setValueData = _useState2[1];
97
- var subNodeProps = {
98
- components: components,
99
- indentWidth: indentWidth,
100
- displayDataTypes: displayDataTypes,
101
- displayObjectSize: displayObjectSize,
102
- enableClipboard: enableClipboard,
103
- highlightUpdates: highlightUpdates,
104
- onCopied: onCopied,
105
- onExpand: onExpand,
106
- collapsed: collapsed,
107
- parentValue: value,
108
- setParentValue: setValueData,
109
- quotes: quotes,
110
- level: level + 1,
111
- style: {
112
- paddingLeft: indentWidth
113
- }
114
- };
115
- var valueViewProps = {
116
- displayDataTypes: displayDataTypes,
117
- displayObjectSize: displayObjectSize,
118
- enableClipboard: enableClipboard,
119
- shortenTextAfterLength: shortenTextAfterLength,
120
- level: level + 1,
121
- parentValue: value,
122
- indentWidth: indentWidth,
123
- data: valueData,
124
- quotes: quotes,
125
- setValue: setValueData
126
- };
127
- var arrowStyle = {
128
- transform: "rotate(".concat(expand ? '0' : '-90', "deg)"),
129
- transition: 'all 0.3s'
130
- };
131
- var arrowView = components.arrow ? /*#__PURE__*/(0, _react.cloneElement)(components.arrow, {
132
- style: arrowStyle,
133
- 'data-expand': expand,
134
- className: 'w-rjv-arrow'
135
- }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_TriangleArrow.TriangleArrow, {
136
- style: arrowStyle,
137
- className: "w-rjv-arrow"
138
- });
139
- var _useState3 = (0, _react.useState)(false),
140
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
141
- showTools = _useState4[0],
142
- setShowTools = _useState4[1];
143
- var eventProps = {};
144
- if (enableClipboard) {
145
- eventProps.onMouseEnter = function () {
146
- return setShowTools(true);
147
- };
148
- eventProps.onMouseLeave = function () {
149
- return setShowTools(false);
150
- };
151
- }
152
- (0, _react.useEffect)(function () {
153
- return setValueData(value);
154
- }, [value]);
155
- var nameKeys = isArray ? Object.keys(valueData).map(function (m) {
156
- return Number(m);
157
- }) : Object.keys(valueData);
158
-
159
- // object
160
- var entries = isArray ? Object.entries(valueData).map(function (m) {
161
- return [Number(m[0]), m[1]];
162
- }) : Object.entries(valueData);
163
- if (objectSortKeys) {
164
- entries = objectSortKeys === true ? entries.sort(function (_ref2, _ref3) {
165
- var _ref4 = (0, _slicedToArray2["default"])(_ref2, 1),
166
- a = _ref4[0];
167
- var _ref5 = (0, _slicedToArray2["default"])(_ref3, 1),
168
- b = _ref5[0];
169
- return typeof a === 'string' && typeof b === 'string' ? a.localeCompare(b) : 0;
170
- }) : entries.sort(function (_ref6, _ref7) {
171
- var _ref8 = (0, _slicedToArray2["default"])(_ref6, 1),
172
- a = _ref8[0];
173
- var _ref9 = (0, _slicedToArray2["default"])(_ref7, 1),
174
- b = _ref9[0];
175
- return typeof a === 'string' && typeof b === 'string' ? objectSortKeys(a, b) : 0;
176
- });
177
- }
178
- var countInfo = /*#__PURE__*/(0, _jsxRuntime.jsx)(CountInfo, {
179
- children: nameKeys.length
180
- });
181
- if (components.countInfo) {
182
- countInfo = components.countInfo({
183
- count: nameKeys.length,
184
- level: level,
185
- visible: expand
186
- }) || countInfo;
187
- }
188
- if (!displayObjectSize) countInfo = null;
189
- var countInfoExtra = components.countInfoExtra && components.countInfoExtra({
190
- count: nameKeys.length,
191
- level: level,
192
- showTools: showTools,
193
- keyName: keyName,
194
- visible: expand,
195
- value: valueData,
196
- namespace: (0, _toConsumableArray2["default"])(namespace),
197
- parentValue: parentValue,
198
- setParentValue: setParentValue,
199
- setValue: setValueData
200
- });
201
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({
202
- ref: ref
203
- }, reset), {}, {
204
- className: "".concat(className, " w-rjv-inner")
205
- }, eventProps), {}, {
206
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_value.Line, {
207
- style: {
208
- display: 'inline-flex',
209
- alignItems: 'center'
210
- },
211
- onClick: handle,
212
- children: [arrowView, (typeof keyName === 'string' || typeof keyName === 'number') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
213
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_semicolon.Semicolon, {
214
- value: valueData,
215
- quotes: quotes,
216
- "data-keys": keyid,
217
- namespace: (0, _toConsumableArray2["default"])(namespace),
218
- render: components.objectKey,
219
- keyName: keyName,
220
- parentName: keyName,
221
- color: typeof keyName === 'number' ? _value.typeMap['number'].color : ''
222
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Colon, {})]
223
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_meta.Meta, {
224
- start: true,
225
- isArray: isArray,
226
- level: level,
227
- render: components.braces
228
- }), !expand && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ellipsis.Ellipsis, {
229
- render: components.ellipsis,
230
- count: nameKeys.length,
231
- level: level
232
- }), !expand && /*#__PURE__*/(0, _jsxRuntime.jsx)(_meta.Meta, {
233
- isArray: isArray,
234
- level: level,
235
- render: components.braces
236
- }), countInfo, countInfoExtra, enableClipboard && /*#__PURE__*/(0, _jsxRuntime.jsx)(_copied.Copied, {
237
- show: showTools,
238
- text: valueData,
239
- onCopied: onCopied,
240
- render: components === null || components === void 0 ? void 0 : components.copied
241
- })]
242
- }), expand && /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Line, {
243
- className: "w-rjv-content",
244
- style: {
245
- borderLeft: 'var(--w-rjv-border-left-width, 1px) var(--w-rjv-line-style, solid) var(--w-rjv-line-color, #ebebeb)',
246
- marginLeft: 6
247
- },
248
- children: entries.length > 0 && (0, _toConsumableArray2["default"])(entries).map(function (_ref10, idx) {
249
- var _ref11 = (0, _slicedToArray2["default"])(_ref10, 2),
250
- key = _ref11[0],
251
- itemVal = _ref11[1];
252
- var item = itemVal;
253
- var isEmpty = Array.isArray(item) && item.length === 0 || (0, _typeof2["default"])(item) === 'object' && item && !(item instanceof Date) && Object.keys(item).length === 0;
254
- if (Array.isArray(item) && !isEmpty) {
255
- var label = isArray ? idx : key;
256
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Line, {
257
- className: "w-rjv-wrap",
258
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RootNode, (0, _objectSpread2["default"])({
259
- value: item,
260
- namespace: [].concat((0, _toConsumableArray2["default"])(namespace), [label]),
261
- keyName: label,
262
- keyid: keyid + subkeyid + label
263
- }, subNodeProps))
264
- }, label + idx);
265
- }
266
- if ((0, _typeof2["default"])(item) === 'object' && item && !(item instanceof Date) && !isEmpty) {
267
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Line, {
268
- className: "w-rjv-wrap",
269
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RootNode, (0, _objectSpread2["default"])({
270
- value: item,
271
- namespace: [].concat((0, _toConsumableArray2["default"])(namespace), [key]),
272
- keyName: key,
273
- keyid: keyid + subkeyid + key
274
- }, subNodeProps))
275
- }, key + '' + idx);
276
- }
277
- if (typeof item === 'function') {
278
- return;
279
- }
280
- var renderKey = /*#__PURE__*/(0, _jsxRuntime.jsx)(_semicolon.Semicolon, {
281
- value: item,
282
- "data-keys": keyid,
283
- quotes: quotes,
284
- namespace: [].concat((0, _toConsumableArray2["default"])(namespace), [key]),
285
- parentName: keyName,
286
- highlightUpdates: highlightUpdates,
287
- render: components.objectKey,
288
- color: typeof key === 'number' ? _value.typeMap['number'].color : '',
289
- keyName: key
290
- });
291
- var length = Array.isArray(item) ? item.length : getLength(item);
292
- countInfo = /*#__PURE__*/(0, _jsxRuntime.jsx)(CountInfo, {
293
- children: length
294
- });
295
- if (components.countInfo) {
296
- countInfo = components.countInfo({
297
- count: length,
298
- level: level,
299
- visible: expand
300
- }) || countInfo;
301
- }
302
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.ValueView, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
303
- components: components,
304
- namespace: [].concat((0, _toConsumableArray2["default"])(namespace), [key])
305
- }, valueViewProps), {}, {
306
- countInfo: countInfo,
307
- renderKey: renderKey,
308
- keyName: key,
309
- value: item
310
- }), idx);
311
- })
312
- }), expand && /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Line, {
313
- style: {
314
- paddingLeft: 2
315
- },
316
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_meta.Meta, {
317
- render: components.braces,
318
- isArray: isArray,
319
- level: level,
320
- style: {
321
- paddingLeft: 2,
322
- display: 'inline-block'
323
- }
324
- })
325
- })]
326
- }));
327
- });
328
- exports.RootNode = RootNode;
329
- RootNode.displayName = 'JVR.RootNode';
@@ -1,22 +0,0 @@
1
- import type { FC, PropsWithChildren } from 'react';
2
- import type { LabelProps } from './value';
3
- import type { JsonViewProps } from './';
4
- export declare function usePrevious<T>(value: T): T | undefined;
5
- interface UseHighlight {
6
- value: any;
7
- highlightUpdates?: boolean;
8
- highlightContainer: React.MutableRefObject<HTMLSpanElement | null>;
9
- }
10
- export declare function useHighlight({ value, highlightUpdates, highlightContainer }: UseHighlight): void;
11
- export interface SemicolonProps extends LabelProps {
12
- highlightUpdates?: boolean;
13
- keyName?: string | number;
14
- parentName?: string | number;
15
- quotes?: JsonViewProps<object>['quotes'];
16
- value?: object;
17
- label?: string;
18
- namespace?: Array<string | number>;
19
- render?: (props: SemicolonProps) => React.ReactNode;
20
- }
21
- export declare const Semicolon: FC<PropsWithChildren<SemicolonProps>>;
22
- export {};