mirror of
https://github.com/silvanocerza/github-gitless-sync.git
synced 2026-07-22 12:10:28 +00:00
Handle action gutter buttons click
This commit is contained in:
parent
fd7cffffab
commit
a0f2439b1f
2 changed files with 80 additions and 20 deletions
|
|
@ -11,11 +11,17 @@ interface ActionsGutterProps {
|
|||
// This is essential to correctly draw the lines between
|
||||
// the left and right editor
|
||||
lineHeight: number;
|
||||
onAcceptLeft: (chunk: DiffChunk) => void;
|
||||
onAcceptRight: (chunk: DiffChunk) => void;
|
||||
onReject: (chunk: DiffChunk) => void;
|
||||
}
|
||||
|
||||
const ActionsGutter: React.FC<ActionsGutterProps> = ({
|
||||
diffChunks,
|
||||
lineHeight,
|
||||
onAcceptLeft,
|
||||
onAcceptRight,
|
||||
onReject,
|
||||
}) => {
|
||||
const [actualWidth, setActualWidth] = React.useState(0);
|
||||
const containerRef = React.useRef<HTMLDivElement>(null);
|
||||
|
|
@ -55,15 +61,11 @@ const ActionsGutter: React.FC<ActionsGutterProps> = ({
|
|||
<div style={{ display: "flex", flexDirection: "row" }}>
|
||||
<ButtonCross
|
||||
tooltipText="Delete lines"
|
||||
onClick={() => {
|
||||
console.log("CLICKED");
|
||||
}}
|
||||
onClick={() => onReject(chunk)}
|
||||
/>
|
||||
<ButtonLeftArrow
|
||||
tooltipText="Add lines"
|
||||
onClick={() => {
|
||||
console.log("CLICKED");
|
||||
}}
|
||||
onClick={() => onAcceptLeft(chunk)}
|
||||
/>
|
||||
</div>
|
||||
</foreignObject>
|
||||
|
|
@ -79,15 +81,11 @@ const ActionsGutter: React.FC<ActionsGutterProps> = ({
|
|||
<div style={{ display: "flex", flexDirection: "row" }}>
|
||||
<ButtonRightArrow
|
||||
tooltipText="Add lines"
|
||||
onClick={() => {
|
||||
console.log("CLICKED");
|
||||
}}
|
||||
onClick={() => onAcceptRight(chunk)}
|
||||
/>
|
||||
<ButtonCross
|
||||
tooltipText="Delete lines"
|
||||
onClick={() => {
|
||||
console.log("CLICKED");
|
||||
}}
|
||||
onClick={() => onReject(chunk)}
|
||||
/>
|
||||
</div>
|
||||
</foreignObject>
|
||||
|
|
@ -109,15 +107,11 @@ const ActionsGutter: React.FC<ActionsGutterProps> = ({
|
|||
>
|
||||
<ButtonRightArrow
|
||||
tooltipText="Overwrite right lines"
|
||||
onClick={() => {
|
||||
console.log("CLICKED");
|
||||
}}
|
||||
onClick={() => onAcceptRight(chunk)}
|
||||
/>
|
||||
<ButtonLeftArrow
|
||||
tooltipText="Overwrite left lines"
|
||||
onClick={() => {
|
||||
console.log("CLICKED");
|
||||
}}
|
||||
onClick={() => onAcceptLeft(chunk)}
|
||||
/>
|
||||
</div>
|
||||
</foreignObject>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from "react";
|
|||
import { EditorView } from "@codemirror/view";
|
||||
import { EditorState } from "@codemirror/state";
|
||||
import { markdown } from "@codemirror/lang-markdown";
|
||||
import diff from "./diff";
|
||||
import diff, { DiffChunk } from "./diff";
|
||||
import { createDiffHighlightPlugin } from "./diff-highlight-plugin";
|
||||
import EditorPane from "./editor-pane";
|
||||
import ActionsGutter from "./actions-gutter";
|
||||
|
|
@ -65,7 +65,73 @@ const DiffView: React.FC<DiffViewProps> = ({
|
|||
/>
|
||||
</div>
|
||||
<div style={{ minWidth: "160px", width: "auto" }}>
|
||||
<ActionsGutter diffChunks={diffs} lineHeight={lineHeight} />
|
||||
<ActionsGutter
|
||||
diffChunks={diffs}
|
||||
lineHeight={lineHeight}
|
||||
onAcceptLeft={(chunk: DiffChunk) => {
|
||||
if (chunk.type === "add") {
|
||||
const oldLines = oldText.split("\n");
|
||||
oldLines.splice(
|
||||
chunk.startLeftLine - 1,
|
||||
0,
|
||||
...newText
|
||||
.split("\n")
|
||||
.slice(chunk.startRightLine - 1, chunk.endRightLine - 1),
|
||||
);
|
||||
onOldTextChange(oldLines.join("\n"));
|
||||
} else if (chunk.type === "modify") {
|
||||
const oldLines = oldText.split("\n");
|
||||
oldLines.splice(
|
||||
chunk.startLeftLine - 1,
|
||||
chunk.endLeftLine - chunk.startLeftLine,
|
||||
...newText
|
||||
.split("\n")
|
||||
.slice(chunk.startRightLine - 1, chunk.endRightLine - 1),
|
||||
);
|
||||
onOldTextChange(oldLines.join("\n"));
|
||||
}
|
||||
}}
|
||||
onAcceptRight={(chunk: DiffChunk) => {
|
||||
if (chunk.type === "remove") {
|
||||
const newLines = newText.split("\n");
|
||||
newLines.splice(
|
||||
chunk.startRightLine - 1,
|
||||
0,
|
||||
...oldText
|
||||
.split("\n")
|
||||
.slice(chunk.startLeftLine - 1, chunk.endLeftLine - 1),
|
||||
);
|
||||
onNewTextChange(newLines.join("\n"));
|
||||
} else if (chunk.type === "modify") {
|
||||
const newLines = newText.split("\n");
|
||||
newLines.splice(
|
||||
chunk.startRightLine - 1,
|
||||
chunk.endRightLine - chunk.startRightLine,
|
||||
...oldText
|
||||
.split("\n")
|
||||
.slice(chunk.startLeftLine - 1, chunk.endLeftLine - 1),
|
||||
);
|
||||
onNewTextChange(newLines.join("\n"));
|
||||
}
|
||||
}}
|
||||
onReject={(chunk: DiffChunk) => {
|
||||
if (chunk.type === "add") {
|
||||
const newLines = newText.split("\n");
|
||||
newLines.splice(
|
||||
chunk.startRightLine - 1,
|
||||
chunk.endRightLine - chunk.startRightLine,
|
||||
);
|
||||
onNewTextChange(newLines.join("\n"));
|
||||
} else if (chunk.type === "remove") {
|
||||
const oldLines = oldText.split("\n");
|
||||
oldLines.splice(
|
||||
chunk.startLeftLine - 1,
|
||||
chunk.endLeftLine - chunk.startLeftLine,
|
||||
);
|
||||
onOldTextChange(oldLines.join("\n"));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ flex: 1, overflow: "hidden" }}>
|
||||
<EditorPane
|
||||
|
|
|
|||
Loading…
Reference in a new issue