@uiw/react-json-view 1.12.0 → 2.0.0-alpha.1

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 +256 -262
  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 +74 -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 +74 -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
@@ -1,28 +0,0 @@
1
- /// <reference types="react" />
2
- import type { CountInfoProps } from '../';
3
- export interface CountInfoExtraProps<T> extends Partial<CountInfoProps> {
4
- editable: boolean;
5
- showTools: boolean;
6
- value: T;
7
- parentValue?: T;
8
- keyName?: string | number;
9
- namespace?: Array<string | number>;
10
- setValue?: React.Dispatch<React.SetStateAction<T>>;
11
- setParentValue?: React.Dispatch<React.SetStateAction<T>>;
12
- /**
13
- * When a callback function is passed in, add functionality is enabled. The callback is invoked before additions are completed.
14
- * @returns {boolean} Returning false from onAdd will prevent the change from being made.
15
- */
16
- onAdd?: (keyOrValue: string, newValue: T, value: T, isAdd: boolean) => boolean;
17
- /**
18
- * When a callback function is passed in, delete functionality is enabled. The callback is invoked before deletions are completed.
19
- * @returns Returning false from onDelete will prevent the change from being made.
20
- */
21
- onDelete?: (keyName: string | number, value: T, parentValue: T | null, opt: {
22
- namespace?: Array<string | number>;
23
- }) => boolean;
24
- }
25
- export declare function CountInfoExtra<T extends object>(props: CountInfoExtraProps<T>): import("react/jsx-runtime").JSX.Element | null;
26
- export declare namespace CountInfoExtra {
27
- var displayName: string;
28
- }
@@ -1,68 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/extends";
2
- import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
3
- import { Fragment } from 'react';
4
- import { AddIcon } from './icon/add';
5
- import { DeleteIcon } from './icon/delete';
6
- import { jsx as _jsx } from "react/jsx-runtime";
7
- import { jsxs as _jsxs } from "react/jsx-runtime";
8
- export function CountInfoExtra(props) {
9
- var _ref, _ref2;
10
- var {
11
- visible,
12
- showTools,
13
- editable,
14
- keyName,
15
- value,
16
- namespace,
17
- parentValue,
18
- setValue,
19
- setParentValue,
20
- onAdd,
21
- onDelete
22
- } = props;
23
- if (!visible || !showTools) return null;
24
- var click = function click(_x) {
25
- return (_ref = _ref || _asyncToGenerator(function* (event) {
26
- event.stopPropagation();
27
- var keyOrValue = 'AddKeyOrValue';
28
- var isArray = Array.isArray(value);
29
- var isAdd = isArray ? true : !(keyOrValue in value);
30
- var result = isArray ? [...value, keyOrValue] : _extends({}, value, {
31
- [keyOrValue]: undefined
32
- });
33
- if (onAdd && setValue) {
34
- var maybeAdd = yield onAdd(keyOrValue, result, props.value, isAdd);
35
- if (maybeAdd) {
36
- setValue(result);
37
- }
38
- }
39
- })).apply(this, arguments);
40
- };
41
- var deleteHandle = function deleteHandle(_x2) {
42
- return (_ref2 = _ref2 || _asyncToGenerator(function* (event) {
43
- event.stopPropagation();
44
- if (onDelete && (keyName || typeof keyName === 'number') && parentValue) {
45
- var maybeDelete = yield onDelete(keyName, value, parentValue, {
46
- namespace
47
- });
48
- if (maybeDelete && setParentValue) {
49
- if (Array.isArray(parentValue)) {
50
- parentValue.splice(keyName, 1);
51
- setParentValue([...parentValue]);
52
- } else if (keyName in parentValue) {
53
- delete parentValue[keyName];
54
- setParentValue(_extends({}, parentValue));
55
- }
56
- }
57
- }
58
- })).apply(this, arguments);
59
- };
60
- return /*#__PURE__*/_jsxs(Fragment, {
61
- children: [editable && onAdd && /*#__PURE__*/_jsx(AddIcon, {
62
- onClick: click
63
- }), editable && onDelete && parentValue && /*#__PURE__*/_jsx(DeleteIcon, {
64
- onClick: deleteHandle
65
- })]
66
- });
67
- }
68
- CountInfoExtra.displayName = 'JVR.CountInfoExtra';
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- export interface AddIconProps extends React.SVGAttributes<SVGElement> {
3
- }
4
- export declare const AddIcon: (props: AddIconProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,24 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/extends";
2
- import { jsx as _jsx } from "react/jsx-runtime";
3
- export var AddIcon = props => {
4
- var {
5
- style
6
- } = props;
7
- var defaultStyle = {
8
- verticalAlign: 'middle',
9
- display: 'inline-block',
10
- cursor: 'pointer',
11
- marginLeft: 5,
12
- height: '1em',
13
- width: '1em'
14
- };
15
- return /*#__PURE__*/_jsx("svg", _extends({
16
- viewBox: "0 0 40 40",
17
- fill: "var(--w-rjv-add-color, currentColor)"
18
- }, props, {
19
- style: _extends({}, style, defaultStyle),
20
- children: /*#__PURE__*/_jsx("path", {
21
- d: "M28.3940997,0 L11.625773,0 C4.34215619,0 0,4.34 0,11.62 L0,28.36 C0,35.66 4.34215619,40 11.625773,40 L28.3740897,40 C35.6577066,40 39.9999316,35.66 39.9999316,28.38 L39.9999316,11.62 C40.0198727,4.34 35.6777165,0 28.3940997,0 Z M30.12022,21.8947368 L21.9056145,21.8947368 L21.9056145,30.1052632 C21.9056145,31.1410526 21.0462404,32 20.0099363,32 C18.9736323,32 18.1142582,31.1410526 18.1142582,30.1052632 L18.1142582,21.8947368 L9.89965272,21.8947368 C8.86334865,21.8947368 8.00397454,21.0357895 8.00397454,20 C8.00397454,18.9642105 8.86334865,18.1052632 9.89965272,18.1052632 L18.1142582,18.1052632 L18.1142582,9.89473684 C18.1142582,8.85894737 18.9736323,8 20.0099363,8 C21.0462404,8 21.9056145,8.85894737 21.9056145,9.89473684 L21.9056145,18.1052632 L30.12022,18.1052632 C31.156524,18.1052632 32.0158982,18.9642105 32.0158982,20 C32.0158982,21.0357895 31.156524,21.8947368 30.12022,21.8947368 Z"
22
- })
23
- }));
24
- };
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- export interface DeleteIconProps extends React.SVGAttributes<SVGElement> {
3
- }
4
- export declare const DeleteIcon: (props: DeleteIconProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,24 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/extends";
2
- import { jsx as _jsx } from "react/jsx-runtime";
3
- export var DeleteIcon = props => {
4
- var {
5
- style
6
- } = props;
7
- var defaultStyle = {
8
- verticalAlign: 'middle',
9
- display: 'inline-block',
10
- cursor: 'pointer',
11
- marginLeft: 5,
12
- height: '1em',
13
- width: '1em'
14
- };
15
- return /*#__PURE__*/_jsx("svg", _extends({
16
- viewBox: "0 0 40 40",
17
- fill: "var(--w-rjv-delete-color, #dc3545)"
18
- }, props, {
19
- style: _extends({}, style, defaultStyle),
20
- children: /*#__PURE__*/_jsx("path", {
21
- d: "M28.3940997,0 L11.625773,0 C4.34215619,0 0,4.34 0,11.62 L0,28.36 C0,35.66 4.34215619,40 11.625773,40 L28.3740897,40 C35.6577066,40 39.9999316,35.66 39.9999316,28.38 L39.9999316,11.62 C40.0198727,4.34 35.6777165,0 28.3940997,0 Z M30.3428039,27.0681654 C31.2346195,27.9595381 31.2346195,29.4349136 30.3428039,30.3262862 C29.88152,30.7873411 29.2972271,31.0025 28.7129341,31.0025 C28.1286412,31.0025 27.5443483,30.7873411 27.0830644,30.3262862 L20.0100446,23.2567787 L12.9370249,30.3262862 C12.475741,30.7873411 11.891448,31.0025 11.3071551,31.0025 C10.7228621,31.0025 10.1385692,30.7873411 9.67728531,30.3262862 C8.78464325,29.4234847 8.78464325,27.9709669 9.67728531,27.0681654 L16.7503051,19.9986579 L9.67728531,12.9291504 C8.78464325,12.0263488 8.78464325,10.573831 9.67728531,9.67102951 C10.5691008,8.77965683 12.0452093,8.77965683 12.9370249,9.67102951 L20.0100446,16.740537 L27.0830644,9.67102951 C27.9748799,8.77965683 29.4509884,8.77965683 30.3428039,9.67102951 C31.2346195,10.5624022 31.2346195,12.0377777 30.3428039,12.9291504 L23.2697842,19.9986579 L30.3428039,27.0681654 L30.3428039,27.0681654 Z"
22
- })
23
- }));
24
- };
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- export interface EditIconProps extends React.SVGAttributes<SVGElement> {
3
- }
4
- export declare const EditIcon: (props: EditIconProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,24 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/extends";
2
- import { jsx as _jsx } from "react/jsx-runtime";
3
- export var EditIcon = props => {
4
- var {
5
- style
6
- } = props;
7
- var defaultStyle = {
8
- verticalAlign: 'middle',
9
- display: 'inline-block',
10
- cursor: 'pointer',
11
- marginLeft: 5,
12
- height: '1em',
13
- width: '1em'
14
- };
15
- return /*#__PURE__*/_jsx("svg", _extends({
16
- viewBox: "0 0 26 26",
17
- fill: "var(--w-rjv-edit-color, currentColor)"
18
- }, props, {
19
- style: _extends({}, style, defaultStyle),
20
- children: /*#__PURE__*/_jsx("path", {
21
- d: "M18,0 L7.74666667,0 C2.89333333,0 0,2.89333333 0,7.74666667 L0,17.9066667 C0,22.7733333 2.89333333,26 7.74666667,26 L18,26 C22.8533333,26 26.0001422,22.7733333 26.0001422,17.92 L26.0001422,7.74666667 C26.0133333,2.89333333 22.8533333,0 18,0 Z M11.9333333,20.68 C11.5466667,21.0666667 10.8133333,21.44 10.28,21.52 L7,21.9866667 C6.88,22 6.76,22.0133333 6.64,22.0133333 C6.09333333,22.0133333 5.58666667,21.8266667 5.22666667,21.4666667 C4.78666667,21.0266667 4.6,20.3866667 4.70666667,19.68 L5.17333333,16.4 C5.25333333,15.8533333 5.61333333,15.1333333 6.01333333,14.7466667 L11.96,8.8 C12.1719034,9.3972484 12.4397602,9.97314063 12.76,10.52 C12.8933333,10.7466667 13.04,10.96 13.16,11.12 C13.3066667,11.3466667 13.48,11.56 13.5866667,11.68 C13.6533333,11.7733333 13.7066667,11.84 13.7333333,11.8666667 C14.0666667,12.2666667 14.4533333,12.64 14.7866667,12.92 C14.88,13.0133333 14.9333333,13.0666667 14.96,13.08 C15.16,13.24 15.36,13.4 15.5333333,13.52 C15.7466667,13.68 15.96,13.8266667 16.1866667,13.9466667 C16.4533333,14.1066667 16.7466667,14.2533333 17.04,14.4 C17.3466667,14.5333333 17.6266667,14.6533333 17.9066667,14.7466667 L11.9333333,20.68 L11.9333333,20.68 Z M20.4933333,12.12 L19.2666667,13.36 C19.1887174,13.4373865 19.0831716,13.4805643 18.9733333,13.4800055 C18.9333333,13.4800055 18.88,13.4800055 18.8533333,13.4666667 C16.1309823,12.6775025 14.0024975,10.5490177 13.2133333,7.82666667 C13.1733333,7.68 13.2133333,7.52 13.32,7.42666667 L14.56,6.18666667 C16.5866667,4.16 18.52,4.2 20.5066667,6.18666667 C21.52,7.2 22.0133333,8.17333333 22.0133333,9.18666667 C22,10.1466667 21.5066667,11.1066667 20.4933333,12.12 L20.4933333,12.12 Z"
22
- })
23
- }));
24
- };
@@ -1,31 +0,0 @@
1
- /// <reference types="react" />
2
- import type { JsonViewProps } from '../';
3
- import type { CountInfoExtraProps } from './countInfoExtra';
4
- export interface JsonViewEditorProps<T extends object> extends Omit<JsonViewProps<T>, 'shortenTextAfterLength'> {
5
- /**
6
- * When a callback function is passed in, edit functionality is enabled. The callback is invoked before edits are completed.
7
- * @returns {boolean} Returning false from onEdit will prevent the change from being made.
8
- */
9
- onEdit?: (option: {
10
- value: unknown;
11
- oldValue: unknown;
12
- keyName?: string | number;
13
- parentName?: string | number;
14
- namespace?: Array<string | number>;
15
- type?: 'value' | 'key';
16
- }) => boolean;
17
- /**
18
- * When a callback function is passed in, add functionality is enabled. The callback is invoked before additions are completed.
19
- * @returns {boolean} Returning false from onAdd will prevent the change from being made.
20
- */
21
- onAdd?: CountInfoExtraProps<T>['onAdd'];
22
- /**
23
- * When a callback function is passed in, delete functionality is enabled. The callback is invoked before deletions are completed.
24
- * @returns Returning false from onDelete will prevent the change from being made.
25
- */
26
- onDelete?: CountInfoExtraProps<T>['onDelete'];
27
- /** Whether enable edit feature. @default true */
28
- editable?: boolean;
29
- }
30
- declare const JsonViewEditor: import("react").ForwardRefExoticComponent<Omit<JsonViewEditorProps<object>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
31
- export default JsonViewEditor;
@@ -1,47 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/extends";
2
- import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
3
- var _excluded = ["onEdit", "components", "editable", "displayDataTypes", "onAdd", "onDelete"];
4
- import { forwardRef } from 'react';
5
- import JsonView from '../';
6
- import { ObjectKey } from './objectKey';
7
- import { ReValue } from './value';
8
- import { CountInfoExtra } from './countInfoExtra';
9
- import { jsx as _jsx } from "react/jsx-runtime";
10
- var JsonViewEditor = /*#__PURE__*/forwardRef((props, ref) => {
11
- var {
12
- onEdit,
13
- components,
14
- editable = true,
15
- displayDataTypes = true,
16
- onAdd,
17
- onDelete
18
- } = props,
19
- reset = _objectWithoutPropertiesLoose(props, _excluded);
20
- var comps = _extends({}, components, {
21
- countInfoExtra: reprops => /*#__PURE__*/_jsx(CountInfoExtra, _extends({}, reprops, {
22
- editable: editable,
23
- onAdd: onAdd,
24
- onDelete: onDelete
25
- })),
26
- objectKey: reprops => /*#__PURE__*/_jsx(ObjectKey, _extends({}, reprops, {
27
- editableValue: editable,
28
- onEdit: onEdit,
29
- render: components == null ? void 0 : components.objectKey
30
- })),
31
- value: reprops => {
32
- return /*#__PURE__*/_jsx(ReValue, _extends({}, reprops, {
33
- editableValue: editable,
34
- displayDataTypes: displayDataTypes,
35
- onDelete: onDelete,
36
- onEdit: onEdit
37
- }));
38
- }
39
- });
40
- return /*#__PURE__*/_jsx(JsonView, _extends({}, reset, {
41
- displayDataTypes: false,
42
- components: comps,
43
- ref: ref
44
- }));
45
- });
46
- JsonViewEditor.displayName = 'JVR.JsonViewEditor';
47
- export default JsonViewEditor;
@@ -1,11 +0,0 @@
1
- import { FC } from 'react';
2
- import type { SemicolonProps } from '../semicolon';
3
- import type { JsonViewEditorProps } from './';
4
- export interface ObjectKeyProps<T extends object> extends SemicolonProps {
5
- onEdit?: JsonViewEditorProps<T>['onEdit'];
6
- render?: (props: SemicolonProps & {
7
- ref?: React.RefObject<HTMLElement>;
8
- }) => React.ReactNode;
9
- editableValue?: boolean;
10
- }
11
- export declare const ObjectKey: FC<ObjectKeyProps<object>>;
@@ -1,135 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/extends";
2
- import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
3
- import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
4
- var _excluded = ["className", "value", "keyName", "parentName", "quotes", "label", "namespace", "editableValue", "onEdit", "highlightUpdates", "render"];
5
- import { useEffect, useRef, useState } from 'react';
6
- import { useHighlight } from '../semicolon';
7
- import { Label } from '../value';
8
- import { jsx as _jsx } from "react/jsx-runtime";
9
- export var ObjectKey = props => {
10
- var _ref;
11
- var {
12
- className,
13
- value,
14
- keyName,
15
- parentName,
16
- quotes,
17
- label,
18
- namespace,
19
- editableValue,
20
- onEdit,
21
- highlightUpdates = true,
22
- render
23
- } = props,
24
- reset = _objectWithoutPropertiesLoose(props, _excluded);
25
- var [editable, setEditable] = useState(false);
26
- var [curentLabel, setCurentLabel] = useState(label);
27
- useEffect(() => setCurentLabel(label), [label]);
28
- var $edit = useRef(null);
29
- useHighlight({
30
- value,
31
- highlightUpdates: highlightUpdates,
32
- highlightContainer: $edit
33
- });
34
- var click = evn => {
35
- evn.stopPropagation();
36
- if (!editableValue) return;
37
- if (typeof keyName !== 'string') return;
38
- if (editable) return;
39
- setEditable(true);
40
- if ($edit.current) {
41
- var _$edit$current;
42
- $edit.current.contentEditable = 'true';
43
- (_$edit$current = $edit.current) == null || _$edit$current.focus();
44
- }
45
- };
46
- var blur = function blur() {
47
- return (_ref = _ref || _asyncToGenerator(function* () {
48
- if ($edit.current) {
49
- var _$edit$current2;
50
- if (onEdit) {
51
- var result = yield onEdit({
52
- value: $edit.current.innerText,
53
- oldValue: curentLabel,
54
- namespace,
55
- keyName,
56
- parentName,
57
- type: 'key'
58
- });
59
- if (result) {
60
- setCurentLabel($edit.current.innerText);
61
- } else {
62
- $edit.current.innerText = curentLabel;
63
- }
64
- }
65
- $edit.current.contentEditable = 'false';
66
- (_$edit$current2 = $edit.current) == null || _$edit$current2.focus();
67
- }
68
- setEditable(false);
69
- })).apply(this, arguments);
70
- };
71
- var focus = () => {
72
- if ($edit.current) {
73
- var _$edit$current3;
74
- $edit.current.contentEditable = 'true';
75
- (_$edit$current3 = $edit.current) == null || _$edit$current3.focus();
76
- }
77
- };
78
- var keyDown = evn => {
79
- if (evn.key === 'Enter') {
80
- evn.stopPropagation();
81
- evn.preventDefault();
82
- $edit.current.contentEditable = 'false';
83
- }
84
- };
85
- useEffect(() => {
86
- if ($edit.current) {
87
- $edit.current.addEventListener('paste', e => {
88
- e.preventDefault();
89
- // @ts-ignore
90
- var text = e.clipboardData.getData('text/plain');
91
- document.execCommand('insertHTML', false, text);
92
- });
93
- }
94
- }, [$edit]);
95
- var style = {
96
- minWidth: 34,
97
- minHeight: 18,
98
- paddingInline: 3,
99
- display: 'inline-block'
100
- };
101
- var content = typeof keyName === 'string' ? "" + quotes + curentLabel + quotes : curentLabel;
102
- var spanProps = {
103
- onClick: click,
104
- onFocus: focus,
105
- onBlur: blur,
106
- onKeyDown: keyDown,
107
- style: editable ? style : {},
108
- contentEditable: editable,
109
- spellCheck: false,
110
- autoFocus: editable,
111
- suppressContentEditableWarning: true,
112
- children: editable ? curentLabel : content
113
- };
114
- if (render) {
115
- spanProps.value = value;
116
- spanProps.keyName = keyName;
117
- spanProps.parentName = parentName;
118
- return render(_extends({
119
- className
120
- }, reset, spanProps, {
121
- parentName,
122
- label: curentLabel,
123
- children: editable ? curentLabel : content,
124
- ref: $edit
125
- }));
126
- }
127
- return /*#__PURE__*/_jsx(Label, _extends({
128
- className: className
129
- }, reset, {
130
- autoFocus: editable
131
- }, spanProps, {
132
- ref: $edit
133
- }));
134
- };
135
- ObjectKey.displayName = 'JVR.ObjectKey';
@@ -1,22 +0,0 @@
1
- /// <reference types="react" />
2
- import type { TypeProps } from '../value';
3
- import type { JsonViewEditorProps } from './';
4
- export interface ReValueProps<T extends object> extends React.HTMLAttributes<HTMLSpanElement> {
5
- onEdit?: JsonViewEditorProps<T>['onEdit'];
6
- quotes?: JsonViewEditorProps<T>['quotes'];
7
- keyName?: JsonViewEditorProps<T>['keyName'];
8
- type: TypeProps['type'];
9
- value?: unknown;
10
- parentValue?: T;
11
- data?: T;
12
- visible?: boolean;
13
- namespace?: Array<string | number>;
14
- editableValue?: boolean;
15
- displayDataTypes?: boolean;
16
- setValue?: React.Dispatch<React.SetStateAction<T>>;
17
- onDelete?: JsonViewEditorProps<T>['onDelete'];
18
- }
19
- export declare function ReValue<T extends object>(props: ReValueProps<T>): import("react/jsx-runtime").JSX.Element;
20
- export declare namespace ReValue {
21
- var displayName: string;
22
- }
@@ -1,192 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/extends";
2
- import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
3
- import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
4
- var _excluded = ["type", "value", "setValue", "data", "keyName", "visible", "quotes", "style", "children", "namespace", "displayDataTypes", "editableValue", "parentValue", "onDelete", "onEdit"];
5
- import { Fragment, useEffect, useRef, useState } from 'react';
6
- import { getValueString, isFloat, Type, typeMap } from '../value';
7
- import { EditIcon } from './icon/edit';
8
- import { DeleteIcon } from './icon/delete';
9
- import { jsx as _jsx } from "react/jsx-runtime";
10
- import { jsxs as _jsxs } from "react/jsx-runtime";
11
- var Quotes = _ref => {
12
- var {
13
- show,
14
- style,
15
- quotes
16
- } = _ref;
17
- if (!quotes || !show) return;
18
- return /*#__PURE__*/_jsx("span", {
19
- style: style,
20
- children: quotes
21
- });
22
- };
23
- export function ReValue(props) {
24
- var _ref2, _typeMap$typeStr, _ref3;
25
- var {
26
- type,
27
- value,
28
- setValue,
29
- data,
30
- keyName,
31
- visible,
32
- quotes,
33
- style,
34
- namespace,
35
- displayDataTypes,
36
- editableValue,
37
- parentValue,
38
- onDelete,
39
- onEdit
40
- } = props,
41
- reset = _objectWithoutPropertiesLoose(props, _excluded);
42
- var [editable, setEditable] = useState(false);
43
- var $edit = useRef(null);
44
- var [curentType, setCurentType] = useState(type);
45
- var [curentChild, setCurentChild] = useState(value);
46
- useEffect(() => setCurentChild(value), [value]);
47
- var click = evn => {
48
- evn.stopPropagation();
49
- if (!editableValue) return;
50
- if ($edit.current) {
51
- var _$edit$current;
52
- setEditable(true);
53
- $edit.current.setAttribute('contentEditable', 'true');
54
- (_$edit$current = $edit.current) == null || _$edit$current.focus();
55
- }
56
- };
57
- var keyDown = evn => {
58
- if (!editableValue) return;
59
- if (evn.key === 'Enter') {
60
- evn.stopPropagation();
61
- evn.preventDefault();
62
- setEditable(false);
63
- if ($edit.current) {
64
- $edit.current.setAttribute('contentEditable', 'false');
65
- }
66
- }
67
- };
68
- var blur = function blur() {
69
- return (_ref2 = _ref2 || _asyncToGenerator(function* () {
70
- if (!editableValue) return;
71
- setEditable(false);
72
- if ($edit.current) {
73
- $edit.current.setAttribute('contentEditable', 'false');
74
- var text = $edit.current.innerHTML;
75
- var _typeStr = curentType;
76
- if (curentType === 'number' || curentType === 'float') {
77
- text = Number(text);
78
- _typeStr = isFloat(text) ? 'float' : 'number';
79
- }
80
- if (curentType === 'url' && typeof text === 'string') {
81
- text = new URL(text);
82
- _typeStr = 'url';
83
- }
84
- if (Number.isNaN(text)) {
85
- _typeStr = 'number';
86
- }
87
- if (typeof text === 'string' && /^(true|false)$/gi.test(text)) {
88
- text = /^(true)$/gi.test(text) ? true : false;
89
- _typeStr = 'boolean';
90
- } else if (typeof text === 'string' && /^[\d]+n$/gi.test(text)) {
91
- text = BigInt(text.replace(/n$/gi, ''));
92
- _typeStr = 'bigint';
93
- } else if (typeof text === 'string' && /^(null)$/gi.test(text)) {
94
- text = null;
95
- _typeStr = 'null';
96
- } else if (typeof text === 'string' && /^(NaN)$/gi.test(text)) {
97
- text = NaN;
98
- _typeStr = 'NaN';
99
- } else if (typeof text === 'string' && /^(undefined)$/gi.test(text)) {
100
- text = undefined;
101
- _typeStr = 'undefined';
102
- } else if (typeof text === 'string') {
103
- try {
104
- if (text && text.length > 10 && !isNaN(Date.parse(text))) {
105
- var dt = new Date(text);
106
- text = dt;
107
- _typeStr = 'date';
108
- }
109
- } catch (error) {}
110
- }
111
- if (onEdit) {
112
- var result = yield onEdit({
113
- type: 'value',
114
- value: text,
115
- oldValue: curentChild,
116
- namespace
117
- });
118
- if (result) {
119
- setCurentType(_typeStr);
120
- setCurentChild(text);
121
- } else {
122
- var {
123
- content: oldChildStr
124
- } = getValueString(curentChild);
125
- $edit.current.innerHTML = String(oldChildStr);
126
- }
127
- }
128
- }
129
- })).apply(this, arguments);
130
- };
131
- var defaultStyle = {
132
- minWidth: 34,
133
- minHeight: 18,
134
- paddingInline: 3,
135
- display: 'inline-block'
136
- };
137
- var {
138
- type: typeStr,
139
- content: childStr
140
- } = getValueString(curentChild);
141
- var color = ((_typeMap$typeStr = typeMap[typeStr]) == null ? void 0 : _typeMap$typeStr.color) || '';
142
- var spanProps = _extends({}, reset, {
143
- onBlur: blur,
144
- onKeyDown: keyDown,
145
- spellCheck: false,
146
- style: editable ? _extends({}, style, defaultStyle, {
147
- color
148
- }) : _extends({}, style, {
149
- color
150
- })
151
- });
152
- var typeView = /*#__PURE__*/_jsx(Type, {
153
- type: typeStr
154
- });
155
- if (typeStr === 'null' || typeStr === 'undefined' || type.toLocaleLowerCase() === 'nan') {
156
- typeView = /*#__PURE__*/_jsx(Fragment, {});
157
- }
158
- var deleteHandle = function deleteHandle(_x) {
159
- return (_ref3 = _ref3 || _asyncToGenerator(function* (evn) {
160
- evn.stopPropagation();
161
- if (data && keyName && keyName in data && setValue && onDelete) {
162
- var maybeDelete = yield onDelete(keyName, value, parentValue, {
163
- namespace
164
- });
165
- if (maybeDelete) {
166
- delete data[keyName];
167
- setValue(_extends({}, data));
168
- }
169
- }
170
- })).apply(this, arguments);
171
- };
172
- return /*#__PURE__*/_jsxs(Fragment, {
173
- children: [displayDataTypes && typeView, /*#__PURE__*/_jsx(Quotes, {
174
- style: style,
175
- quotes: quotes,
176
- show: typeStr === 'string'
177
- }), /*#__PURE__*/_jsx("span", _extends({}, spanProps, {
178
- ref: $edit,
179
- "data-value": childStr,
180
- children: typeof curentChild === 'string' ? curentChild : childStr
181
- })), /*#__PURE__*/_jsx(Quotes, {
182
- style: style,
183
- quotes: quotes,
184
- show: typeStr === 'string'
185
- }), visible && editableValue && onEdit && /*#__PURE__*/_jsx(EditIcon, {
186
- onClick: click
187
- }), visible && editableValue && onDelete && /*#__PURE__*/_jsx(DeleteIcon, {
188
- onClick: deleteHandle
189
- })]
190
- });
191
- }
192
- ReValue.displayName = 'JVR.ReValue';
package/esm/node.d.ts DELETED
@@ -1,15 +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
- isSet?: boolean;
11
- isMap?: boolean;
12
- namespace?: Array<string | number>;
13
- setParentValue?: React.Dispatch<React.SetStateAction<T>>;
14
- }
15
- export declare const RootNode: import("react").ForwardRefExoticComponent<Omit<RootNodeProps<object>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;