@git-diff-view/react 0.0.26 → 0.0.28

package/src/components/DiffUnifiedContentLine.tsx

@@ -0,0 +1,342 @@
+import { type DiffFile, type DiffLine, checkDiffLineIncludeChange, type File } from "@git-diff-view/core";
+import {
+  diffAsideWidthName,
+  addContentBGName,
+  addLineNumberBGName,
+  delContentBGName,
+  delLineNumberBGName,
+  expandContentBGName,
+  plainContentBGName,
+  plainLineNumberBGName,
+  plainLineNumberColorName,
+  expandLineNumberColorName,
+} from "@git-diff-view/utils";
+import * as React from "react";
+import { memo } from "react";
+
+import { SplitSide } from "..";
+
+import { DiffUnifiedAddWidget } from "./DiffAddWidget";
+import { DiffContent } from "./DiffContent";
+import { useDiffViewContext } from "./DiffViewContext";
+import { useDiffWidgetContext } from "./DiffWidgetContext";
+
+import type { DiffViewProps } from "..";
+
+const DiffUnifiedOldLine = ({
+  index,
+  diffLine,
+  rawLine,
+  plainLine,
+  syntaxLine,
+  lineNumber,
+  diffFile,
+  setWidget,
+  enableWrap,
+  enableAddWidget,
+  enableHighlight,
+  onAddWidgetClick,
+}: {
+  index: number;
+  lineNumber: number;
+  rawLine: string;
+  plainLine?: File["plainFile"][number];
+  syntaxLine?: File["syntaxFile"][number];
+  diffLine?: DiffLine;
+  diffFile: DiffFile;
+  enableWrap: boolean;
+  enableAddWidget: boolean;
+  enableHighlight: boolean;
+  onAddWidgetClick?: DiffViewProps<any>["onAddWidgetClick"];
+  setWidget: (props: { side?: SplitSide; lineNumber?: number }) => void;
+}) => {
+  return (
+    <tr data-line={index} data-state="diff" className="diff-line group">
+      <td
+        className="diff-line-num sticky left-0 w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top"
+        style={{
+          color: `var(${plainLineNumberColorName})`,
+          backgroundColor: `var(${delLineNumberBGName})`,
+          width: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
+          maxWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
+          minWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
+        }}
+      >
+        {enableAddWidget && (
+          <DiffUnifiedAddWidget
+            index={index - 1}
+            lineNumber={lineNumber}
+            diffFile={diffFile}
+            side={SplitSide.old}
+            onWidgetClick={onAddWidgetClick}
+            onOpenAddWidget={(lineNumber, side) => setWidget({ lineNumber, side })}
+          />
+        )}
+        <div className="flex">
+          <span data-line-old-num={lineNumber} className="inline-block w-[50%]">
+            {lineNumber}
+          </span>
+          <span className="w-[10px] shrink-0" />
+          <span className="inline-block w-[50%]" />
+        </div>
+      </td>
+      <td className="diff-line-content pr-[10px] align-top" style={{ backgroundColor: `var(${delContentBGName})` }}>
+        <DiffContent
+          enableWrap={enableWrap}
+          diffFile={diffFile}
+          enableHighlight={enableHighlight}
+          rawLine={rawLine}
+          diffLine={diffLine}
+          plainLine={plainLine}
+          syntaxLine={syntaxLine}
+        />
+      </td>
+    </tr>
+  );
+};
+
+const DiffUnifiedNewLine = ({
+  index,
+  diffLine,
+  rawLine,
+  plainLine,
+  syntaxLine,
+  lineNumber,
+  diffFile,
+  setWidget,
+  enableWrap,
+  enableAddWidget,
+  enableHighlight,
+  onAddWidgetClick,
+}: {
+  index: number;
+  lineNumber: number;
+  rawLine: string;
+  plainLine?: File["plainFile"][number];
+  syntaxLine?: File["syntaxFile"][number];
+  diffLine?: DiffLine;
+  diffFile: DiffFile;
+  enableWrap: boolean;
+  enableAddWidget: boolean;
+  enableHighlight: boolean;
+  onAddWidgetClick?: DiffViewProps<any>["onAddWidgetClick"];
+  setWidget: (props: { side?: SplitSide; lineNumber?: number }) => void;
+}) => {
+  return (
+    <tr data-line={index} data-state="diff" className="diff-line group">
+      <td
+        className="diff-line-num sticky left-0 w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top"
+        style={{
+          color: `var(${plainLineNumberColorName})`,
+          backgroundColor: `var(${addLineNumberBGName})`,
+          width: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
+          maxWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
+          minWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
+        }}
+      >
+        {enableAddWidget && (
+          <DiffUnifiedAddWidget
+            index={index - 1}
+            lineNumber={lineNumber}
+            diffFile={diffFile}
+            side={SplitSide.new}
+            onWidgetClick={onAddWidgetClick}
+            onOpenAddWidget={(lineNumber, side) => setWidget({ lineNumber, side })}
+          />
+        )}
+        <div className="flex">
+          <span className="inline-block w-[50%]" />
+          <span className="w-[10px] shrink-0" />
+          <span data-line-new-num={lineNumber} className="inline-block w-[50%]">
+            {lineNumber}
+          </span>
+        </div>
+      </td>
+      <td className="diff-line-content pr-[10px] align-top" style={{ backgroundColor: `var(${addContentBGName})` }}>
+        <DiffContent
+          enableWrap={enableWrap}
+          diffFile={diffFile}
+          enableHighlight={enableHighlight}
+          rawLine={rawLine}
+          diffLine={diffLine}
+          plainLine={plainLine}
+          syntaxLine={syntaxLine}
+        />
+      </td>
+    </tr>
+  );
+};
+
+const _DiffUnifiedLine = memo(
+  ({
+    index,
+    diffFile,
+    lineNumber,
+    enableWrap,
+    enableAddWidget,
+    enableHighlight,
+  }: {
+    index: number;
+    diffFile: DiffFile;
+    lineNumber: number;
+    enableWrap: boolean;
+    enableHighlight: boolean;
+    enableAddWidget: boolean;
+  }) => {
+    const unifiedLine = diffFile.getUnifiedLine(index);
+
+    const { useDiffContext } = useDiffViewContext();
+
+    const onAddWidgetClick = useDiffContext.getReadonlyState().onAddWidgetClick;
+
+    const { useWidget } = useDiffWidgetContext();
+
+    const setWidget = useWidget.getReadonlyState().setWidget;
+
+    const hasDiff = unifiedLine.diff;
+
+    const hasChange = checkDiffLineIncludeChange(unifiedLine.diff);
+
+    const rawLine = unifiedLine.value || "";
+
+    const diffLine = unifiedLine.diff;
+
+    const newLineNumber = unifiedLine.newLineNumber;
+
+    const oldLinenumber = unifiedLine.oldLineNumber;
+
+    const syntaxLine = newLineNumber
+      ? diffFile.getNewSyntaxLine(newLineNumber)
+      : oldLinenumber
+        ? diffFile.getOldSyntaxLine(oldLinenumber)
+        : undefined;
+
+    const plainLine = newLineNumber
+      ? diffFile.getNewPlainLine(newLineNumber)
+      : oldLinenumber
+        ? diffFile.getOldPlainLine(oldLinenumber)
+        : undefined;
+
+    if (hasChange) {
+      if (unifiedLine.oldLineNumber) {
+        return (
+          <DiffUnifiedOldLine
+            index={lineNumber}
+            enableWrap={enableWrap}
+            diffFile={diffFile}
+            rawLine={rawLine}
+            diffLine={diffLine}
+            setWidget={setWidget}
+            plainLine={plainLine}
+            syntaxLine={syntaxLine}
+            enableHighlight={enableHighlight}
+            enableAddWidget={enableAddWidget}
+            lineNumber={unifiedLine.oldLineNumber}
+            onAddWidgetClick={(...props) => onAddWidgetClick.current?.(...props)}
+          />
+        );
+      } else {
+        return (
+          <DiffUnifiedNewLine
+            index={lineNumber}
+            enableWrap={enableWrap}
+            rawLine={rawLine}
+            diffLine={diffLine}
+            diffFile={diffFile}
+            setWidget={setWidget}
+            plainLine={plainLine}
+            syntaxLine={syntaxLine}
+            enableHighlight={enableHighlight}
+            enableAddWidget={enableAddWidget}
+            lineNumber={unifiedLine.newLineNumber!}
+            onAddWidgetClick={(...props) => onAddWidgetClick.current?.(...props)}
+          />
+        );
+      }
+    } else {
+      return (
+        <tr data-line={lineNumber} data-state={unifiedLine.diff ? "diff" : "plain"} className="diff-line group">
+          <td
+            className="diff-line-num sticky left-0 w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top"
+            style={{
+              color: `var(${hasDiff ? plainLineNumberColorName : expandLineNumberColorName})`,
+              width: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
+              maxWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
+              minWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
+              backgroundColor: hasDiff ? `var(${plainLineNumberBGName})` : `var(${expandContentBGName})`,
+            }}
+          >
+            {enableAddWidget && hasDiff && (
+              <DiffUnifiedAddWidget
+                index={index}
+                diffFile={diffFile}
+                lineNumber={unifiedLine.newLineNumber}
+                side={SplitSide.new}
+                onWidgetClick={(...props) => onAddWidgetClick.current?.(...props)}
+                onOpenAddWidget={(lineNumber, side) => setWidget({ lineNumber, side })}
+              />
+            )}
+            <div className="flex opacity-[0.5]">
+              <span data-line-old-num={unifiedLine.oldLineNumber} className="inline-block w-[50%]">
+                {unifiedLine.oldLineNumber}
+              </span>
+              <span className="w-[10px] shrink-0" />
+              <span data-line-new-num={unifiedLine.newLineNumber} className="inline-block w-[50%]">
+                {unifiedLine.newLineNumber}
+              </span>
+            </div>
+          </td>
+          <td
+            className="diff-line-content pr-[10px] align-top"
+            style={{
+              backgroundColor: hasDiff ? `var(${plainContentBGName})` : `var(${expandContentBGName})`,
+            }}
+          >
+            <DiffContent
+              enableWrap={enableWrap}
+              diffFile={diffFile}
+              enableHighlight={enableHighlight}
+              rawLine={rawLine}
+              diffLine={diffLine}
+              plainLine={plainLine}
+              syntaxLine={syntaxLine}
+            />
+          </td>
+        </tr>
+      );
+    }
+  }
+);
+
+_DiffUnifiedLine.displayName = "_DiffUnifiedLine";
+
+export const DiffUnifiedContentLine = ({
+  index,
+  diffFile,
+  lineNumber,
+  enableWrap,
+  enableHighlight,
+  enableAddWidget,
+}: {
+  index: number;
+  diffFile: DiffFile;
+  lineNumber: number;
+  enableWrap: boolean;
+  enableHighlight: boolean;
+  enableAddWidget: boolean;
+}) => {
+  const unifiedLine = diffFile.getUnifiedLine(index);
+
+  if (unifiedLine?.isHidden) return null;
+
+  return (
+    <_DiffUnifiedLine
+      index={index}
+      diffFile={diffFile}
+      lineNumber={lineNumber}
+      enableWrap={enableWrap}
+      enableHighlight={enableHighlight}
+      enableAddWidget={enableAddWidget}
+    />
+  );
+};

