Skip to content

Commit 186f0ec

Browse files
MrWangJustToDoMrWangJustToDo
committed
update
1 parent 1d6b948 commit 186f0ec

File tree

9 files changed

+65
-29
lines changed

9 files changed

+65
-29
lines changed

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

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,14 @@ const InternalDiffUnifiedExtendLine = ({
1212
index,
1313
diffFile,
1414
lineNumber,
15+
enableWrap,
1516
oldLineExtend,
1617
newLineExtend,
1718
}: {
1819
index: number;
1920
diffFile: DiffFile;
2021
lineNumber: number;
22+
enableWrap: boolean;
2123
oldLineExtend: { data: any };
2224
newLineExtend: { data: any };
2325
}) => {
@@ -27,9 +29,10 @@ const InternalDiffUnifiedExtendLine = ({
2729

2830
const unifiedItem = diffFile.getUnifiedLine(index);
2931

32+
// TODO use css variable to get width
3033
const width = useDomWidth({
3134
selector: ".unified-diff-table-wrapper",
32-
enable: typeof renderExtendLine === "function",
35+
enable: typeof renderExtendLine === "function" && !enableWrap,
3336
});
3437

3538
if (!renderExtendLine) return null;
@@ -38,7 +41,7 @@ const InternalDiffUnifiedExtendLine = ({
3841
<tr data-line={`${lineNumber}-extend`} data-state="extend" className="diff-line diff-line-extend">
3942
<td className="diff-line-extend-content p-0 align-top" colSpan={2}>
4043
<div className="diff-line-extend-wrapper sticky left-0 z-[1]" style={{ width }}>
41-
{width > 0 &&
44+
{(enableWrap ? true : width > 0) &&
4245
oldLineExtend?.data !== undefined &&
4346
oldLineExtend?.data !== null &&
4447
renderExtendLine?.({
@@ -48,7 +51,7 @@ const InternalDiffUnifiedExtendLine = ({
4851
data: oldLineExtend.data,
4952
onUpdate: diffFile.notifyAll,
5053
})}
51-
{width > 0 &&
54+
{(enableWrap ? true : width > 0) &&
5255
newLineExtend?.data !== undefined &&
5356
newLineExtend?.data !== null &&
5457
renderExtendLine?.({
@@ -68,10 +71,12 @@ export const DiffUnifiedExtendLine = ({
6871
index,
6972
diffFile,
7073
lineNumber,
74+
enableWrap,
7175
}: {
7276
index: number;
7377
diffFile: DiffFile;
7478
lineNumber: number;
79+
enableWrap: boolean;
7580
}) => {
7681
const { useDiffContext } = useDiffViewContext();
7782

@@ -96,6 +101,7 @@ export const DiffUnifiedExtendLine = ({
96101
index={index}
97102
diffFile={diffFile}
98103
lineNumber={lineNumber}
104+
enableWrap={enableWrap}
99105
oldLineExtend={oldLineExtend}
100106
newLineExtend={newLineExtend}
101107
/>

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

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -147,8 +147,18 @@ export const DiffUnifiedView = memo(({ diffFile }: { diffFile: DiffFile }) => {
147147
enableHighlight={enableHighlight}
148148
enableAddWidget={enableAddWidget}
149149
/>
150-
<DiffUnifiedWidgetLine index={item.index} lineNumber={item.lineNumber} diffFile={diffFile} />
151-
<DiffUnifiedExtendLine index={item.index} lineNumber={item.lineNumber} diffFile={diffFile} />
150+
<DiffUnifiedWidgetLine
151+
index={item.index}
152+
lineNumber={item.lineNumber}
153+
diffFile={diffFile}
154+
enableWrap={enableWrap}
155+
/>
156+
<DiffUnifiedExtendLine
157+
index={item.index}
158+
lineNumber={item.lineNumber}
159+
diffFile={diffFile}
160+
enableWrap={enableWrap}
161+
/>
152162
</Fragment>
153163
))}
154164
<DiffUnifiedHunkLine

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

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,12 @@ const InternalDiffUnifiedWidgetLine = ({
1212
index,
1313
diffFile,
1414
lineNumber,
15+
enableWrap,
1516
}: {
1617
index: number;
1718
diffFile: DiffFile;
1819
lineNumber: number;
20+
enableWrap: boolean;
1921
}) => {
2022
const { useWidget } = useDiffWidgetContext();
2123

@@ -42,7 +44,7 @@ const InternalDiffUnifiedWidgetLine = ({
4244

4345
const width = useDomWidth({
4446
selector: ".unified-diff-table-wrapper",
45-
enable: typeof renderWidgetLine === "function",
47+
enable: typeof renderWidgetLine === "function" && !enableWrap,
4648
});
4749

4850
if (!renderWidgetLine) return null;
@@ -51,10 +53,10 @@ const InternalDiffUnifiedWidgetLine = ({
5153
<tr data-line={`${lineNumber}-widget`} data-state="widget" className="diff-line diff-line-widget">
5254
<td className="diff-line-widget-content p-0" colSpan={2}>
5355
<div className="diff-line-widget-wrapper sticky left-0 z-[1]" style={{ width }}>
54-
{width > 0 &&
56+
{(enableWrap ? true : width > 0) &&
5557
oldWidget &&
5658
renderWidgetLine?.({ diffFile, side: SplitSide.old, lineNumber: unifiedItem.oldLineNumber, onClose })}
57-
{width > 0 &&
59+
{(enableWrap ? true : width > 0) &&
5860
newWidget &&
5961
renderWidgetLine?.({ diffFile, side: SplitSide.new, lineNumber: unifiedItem.newLineNumber, onClose })}
6062
</div>
@@ -67,10 +69,12 @@ export const DiffUnifiedWidgetLine = ({
6769
index,
6870
diffFile,
6971
lineNumber,
72+
enableWrap,
7073
}: {
7174
index: number;
7275
diffFile: DiffFile;
7376
lineNumber: number;
77+
enableWrap: boolean;
7478
}) => {
7579
const { useWidget } = useDiffWidgetContext();
7680

@@ -100,5 +104,7 @@ export const DiffUnifiedWidgetLine = ({
100104

101105
if (!currentIsShow) return null;
102106

103-
return <InternalDiffUnifiedWidgetLine index={index} diffFile={diffFile} lineNumber={lineNumber} />;
107+
return (
108+
<InternalDiffUnifiedWidgetLine index={index} diffFile={diffFile} lineNumber={lineNumber} enableWrap={enableWrap} />
109+
);
104110
};

‎packages/solid/src/components/DiffUnifiedExtendLine.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import { SplitSide, type DiffFile } from "@git-diff-view/core";
22
import { createMemo, Show } from "solid-js";
33

4-
import { useDomWidth, useExtendData, useRenderExtend } from "../hooks";
4+
import { useDomWidth, useEnableWrap, useExtendData, useRenderExtend } from "../hooks";
55

66
export const DiffUnifiedExtendLine = (props: { index: number; diffFile: DiffFile; lineNumber: number }) => {
77
const extendData = useExtendData();
88

9+
const enableWrap = useEnableWrap();
10+
911
const renderExtend = useRenderExtend();
1012

1113
const unifiedItem = createMemo(() => props.diffFile.getUnifiedLine(props.index));
@@ -22,15 +24,15 @@ export const DiffUnifiedExtendLine = (props: { index: number; diffFile: DiffFile
2224

2325
const width = useDomWidth({
2426
selector: lineSelector,
25-
enable: currentIsShow,
27+
enable: () => currentIsShow() && !enableWrap(),
2628
});
2729

2830
return (
2931
<Show when={currentIsShow()}>
3032
<tr data-line={`${props.lineNumber}-extend`} data-state="extend" class="diff-line diff-line-extend">
3133
<td class="diff-line-extend-content p-0 align-top" colspan={2}>
3234
<div class="diff-line-extend-wrapper sticky left-0 z-[1]" style={{ width: width() + "px" }}>
33-
{width() > 0 &&
35+
{(enableWrap() ? true : width() > 0) &&
3436
oldExtend() &&
3537
renderExtend()?.({
3638
diffFile: props.diffFile,
@@ -39,7 +41,7 @@ export const DiffUnifiedExtendLine = (props: { index: number; diffFile: DiffFile
3941
data: oldExtend()?.data,
4042
onUpdate: props.diffFile.notifyAll,
4143
})}
42-
{width() > 0 &&
44+
{(enableWrap() ? true : width() > 0) &&
4345
newExtend() &&
4446
renderExtend()?.({
4547
diffFile: props.diffFile,

‎packages/solid/src/components/DiffUnifiedWidgetLine.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import { SplitSide, type DiffFile } from "@git-diff-view/core";
22
import { createMemo, Show } from "solid-js";
33

4-
import { useDomWidth, useRenderWidget } from "../hooks";
4+
import { useDomWidth, useEnableWrap, useRenderWidget } from "../hooks";
55

66
import { useDiffWidgetContext } from "./DiffWidgetContext";
77

88
export const DiffUnifiedWidgetLine = (props: { index: number; diffFile: DiffFile; lineNumber: number }) => {
99
const renderWidget = useRenderWidget();
1010

11+
const enableWrap = useEnableWrap();
12+
1113
const [widget, setWidget] = useDiffWidgetContext() || [];
1214

1315
const unifiedItem = createMemo(() => props.diffFile.getUnifiedLine(props.index));
@@ -36,23 +38,23 @@ export const DiffUnifiedWidgetLine = (props: { index: number; diffFile: DiffFile
3638

3739
const width = useDomWidth({
3840
selector: lineSelector,
39-
enable: currenIsShow,
41+
enable: () => currenIsShow() && !enableWrap(),
4042
});
4143

4244
return (
4345
<Show when={currenIsShow()}>
4446
<tr data-line={`${props.lineNumber}-widget`} data-state="widget" class="diff-line diff-line-widget">
4547
<td class="diff-line-widget-content p-0" colspan={2}>
4648
<div class="diff-line-widget-wrapper sticky left-0 z-[1]" style={{ width: width() + "px" }}>
47-
{width() > 0 &&
49+
{(enableWrap() ? true : width() > 0) &&
4850
oldWidget() &&
4951
renderWidget()?.({
5052
diffFile: props.diffFile,
5153
side: SplitSide.old,
5254
lineNumber: unifiedItem()?.oldLineNumber || 0,
5355
onClose: onCloseWidget,
5456
})}
55-
{width() > 0 &&
57+
{(enableWrap() ? true : width() > 0) &&
5658
newWidget() &&
5759
renderWidget()?.({
5860
diffFile: props.diffFile,

‎packages/svelte/src/lib/components/DiffUnifiedExtendLine.svelte‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<script lang="ts">
2+
import { getEnableWrap } from '$lib/context/enableWrap.js';
23
import { getExtend } from '$lib/context/extend.js';
34
import { getRenderExtend } from '$lib/context/renderExtend.js';
45
import { useDomWidth } from '$lib/hooks/useDomWidth.svelte.js';
@@ -14,6 +15,8 @@
1415
1516
const extendData = $derived.by(getExtend());
1617
18+
const enableWrap = $derived.by(getEnableWrap());
19+
1720
const renderExtend = $derived.by(getRenderExtend());
1821
1922
const unifiedItem = $derived.by(() => props.diffFile.getUnifiedLine(props.index));
@@ -31,7 +34,7 @@
3134
const width = $derived.by(
3235
useDomWidth({
3336
selector: () => '.unified-diff-table-wrapper',
34-
enable: () => currentIsShow
37+
enable: () => currentIsShow && !enableWrap
3538
})
3639
);
3740
</script>
@@ -44,7 +47,7 @@
4447
>
4548
<td class="diff-line-extend-content p-0 align-top" colspan={2}>
4649
<div class="diff-line-extend-wrapper sticky left-0 z-[1]" style={`width: ${width}px `}>
47-
{#if width && oldExtend && !!renderExtend}
50+
{#if (enableWrap || width > 0) && oldExtend && !!renderExtend}
4851
{@render renderExtend({
4952
diffFile: props.diffFile,
5053
side: SplitSide.old,
@@ -53,7 +56,7 @@
5356
onUpdate: () => props.diffFile.notifyAll()
5457
})}
5558
{/if}
56-
{#if width && newExtend && !!renderExtend}
59+
{#if (enableWrap || width > 0) && newExtend && !!renderExtend}
5760
{@render renderExtend({
5861
diffFile: props.diffFile,
5962
side: SplitSide.new,

‎packages/svelte/src/lib/components/DiffUnifiedWidgetLine.svelte‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<script lang="ts">
2+
import { getEnableWrap } from '$lib/context/enableWrap.js';
23
import { getRenderWidget } from '$lib/context/renderWidget.js';
34
import { getWidget } from '$lib/context/widget.js';
45
import { useDomWidth } from '$lib/hooks/useDomWidth.svelte.js';
@@ -14,6 +15,8 @@
1415
1516
const widget = $derived.by(getWidget());
1617
18+
const enableWrap = $derived.by(getEnableWrap());
19+
1720
const renderWidget = $derived.by(getRenderWidget());
1821
1922
const unifiedItem = $derived.by(() => props.diffFile.getUnifiedLine(props.index));
@@ -46,7 +49,7 @@
4649
const width = $derived.by(
4750
useDomWidth({
4851
selector: () => `.unified-diff-table-wrapper`,
49-
enable: () => currentIsShow
52+
enable: () => currentIsShow && !enableWrap
5053
})
5154
);
5255
</script>
@@ -59,15 +62,15 @@
5962
>
6063
<td class="diff-line-widget-content p-0" colspan={2}>
6164
<div class="diff-line-widget-wrapper sticky left-0 z-[1]" style={`width: ${width}px`}>
62-
{#if width > 0 && oldWidget}
65+
{#if (enableWrap || width > 0) && oldWidget}
6366
{@render renderWidget({
6467
diffFile: props.diffFile,
6568
side: SplitSide.old,
6669
lineNumber: unifiedItem?.oldLineNumber || 0,
6770
onClose: onCloseWidget
6871
})}
6972
{/if}
70-
{#if width > 0 && newWidget}
73+
{#if (enableWrap || width > 0) && newWidget}
7174
{@render renderWidget?.({
7275
diffFile: props.diffFile,
7376
side: SplitSide.new,

‎packages/vue/src/components/DiffUnifiedExtendLine.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { computed, defineComponent, ref } from "vue";
22

33
import { SplitSide } from "..";
4-
import { useExtendData, useSlots } from "../context";
4+
import { useEnableWrap, useExtendData, useSlots } from "../context";
55
import { useDomWidth } from "../hooks/useDomWidth";
66

77
import type { DiffFile } from "@git-diff-view/core";
@@ -12,6 +12,8 @@ export const DiffUnifiedExtendLine = defineComponent(
1212

1313
const slots = useSlots();
1414

15+
const enableWrap = useEnableWrap();
16+
1517
const unifiedItem = computed(() => props.diffFile.getUnifiedLine(props.index));
1618

1719
const oldExtend = computed(() => extendData.value?.oldFile?.[unifiedItem.value.oldLineNumber]);
@@ -36,7 +38,7 @@ export const DiffUnifiedExtendLine = defineComponent(
3638
<tr data-line={`${props.lineNumber}-extend`} data-state="extend" class="diff-line diff-line-extend">
3739
<td class="diff-line-extend-content p-0 align-top" colspan={2}>
3840
<div class="diff-line-extend-wrapper sticky left-0 z-[1]" style={{ width: width.value + "px" }}>
39-
{width.value > 0 &&
41+
{(enableWrap.value ? true : width.value > 0) &&
4042
oldExtend.value &&
4143
slots.extend({
4244
diffFile: props.diffFile,
@@ -45,7 +47,7 @@ export const DiffUnifiedExtendLine = defineComponent(
4547
data: oldExtend.value.data,
4648
onUpdate: props.diffFile.notifyAll,
4749
})}
48-
{width.value > 0 &&
50+
{(enableWrap.value ? true : width.value > 0) &&
4951
newExtend.value &&
5052
slots.extend({
5153
diffFile: props.diffFile,

‎packages/vue/src/components/DiffUnifiedWidgetLine.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { computed, defineComponent, ref } from "vue";
22

33
import { SplitSide } from "..";
4-
import { useSetWidget, useSlots, useWidget } from "../context";
4+
import { useEnableWrap, useSetWidget, useSlots, useWidget } from "../context";
55
import { useDomWidth } from "../hooks/useDomWidth";
66

77
import type { DiffFile } from "@git-diff-view/core";
@@ -14,6 +14,8 @@ export const DiffUnifiedWidgetLine = defineComponent(
1414

1515
const setWidget = useSetWidget();
1616

17+
const enableWrap = useEnableWrap();
18+
1719
const unifiedItem = computed(() => props.diffFile.getUnifiedLine(props.index));
1820

1921
const oldWidget = computed(
@@ -50,15 +52,15 @@ export const DiffUnifiedWidgetLine = defineComponent(
5052
<tr data-line={`${props.lineNumber}-widget`} data-state="widget" class="diff-line diff-line-widget">
5153
<td class="diff-line-widget-content p-0" colspan={2}>
5254
<div class="diff-line-widget-wrapper sticky left-0 z-[1]" style={{ width: width.value + "px" }}>
53-
{width.value > 0 &&
55+
{(enableWrap.value ? true : width.value > 0) &&
5456
oldWidget.value &&
5557
slots.widget?.({
5658
diffFile: props.diffFile,
5759
side: SplitSide.old,
5860
lineNumber: unifiedItem.value.oldLineNumber,
5961
onClose: onCloseWidget,
6062
})}
61-
{width.value > 0 &&
63+
{(enableWrap.value ? true : width.value > 0) &&
6264
newWidget.value &&
6365
slots.widget?.({
6466
diffFile: props.diffFile,

0 commit comments

Comments
 (0)