Skip to content

Commit e2df922

Browse files
MrWangJustToDoMrWangJustToDo
committed
fix example
1 parent 75f9f6f commit e2df922

5 files changed

Lines changed: 78 additions & 26 deletions

File tree

‎packages/core/src/diff-file.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -949,4 +949,23 @@ export class DiffFile {
949949
this.#clonedInstance.forEach((v) => v());
950950
this.#clonedInstance.clear();
951951
};
952+
953+
clear = () => {
954+
this._destroy();
955+
this.#oldFileResult = null;
956+
this.#newFileResult = null;
957+
this.#diffLines = null;
958+
this.#diffListResults = null;
959+
this.#newFileDiffLines = null;
960+
this.#oldFileDiffLines = null;
961+
this.#newFileLines = null;
962+
this.#oldFileLines = null;
963+
this.#newFileSyntaxLines = null;
964+
this.#oldFileSyntaxLines = null;
965+
this.#splitHunksLines = null;
966+
this.#splitLeftLines = null;
967+
this.#splitRightLines = null;
968+
this.#unifiedHunksLines = null;
969+
this.#unifiedLines = null;
970+
};
952971
}

‎ui/react-example/index.html‎

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,24 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>React Git Diff Component</title>
8-
<meta name="description" content="github diff, github like, react diff component, diff component, git diff" />
9-
</head>
10-
<body>
11-
<div id="root"></div>
12-
<script type="module" src="/src/main.tsx"></script>
13-
</body>
14-
</html>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>React Git Diff Component</title>
9+
<link rel="stylesheet" href="https://fonts.cdnfonts.com/css/google-sans" />
10+
<meta name="description" content="github diff, github like, react diff component, diff component, git diff" />
11+
<style>
12+
html,
13+
body {
14+
font-family: 'Product Sans', sans-serif;
15+
}
16+
</style>
17+
</head>
18+
19+
<body>
20+
<div id="root"></div>
21+
<script type="module" src="/src/main.tsx"></script>
22+
</body>
23+
24+
</html>

‎ui/react-example/src/Example.tsx‎

Lines changed: 33 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { DiffModeEnum, DiffView as DiffViewReact, SplitSide } from "@git-diff-vi
33
import { DiffView as DiffViewVue } from "@git-diff-view/vue";
44
import { useEffect, useRef, useState } from "react";
55
import { createRoot } from "react-dom/client";
6-
import { createApp, h } from "vue";
6+
import { createApp, h, ref } from "vue";
77

88
import * as data from "./data";
99
import { useDiffConfig } from "./hooks/useDiffConfig";
@@ -20,6 +20,20 @@ const worker = new Worker(new URL("./worker.ts", import.meta.url), {
2020

2121
type K = "a" | "b" | "c" | "d" | "e" | "j";
2222

23+
const TextArea = ({ onChange }: { onChange: (v: string) => void }) => {
24+
const [val, setVal] = useState("");
25+
26+
useEffect(() => {
27+
onChange(val);
28+
}, [val]);
29+
30+
return (
31+
<textarea className="w-full border min-h-[80px] p-[2px]" value={val} onChange={(e) => setVal(e.target.value)} />
32+
);
33+
};
34+
35+
const vRef = ref("");
36+
2337
export function Example() {
2438
const [v, setV] = useState<K>("b");
2539

@@ -40,7 +54,7 @@ export function Example() {
4054
newFile: { "87": { data: "line have been changed!" } },
4155
});
4256

43-
const [val, setVal] = useState("");
57+
const valRef = useRef("");
4458

4559
useEffect(() => {
4660
if (previous && diffFileInstance !== previous) {
@@ -75,18 +89,19 @@ export function Example() {
7589
<DiffViewReact<string>
7690
renderWidgetLine={({ onClose, side, lineNumber }) => (
7791
<div className="border flex flex-col w-full px-[4px] py-[8px]">
78-
<textarea
92+
<TextArea onChange={(v) => (valRef.current = v)} />
93+
{/* <textarea
7994
className="w-full border min-h-[80px] p-[2px]"
8095
value={val}
8196
onChange={(e) => setVal(e.target.value)}
82-
/>
97+
/> */}
8398
<div className="m-[5px] mt-[0.8em] text-right">
8499
<div className="inline-flex gap-x-[12px] justify-end">
85100
<button
86101
className="border px-[12px] py-[6px] rounded-[4px]"
87102
onClick={() => {
88103
onClose();
89-
setVal("");
104+
valRef.current = "";
90105
}}
91106
>
92107
cancel
@@ -95,14 +110,16 @@ export function Example() {
95110
className="border px-[12px] py-[6px] rounded-[4px]"
96111
onClick={() => {
97112
onClose();
98-
if (val) {
113+
if (valRef.current) {
99114
const sideKey = side === SplitSide.old ? "oldFile" : "newFile";
100115
setExtend((prev) => {
101116
const res = { ...prev };
102-
res[sideKey] = { ...res[sideKey], [lineNumber]: { lineNumber, data: val } };
117+
res[sideKey] = { ...res[sideKey], [lineNumber]: { lineNumber, data: valRef.current } };
103118
return res;
104119
});
105-
setVal("");
120+
setTimeout(() => {
121+
valRef.current = "";
122+
});
106123
}
107124
}}
108125
>
@@ -151,8 +168,8 @@ export function Example() {
151168
h("div", { class: "border flex flex-col w-full px-[4px] py-[8px]" }, [
152169
h("textarea", {
153170
class: "w-full border min-h-[80px] p-[2px]",
154-
value: val,
155-
onInput: (e: InputEvent) => setVal((e.target as HTMLTextAreaElement).value),
171+
value: vRef.value,
172+
onChange: (e: InputEvent) => (vRef.value = (e.target as HTMLTextAreaElement).value),
156173
}),
157174
h("div", { class: "m-[5px] mt-[0.8em] text-right" }, [
158175
h("div", { class: "inline-flex gap-x-[12px] justify-end" }, [
@@ -162,7 +179,7 @@ export function Example() {
162179
class: "border px-[12px] py-[6px] rounded-[4px]",
163180
onClick: () => {
164181
onClose();
165-
setVal("");
182+
vRef.value = "";
166183
},
167184
},
168185
"cancel"
@@ -173,14 +190,16 @@ export function Example() {
173190
class: "border px-[12px] py-[6px] rounded-[4px]",
174191
onClick: () => {
175192
onClose();
176-
if (val) {
193+
if (vRef.value) {
177194
const sideKey = side === SplitSide.old ? "oldFile" : "newFile";
178195
setExtend((prev) => {
179196
const res = { ...prev };
180-
res[sideKey] = { ...res[sideKey], [lineNumber]: { lineNumber, data: val } };
197+
res[sideKey] = { ...res[sideKey], [lineNumber]: { lineNumber, data: vRef.value } };
181198
return res;
182199
});
183-
setVal("");
200+
setTimeout(() => {
201+
vRef.value = "";
202+
});
184203
}
185204
},
186205
},

‎ui/react-example/src/worker.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,5 +37,7 @@ onmessage = (event: MessageEvent<MessageData>) => {
3737
bundle: file.getBundle(),
3838
};
3939

40+
file.clear();
41+
4042
post(res);
4143
};

‎ui/vue-example/src/worker.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,5 +37,7 @@ onmessage = (event: MessageEvent<MessageData>) => {
3737
bundle: file.getBundle(),
3838
};
3939

40+
file.clear();
41+
4042
post(res);
4143
};

0 commit comments

Comments
 (0)