@git-diff-view/react 0.0.26 → 0.0.28

package/src/components/DiffSplitContentLineWrap.tsx

@@ -0,0 +1,234 @@
+import { DiffLineType, type DiffFile, checkDiffLineIncludeChange } from "@git-diff-view/core";
+import {
+  getContentBG,
+  getLineNumberBG,
+  plainLineNumberColorName,
+  emptyBGName,
+  borderColorName,
+  expandLineNumberColorName,
+} from "@git-diff-view/utils";
+import * as React from "react";
+
+import { SplitSide } from "..";
+
+import { DiffSplitAddWidget } from "./DiffAddWidget";
+import { DiffContent } from "./DiffContent";
+// import { DiffContent_v2 } from "./DiffContent_v2";
+import { useDiffViewContext } from "./DiffViewContext";
+import { useDiffWidgetContext } from "./DiffWidgetContext";
+
+const InternalDiffSplitLine = ({
+  index,
+  diffFile,
+  lineNumber,
+  enableAddWidget,
+  enableHighlight,
+}: {
+  index: number;
+  diffFile: DiffFile;
+  lineNumber: number;
+  enableHighlight: boolean;
+  enableAddWidget: boolean;
+}) => {
+  const oldLine = diffFile.getSplitLeftLine(index);
+
+  const newLine = diffFile.getSplitRightLine(index);
+
+  const oldSyntaxLine = diffFile.getOldSyntaxLine(oldLine?.lineNumber);
+
+  const oldPlainLine = diffFile.getOldPlainLine(oldLine.lineNumber);
+
+  const newSyntaxLine = diffFile.getNewSyntaxLine(newLine?.lineNumber);
+
+  const newPlainLine = diffFile.getNewPlainLine(newLine.lineNumber);
+
+  const hasDiff = !!oldLine?.diff || !!newLine?.diff;
+
+  const hasChange = checkDiffLineIncludeChange(oldLine?.diff) || checkDiffLineIncludeChange(newLine?.diff);
+
+  const oldLineIsDelete = oldLine?.diff?.type === DiffLineType.Delete;
+
+  const newLineIsAdded = newLine?.diff?.type === DiffLineType.Add;
+
+  const { useDiffContext } = useDiffViewContext();
+
+  const onAddWidgetClick = useDiffContext.getReadonlyState().onAddWidgetClick;
+
+  const { useWidget } = useDiffWidgetContext();
+
+  const setWidget = useWidget.getReadonlyState().setWidget;
+
+  const hasOldLine = !!oldLine.lineNumber;
+
+  const hasNewLine = !!newLine.lineNumber;
+
+  const oldLineContentBG = getContentBG(false, oldLineIsDelete, hasDiff);
+
+  const oldLineNumberBG = getLineNumberBG(false, oldLineIsDelete, hasDiff);
+
+  const newLineContentBG = getContentBG(newLineIsAdded, false, hasDiff);
+
+  const newLineNumberBG = getLineNumberBG(newLineIsAdded, false, hasDiff);
+
+  return (
+    <tr data-line={lineNumber} data-state={hasDiff ? "diff" : "plain"} className="diff-line">
+      {hasOldLine ? (
+        <>
+          <td
+            className="diff-line-old-num group relative w-[1%] min-w-[40px] select-none pl-[10px] pr-[10px] text-right align-top"
+            data-side={SplitSide[SplitSide.old]}
+            style={{ backgroundColor: oldLineNumberBG, color: `var(${plainLineNumberColorName})` }}
+          >
+            {hasDiff && enableAddWidget && (
+              <DiffSplitAddWidget
+                index={index}
+                lineNumber={oldLine.lineNumber}
+                side={SplitSide.old}
+                diffFile={diffFile}
+                onWidgetClick={(...props) => onAddWidgetClick.current?.(...props)}
+                className="absolute left-[100%] z-[1] translate-x-[-50%]"
+                onOpenAddWidget={(lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side })}
+              />
+            )}
+            <span data-line-num={oldLine.lineNumber} style={{ opacity: hasChange ? undefined : 0.5 }}>
+              {oldLine.lineNumber}
+            </span>
+          </td>
+          <td
+            className="diff-line-old-content group relative pr-[10px] align-top"
+            data-side={SplitSide[SplitSide.old]}
+            style={{ backgroundColor: oldLineContentBG }}
+          >
+            {hasDiff && enableAddWidget && (
+              <DiffSplitAddWidget
+                index={index}
+                lineNumber={oldLine.lineNumber}
+                side={SplitSide.old}
+                diffFile={diffFile}
+                onWidgetClick={(...props) => onAddWidgetClick.current?.(...props)}
+                className="absolute right-[100%] z-[1] translate-x-[50%]"
+                onOpenAddWidget={(lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side })}
+              />
+            )}
+            <DiffContent
+              enableWrap={true}
+              diffFile={diffFile}
+              rawLine={oldLine.value}
+              diffLine={oldLine.diff}
+              plainLine={oldPlainLine}
+              syntaxLine={oldSyntaxLine}
+              enableHighlight={enableHighlight}
+            />
+          </td>
+        </>
+      ) : (
+        <td
+          className="diff-line-old-placeholder select-none"
+          data-side={SplitSide[SplitSide.old]}
+          style={{ backgroundColor: `var(${emptyBGName})` }}
+          colSpan={2}
+        >
+          <span>&ensp;</span>
+        </td>
+      )}
+      {hasNewLine ? (
+        <>
+          <td
+            className="diff-line-new-num group relative w-[1%] min-w-[40px] select-none border-l-[1px] pl-[10px] pr-[10px] text-right align-top"
+            data-side={SplitSide[SplitSide.new]}
+            style={{
+              backgroundColor: newLineNumberBG,
+              color: `var(${hasDiff ? plainLineNumberColorName : expandLineNumberColorName})`,
+              borderLeftColor: `var(${borderColorName})`,
+              borderLeftStyle: "solid",
+            }}
+          >
+            {hasDiff && enableAddWidget && (
+              <DiffSplitAddWidget
+                index={index}
+                lineNumber={newLine.lineNumber}
+                side={SplitSide.new}
+                diffFile={diffFile}
+                onWidgetClick={(...props) => onAddWidgetClick.current?.(...props)}
+                className="absolute left-[100%] z-[1] translate-x-[-50%]"
+                onOpenAddWidget={(lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side })}
+              />
+            )}
+            <span data-line-num={newLine.lineNumber} style={{ opacity: hasChange ? undefined : 0.5 }}>
+              {newLine.lineNumber}
+            </span>
+          </td>
+          <td
+            className="diff-line-new-content group relative pr-[10px] align-top"
+            data-side={SplitSide[SplitSide.new]}
+            style={{ backgroundColor: newLineContentBG }}
+          >
+            {hasDiff && enableAddWidget && (
+              <DiffSplitAddWidget
+                index={index}
+                lineNumber={newLine.lineNumber}
+                side={SplitSide.new}
+                diffFile={diffFile}
+                onWidgetClick={(...props) => onAddWidgetClick.current?.(...props)}
+                className="absolute right-[100%] z-[1] translate-x-[50%]"
+                onOpenAddWidget={(lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side })}
+              />
+            )}
+            <DiffContent
+              enableWrap={true}
+              diffFile={diffFile}
+              rawLine={newLine.value || ""}
+              diffLine={newLine.diff}
+              plainLine={newPlainLine}
+              syntaxLine={newSyntaxLine}
+              enableHighlight={enableHighlight}
+            />
+          </td>
+        </>
+      ) : (
+        <td
+          className="diff-line-new-placeholder select-none border-l-[1px]"
+          style={{
+            backgroundColor: `var(${emptyBGName})`,
+            borderLeftColor: `var(${borderColorName})`,
+            borderLeftStyle: "solid",
+          }}
+          data-side={SplitSide[SplitSide.new]}
+          colSpan={2}
+        >
+          <span>&ensp;</span>
+        </td>
+      )}
+    </tr>
+  );
+};
+
+export const DiffSplitContentLine = ({
+  index,
+  diffFile,
+  lineNumber,
+  enableAddWidget,
+  enableHighlight,
+}: {
+  index: number;
+  diffFile: DiffFile;
+  lineNumber: number;
+  enableHighlight: boolean;
+  enableAddWidget: boolean;
+}) => {
+  const oldLine = diffFile.getSplitLeftLine(index);
+
+  const newLine = diffFile.getSplitRightLine(index);
+
+  if (oldLine?.isHidden && newLine?.isHidden) return null;
+
+  return (
+    <InternalDiffSplitLine
+      index={index}
+      diffFile={diffFile}
+      lineNumber={lineNumber}
+      enableAddWidget={enableAddWidget}
+      enableHighlight={enableHighlight}
+    />
+  );
+};

