Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 0bfe605

Browse files
Merge pull request #11 from utkuakyuz/refactor/utility-split
Refactor including code split and utilits seperation from main component
2 parents e482cde + 21996d8 commit 0bfe605

File tree

8 files changed

+255
-213
lines changed

8 files changed

+255
-213
lines changed

‎rollup.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export default [
2020
inlineDynamicImports: true,
2121
},
2222
],
23-
external: [...Object.keys(packageJson.peerDependencies || {}),"formik"],
23+
external: [...Object.keys(packageJson.peerDependencies || {})],
2424
plugins: [postcss(), image(), typescript(), peerDepsExternal(), resolve(), commonjs(), terser()],
2525
},
2626
{

‎src/components/DiffViewer/components/DiffMinimap.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,14 @@ import React, { useCallback, useEffect, useMemo, useRef } from "react";
22

33
import type { DiffMinimapProps, DiffRowOrCollapsed } from "../types";
44

5-
const ROW_HEIGHT = 20;
5+
import { getRowHeightFromCSS } from "../utils/constants";
6+
67
const SEARCH_HIGHLIGHT_COLOR = "#ffd700";
78
const CURRENT_MATCH_COLOR = "#ff4500";
89
const EQUAL_LINE_COLOR = "#363743";
910
const ADD_LINE_COLOR = "#4CAF50";
1011
const REMOVE_LINE_COLOR = "#F44336";
1112
const MODIFY_LINE_COLOR = "#FFC107";
12-
13-
// const MINIMAP_HOVER_SCROLL_COLOR = "#2196f3cc";
14-
// const MINIMAP_SCROLL_COLOR = "#2196f380";
15-
1613
const MINIMAP_HOVER_SCROLL_COLOR = "#7B7B7Bcc";
1714
const MINIMAP_SCROLL_COLOR = "#7B7B7B80";
1815

@@ -30,6 +27,8 @@ export const DiffMinimap: React.FC<DiffMinimapProps> = ({
3027
const containerRef = useRef<HTMLDivElement>(null);
3128
const isDragging = useRef(false);
3229

30+
const ROW_HEIGHT = useMemo(() => getRowHeightFromCSS(), []);
31+
3332
// Memoize expensive calculations
3433
const { totalLines, viewportHeight } = useMemo(() => {
3534
const totalShownLines = height / ROW_HEIGHT;
Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import type { DiffResult } from "json-diff-kit";
2+
import type { ListChildComponentProps } from "react-window";
3+
4+
import { Viewer } from "json-diff-kit";
5+
6+
import type { DiffRowOrCollapsed } from "../types";
7+
8+
import { DIFF_VIEWER_CLASS, isCollapsed } from "../utils/constants";
9+
10+
function ViewerRow({
11+
index,
12+
style,
13+
data,
14+
}: ListChildComponentProps<{
15+
leftDiff: DiffRowOrCollapsed[];
16+
rightDiff: DiffRowOrCollapsed[];
17+
onExpand: (segmentIndex: number) => void;
18+
searchTerm?: string;
19+
}>) {
20+
const { onExpand, searchTerm } = data;
21+
const originalLeftLine = data.leftDiff[index];
22+
const originalRightLine = data.rightDiff[index];
23+
24+
if (isCollapsed(originalLeftLine)) {
25+
return (
26+
<div className="collapsed-button" style={style}>
27+
<button onClick={() => onExpand(originalLeftLine.segmentIndex)} className="text-blue-500 underline">
28+
Show Hidden Lines
29+
</button>
30+
</div>
31+
);
32+
}
33+
34+
const leftLine = { ...originalLeftLine } as DiffResult;
35+
const rightLine = { ...originalRightLine } as DiffResult;
36+
37+
return (
38+
<div style={style}>
39+
<Viewer
40+
indent={1}
41+
className={`${DIFF_VIEWER_CLASS} ${searchTerm ? "has-search" : ""}`}
42+
lineNumbers
43+
diff={[[leftLine], [rightLine]]}
44+
highlightInlineDiff
45+
inlineDiffOptions={{ mode: "word" }}
46+
syntaxHighlight={{ theme: "monokai" }}
47+
/>
48+
</div>
49+
);
50+
}
51+
52+
export default ViewerRow;

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /