Skip to content

Commit bcfcaed

Browse files
MrWangJustToDoMrWangJustToDo
committed
update
1 parent 0d8bb3a commit bcfcaed

File tree

3 files changed

+112
-33
lines changed

3 files changed

+112
-33
lines changed

‎ui/react-example/src/components/MainContent/MainContentDiffConfig.tsx‎

Lines changed: 70 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,28 @@
11
import { DiffModeEnum } from "@git-diff-view/react";
2-
import { Button, Group, Tooltip } from "@mantine/core";
2+
import { Button, Group, Tooltip, Collapse, NumberInput, Stack } from "@mantine/core";
33
import { useEffect, useState } from "react";
44

55
import { useDiffConfig } from "../../hooks/useDiffConfig";
66

77
import type { DiffFile } from "@git-diff-view/react";
88

99
export const MainContentDiffConfig = ({ diffFile }: { diffFile?: DiffFile }) => {
10-
const { mode, setEngine, setHighlight, setMode, setWrap, wrap, engine, highlight } = useDiffConfig();
10+
const {
11+
mode,
12+
setEngine,
13+
setHighlight,
14+
setMode,
15+
setWrap,
16+
wrap,
17+
engine,
18+
highlight,
19+
rangeMode,
20+
setRangeMode,
21+
rangeStart,
22+
setRangeStart,
23+
rangeEnd,
24+
setRangeEnd,
25+
} = useDiffConfig();
1126

1227
const [expandAll, setExpandAll] = useState(false);
1328

@@ -40,33 +55,58 @@ export const MainContentDiffConfig = ({ diffFile }: { diffFile?: DiffFile }) =>
4055
};
4156

4257
return (
43-
<Group>
44-
<Tooltip label="diff view mode">
45-
<Button onClick={() => setMode(mode === DiffModeEnum.Split ? DiffModeEnum.Unified : DiffModeEnum.Split)}>
46-
{mode === DiffModeEnum.Split ? "split" : "unified"}
47-
</Button>
48-
</Tooltip>
49-
<Tooltip label="code line mode">
50-
<Button onClick={() => setWrap(!wrap)}>{wrap ? "wrap" : "no wrap"}</Button>
51-
</Tooltip>
52-
<Tooltip label="highlight status">
53-
<Button onClick={() => setHighlight(!highlight)}>highlight {highlight ? "enable" : "disable"}</Button>
54-
</Tooltip>
55-
<Tooltip label="highlight engine">
56-
<Button disabled={!highlight} onClick={() => setEngine(engine === "lowlight" ? "shiki" : "lowlight")}>
57-
{engine}
58-
</Button>
59-
</Tooltip>
60-
<Tooltip label="expand all lines">
61-
<Button
62-
onClick={() => {
63-
toggleExpandAll();
64-
setExpandAll(!expandAll);
65-
}}
66-
>
67-
{expandAll ? "collapse all" : "expand all"}
68-
</Button>
69-
</Tooltip>
70-
</Group>
58+
<Stack gap="sm">
59+
<Group>
60+
<Tooltip label="diff view mode">
61+
<Button onClick={() => setMode(mode === DiffModeEnum.Split ? DiffModeEnum.Unified : DiffModeEnum.Split)}>
62+
{mode === DiffModeEnum.Split ? "split" : "unified"}
63+
</Button>
64+
</Tooltip>
65+
<Tooltip label="code line mode">
66+
<Button onClick={() => setWrap(!wrap)}>{wrap ? "wrap" : "no wrap"}</Button>
67+
</Tooltip>
68+
<Tooltip label="highlight status">
69+
<Button onClick={() => setHighlight(!highlight)}>highlight {highlight ? "enable" : "disable"}</Button>
70+
</Tooltip>
71+
<Tooltip label="highlight engine">
72+
<Button disabled={!highlight} onClick={() => setEngine(engine === "lowlight" ? "shiki" : "lowlight")}>
73+
{engine}
74+
</Button>
75+
</Tooltip>
76+
<Tooltip label="expand all lines">
77+
<Button
78+
onClick={() => {
79+
toggleExpandAll();
80+
setExpandAll(!expandAll);
81+
}}
82+
>
83+
{expandAll ? "collapse all" : "expand all"}
84+
</Button>
85+
</Tooltip>
86+
<Tooltip label="show only a portion of the diff">
87+
<Button onClick={() => setRangeMode(!rangeMode)}>{rangeMode ? "disable range" : "enable range"}</Button>
88+
</Tooltip>
89+
</Group>
90+
<Collapse in={rangeMode}>
91+
<Group gap="sm">
92+
<NumberInput
93+
size="xs"
94+
value={rangeStart}
95+
min={0}
96+
label="Range Start"
97+
max={diffFile?.splitLineLength}
98+
onChange={(n) => setRangeStart(Number(n))}
99+
/>
100+
<NumberInput
101+
size="xs"
102+
value={rangeEnd}
103+
min={0}
104+
label="Range End"
105+
max={diffFile?.splitLineLength}
106+
onChange={(n) => setRangeEnd(Number(n))}
107+
/>
108+
</Group>
109+
</Collapse>
110+
</Stack>
71111
);
72112
};

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

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { SplitSide, disableCache, highlighter as buildInHighlighter } from "@git-diff-view/react";
22
import { Box, Button, Card, CloseButton, Group, Stack, useMantineColorScheme, Text } from "@mantine/core";
33
import { usePrevious } from "@mantine/hooks";
4-
import { memo, useEffect, useState } from "react";
4+
import { memo, useEffect, useState, useMemo } from "react";
55

66
import { useDiffConfig } from "../../hooks/useDiffConfig";
77
import { DiffViewWithScrollBar } from "../DiffViewWithScrollBar";
@@ -33,7 +33,18 @@ export const MainContentDiffExampleView = memo(
3333
newFile: {},
3434
});
3535

36-
const { highlight, mode, wrap, engine, tabSpace, fastDiff, autoExpandCommentLine } = useDiffConfig();
36+
const {
37+
highlight,
38+
mode,
39+
wrap,
40+
engine,
41+
tabSpace,
42+
fastDiff,
43+
autoExpandCommentLine,
44+
rangeMode,
45+
rangeStart,
46+
rangeEnd,
47+
} = useDiffConfig();
3748

3849
const prevTabSpace = usePrevious(tabSpace);
3950

@@ -58,10 +69,17 @@ export const MainContentDiffExampleView = memo(
5869
}
5970
}, [autoExpandCommentLine, prevAutoExpandCommentLine]);
6071

72+
const finalDiffFile = useMemo(() => {
73+
if (rangeMode && rangeStart && rangeEnd && rangeStart < rangeEnd) {
74+
return diffFile.generateInstanceFromLineNumberRange(rangeStart, rangeEnd);
75+
}
76+
return diffFile;
77+
}, [diffFile, rangeMode, rangeStart, rangeEnd]);
78+
6179
return (
6280
<Box className="h-full overflow-auto">
6381
<DiffViewWithScrollBar
64-
diffFile={diffFile}
82+
diffFile={finalDiffFile}
6583
diffViewTheme={colorScheme === "light" ? "light" : "dark"}
6684
diffViewHighlight={highlight}
6785
diffViewMode={mode}

‎ui/react-example/src/hooks/useDiffConfig.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@ type DiffConfig = {
1111
fastDiff: boolean;
1212
shadowDOM: boolean;
1313
autoExpandCommentLine: boolean;
14+
rangeMode: boolean;
15+
rangeStart: number;
16+
rangeEnd: number;
1417
};
1518

1619
export const useDiffConfig = createState(
@@ -25,6 +28,9 @@ export const useDiffConfig = createState(
2528
fastDiff: false,
2629
shadowDOM: false,
2730
autoExpandCommentLine: false,
31+
rangeMode: false,
32+
rangeStart: 0,
33+
rangeEnd: 0,
2834
}) as DiffConfig,
2935
{
3036
withActions(state) {
@@ -74,6 +80,21 @@ export const useDiffConfig = createState(
7480
state.autoExpandCommentLine = v;
7581
}
7682
},
83+
setRangeMode: (v: boolean) => {
84+
if (v !== state.rangeMode) {
85+
state.rangeMode = v;
86+
}
87+
},
88+
setRangeStart: (v: number) => {
89+
if (v !== state.rangeStart) {
90+
state.rangeStart = v;
91+
}
92+
},
93+
setRangeEnd: (v: number) => {
94+
if (v !== state.rangeEnd) {
95+
state.rangeEnd = v;
96+
}
97+
},
7798
};
7899
},
79100
withNamespace: "diffConfig",

0 commit comments

Comments
 (0)