package/src/components/DiffSplitExtendLineNormal.tsx

@@ -0,0 +1,150 @@
+import { emptyBGName } from "@git-diff-view/utils";
+import * as React from "react";
+
+import { SplitSide } from "..";
+import { useDomWidth } from "../hooks/useDomWidth";
+import { useSyncHeight } from "../hooks/useSyncHeight";
+
+import { useDiffViewContext } from "./DiffViewContext";
+
+import type { DiffFile } from "@git-diff-view/core";
+
+const InternalDiffSplitExtendLine = ({
+  index,
+  diffFile,
+  oldLineExtend,
+  newLineExtend,
+  side,
+  lineNumber,
+}: {
+  index: number;
+  side: SplitSide;
+  oldLineExtend: { data: any };
+  newLineExtend: { data: any };
+  diffFile: DiffFile;
+  lineNumber: number;
+}) => {
+  const { useDiffContext } = useDiffViewContext();
+
+  const oldLine = diffFile.getSplitLeftLine(index);
+
+  const newLine = diffFile.getSplitRightLine(index);
+
+  const renderExtendLine = useDiffContext.useShallowStableSelector((s) => s.renderExtendLine);
+
+  const currentExtend = side === SplitSide.old ? oldLineExtend : newLineExtend;
+
+  const otherSide = side === SplitSide.old ? SplitSide.new : SplitSide.old;
+
+  const currentLineNumber = side === SplitSide.old ? oldLine.lineNumber : newLine.lineNumber;
+
+  const currentSideHasExtend = currentExtend?.data !== undefined && currentExtend?.data !== null;
+
+  const hasExtend =
+    (oldLineExtend?.data !== undefined && oldLineExtend?.data !== null) ||
+    (newLineExtend?.data !== undefined && newLineExtend?.data !== null);
+
+  const currentExtendRendered =
+    hasExtend &&
+    renderExtendLine?.({
+      diffFile,
+      side,
+      lineNumber: currentLineNumber,
+      data: currentExtend?.data,
+      onUpdate: diffFile.notifyAll,
+    });
+
+  useSyncHeight({
+    selector: `div[data-line="${lineNumber}-extend-content"]`,
+    wrapper: `tr[data-line="${lineNumber}-extend"]`,
+    side: SplitSide[currentSideHasExtend ? side : otherSide],
+    enable: hasExtend && typeof renderExtendLine === "function",
+  });
+
+  const width = useDomWidth({
+    selector: side === SplitSide.old ? ".old-diff-table-wrapper" : ".new-diff-table-wrapper",
+    enable: currentSideHasExtend && typeof renderExtendLine === "function",
+  });
+
+  if (!renderExtendLine) return null;
+
+  return (
+    <tr
+      data-line={`${lineNumber}-extend`}
+      data-state="extend"
+      data-side={SplitSide[side]}
+      className="diff-line diff-line-extend"
+    >
+      {currentSideHasExtend ? (
+        <td className={`diff-line-extend-${SplitSide[side]}-content p-0`} colSpan={2}>
+          <div
+            data-line={`${lineNumber}-extend-content`}
+            data-side={SplitSide[side]}
+            className="diff-line-extend-wrapper sticky left-0 z-[1]"
+            style={{ width }}
+          >
+            {width > 0 && currentExtendRendered}
+          </div>
+        </td>
+      ) : (
+        <td
+          className={`diff-line-extend-${SplitSide[side]}-placeholder select-none p-0`}
+          style={{ backgroundColor: `var(${emptyBGName})` }}
+          colSpan={2}
+        >
+          <div data-line={`${lineNumber}-extend-content`} data-side={SplitSide[side]} />
+        </td>
+      )}
+    </tr>
+  );
+};
+
+export const DiffSplitExtendLine = ({
+  index,
+  diffFile,
+  side,
+  lineNumber,
+}: {
+  index: number;
+  side: SplitSide;
+  diffFile: DiffFile;
+  lineNumber: number;
+}) => {
+  const { useDiffContext } = useDiffViewContext();
+
+  const oldLine = diffFile.getSplitLeftLine(index);
+
+  const newLine = diffFile.getSplitRightLine(index);
+
+  const { oldLineExtend, newLineExtend } = useDiffContext(
+    React.useCallback(
+      (s) => ({
+        oldLineExtend: s.extendData?.oldFile?.[oldLine?.lineNumber],
+        newLineExtend: s.extendData?.newFile?.[newLine?.lineNumber],
+      }),
+      [oldLine?.lineNumber, newLine?.lineNumber]
+    )
+  );
+
+  const hasExtend = oldLineExtend?.data || newLineExtend?.data;
+
+  // if the expand action not enabled, the `isHidden` property will never change
+  const enableExpand = diffFile.getExpandEnabled();
+
+  const currentLine = side === SplitSide.old ? oldLine : newLine;
+
+  const currentIsShow = hasExtend && (!currentLine.isHidden || !enableExpand);
+
+  if (!currentIsShow) return null;
+
+  return (
+    <InternalDiffSplitExtendLine
+      side={side}
+      index={index}
+      diffFile={diffFile}
+      lineNumber={lineNumber}
+      oldLineExtend={oldLineExtend}
+      newLineExtend={newLineExtend}
+    />
+  );
+};

package/src/components/DiffSplitExtendLineWrap.tsx

@@ -0,0 +1,133 @@
+import { emptyBGName, borderColorName } from "@git-diff-view/utils";
+import * as React from "react";
+
+import { SplitSide } from "..";
+
+import { useDiffViewContext } from "./DiffViewContext";
+
+import type { DiffFile } from "@git-diff-view/core";
+
+const InternalDiffSplitExtendLine = ({
+  index,
+  diffFile,
+  lineNumber,
+  oldLineExtend,
+  newLineExtend,
+}: {
+  index: number;
+  diffFile: DiffFile;
+  lineNumber: number;
+  oldLineExtend: { data: any };
+  newLineExtend: { data: any };
+}) => {
+  const { useDiffContext } = useDiffViewContext();
+
+  const oldLine = diffFile.getSplitLeftLine(index);
+
+  const newLine = diffFile.getSplitRightLine(index);
+
+  // 需要显示的时候才进行方法订阅，可以大幅度提高性能
+  const renderExtendLine = useDiffContext.useShallowStableSelector((s) => s.renderExtendLine);
+
+  if (!renderExtendLine) return null;
+
+  const oldExtendRendered =
+    oldLineExtend?.data &&
+    renderExtendLine?.({
+      diffFile,
+      side: SplitSide.old,
+      lineNumber: oldLine.lineNumber,
+      data: oldLineExtend.data,
+      onUpdate: diffFile.notifyAll,
+    });
+
+  const newExtendRendered =
+    newLineExtend?.data &&
+    renderExtendLine?.({
+      diffFile,
+      side: SplitSide.new,
+      lineNumber: newLine.lineNumber,
+      data: newLineExtend.data,
+      onUpdate: diffFile.notifyAll,
+    });
+
+  return (
+    <tr data-line={`${lineNumber}-extend`} data-state="extend" className="diff-line diff-line-extend">
+      {oldExtendRendered ? (
+        <td className="diff-line-extend-old-content p-0" colSpan={2}>
+          <div className="diff-line-extend-wrapper">{oldExtendRendered}</div>
+        </td>
+      ) : (
+        <td
+          className="diff-line-extend-old-placeholder select-none p-0"
+          style={{ backgroundColor: `var(${emptyBGName})` }}
+          colSpan={2}
+        />
+      )}
+      {newExtendRendered ? (
+        <td
+          className="diff-line-extend-new-content border-l-[1px] p-0"
+          style={{ borderLeftColor: `var(${borderColorName})`, borderLeftStyle: "solid" }}
+          colSpan={2}
+        >
+          <div className="diff-line-extend-wrapper">{newExtendRendered}</div>
+        </td>
+      ) : (
+        <td
+          className="diff-line-extend-new-placeholder select-none border-l-[1px] p-0"
+          style={{
+            backgroundColor: `var(${emptyBGName})`,
+            borderLeftColor: `var(${borderColorName})`,
+            borderLeftStyle: "solid",
+          }}
+          colSpan={2}
+        />
+      )}
+    </tr>
+  );
+};
+
+export const DiffSplitExtendLine = ({
+  index,
+  diffFile,
+  lineNumber,
+}: {
+  index: number;
+  diffFile: DiffFile;
+  lineNumber: number;
+}) => {
+  const { useDiffContext } = useDiffViewContext();
+
+  const oldLine = diffFile.getSplitLeftLine(index);
+
+  const newLine = diffFile.getSplitRightLine(index);
+
+  const { oldLineExtend, newLineExtend } = useDiffContext(
+    React.useCallback(
+      (s) => ({
+        oldLineExtend: s.extendData?.oldFile?.[oldLine?.lineNumber],
+        newLineExtend: s.extendData?.newFile?.[newLine?.lineNumber],
+      }),
+      [oldLine?.lineNumber, newLine?.lineNumber]
+    )
+  );
+
+  const hasExtend = oldLineExtend?.data || newLineExtend?.data;
+
+  // if the expand action not enabled, the `isHidden` property will never change
+  const enableExpand = diffFile.getExpandEnabled();
+
+  const currentIsShow = hasExtend && ((!oldLine?.isHidden && !newLine?.isHidden) || !enableExpand);
+
+  if (!currentIsShow) return null;
+
+  return (
+    <InternalDiffSplitExtendLine
+      index={index}
+      diffFile={diffFile}
+      lineNumber={lineNumber}
+      oldLineExtend={oldLineExtend}
+      newLineExtend={newLineExtend}
+    />
+  );
+};