package/src/components/DiffUnifiedExtendLine.tsx

@@ -0,0 +1,103 @@
+import * as React from "react";
+import { useCallback } from "react";
+
+import { SplitSide } from "..";
+import { useDomWidth } from "../hooks/useDomWidth";
+
+import { useDiffViewContext } from "./DiffViewContext";
+
+import type { DiffFile } from "@git-diff-view/core";
+
+const InternalDiffUnifiedExtendLine = ({
+  index,
+  diffFile,
+  lineNumber,
+  oldLineExtend,
+  newLineExtend,
+}: {
+  index: number;
+  diffFile: DiffFile;
+  lineNumber: number;
+  oldLineExtend: { data: any };
+  newLineExtend: { data: any };
+}) => {
+  const { useDiffContext } = useDiffViewContext();
+
+  const renderExtendLine = useDiffContext.useShallowStableSelector((s) => s.renderExtendLine);
+
+  const unifiedItem = diffFile.getUnifiedLine(index);
+
+  const width = useDomWidth({
+    selector: ".unified-diff-table-wrapper",
+    enable: typeof renderExtendLine === "function",
+  });
+
+  if (!renderExtendLine) return null;
+
+  return (
+    <tr data-line={`${lineNumber}-extend`} data-state="extend" className="diff-line diff-line-extend">
+      <td className="diff-line-extend-content p-0 align-top" colSpan={2}>
+        <div className="diff-line-extend-wrapper sticky left-0 z-[1]" style={{ width }}>
+          {width > 0 &&
+            oldLineExtend?.data !== undefined &&
+            oldLineExtend?.data !== null &&
+            renderExtendLine?.({
+              diffFile,
+              side: SplitSide.old,
+              lineNumber: unifiedItem.oldLineNumber,
+              data: oldLineExtend.data,
+              onUpdate: diffFile.notifyAll,
+            })}
+          {width > 0 &&
+            newLineExtend?.data !== undefined &&
+            newLineExtend?.data !== null &&
+            renderExtendLine?.({
+              diffFile,
+              side: SplitSide.new,
+              lineNumber: unifiedItem.newLineNumber,
+              data: newLineExtend.data,
+              onUpdate: diffFile.notifyAll,
+            })}
+        </div>
+      </td>
+    </tr>
+  );
+};
+
+export const DiffUnifiedExtendLine = ({
+  index,
+  diffFile,
+  lineNumber,
+}: {
+  index: number;
+  diffFile: DiffFile;
+  lineNumber: number;
+}) => {
+  const { useDiffContext } = useDiffViewContext();
+
+  const unifiedItem = diffFile.getUnifiedLine(index);
+
+  const { oldLineExtend, newLineExtend } = useDiffContext(
+    useCallback(
+      (s) => ({
+        oldLineExtend: s.extendData?.oldFile?.[unifiedItem?.oldLineNumber],
+        newLineExtend: s.extendData?.newFile?.[unifiedItem?.newLineNumber],
+      }),
+      [unifiedItem.oldLineNumber, unifiedItem.newLineNumber]
+    )
+  );
+
+  const hasExtend = oldLineExtend?.data || newLineExtend?.data;
+
+  if (!hasExtend || !unifiedItem || unifiedItem.isHidden) return null;
+
+  return (
+    <InternalDiffUnifiedExtendLine
+      index={index}
+      diffFile={diffFile}
+      lineNumber={lineNumber}
+      oldLineExtend={oldLineExtend}
+      newLineExtend={newLineExtend}
+    />
+  );
+};

