Commit 21996d8

committed

fix: review refactors

1 parent 9cc6e92 commit 21996d8Copy full SHA for 21996d8

File tree

+29

-12

lines changed

+29

-12

lines changed

Lines changed: 4 additions & 5 deletions

Original file line number	Diff line number	Diff line change
`@@ -2,17 +2,14 @@ import React, { useCallback, useEffect, useMemo, useRef } from "react";`
`2`	`2`
`3`	`3`	`import type { DiffMinimapProps, DiffRowOrCollapsed } from "../types";`
`4`	`4`
`5`		`-const ROW_HEIGHT = 20;`
	`5`	`+import { getRowHeightFromCSS } from "../utils/constants";`
	`6`	`+`
`6`	`7`	`const SEARCH_HIGHLIGHT_COLOR = "#ffd700";`
`7`	`8`	`const CURRENT_MATCH_COLOR = "#ff4500";`
`8`	`9`	`const EQUAL_LINE_COLOR = "#363743";`
`9`	`10`	`const ADD_LINE_COLOR = "#4CAF50";`
`10`	`11`	`const REMOVE_LINE_COLOR = "#F44336";`
`11`	`12`	`const MODIFY_LINE_COLOR = "#FFC107";`
`12`		`-`
`13`		`-// const MINIMAP_HOVER_SCROLL_COLOR = "#2196f3cc";`
`14`		`-// const MINIMAP_SCROLL_COLOR = "#2196f380";`
`15`		`-`
`16`	`13`	`const MINIMAP_HOVER_SCROLL_COLOR = "#7B7B7Bcc";`
`17`	`14`	`const MINIMAP_SCROLL_COLOR = "#7B7B7B80";`
`18`	`15`
`@@ -30,6 +27,8 @@ export const DiffMinimap: React.FC<DiffMinimapProps> = ({`
`30`	`27`	`const containerRef = useRef<HTMLDivElement>(null);`
`31`	`28`	`const isDragging = useRef(false);`
`32`	`29`
	`30`	`+ const ROW_HEIGHT = useMemo(() => getRowHeightFromCSS(), []);`
	`31`	`+`
`33`	`32`	`// Memoize expensive calculations`
`34`	`33`	`const { totalLines, viewportHeight } = useMemo(() => {`
`35`	`34`	`const totalShownLines = height / ROW_HEIGHT;`

Lines changed: 3 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ import { SearchIcon } from "../../SearchIcon";`
`10`	`10`	`import "../styles/JsonDiffCustomTheme.css";`
`11`	`11`	`import { useRowHeights } from "../hooks/useRowHeights";`
`12`	`12`	`import { useSearch } from "../hooks/useSearch";`
`13`		`-import { COLLAPSED_ROW_HEIGHT, isCollapsed,ROW_HEIGHT } from "../utils/constants";`
	`13`	`+import { COLLAPSED_ROW_HEIGHT, getRowHeightFromCSS,isCollapsed } from "../utils/constants";`
`14`	`14`	`import { buildViewFromSegments, generateSegments } from "../utils/preprocessDiff";`
`15`	`15`	`import { DiffMinimap } from "./DiffMinimap";`
`16`	`16`	`import ViewerRow from "./ViewerRow";`
`@@ -33,6 +33,8 @@ export const VirtualizedDiffViewer: React.FC<VirtualizedDiffViewerProps> = ({`
`33`	`33`
`34`	`34`	`const [segments, setSegments] = useState<SegmentItem[]>([]);`
`35`	`35`
	`36`	`+ const ROW_HEIGHT = useMemo(() => getRowHeightFromCSS(), []);`
	`37`	`+`
`36`	`38`	`const differ = useMemo(`
`37`	`39`	`() =>`
`38`	`40`	`new Differ({`

Lines changed: 6 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -64,5 +64,11 @@ export function useSearch(leftView: DiffRowOrCollapsed[], initialTerm?: string,`
`64`	`64`	`return () => observer.disconnect();`
`65`	`65`	`}, [searchState.term]);`
`66`	`66`
	`67`	`+ useEffect(() => {`
	`68`	`+ if (initialTerm !== undefined) {`
	`69`	`+ handleSearch(initialTerm);`
	`70`	`+ }`
	`71`	`+ }, [initialTerm, handleSearch]);`
	`72`	`+`
`67`	`73`	`return { searchState, handleSearch, navigateMatch };`
`68`	`74`	`}`

Lines changed: 16 additions & 6 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,12 +1,22 @@`
`1`	`1`	`export const DIFF_VIEWER_CLASS = "json-diff-viewer-theme-custom";`
`2`	`2`
`3`		`-function getRowHeightFromCSS(): number {`
`4`		`- const root = document.documentElement;`
`5`		`- const value = getComputedStyle(root).getPropertyValue("--diff-row-height");`
`6`		`- return Number.parseInt(value, 10);`
`7`		`-}`
	`3`	`+export const DEFAULT_ROW_HEIGHT = 20; // safe fallback`
	`4`	`+`
	`5`	`+export function getRowHeightFromCSS(): number {`
	`6`	`+ if (typeof document === "undefined") {`
	`7`	`+ return DEFAULT_ROW_HEIGHT;`
	`8`	`+ }`
`8`	`9`
`9`		`-export const ROW_HEIGHT = getRowHeightFromCSS();`
	`10`	`+ try {`
	`11`	`+ const root = document.documentElement;`
	`12`	`+ const value = getComputedStyle(root).getPropertyValue("--diff-row-height");`
	`13`	`+ const parsed = Number.parseInt(value, 10);`
	`14`	`+ return Number.isNaN(parsed) ? DEFAULT_ROW_HEIGHT : parsed;`
	`15`	`+ }`
	`16`	`+ catch {`
	`17`	`+ return DEFAULT_ROW_HEIGHT;`
	`18`	`+ }`
	`19`	`+}`
`10`	`20`
`11`	`21`	`export const COLLAPSED_ROW_HEIGHT = 20;`
`12`	`22`

Comments

(0)