feat: recreate diff viewer components and created utils from json diff kit

This commit includes major changes, viewer component is recreated based on previous model. This decision is made after performance considerations

Author: utkuakyuz

src/components/DiffViewer/components/SearchboxHolder.tsx

@@ -0,0 +1,48 @@
+import type { SearchState } from "../types";
+
+import { SearchIcon } from "../../SearchIcon";
+
+type Props = {
+ searchState: SearchState;
+ handleSearch: (term: string) => void;
+ navigateMatch: (direction: "next" | "prev") => void;
+ hideSearch?: boolean;
+};
+
+function SearchboxHolder({ searchState, handleSearch, navigateMatch, hideSearch }: Props) {
+ if (hideSearch)
+ return null;
+
+ return (
+ <div>
+ <div className="search-container">
+ <div className="search-input-container">
+ <span role="img" aria-label="search"><SearchIcon /></span>
+ <input
+ type="text"
+ placeholder="Search in JSON..."
+ value={searchState.term}
+ onChange={e => handleSearch(e.target.value)}
+ />
+ </div>
+ {searchState.results.length > 0 && (
+ <div className="search-results">
+ <span>
+ {searchState.currentIndex + 1}
+ {" "}
+ of
+ {" "}
+ {searchState.results.length}
+ {" "}
+ matches
+ </span>
+ <button onClick={() => navigateMatch("prev")}>Previous</button>
+ <button onClick={() => navigateMatch("next")}>Next</button>
+ </div>
+ )}
+ </div>
+ </div>
+ );
+}
+
+export default SearchboxHolder;

src/components/DiffViewer/components/ViewerRow.tsx

@@ -2,8 +2,9 @@ import type { DiffResult, InlineDiffOptions } from "json-diff-kit";
 import type { ListChildComponentProps } from "react-window";
 
 import { Viewer } from "json-diff-kit";
+import { useCallback } from "react";
 
-import type { DiffRowOrCollapsed } from "../types";
+import type { CollapsedLine, DiffRowOrCollapsed } from "../types";
 
 import { DIFF_VIEWER_CLASS, isCollapsed } from "../utils/constants";
 
@@ -22,13 +23,19 @@ function ViewerRow({
  const originalLeftLine = data.leftDiff[index];
  const originalRightLine = data.rightDiff[index];
 
+ const handleExpand = useCallback((originalLeftLine: CollapsedLine) => {
+ if (isCollapsed(originalLeftLine)) {
+ onExpand(originalLeftLine.segmentIndex);
+ }
+ }, [onExpand, originalLeftLine]);
+
  if (isCollapsed(originalLeftLine)) {
  return (
  <div className="collapsed-button" style={style}>
- <button onClick={() => onExpand(originalLeftLine.segmentIndex)} className="text-blue-500 underline">
+ <button onClick={() => handleExpand(originalLeftLine)} className="text-blue-500 underline">
  Show Hidden Lines
  </button>
- <button onClick={() => onExpand(originalLeftLine.segmentIndex)} className="text-blue-500 underline">
+ <button onClick={() => handleExpand(originalLeftLine)} className="text-blue-500 underline">
  Show Hidden Lines
  </button>
  </div>

src/components/DiffViewer/components/VirtualDiffTable.tsx

@@ -0,0 +1,105 @@
+import type { InlineDiffOptions } from "json-diff-kit";
+import type { Dispatch } from "react";
+import type { ListOnScrollProps } from "react-window";
+
+import React, { useCallback, useEffect, useMemo } from "react";
+import { VariableSizeList as List } from "react-window";
+
+import type { DiffRowOrCollapsed } from "../types";
+
+import { useRowHeights } from "../hooks/useRowHeights";
+import { COLLAPSED_ROW_HEIGHT, getRowHeightFromCSS, isCollapsed } from "../utils/constants";
+import RowRenderer from "../utils/json-diff/row-renderer";
+
+type VirtualDiffTableProps = {
+ leftDiff: DiffRowOrCollapsed[];
+ rightDiff: DiffRowOrCollapsed[];
+ outerRef: React.RefObject<Node | null>;
+ listRef: React.RefObject<List<any>>;
+ height: number;
+ inlineDiffOptions?: InlineDiffOptions;
+ className?: string;
+ style?: React.CSSProperties;
+ setScrollTop: Dispatch<React.SetStateAction<number>>;
+ onExpand: (segmentIndex: number) => void;
+};
+
+const VirtualDiffTable: React.FC<VirtualDiffTableProps> = ({
+ leftDiff,
+ rightDiff,
+ outerRef,
+ listRef,
+ height,
+ inlineDiffOptions,
+ className,
+ setScrollTop,
+ style,
+ onExpand,
+}) => {
+ // Virtual List Data
+ const listData = useMemo(
+ () => ({
+ leftDiff,
+ rightDiff,
+ onExpand,
+ inlineDiffOptions,
+ }),
+ [leftDiff, rightDiff, onExpand, inlineDiffOptions],
+ );
+
+ const classes = [
+ "json-diff-viewer",
+ `json-diff-viewer-theme-custom`,
+ className,
+ ]
+ .join(" ");
+
+ // ROW HEIGHT CALCULATION
+ const ROW_HEIGHT = useMemo(() => getRowHeightFromCSS(), []);
+ const rowHeights = useRowHeights(leftDiff);
+ const dynamicRowHeights = useCallback(
+ (index: number) => {
+ const leftLine = leftDiff[index];
+ if (isCollapsed(leftLine))
+ return COLLAPSED_ROW_HEIGHT;
+ return (rowHeights[index] ?? 1) * ROW_HEIGHT;
+ },
+ [leftDiff, rowHeights],
+ );
+
+ useEffect(() => {
+ listRef.current?.resetAfterIndex(0, true);
+ }, [rowHeights]);
+
+ return (
+ <table
+ className={classes}
+ style={style}
+ >
+ <colgroup>
+ <col style={{ width: "50px" }} />
+ <col />
+ <col style={{ width: "0px" }} />
+ <col />
+ </colgroup>
+ <tbody>
+ <List
+ height={height}
+ width="100%"
+ outerRef={outerRef}
+ ref={listRef}
+ className="virtual-json-diff-list-container"
+ itemCount={Math.max(leftDiff.length, rightDiff.length)}
+ itemSize={dynamicRowHeights}
+ overscanCount={28}
+ itemData={listData}
+ onScroll={({ scrollOffset }: ListOnScrollProps) => setScrollTop(scrollOffset)}
+ >
+ {RowRenderer}
+ </List>
+ </tbody>
+ </table>
+ );
+};
+
+export default VirtualDiffTable;