update json-view
This commit is contained in:
Victor Oliva
+3
-3
@@ -53,7 +53,7 @@
|
||||
"react-router-dom": "^7.2.0",
|
||||
"react-svg": "^16.3.0",
|
||||
"react-virtuoso": "^4.12.5",
|
||||
"react18-json-view": "^0.2.8",
|
||||
"react18-json-view": "^0.2.9",
|
||||
"rxjs": "^7.8.1",
|
||||
"save-as": "^0.1.8",
|
||||
"tailwind-merge": "^2.5.4",
|
||||
@@ -84,8 +84,8 @@
|
||||
"packageManager": "pnpm@9.12.2+sha512.22721b3a11f81661ae1ec68ce1a7b879425a1ca5b991c975b074ac220b187ce56c708fe5db69f4c962c989452eee76c82877f4ee80f474cebd61ee13461b6228",
|
||||
"pnpm": {
|
||||
"patchedDependencies": {
|
||||
"react18-json-view@0.2.8": "patches/react18-json-view@0.2.8.patch",
|
||||
"@polkadot-api/observable-client": "patches/@polkadot-api__observable-client.patch"
|
||||
"@polkadot-api/observable-client": "patches/@polkadot-api__observable-client.patch",
|
||||
"react18-json-view": "patches/react18-json-view.patch"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,143 @@
|
||||
diff --git a/dist/components/json-view.d.ts b/dist/components/json-view.d.ts
|
||||
index 44b3fdc1f5d619833af09f0f916a685e55fcc9c8..7054064cb847e7d69eac8ddad21b5593b707c1bc 100644
|
||||
--- a/dist/components/json-view.d.ts
|
||||
+++ b/dist/components/json-view.d.ts
|
||||
@@ -107,6 +107,7 @@ export declare const JsonViewContext: import("react").Context<{
|
||||
}, {}, any> | undefined;
|
||||
}>;
|
||||
export interface JsonViewProps {
|
||||
+ replacer?: (node: any) => any;
|
||||
src: any;
|
||||
collapseStringsAfterLength?: number;
|
||||
collapseStringMode?: 'directly' | 'word' | 'address';
|
||||
diff --git a/dist/es/index.mjs b/dist/es/index.mjs
|
||||
index ee2e3dee5780764f111f8761442e45014d8f050e..70adf8d3cad13239dfc255d2ae3d87225eb5d0b1 100644
|
||||
--- a/dist/es/index.mjs
|
||||
+++ b/dist/es/index.mjs
|
||||
@@ -495,7 +495,7 @@ function LargeArrayNode({ originNode, node, depth, index, deleteHandle: _deleteS
|
||||
forceUpdate();
|
||||
};
|
||||
const Icons = (jsxs(Fragment, { children: [!fold && (jsxs("span", Object.assign({ onClick: () => setFold(true), className: 'jv-size-chevron' }, { children: [ifDisplay(displaySize, depth, fold) && jsxs("span", Object.assign({ className: 'jv-size' }, { children: [objectSize(node), " Items"] })), jsx(SvgAngleDown, { className: 'jv-chevron' })] }))), !fold && enableClipboard && customCopy(customOptions) && (jsx(CopyButton, { node: node, nodeMeta: { depth, indexOrName: index, parent, parentPath, currentPath } })), typeof CustomOperation === 'function' ? jsx(CustomOperation, { node: node }) : null] }));
|
||||
- return (jsxs("div", { children: [jsx("span", { children: '[' }), Icons, !fold ? (jsx("div", Object.assign({ className: 'jv-indent' }, { children: node.map((n, i) => (jsx(NameValue, { indexOrName: i + startIndex, value: n, depth: depth, parent: node, deleteHandle: deleteHandle, editHandle: editHandle, parentPath: parentPath }, String(index) + String(i)))) }))) : (jsxs("button", Object.assign({ onClick: () => setFold(false), className: 'jv-button' }, { children: [startIndex, " ... ", startIndex + node.length - 1] }))), jsx("span", { children: ']' })] }));
|
||||
+ return (jsxs("div", { children: [jsx("span", { children: '[' }), Icons, !fold ? (jsx("div", Object.assign({ className: 'jv-indent' }, { children: node.map((n, i) => (jsx(NameValue, { indexOrName: i + startIndex, value: n, depth: depth, parent: node, deleteHandle: deleteHandle, editHandle: editHandle, parentPath: parentPath }, String(index) + String(i)))) }))) : (jsxs("button", Object.assign({ onClick: () => setFold(false), className: 'jv-button' }, { children: [startIndex, " … ", startIndex + node.length - 1] }))), jsx("span", { children: ']' })] }));
|
||||
}
|
||||
|
||||
function LargeArray({ node, depth, deleteHandle: _deleteSelf, indexOrName, customOptions, parent, parentPath }) {
|
||||
@@ -546,7 +546,7 @@ function LargeArray({ node, depth, deleteHandle: _deleteSelf, indexOrName, custo
|
||||
const Icons = (jsxs(Fragment, { children: [!fold && !isEditing && (jsxs("span", Object.assign({ onClick: () => setFold(true), className: 'jv-size-chevron' }, { children: [ifDisplay(displaySize, depth, fold) && jsxs("span", Object.assign({ className: 'jv-size' }, { children: [node.length, " Items"] })), jsx(SvgAngleDown, { className: 'jv-chevron' })] }))), isEditing && jsx(SvgDone, { className: 'json-view--edit', style: { display: 'inline-block' }, onClick: adding ? add : deleteSelf }), isEditing && jsx(SvgCancel, { className: 'json-view--edit', style: { display: 'inline-block' }, onClick: cancel }), !fold && !isEditing && enableClipboard && customCopy(customOptions) && (jsx(CopyButton, { node: node, nodeMeta: { depth, indexOrName, parent, parentPath, currentPath } })), !fold && !isEditing && editableAdd(editable) && customAdd(customOptions) && (jsx(SvgAddSquare, { className: 'json-view--edit', onClick: () => {
|
||||
add();
|
||||
} })), !fold && !isEditing && editableDelete(editable) && customDelete(customOptions) && _deleteSelf && (jsx(SvgTrash, { className: 'json-view--edit', onClick: () => setDeleting(true) })), typeof CustomOperation === 'function' ? jsx(CustomOperation, { node: node }) : null] }));
|
||||
- return (jsxs(Fragment, { children: [jsx("span", { children: '[' }), Icons, !fold ? (jsx("div", Object.assign({ className: 'jv-indent' }, { children: nestCollapsedArray.map((item, index) => (jsx(LargeArrayNode, { originNode: node, node: item, depth: depth, index: index, startIndex: index * 100, deleteHandle: _deleteSelf, customOptions: customOptions, parentPath: parentPath }, String(indexOrName) + String(index)))) }))) : (jsx("button", Object.assign({ onClick: () => setFold(false), className: 'jv-button' }, { children: "..." }))), jsx("span", { children: ']' }), fold && ifDisplay(displaySize, depth, fold) && (jsxs("span", Object.assign({ onClick: () => setFold(false), className: 'jv-size' }, { children: [node.length, " Items"] })))] }));
|
||||
+ return (jsxs(Fragment, { children: [jsx("span", { children: '[' }), Icons, !fold ? (jsx("div", Object.assign({ className: 'jv-indent' }, { children: nestCollapsedArray.map((item, index) => (jsx(LargeArrayNode, { originNode: node, node: item, depth: depth, index: index, startIndex: index * 100, deleteHandle: _deleteSelf, customOptions: customOptions, parentPath: parentPath }, String(indexOrName) + String(index)))) }))) : (jsx("button", Object.assign({ onClick: () => setFold(false), className: 'jv-button' }, { children: "…" }))), jsx("span", { children: ']' }), fold && ifDisplay(displaySize, depth, fold) && (jsxs("span", Object.assign({ onClick: () => setFold(false), className: 'jv-size' }, { children: [node.length, " Items"] })))] }));
|
||||
}
|
||||
|
||||
function ObjectNode({ node, depth, indexOrName, deleteHandle: _deleteSelf, customOptions, parent, parentPath }) {
|
||||
@@ -666,10 +666,10 @@ function ObjectNode({ node, depth, indexOrName, deleteHandle: _deleteSelf, custo
|
||||
}
|
||||
} })), !fold && !isEditing && editableDelete(editable) && customDelete(customOptions) && _deleteSelf && (jsx(SvgTrash, { className: 'json-view--edit', onClick: () => setDeleting(true) })), typeof CustomOperation === 'function' ? jsx(CustomOperation, { node: node }) : null] }));
|
||||
if (Array.isArray(node)) {
|
||||
- return (jsxs(Fragment, { children: [jsx("span", { children: '[' }), Icons, !fold ? (jsx("div", Object.assign({ className: 'jv-indent' }, { children: node.map((n, i) => (jsx(NameValue, { indexOrName: i, value: n, depth: depth, parent: node, deleteHandle: deleteHandle, editHandle: editHandle, parentPath: currentPath }, String(indexOrName) + String(i)))) }))) : (jsx("button", Object.assign({ onClick: () => setFold(false), className: 'jv-button' }, { children: "..." }))), jsx("span", { children: ']' }), fold && ifDisplay(displaySize, depth, fold) && (jsxs("span", Object.assign({ onClick: () => setFold(false), className: 'jv-size' }, { children: [objectSize(node), " Items"] })))] }));
|
||||
+ return (jsxs(Fragment, { children: [jsx("span", { children: '[' }), Icons, !fold ? (jsx("div", Object.assign({ className: 'jv-indent' }, { children: node.map((n, i) => (jsx(NameValue, { indexOrName: i, value: n, depth: depth, parent: node, deleteHandle: deleteHandle, editHandle: editHandle, parentPath: currentPath }, String(indexOrName) + String(i)))) }))) : (jsx("button", Object.assign({ onClick: () => setFold(false), className: 'jv-button' }, { children: "…" }))), jsx("span", { children: ']' }), fold && ifDisplay(displaySize, depth, fold) && (jsxs("span", Object.assign({ onClick: () => setFold(false), className: 'jv-size' }, { children: [objectSize(node), " Items"] })))] }));
|
||||
}
|
||||
else if (isPlainObject) {
|
||||
- return (jsxs(Fragment, { children: [jsx("span", { children: '{' }), Icons, !fold ? (jsx("div", Object.assign({ className: 'jv-indent' }, { children: Object.entries(node).map(([name, value]) => (jsx(NameValue, { indexOrName: name, value: value, depth: depth, parent: node, deleteHandle: deleteHandle, editHandle: editHandle, parentPath: currentPath }, String(indexOrName) + String(name)))) }))) : (jsx("button", Object.assign({ onClick: () => setFold(false), className: 'jv-button' }, { children: "..." }))), jsx("span", { children: '}' }), fold && ifDisplay(displaySize, depth, fold) && (jsxs("span", Object.assign({ onClick: () => setFold(false), className: 'jv-size' }, { children: [objectSize(node), " Items"] })))] }));
|
||||
+ return (jsxs(Fragment, { children: [jsx("span", { children: '{' }), Icons, !fold ? (jsx("div", Object.assign({ className: 'jv-indent' }, { children: Object.entries(node).map(([name, value]) => (jsx(NameValue, { indexOrName: name, value: value, depth: depth, parent: node, deleteHandle: deleteHandle, editHandle: editHandle, parentPath: currentPath }, String(indexOrName) + String(name)))) }))) : (jsx("button", Object.assign({ onClick: () => setFold(false), className: 'jv-button' }, { children: "…" }))), jsx("span", { children: '}' }), fold && ifDisplay(displaySize, depth, fold) && (jsxs("span", Object.assign({ onClick: () => setFold(false), className: 'jv-size' }, { children: [objectSize(node), " Items"] })))] }));
|
||||
}
|
||||
else {
|
||||
return jsx("span", { children: String(node) });
|
||||
@@ -686,7 +686,7 @@ const LongString = React__default.forwardRef(({ str, className, ctrlClick }, ref
|
||||
? customizeCollapseStringUI(str_show, truncated)
|
||||
: typeof customizeCollapseStringUI === 'string'
|
||||
? customizeCollapseStringUI
|
||||
- : '...';
|
||||
+ : '…';
|
||||
const clickToTruncateOrEdit = (event) => {
|
||||
var _a;
|
||||
if ((event.ctrlKey || event.metaKey) && ctrlClick) {
|
||||
@@ -768,7 +768,8 @@ var SvgLink = function SvgLink(props) {
|
||||
|
||||
function JsonNode({ node, depth, deleteHandle: _deleteHandle, indexOrName, parent, editHandle, parentPath }) {
|
||||
// prettier-ignore
|
||||
- const { collapseStringsAfterLength, enableClipboard, editable, src, onDelete, onChange, customizeNode, matchesURL, urlRegExp, EditComponent, DoneComponent, CancelComponent, CustomOperation } = useContext(JsonViewContext);
|
||||
+ const { replacer, collapseStringsAfterLength, enableClipboard, editable, src, onDelete, onChange, customizeNode, matchesURL, urlRegExp, EditComponent, DoneComponent, CancelComponent, CustomOperation } = useContext(JsonViewContext);
|
||||
+ node = replacer ? replacer(node) : node;
|
||||
let customReturn;
|
||||
if (typeof customizeNode === 'function')
|
||||
customReturn = safeCall(customizeNode, [{ node, depth, indexOrName }]);
|
||||
@@ -920,12 +921,13 @@ const JsonViewContext = createContext({
|
||||
DoneComponent: undefined,
|
||||
CustomOperation: undefined
|
||||
});
|
||||
-function JsonView({ src: _src, collapseStringsAfterLength = 99, collapseStringMode = 'directly', customizeCollapseStringUI, collapseObjectsAfterLength = 99, collapsed, onCollapse, enableClipboard = true, editable = false, onEdit, onDelete, onAdd, onChange, dark = false, theme = 'default', customizeNode, customizeCopy = node => stringifyForCopying(node), displaySize, displayArrayIndex = true, style, className, matchesURL = false, urlRegExp = defaultURLRegExp, ignoreLargeArray = false, CopyComponent, CopiedComponent, EditComponent, CancelComponent, DoneComponent, CustomOperation }) {
|
||||
+function JsonView({ replacer, src: _src, collapseStringsAfterLength = 99, collapseStringMode = 'directly', customizeCollapseStringUI, collapseObjectsAfterLength = 99, collapsed, onCollapse, enableClipboard = true, editable = false, onEdit, onDelete, onAdd, onChange, dark = false, theme = 'default', customizeNode, customizeCopy = node => stringifyForCopying(node), displaySize, displayArrayIndex = true, style, className, matchesURL = false, urlRegExp = defaultURLRegExp, ignoreLargeArray = false, CopyComponent, CopiedComponent, EditComponent, CancelComponent, DoneComponent, CustomOperation }) {
|
||||
const [_, update] = useState(0);
|
||||
const forceUpdate = useCallback(() => update(state => ++state), []);
|
||||
const [src, setSrc] = useState(_src);
|
||||
useEffect(() => setSrc(_src), [_src]);
|
||||
return (jsx(JsonViewContext.Provider, Object.assign({ value: {
|
||||
+ replacer,
|
||||
src,
|
||||
collapseStringsAfterLength,
|
||||
collapseStringMode,
|
||||
diff --git a/dist/es/index.mjs.rej b/dist/es/index.mjs.rej
|
||||
new file mode 100644
|
||||
index 0000000000000000000000000000000000000000..d3aa344afc67465a7c74d20c7b6d55cda25a225e
|
||||
--- /dev/null
|
||||
+++ b/dist/es/index.mjs.rej
|
||||
@@ -0,0 +1,56 @@
|
||||
+@@ -295,7 +295,7 @@
|
||||
+ forceUpdate();
|
||||
+ };
|
||||
+ const Icons = (jsxs(Fragment, { children: [!fold && (jsxs("span", Object.assign({ onClick: () => setFold(true), className: 'jv-size-chevron' }, { children: [ifDisplay(displaySize, depth, fold) && jsxs("span", Object.assign({ className: 'jv-size' }, { children: [objectSize(node), " Items"] })), jsx(SvgAngleDown, { className: 'jv-chevron' })] }))), !fold && enableClipboard && customCopy(customOptions) && jsx(CopyButton, { node: node })] }));
|
||||
+- return (jsxs("div", { children: [jsx("span", { children: '[' }), Icons, !fold ? (jsx("div", Object.assign({ className: 'jv-indent' }, { children: node.map((n, i) => (jsx(NameValue, { indexOrName: i + startIndex, value: n, depth: depth, parent: node, deleteHandle: deleteHandle, editHandle: editHandle }, String(index) + String(i)))) }))) : (jsxs("button", Object.assign({ onClick: () => setFold(false), className: 'jv-button' }, { children: [startIndex, " ... ", startIndex + node.length - 1] }))), jsx("span", { children: ']' })] }));
|
||||
++ return (jsxs("div", { children: [jsx("span", { children: '[' }), Icons, !fold ? (jsx("div", Object.assign({ className: 'jv-indent' }, { children: node.map((n, i) => (jsx(NameValue, { indexOrName: i + startIndex, value: n, depth: depth, parent: node, deleteHandle: deleteHandle, editHandle: editHandle }, String(index) + String(i)))) }))) : (jsxs("button", Object.assign({ onClick: () => setFold(false), className: 'jv-button' }, { children: [startIndex, " … ", startIndex + node.length - 1] }))), jsx("span", { children: ']' })] }));
|
||||
+ }
|
||||
+
|
||||
+ function LargeArray({ node, depth, deleteHandle: _deleteSelf, indexOrName, customOptions }) {
|
||||
+@@ -344,7 +344,7 @@
|
||||
+ const Icons = (jsxs(Fragment, { children: [!fold && !isEditing && (jsxs("span", Object.assign({ onClick: () => setFold(true), className: 'jv-size-chevron' }, { children: [ifDisplay(displaySize, depth, fold) && jsxs("span", Object.assign({ className: 'jv-size' }, { children: [node.length, " Items"] })), jsx(SvgAngleDown, { className: 'jv-chevron' })] }))), isEditing && jsx(SvgDone, { className: 'json-view--edit', style: { display: 'inline-block' }, onClick: adding ? add : deleteSelf }), isEditing && jsx(SvgCancel, { className: 'json-view--edit', style: { display: 'inline-block' }, onClick: cancel }), !fold && !isEditing && enableClipboard && customCopy(customOptions) && jsx(CopyButton, { node: node }), !fold && !isEditing && editableAdd(editable) && customAdd(customOptions) && (jsx(SvgAddSquare, { className: 'json-view--edit', onClick: () => {
|
||||
+ add();
|
||||
+ } })), !fold && !isEditing && editableDelete(editable) && customDelete(customOptions) && _deleteSelf && (jsx(SvgTrash, { className: 'json-view--edit', onClick: () => setDeleting(true) }))] }));
|
||||
+- return (jsxs(Fragment, { children: [jsx("span", { children: '[' }), Icons, !fold ? (jsx("div", Object.assign({ className: 'jv-indent' }, { children: nestCollapsedArray.map((item, index) => (jsx(LargeArrayNode, { originNode: node, node: item, depth: depth, index: index, startIndex: index * 100 }, String(indexOrName) + String(index)))) }))) : (jsx("button", Object.assign({ onClick: () => setFold(false), className: 'jv-button' }, { children: "..." }))), jsx("span", { children: ']' }), fold && ifDisplay(displaySize, depth, fold) && (jsxs("span", Object.assign({ onClick: () => setFold(false), className: 'jv-size' }, { children: [node.length, " Items"] })))] }));
|
||||
++ return (jsxs(Fragment, { children: [jsx("span", { children: '[' }), Icons, !fold ? (jsx("div", Object.assign({ className: 'jv-indent' }, { children: nestCollapsedArray.map((item, index) => (jsx(LargeArrayNode, { originNode: node, node: item, depth: depth, index: index, startIndex: index * 100 }, String(indexOrName) + String(index)))) }))) : (jsx("button", Object.assign({ onClick: () => setFold(false), className: 'jv-button' }, { children: "…" }))), jsx("span", { children: ']' }), fold && ifDisplay(displaySize, depth, fold) && (jsxs("span", Object.assign({ onClick: () => setFold(false), className: 'jv-size' }, { children: [node.length, " Items"] })))] }));
|
||||
+ }
|
||||
+
|
||||
+ function ObjectNode({ node, depth, indexOrName, deleteHandle: _deleteSelf, customOptions }) {
|
||||
+@@ -457,10 +457,10 @@
|
||||
+ }
|
||||
+ } })), !fold && !isEditing && editableDelete(editable) && customDelete(customOptions) && _deleteSelf && (jsx(SvgTrash, { className: 'json-view--edit', onClick: () => setDeleting(true) }))] }));
|
||||
+ if (Array.isArray(node)) {
|
||||
+- return (jsxs(Fragment, { children: [jsx("span", { children: '[' }), Icons, !fold ? (jsx("div", Object.assign({ className: 'jv-indent' }, { children: node.map((n, i) => (jsx(NameValue, { indexOrName: i, value: n, depth: depth, parent: node, deleteHandle: deleteHandle, editHandle: editHandle }, String(indexOrName) + String(i)))) }))) : (jsx("button", Object.assign({ onClick: () => setFold(false), className: 'jv-button' }, { children: "..." }))), jsx("span", { children: ']' }), fold && ifDisplay(displaySize, depth, fold) && (jsxs("span", Object.assign({ onClick: () => setFold(false), className: 'jv-size' }, { children: [objectSize(node), " Items"] })))] }));
|
||||
++ return (jsxs(Fragment, { children: [jsx("span", { children: '[' }), Icons, !fold ? (jsx("div", Object.assign({ className: 'jv-indent' }, { children: node.map((n, i) => (jsx(NameValue, { indexOrName: i, value: n, depth: depth, parent: node, deleteHandle: deleteHandle, editHandle: editHandle }, String(indexOrName) + String(i)))) }))) : (jsx("button", Object.assign({ onClick: () => setFold(false), className: 'jv-button' }, { children: "…" }))), jsx("span", { children: ']' }), fold && ifDisplay(displaySize, depth, fold) && (jsxs("span", Object.assign({ onClick: () => setFold(false), className: 'jv-size' }, { children: [objectSize(node), " Items"] })))] }));
|
||||
+ }
|
||||
+ else if (isPlainObject) {
|
||||
+- return (jsxs(Fragment, { children: [jsx("span", { children: '{' }), Icons, !fold ? (jsx("div", Object.assign({ className: 'jv-indent' }, { children: Object.entries(node).map(([name, value]) => (jsx(NameValue, { indexOrName: name, value: value, depth: depth, parent: node, deleteHandle: deleteHandle, editHandle: editHandle }, String(indexOrName) + String(name)))) }))) : (jsx("button", Object.assign({ onClick: () => setFold(false), className: 'jv-button' }, { children: "..." }))), jsx("span", { children: '}' }), fold && ifDisplay(displaySize, depth, fold) && (jsxs("span", Object.assign({ onClick: () => setFold(false), className: 'jv-size' }, { children: [objectSize(node), " Items"] })))] }));
|
||||
++ return (jsxs(Fragment, { children: [jsx("span", { children: '{' }), Icons, !fold ? (jsx("div", Object.assign({ className: 'jv-indent' }, { children: Object.entries(node).map(([name, value]) => (jsx(NameValue, { indexOrName: name, value: value, depth: depth, parent: node, deleteHandle: deleteHandle, editHandle: editHandle }, String(indexOrName) + String(name)))) }))) : (jsx("button", Object.assign({ onClick: () => setFold(false), className: 'jv-button' }, { children: "…" }))), jsx("span", { children: '}' }), fold && ifDisplay(displaySize, depth, fold) && (jsxs("span", Object.assign({ onClick: () => setFold(false), className: 'jv-size' }, { children: [objectSize(node), " Items"] })))] }));
|
||||
+ }
|
||||
+ return null;
|
||||
+ }
|
||||
+@@ -767,7 +767,8 @@
|
||||
+ };
|
||||
+
|
||||
+ function JsonNode({ node, depth, deleteHandle: _deleteHandle, indexOrName, parent, editHandle }) {
|
||||
+- const { collapseStringsAfterLength, enableClipboard, editable, src, onDelete, onChange, customizeNode, matchesURL, urlRegExp } = useContext(JsonViewContext);
|
||||
++ const { replacer, collapseStringsAfterLength, enableClipboard, editable, src, onDelete, onChange, customizeNode, matchesURL, urlRegExp } = useContext(JsonViewContext);
|
||||
++ node = replacer ? replacer(node) : node;
|
||||
+ let customReturn;
|
||||
+ if (typeof customizeNode === 'function')
|
||||
+ customReturn = safeCall(customizeNode, [{ node, depth, indexOrName }]);
|
||||
+@@ -904,12 +905,13 @@
|
||||
+ urlRegExp: defaultURLRegExp,
|
||||
+ ignoreLargeArray: false
|
||||
+ });
|
||||
+-function JsonView({ src: _src, collapseStringsAfterLength = 99, collapseStringMode = 'directly', customizeCollapseStringUI, collapseObjectsAfterLength = 99, collapsed, enableClipboard = true, editable = false, onEdit, onDelete, onAdd, onChange, dark = false, theme = 'default', customizeNode, customizeCopy = stringifyForCopying, displaySize, style, className, matchesURL = false, urlRegExp = defaultURLRegExp, ignoreLargeArray = false }) {
|
||||
++function JsonView({ replacer, src: _src, collapseStringsAfterLength = 99, collapseStringMode = 'directly', customizeCollapseStringUI, collapseObjectsAfterLength = 99, collapsed, enableClipboard = true, editable = false, onEdit, onDelete, onAdd, onChange, dark = false, theme = 'default', customizeNode, customizeCopy = stringifyForCopying, displaySize, style, className, matchesURL = false, urlRegExp = defaultURLRegExp, ignoreLargeArray = false }) {
|
||||
+ const [_, update] = useState(0);
|
||||
+ const forceUpdate = useCallback(() => update(state => ++state), []);
|
||||
+ const [src, setSrc] = useState(_src);
|
||||
+ useEffect(() => setSrc(_src), [_src]);
|
||||
+ return (jsx(JsonViewContext.Provider, Object.assign({ value: {
|
||||
++ replacer,
|
||||
+ src,
|
||||
+ collapseStringsAfterLength,
|
||||
+ collapseStringMode,
|
||||
@@ -1,81 +0,0 @@
|
||||
diff --git a/dist/components/json-view.d.ts b/dist/components/json-view.d.ts
|
||||
index 27dfc6d406b7862061520ab99114f10b61e4c773..275b18c6c755ea630549b0e61bf75cc8a3daa63b 100644
|
||||
--- a/dist/components/json-view.d.ts
|
||||
+++ b/dist/components/json-view.d.ts
|
||||
@@ -51,6 +51,7 @@ export declare const JsonViewContext: import("react").Context<{
|
||||
ignoreLargeArray: boolean;
|
||||
}>;
|
||||
export interface JsonViewProps {
|
||||
+ replacer?: (node: any) => any;
|
||||
src: any;
|
||||
collapseStringsAfterLength?: number;
|
||||
collapseStringMode?: 'directly' | 'word' | 'address';
|
||||
diff --git a/dist/es/index.mjs b/dist/es/index.mjs
|
||||
index 663884480f7252dac251b9343d80f1e85ea93151..c4e6458358a9f58ce99d29d46850aceeb33a1d20 100644
|
||||
--- a/dist/es/index.mjs
|
||||
+++ b/dist/es/index.mjs
|
||||
@@ -295,7 +295,7 @@ function LargeArrayNode({ originNode, node, depth, index, deleteHandle: _deleteS
|
||||
forceUpdate();
|
||||
};
|
||||
const Icons = (jsxs(Fragment, { children: [!fold && (jsxs("span", Object.assign({ onClick: () => setFold(true), className: 'jv-size-chevron' }, { children: [ifDisplay(displaySize, depth, fold) && jsxs("span", Object.assign({ className: 'jv-size' }, { children: [objectSize(node), " Items"] })), jsx(SvgAngleDown, { className: 'jv-chevron' })] }))), !fold && enableClipboard && customCopy(customOptions) && jsx(CopyButton, { node: node })] }));
|
||||
- return (jsxs("div", { children: [jsx("span", { children: '[' }), Icons, !fold ? (jsx("div", Object.assign({ className: 'jv-indent' }, { children: node.map((n, i) => (jsx(NameValue, { indexOrName: i + startIndex, value: n, depth: depth, parent: node, deleteHandle: deleteHandle, editHandle: editHandle }, String(index) + String(i)))) }))) : (jsxs("button", Object.assign({ onClick: () => setFold(false), className: 'jv-button' }, { children: [startIndex, " ... ", startIndex + node.length - 1] }))), jsx("span", { children: ']' })] }));
|
||||
+ return (jsxs("div", { children: [jsx("span", { children: '[' }), Icons, !fold ? (jsx("div", Object.assign({ className: 'jv-indent' }, { children: node.map((n, i) => (jsx(NameValue, { indexOrName: i + startIndex, value: n, depth: depth, parent: node, deleteHandle: deleteHandle, editHandle: editHandle }, String(index) + String(i)))) }))) : (jsxs("button", Object.assign({ onClick: () => setFold(false), className: 'jv-button' }, { children: [startIndex, " … ", startIndex + node.length - 1] }))), jsx("span", { children: ']' })] }));
|
||||
}
|
||||
|
||||
function LargeArray({ node, depth, deleteHandle: _deleteSelf, indexOrName, customOptions }) {
|
||||
@@ -344,7 +344,7 @@ function LargeArray({ node, depth, deleteHandle: _deleteSelf, indexOrName, custo
|
||||
const Icons = (jsxs(Fragment, { children: [!fold && !isEditing && (jsxs("span", Object.assign({ onClick: () => setFold(true), className: 'jv-size-chevron' }, { children: [ifDisplay(displaySize, depth, fold) && jsxs("span", Object.assign({ className: 'jv-size' }, { children: [node.length, " Items"] })), jsx(SvgAngleDown, { className: 'jv-chevron' })] }))), isEditing && jsx(SvgDone, { className: 'json-view--edit', style: { display: 'inline-block' }, onClick: adding ? add : deleteSelf }), isEditing && jsx(SvgCancel, { className: 'json-view--edit', style: { display: 'inline-block' }, onClick: cancel }), !fold && !isEditing && enableClipboard && customCopy(customOptions) && jsx(CopyButton, { node: node }), !fold && !isEditing && editableAdd(editable) && customAdd(customOptions) && (jsx(SvgAddSquare, { className: 'json-view--edit', onClick: () => {
|
||||
add();
|
||||
} })), !fold && !isEditing && editableDelete(editable) && customDelete(customOptions) && _deleteSelf && (jsx(SvgTrash, { className: 'json-view--edit', onClick: () => setDeleting(true) }))] }));
|
||||
- return (jsxs(Fragment, { children: [jsx("span", { children: '[' }), Icons, !fold ? (jsx("div", Object.assign({ className: 'jv-indent' }, { children: nestCollapsedArray.map((item, index) => (jsx(LargeArrayNode, { originNode: node, node: item, depth: depth, index: index, startIndex: index * 100 }, String(indexOrName) + String(index)))) }))) : (jsx("button", Object.assign({ onClick: () => setFold(false), className: 'jv-button' }, { children: "..." }))), jsx("span", { children: ']' }), fold && ifDisplay(displaySize, depth, fold) && (jsxs("span", Object.assign({ onClick: () => setFold(false), className: 'jv-size' }, { children: [node.length, " Items"] })))] }));
|
||||
+ return (jsxs(Fragment, { children: [jsx("span", { children: '[' }), Icons, !fold ? (jsx("div", Object.assign({ className: 'jv-indent' }, { children: nestCollapsedArray.map((item, index) => (jsx(LargeArrayNode, { originNode: node, node: item, depth: depth, index: index, startIndex: index * 100 }, String(indexOrName) + String(index)))) }))) : (jsx("button", Object.assign({ onClick: () => setFold(false), className: 'jv-button' }, { children: "…" }))), jsx("span", { children: ']' }), fold && ifDisplay(displaySize, depth, fold) && (jsxs("span", Object.assign({ onClick: () => setFold(false), className: 'jv-size' }, { children: [node.length, " Items"] })))] }));
|
||||
}
|
||||
|
||||
function ObjectNode({ node, depth, indexOrName, deleteHandle: _deleteSelf, customOptions }) {
|
||||
@@ -457,10 +457,10 @@ function ObjectNode({ node, depth, indexOrName, deleteHandle: _deleteSelf, custo
|
||||
}
|
||||
} })), !fold && !isEditing && editableDelete(editable) && customDelete(customOptions) && _deleteSelf && (jsx(SvgTrash, { className: 'json-view--edit', onClick: () => setDeleting(true) }))] }));
|
||||
if (Array.isArray(node)) {
|
||||
- return (jsxs(Fragment, { children: [jsx("span", { children: '[' }), Icons, !fold ? (jsx("div", Object.assign({ className: 'jv-indent' }, { children: node.map((n, i) => (jsx(NameValue, { indexOrName: i, value: n, depth: depth, parent: node, deleteHandle: deleteHandle, editHandle: editHandle }, String(indexOrName) + String(i)))) }))) : (jsx("button", Object.assign({ onClick: () => setFold(false), className: 'jv-button' }, { children: "..." }))), jsx("span", { children: ']' }), fold && ifDisplay(displaySize, depth, fold) && (jsxs("span", Object.assign({ onClick: () => setFold(false), className: 'jv-size' }, { children: [objectSize(node), " Items"] })))] }));
|
||||
+ return (jsxs(Fragment, { children: [jsx("span", { children: '[' }), Icons, !fold ? (jsx("div", Object.assign({ className: 'jv-indent' }, { children: node.map((n, i) => (jsx(NameValue, { indexOrName: i, value: n, depth: depth, parent: node, deleteHandle: deleteHandle, editHandle: editHandle }, String(indexOrName) + String(i)))) }))) : (jsx("button", Object.assign({ onClick: () => setFold(false), className: 'jv-button' }, { children: "…" }))), jsx("span", { children: ']' }), fold && ifDisplay(displaySize, depth, fold) && (jsxs("span", Object.assign({ onClick: () => setFold(false), className: 'jv-size' }, { children: [objectSize(node), " Items"] })))] }));
|
||||
}
|
||||
else if (isPlainObject) {
|
||||
- return (jsxs(Fragment, { children: [jsx("span", { children: '{' }), Icons, !fold ? (jsx("div", Object.assign({ className: 'jv-indent' }, { children: Object.entries(node).map(([name, value]) => (jsx(NameValue, { indexOrName: name, value: value, depth: depth, parent: node, deleteHandle: deleteHandle, editHandle: editHandle }, String(indexOrName) + String(name)))) }))) : (jsx("button", Object.assign({ onClick: () => setFold(false), className: 'jv-button' }, { children: "..." }))), jsx("span", { children: '}' }), fold && ifDisplay(displaySize, depth, fold) && (jsxs("span", Object.assign({ onClick: () => setFold(false), className: 'jv-size' }, { children: [objectSize(node), " Items"] })))] }));
|
||||
+ return (jsxs(Fragment, { children: [jsx("span", { children: '{' }), Icons, !fold ? (jsx("div", Object.assign({ className: 'jv-indent' }, { children: Object.entries(node).map(([name, value]) => (jsx(NameValue, { indexOrName: name, value: value, depth: depth, parent: node, deleteHandle: deleteHandle, editHandle: editHandle }, String(indexOrName) + String(name)))) }))) : (jsx("button", Object.assign({ onClick: () => setFold(false), className: 'jv-button' }, { children: "…" }))), jsx("span", { children: '}' }), fold && ifDisplay(displaySize, depth, fold) && (jsxs("span", Object.assign({ onClick: () => setFold(false), className: 'jv-size' }, { children: [objectSize(node), " Items"] })))] }));
|
||||
}
|
||||
return null;
|
||||
}
|
||||
@@ -475,7 +475,7 @@ const LongString = React__default.forwardRef(({ str, className, ctrlClick }, ref
|
||||
? customizeCollapseStringUI(str_show, truncated)
|
||||
: typeof customizeCollapseStringUI === 'string'
|
||||
? customizeCollapseStringUI
|
||||
- : '...';
|
||||
+ : '…';
|
||||
const clickToTruncateOrEdit = (event) => {
|
||||
var _a;
|
||||
if ((event.ctrlKey || event.metaKey) && ctrlClick) {
|
||||
@@ -556,7 +556,8 @@ var SvgLink = function SvgLink(props) {
|
||||
};
|
||||
|
||||
function JsonNode({ node, depth, deleteHandle: _deleteHandle, indexOrName, parent, editHandle }) {
|
||||
- const { collapseStringsAfterLength, enableClipboard, editable, src, onDelete, onChange, customizeNode, matchesURL, urlRegExp } = useContext(JsonViewContext);
|
||||
+ const { replacer, collapseStringsAfterLength, enableClipboard, editable, src, onDelete, onChange, customizeNode, matchesURL, urlRegExp } = useContext(JsonViewContext);
|
||||
+ node = replacer ? replacer(node) : node;
|
||||
let customReturn;
|
||||
if (typeof customizeNode === 'function')
|
||||
customReturn = safeCall(customizeNode, [{ node, depth, indexOrName }]);
|
||||
@@ -693,12 +694,13 @@ const JsonViewContext = createContext({
|
||||
urlRegExp: defaultURLRegExp,
|
||||
ignoreLargeArray: false
|
||||
});
|
||||
-function JsonView({ src: _src, collapseStringsAfterLength = 99, collapseStringMode = 'directly', customizeCollapseStringUI, collapseObjectsAfterLength = 99, collapsed, enableClipboard = true, editable = false, onEdit, onDelete, onAdd, onChange, dark = false, theme = 'default', customizeNode, customizeCopy = stringifyForCopying, displaySize, style, className, matchesURL = false, urlRegExp = defaultURLRegExp, ignoreLargeArray = false }) {
|
||||
+function JsonView({ replacer, src: _src, collapseStringsAfterLength = 99, collapseStringMode = 'directly', customizeCollapseStringUI, collapseObjectsAfterLength = 99, collapsed, enableClipboard = true, editable = false, onEdit, onDelete, onAdd, onChange, dark = false, theme = 'default', customizeNode, customizeCopy = stringifyForCopying, displaySize, style, className, matchesURL = false, urlRegExp = defaultURLRegExp, ignoreLargeArray = false }) {
|
||||
const [_, update] = useState(0);
|
||||
const forceUpdate = useCallback(() => update(state => ++state), []);
|
||||
const [src, setSrc] = useState(_src);
|
||||
useEffect(() => setSrc(_src), [_src]);
|
||||
return (jsx(JsonViewContext.Provider, Object.assign({ value: {
|
||||
+ replacer,
|
||||
src,
|
||||
collapseStringsAfterLength,
|
||||
collapseStringMode,
|
||||
Generated
+21
-8
@@ -8,9 +8,9 @@ patchedDependencies:
|
||||
'@polkadot-api/observable-client':
|
||||
hash: yt5j7n7pjv3zmjoyaujivi24au
|
||||
path: patches/@polkadot-api__observable-client.patch
|
||||
react18-json-view@0.2.8:
|
||||
hash: tfqbi5gr5whnc64n7zptszjgcy
|
||||
path: patches/react18-json-view@0.2.8.patch
|
||||
react18-json-view:
|
||||
hash: wimveejfkp4taxhbk5eqzbey3q
|
||||
path: patches/react18-json-view.patch
|
||||
|
||||
importers:
|
||||
|
||||
@@ -134,8 +134,8 @@ importers:
|
||||
specifier: ^4.12.5
|
||||
version: 4.12.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
|
||||
react18-json-view:
|
||||
specifier: ^0.2.8
|
||||
version: 0.2.8(patch_hash=tfqbi5gr5whnc64n7zptszjgcy)(react@19.0.0)
|
||||
specifier: ^0.2.9
|
||||
version: 0.2.9(patch_hash=wimveejfkp4taxhbk5eqzbey3q)(react@19.0.0)
|
||||
rxjs:
|
||||
specifier: ^7.8.1
|
||||
version: 7.8.2
|
||||
@@ -1661,6 +1661,9 @@ packages:
|
||||
resolution: {integrity: sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==}
|
||||
engines: {node: '>=18'}
|
||||
|
||||
copy-to-clipboard@3.3.3:
|
||||
resolution: {integrity: sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==}
|
||||
|
||||
cross-fetch@3.2.0:
|
||||
resolution: {integrity: sha512-Q+xVJLoGOeIMXZmbUK4HYk+69cQH6LudR0Vu/pRm2YlU/hDV9CiS0gKUMaWY5f2NeUH9C1nV3bsTlCo0FsTV1Q==}
|
||||
|
||||
@@ -2647,8 +2650,8 @@ packages:
|
||||
react: '>=16 || >=17 || >= 18 || >= 19'
|
||||
react-dom: '>=16 || >=17 || >= 18 || >=19'
|
||||
|
||||
react18-json-view@0.2.8:
|
||||
resolution: {integrity: sha512-uJlcf5PEDaba6yTqfcDAcMSYECZ15SLcpP94mLFTa/+fa1kZANjERqKzS7YxxsrGP4+jDxt6sIaglR0PbQcKPw==}
|
||||
react18-json-view@0.2.9:
|
||||
resolution: {integrity: sha512-z3JQgCwZRKbmWh54U94loCU6vE0ZoDBK7C8ZpcMYQB8jYMi+mR/fcgMI9jKgATeF0I6+OAF025PD+UKkXIqueQ==}
|
||||
peerDependencies:
|
||||
react: '>=16.8.0'
|
||||
|
||||
@@ -2891,6 +2894,9 @@ packages:
|
||||
resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
|
||||
engines: {node: '>=8.0'}
|
||||
|
||||
toggle-selection@1.0.6:
|
||||
resolution: {integrity: sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==}
|
||||
|
||||
tr46@0.0.3:
|
||||
resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
|
||||
|
||||
@@ -5019,6 +5025,10 @@ snapshots:
|
||||
|
||||
cookie@1.0.2: {}
|
||||
|
||||
copy-to-clipboard@3.3.3:
|
||||
dependencies:
|
||||
toggle-selection: 1.0.6
|
||||
|
||||
cross-fetch@3.2.0:
|
||||
dependencies:
|
||||
node-fetch: 2.7.0
|
||||
@@ -5970,8 +5980,9 @@ snapshots:
|
||||
react: 19.0.0
|
||||
react-dom: 19.0.0(react@19.0.0)
|
||||
|
||||
react18-json-view@0.2.8(patch_hash=tfqbi5gr5whnc64n7zptszjgcy)(react@19.0.0):
|
||||
react18-json-view@0.2.9(patch_hash=wimveejfkp4taxhbk5eqzbey3q)(react@19.0.0):
|
||||
dependencies:
|
||||
copy-to-clipboard: 3.3.3
|
||||
react: 19.0.0
|
||||
|
||||
react@19.0.0: {}
|
||||
@@ -6237,6 +6248,8 @@ snapshots:
|
||||
dependencies:
|
||||
is-number: 7.0.0
|
||||
|
||||
toggle-selection@1.0.6: {}
|
||||
|
||||
tr46@0.0.3: {}
|
||||
|
||||
tr46@1.0.1:
|
||||
|
||||
Reference in New Issue
Block a user