Skip to content

Commit 97cdd8c

Browse files
MrWangJustToDoMrWangJustToDo
committed
fix.
1 parent 353e264 commit 97cdd8c

7 files changed

+95
-52
lines changed

‎packages/react/src/components/DiffSplitExtendLineNormal.tsx

+11-5
Original file line numberDiff line numberDiff line change
@@ -34,30 +34,36 @@ const InternalDiffSplitExtendLine = ({
3434

3535
const currentExtend = side === SplitSide.old ? oldLineExtend : newLineExtend;
3636

37+
const otherSide = side === SplitSide.old ? SplitSide.new : SplitSide.old;
38+
3739
const currentLineNumber = side === SplitSide.old ? oldLine.lineNumber : newLine.lineNumber;
3840

39-
const hasExtend = currentExtend?.data !== undefined && currentExtend?.data !== null;
41+
const currentSideHasExtend = currentExtend?.data !== undefined && currentExtend?.data !== null;
42+
43+
const hasExtend =
44+
(oldLineExtend?.data !== undefined && oldLineExtend?.data !== null) ||
45+
(newLineExtend?.data !== undefined && newLineExtend?.data !== null);
4046

4147
const currentExtendRendered =
4248
hasExtend &&
4349
renderExtendLine?.({
4450
diffFile,
4551
side,
4652
lineNumber: currentLineNumber,
47-
data: currentExtend.data,
53+
data: currentExtend?.data,
4854
onUpdate: diffFile.notifyAll,
4955
});
5056

5157
useSyncHeight({
5258
selector: `div[data-line="${lineNumber}-extend-content"]`,
5359
wrapper: `tr[data-line="${lineNumber}-extend"]`,
54-
side: SplitSide[side],
60+
side: SplitSide[currentSideHasExtend ? side : otherSide],
5561
enable: hasExtend && typeof renderExtendLine === "function",
5662
});
5763

5864
const width = useDomWidth({
5965
selector: side === SplitSide.old ? ".old-diff-table-wrapper" : ".new-diff-table-wrapper",
60-
enable: hasExtend && typeof renderExtendLine === "function",
66+
enable: currentSideHasExtend && typeof renderExtendLine === "function",
6167
});
6268

6369
if (!renderExtendLine) return null;
@@ -69,7 +75,7 @@ const InternalDiffSplitExtendLine = ({
6975
data-side={SplitSide[side]}
7076
className="diff-line diff-line-extend"
7177
>
72-
{hasExtend ? (
78+
{currentSideHasExtend ? (
7379
<td className={`diff-line-extend-${SplitSide[side]}-content p-0`} colSpan={2}>
7480
<div
7581
data-line={`${lineNumber}-extend-content`}

‎packages/react/src/components/DiffSplitWidgetLineNormal.tsx

+10-6
Original file line numberDiff line numberDiff line change
@@ -41,12 +41,16 @@ const InternalDiffSplitWidgetLine = ({
4141

4242
const currentLine = side === SplitSide.old ? oldLine : newLine;
4343

44-
const currentWidget = side === SplitSide.old ? oldLineWidget : newLineWidget;
44+
const otherSide = side === SplitSide.old ? SplitSide.new : SplitSide.old;
45+
46+
const currentHasWidget = side === SplitSide.old ? oldLineWidget : newLineWidget;
47+
48+
const hasWidget = oldLineWidget || newLineWidget;
4549

4650
const renderWidgetLine = useDiffContext.useShallowStableSelector((s) => s.renderWidgetLine);
4751

4852
const currentWidgetRendered =
49-
currentWidget &&
53+
currentHasWidget &&
5054
renderWidgetLine?.({
5155
diffFile,
5256
side,
@@ -57,13 +61,13 @@ const InternalDiffSplitWidgetLine = ({
5761
useSyncHeight({
5862
selector: `div[data-line="${lineNumber}-widget-content"]`,
5963
wrapper: `tr[data-line="${lineNumber}-widget"]`,
60-
side: SplitSide[side],
61-
enable: !!currentWidget && typeof renderWidgetLine === "function",
64+
side: SplitSide[currentHasWidget ? side : otherSide],
65+
enable: hasWidget && typeof renderWidgetLine === "function",
6266
});
6367

6468
const width = useDomWidth({
6569
selector: side === SplitSide.old ? ".old-diff-table-wrapper" : ".new-diff-table-wrapper",
66-
enable: !!currentWidget && typeof renderWidgetLine === "function",
70+
enable: !!currentHasWidget && typeof renderWidgetLine === "function",
6771
});
6872

6973
if (!renderWidgetLine) return null;
@@ -75,7 +79,7 @@ const InternalDiffSplitWidgetLine = ({
7579
data-side={SplitSide[side]}
7680
className="diff-line diff-line-widget"
7781
>
78-
{currentWidget ? (
82+
{currentHasWidget ? (
7983
<td className={`diff-line-widget-${SplitSide[side]}-content p-0`} colSpan={2}>
8084
<div
8185
data-line={`${lineNumber}-widget-content`}

‎packages/react/src/components/v2/DiffSplitExtendLineNormal_v2.tsx

+11-5
Original file line numberDiff line numberDiff line change
@@ -33,20 +33,26 @@ const InternalDiffSplitExtendLine = ({
3333

3434
const currentExtend = side === SplitSide.old ? oldLineExtend : newLineExtend;
3535

36+
const otherSide = side === SplitSide.old ? SplitSide.new : SplitSide.old;
37+
3638
const currentLineNumber = side === SplitSide.old ? oldLine.lineNumber : newLine.lineNumber;
3739

38-
const hasExtend = currentExtend?.data !== undefined && currentExtend?.data !== null;
40+
const currentSideHasExtend = currentExtend?.data !== undefined && currentExtend?.data !== null;
41+
42+
const hasExtend =
43+
(oldLineExtend?.data !== undefined && oldLineExtend?.data !== null) ||
44+
(newLineExtend?.data !== undefined && newLineExtend?.data !== null);
3945

4046
useSyncHeight({
4147
wrapper: `div[data-state="extend"][data-line="${lineNumber}-extend"]`,
4248
selector: `div[data-line="${lineNumber}-extend-content"]`,
43-
side: SplitSide[side],
49+
side: SplitSide[currentSideHasExtend ? side : otherSide],
4450
enable: hasExtend && typeof renderExtendLine === "function",
4551
});
4652

4753
const width = useDomWidth({
4854
selector: side === SplitSide.old ? ".old-diff-table-wrapper" : ".new-diff-table-wrapper",
49-
enable: hasExtend && typeof renderExtendLine === "function",
55+
enable: currentSideHasExtend && typeof renderExtendLine === "function",
5056
});
5157

5258
if (!renderExtendLine) return null;
@@ -58,7 +64,7 @@ const InternalDiffSplitExtendLine = ({
5864
data-side={SplitSide[side]}
5965
className="diff-line diff-line-extend"
6066
>
61-
{hasExtend ? (
67+
{currentSideHasExtend ? (
6268
<div className={`diff-line-extend-${SplitSide[side]}-content p-0`}>
6369
<div
6470
data-line={`${lineNumber}-extend-content`}
@@ -72,7 +78,7 @@ const InternalDiffSplitExtendLine = ({
7278
diffFile,
7379
side,
7480
lineNumber: currentLineNumber,
75-
data: currentExtend.data,
81+
data: currentExtend?.data,
7682
onUpdate: diffFile.notifyAll,
7783
})}
7884
</div>

‎packages/react/src/components/v2/DiffSplitWidgetLineNormal_v2.tsx

+32-28
Original file line numberDiff line numberDiff line change
@@ -10,35 +10,54 @@ import { useDiffWidgetContext } from "../DiffWidgetContext";
1010
import type { DiffFile } from "@git-diff-view/core";
1111

1212
const InternalDiffSplitWidgetLine = ({
13-
diffFile,
13+
index,
1414
side,
15+
diffFile,
1516
lineNumber,
16-
currentLine,
17-
setWidget,
18-
currentWidget,
1917
}: {
2018
index: number;
2119
side: SplitSide;
2220
diffFile: DiffFile;
2321
lineNumber: number;
24-
currentLine: ReturnType<DiffFile["getSplitLeftLine"]>;
25-
currentWidget: boolean;
26-
setWidget: (props: { side?: SplitSide; lineNumber?: number }) => void;
2722
}) => {
23+
const { useWidget } = useDiffWidgetContext();
24+
2825
const { useDiffContext } = useDiffViewContext();
2926

27+
const oldLine = diffFile.getSplitLeftLine(index);
28+
29+
const newLine = diffFile.getSplitRightLine(index);
30+
31+
const widgetSide = useWidget.getReadonlyState().widgetSide;
32+
33+
const widgetLineNumber = useWidget.getReadonlyState().widgetLineNumber;
34+
35+
const setWidget = useWidget.getReadonlyState().setWidget;
36+
37+
const oldLineWidget = oldLine.lineNumber && widgetSide === SplitSide.old && widgetLineNumber === oldLine.lineNumber;
38+
39+
const newLineWidget = newLine.lineNumber && widgetSide === SplitSide.new && widgetLineNumber === newLine.lineNumber;
40+
41+
const currentLine = side === SplitSide.old ? oldLine : newLine;
42+
43+
const otherSide = side === SplitSide.old ? SplitSide.new : SplitSide.old;
44+
45+
const currentHasWidget = side === SplitSide.old ? oldLineWidget : newLineWidget;
46+
47+
const hasWidget = oldLineWidget || newLineWidget;
48+
3049
const renderWidgetLine = useDiffContext.useShallowStableSelector((s) => s.renderWidgetLine);
3150

3251
useSyncHeight({
3352
wrapper: `div[data-state="widget"][data-line="${lineNumber}-widget"]`,
3453
selector: `div[data-line="${lineNumber}-widget-content"]`,
35-
side: SplitSide[side],
36-
enable: currentWidget && typeof renderWidgetLine === "function",
54+
side: SplitSide[currentHasWidget ? side : otherSide],
55+
enable: hasWidget && typeof renderWidgetLine === "function",
3756
});
3857

3958
const width = useDomWidth({
4059
selector: side === SplitSide.old ? ".old-diff-table-wrapper" : ".new-diff-table-wrapper",
41-
enable: !!currentWidget && typeof renderWidgetLine === "function",
60+
enable: !!currentHasWidget && typeof renderWidgetLine === "function",
4261
});
4362

4463
if (!renderWidgetLine) return null;
@@ -50,7 +69,7 @@ const InternalDiffSplitWidgetLine = ({
5069
data-side={SplitSide[side]}
5170
className="diff-line diff-line-widget"
5271
>
53-
{currentWidget ? (
72+
{currentHasWidget ? (
5473
<div className={`diff-line-widget-${SplitSide[side]}-content p-0`}>
5574
<div
5675
data-line={`${lineNumber}-widget-content`}
@@ -92,10 +111,9 @@ export const DiffSplitWidgetLine = ({
92111
}) => {
93112
const { useWidget } = useDiffWidgetContext();
94113

95-
const { widgetLineNumber, widgetSide, setWidget } = useWidget.useShallowStableSelector((s) => ({
114+
const { widgetLineNumber, widgetSide } = useWidget.useShallowStableSelector((s) => ({
96115
widgetLineNumber: s.widgetLineNumber,
97116
widgetSide: s.widgetSide,
98-
setWidget: s.setWidget,
99117
}));
100118

101119
const oldLine = diffFile.getSplitLeftLine(index);
@@ -106,23 +124,9 @@ export const DiffSplitWidgetLine = ({
106124

107125
const newLineWidget = newLine.lineNumber && widgetSide === SplitSide.new && widgetLineNumber === newLine.lineNumber;
108126

109-
const currentLine = side === SplitSide.old ? oldLine : newLine;
110-
111-
const currentWidget = side === SplitSide.old ? oldLineWidget : newLineWidget;
112-
113127
const currentIsShow = oldLineWidget || newLineWidget;
114128

115129
if (!currentIsShow) return null;
116130

117-
return (
118-
<InternalDiffSplitWidgetLine
119-
index={index}
120-
diffFile={diffFile}
121-
side={side}
122-
lineNumber={lineNumber}
123-
currentLine={currentLine}
124-
setWidget={setWidget}
125-
currentWidget={currentWidget}
126-
/>
127-
);
131+
return <InternalDiffSplitWidgetLine index={index} diffFile={diffFile} side={side} lineNumber={lineNumber} />;
128132
};

‎packages/react/src/hooks/useDomWidth.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
22

33
import { useDiffViewContext } from "../components/DiffViewContext";
44

5-
type ObserveElement = HTMLElement & {
5+
export type ObserveElement = HTMLElement & {
66
__observeCallback: Set<() => void>;
77
__observeInstance: ResizeObserver;
88
};

‎packages/react/src/hooks/useSyncHeight.ts

+28-6
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import { useEffect } from "react";
22

33
import { useDiffViewContext } from "../components/DiffViewContext";
44

5-
// TODO
5+
import type { ObserveElement } from "./useDomWidth";
6+
67
export const useSyncHeight = ({
78
selector,
89
wrapper,
@@ -35,6 +36,8 @@ export const useSyncHeight = ({
3536

3637
const target = ele1.getAttribute("data-side") === side ? ele1 : ele2;
3738

39+
const typedTarget = target as ObserveElement;
40+
3841
const cb = () => {
3942
ele1.style.height = "auto";
4043
ele2.style.height = "auto";
@@ -49,16 +52,35 @@ export const useSyncHeight = ({
4952

5053
cb();
5154

52-
const observer = new ResizeObserver(cb);
55+
const cleanCb = () => {
56+
typedTarget.__observeCallback.delete(cb);
57+
if (typedTarget.__observeCallback.size === 0) {
58+
typedTarget.__observeInstance?.disconnect();
59+
typedTarget.removeAttribute("data-observe");
60+
delete typedTarget.__observeCallback;
61+
delete typedTarget.__observeInstance;
62+
}
63+
};
64+
65+
if (typedTarget.__observeCallback) {
66+
typedTarget.__observeCallback.add(cb);
67+
68+
return () => cleanCb();
69+
}
70+
71+
typedTarget.__observeCallback = new Set();
72+
73+
typedTarget.__observeCallback.add(cb);
74+
75+
const observer = new ResizeObserver(() => typedTarget.__observeCallback.forEach((cb) => cb()));
76+
77+
typedTarget.__observeInstance = observer;
5378

5479
observer.observe(target);
5580

5681
target.setAttribute("data-observe", "height");
5782

58-
return () => {
59-
observer.disconnect();
60-
target?.removeAttribute("data-observe");
61-
};
83+
return () => cleanCb();
6284
}
6385
}
6486
}, [selector, enable, side, id, wrapper, mounted]);

‎ui/react-example/src/components/MainContentDiffExampleView.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -100,10 +100,11 @@ export const MainContentDiffExampleView = memo(
100100
setExtend((prev) => {
101101
const sideKey = side === SplitSide.old ? "oldFile" : "newFile";
102102
const res = { ...prev };
103+
const nData = res[sideKey]?.[lineNumber].data.filter((_, index) => index !== i);
103104
res[sideKey] = {
104105
...res[sideKey],
105106
[lineNumber]: {
106-
data: res[sideKey]?.[lineNumber].data.filter((_, index) => index !== i),
107+
data: nData?.length ? nData : undefined,
107108
},
108109
};
109110
return res;

0 commit comments

Comments
 (0)