82 lines
11 KiB
Diff
82 lines
11 KiB
Diff
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,
|