package/src/components/DiffUnifiedHunkLine.tsx

@@ -0,0 +1,148 @@
+import { composeLen } from "@git-diff-view/core";
+import {
+  diffAsideWidthName,
+  hunkContentBGName,
+  hunkContentColorName,
+  hunkLineNumberBGName,
+  plainLineNumberColorName,
+} from "@git-diff-view/utils";
+import * as React from "react";
+
+import { ExpandAll, ExpandDown, ExpandUp } from "./DiffExpand";
+import { useDiffViewContext } from "./DiffViewContext";
+
+import type { DiffFile } from "@git-diff-view/core";
+
+const InternalDiffUnifiedHunkLine = ({
+  index,
+  diffFile,
+  lineNumber,
+}: {
+  index: number;
+  diffFile: DiffFile;
+  lineNumber: number;
+}) => {
+  const currentHunk = diffFile.getUnifiedHunkLine(index);
+
+  const expandEnabled = diffFile.getExpandEnabled();
+
+  const { useDiffContext } = useDiffViewContext();
+
+  const enableWrap = useDiffContext.useShallowStableSelector((s) => s.enableWrap);
+
+  const couldExpand = expandEnabled && currentHunk && currentHunk.unifiedInfo;
+
+  const isExpandAll =
+    currentHunk &&
+    currentHunk.unifiedInfo &&
+    currentHunk.unifiedInfo.endHiddenIndex - currentHunk.unifiedInfo.startHiddenIndex < composeLen;
+
+  const isFirstLine = currentHunk && currentHunk.isFirst;
+
+  const isLastLine = currentHunk && currentHunk.isLast;
+
+  return (
+    <tr data-line={`${lineNumber}-hunk`} data-state="hunk" className="diff-line diff-line-hunk">
+      <td
+        className="diff-line-hunk-action sticky left-0 w-[1%] min-w-[100px] select-none p-[1px]"
+        style={{
+          backgroundColor: `var(${hunkLineNumberBGName})`,
+          color: `var(${plainLineNumberColorName})`,
+          width: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
+          maxWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
+          minWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
+        }}
+      >
+        {couldExpand ? (
+          isFirstLine ? (
+            <button
+              className="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]"
+              title="Expand Up"
+              data-title="Expand Up"
+              onClick={() => diffFile.onUnifiedHunkExpand("up", index)}
+            >
+              <ExpandUp className="fill-current" />
+            </button>
+          ) : isLastLine ? (
+            <button
+              className="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]"
+              title="Expand Down"
+              data-title="Expand Down"
+              onClick={() => diffFile.onUnifiedHunkExpand("down", index)}
+            >
+              <ExpandDown className="fill-current" />
+            </button>
+          ) : isExpandAll ? (
+            <button
+              className="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]"
+              title="Expand All"
+              data-title="Expand All"
+              onClick={() => diffFile.onUnifiedHunkExpand("all", index)}
+            >
+              <ExpandAll className="fill-current" />
+            </button>
+          ) : (
+            <>
+              <button
+                className="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]"
+                title="Expand Down"
+                data-title="Expand Down"
+                onClick={() => diffFile.onUnifiedHunkExpand("down", index)}
+              >
+                <ExpandDown className="fill-current" />
+              </button>
+              <button
+                className="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]"
+                title="Expand Up"
+                data-title="Expand Up"
+                onClick={() => diffFile.onUnifiedHunkExpand("up", index)}
+              >
+                <ExpandUp className="fill-current" />
+              </button>
+            </>
+          )
+        ) : (
+          <div className="min-h-[28px]">&ensp;</div>
+        )}
+      </td>
+      <td
+        className="diff-line-hunk-content pr-[10px] align-middle"
+        style={{ backgroundColor: `var(${hunkContentBGName})` }}
+      >
+        <div
+          className="pl-[1.5em]"
+          style={{
+            whiteSpace: enableWrap ? "pre-wrap" : "pre",
+            wordBreak: enableWrap ? "break-all" : "initial",
+            color: `var(${hunkContentColorName})`,
+          }}
+        >
+          {currentHunk.unifiedInfo?.plainText || currentHunk.text}
+        </div>
+      </td>
+    </tr>
+  );
+};
+
+export const DiffUnifiedHunkLine = ({
+  index,
+  diffFile,
+  lineNumber,
+}: {
+  index: number;
+  diffFile: DiffFile;
+  lineNumber: number;
+}) => {
+  const currentHunk = diffFile.getUnifiedHunkLine(index);
+
+  const currentIsShow =
+    currentHunk &&
+    currentHunk.unifiedInfo &&
+    currentHunk.unifiedInfo.startHiddenIndex < currentHunk.unifiedInfo.endHiddenIndex;
+
+  const currentIsPureHunk = currentHunk && diffFile._getIsPureDiffRender() && !currentHunk.unifiedInfo;
+
+  if (!currentIsShow && !currentIsPureHunk) return null;
+
+  return <InternalDiffUnifiedHunkLine index={index} diffFile={diffFile} lineNumber={lineNumber} />;
+};