@git-diff-view/react 0.0.26 → 0.0.27

package/src/components/v2/DiffSplitExtendLineWrap_v2.tsx

@@ -0,0 +1,123 @@
+import { borderColorName, emptyBGName } from "@git-diff-view/utils";
+import * as React from "react";
+
+import { SplitSide } from "../DiffView";
+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 (
+    <div data-line={`${lineNumber}-extend`} data-state="extend" className="diff-line diff-line-extend flex">
+      {oldExtendRendered ? (
+        <div className="diff-line-extend-old-content w-[50%] p-0">
+          <div className="diff-line-extend-wrapper">{oldExtendRendered}</div>
+        </div>
+      ) : (
+        <div
+          className="diff-line-extend-old-placeholder w-[50%] select-none p-0"
+          style={{ backgroundColor: `var(${emptyBGName})` }}
+        />
+      )}
+      <div className="diff-split-line w-[1px]" style={{ backgroundColor: `var(${borderColorName})` }} />
+      {newExtendRendered ? (
+        <div className="diff-line-extend-new-content w-[50%] p-0">
+          <div className="diff-line-extend-wrapper">{newExtendRendered}</div>
+        </div>
+      ) : (
+        <div
+          className="diff-line-extend-new-placeholder w-[50%] select-none p-0"
+          style={{ backgroundColor: `var(${emptyBGName})` }}
+        />
+      )}
+    </div>
+  );
+};
+
+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}
+    />
+  );
+};

package/src/components/v2/DiffSplitHunkLineNormal_v2.tsx

@@ -0,0 +1,302 @@
+import { composeLen, type DiffFile } from "@git-diff-view/core";
+import {
+  hunkLineNumberBGName,
+  plainLineNumberColorName,
+  hunkContentBGName,
+  hunkContentColorName,
+  diffAsideWidthName,
+} from "@git-diff-view/utils";
+import * as React from "react";
+
+import { useSyncHeight } from "../../hooks/useSyncHeight";
+import { ExpandUp, ExpandDown, ExpandAll } from "../DiffExpand";
+import { SplitSide, DiffModeEnum } from "../DiffView";
+import { useDiffViewContext } from "../DiffViewContext";
+
+const InternalDiffSplitHunkLineGitHub = ({
+  index,
+  diffFile,
+  side,
+  lineNumber,
+}: {
+  index: number;
+  side: SplitSide;
+  diffFile: DiffFile;
+  lineNumber: number;
+}) => {
+  const currentHunk = diffFile.getSplitHunkLine(index);
+
+  const expandEnabled = diffFile.getExpandEnabled();
+
+  useSyncHeight({
+    selector: `div[data-state="hunk"][data-line="${lineNumber}-hunk"]`,
+    side: SplitSide[SplitSide.old],
+    enable: side === SplitSide.new,
+  });
+
+  const enableHunkAction = side === SplitSide.old;
+
+  const couldExpand = expandEnabled && currentHunk && currentHunk.splitInfo;
+
+  const isExpandAll =
+    currentHunk &&
+    currentHunk.splitInfo &&
+    currentHunk.splitInfo.endHiddenIndex - currentHunk.splitInfo.startHiddenIndex < composeLen;
+
+  const isFirstLine = currentHunk && currentHunk.isFirst;
+
+  const isLastLine = currentHunk && currentHunk.isLast;
+
+  return (
+    <div
+      data-line={`${lineNumber}-hunk`}
+      data-state="hunk"
+      data-side={SplitSide[side]}
+      className="diff-line diff-line-hunk flex"
+    >
+      {enableHunkAction ? (
+        <>
+          <div
+            className="diff-line-hunk-action sticky left-0 w-[1%] min-w-[40px] select-none p-[1px]"
+            style={{
+              backgroundColor: `var(${hunkLineNumberBGName})`,
+              color: `var(${plainLineNumberColorName})`,
+              width: `var(${diffAsideWidthName})`,
+              minWidth: `var(${diffAsideWidthName})`,
+              maxWidth: `var(${diffAsideWidthName})`,
+            }}
+          >
+            {couldExpand ? (
+              isFirstLine ? (
+                <button
+                  className="diff-widget-tooltip flex h-full w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]"
+                  title="Expand Up"
+                  data-title="Expand Up"
+                  onClick={() => diffFile.onSplitHunkExpand("up", index)}
+                >
+                  <ExpandUp className="fill-current" />
+                </button>
+              ) : isLastLine ? (
+                <button
+                  className="diff-widget-tooltip relative flex h-full w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]"
+                  title="Expand Down"
+                  data-title="Expand Down"
+                  onClick={() => {
+                    diffFile.onSplitHunkExpand("down", index);
+                  }}
+                >
+                  <ExpandDown className="fill-current" />
+                </button>
+              ) : isExpandAll ? (
+                <button
+                  className="diff-widget-tooltip flex h-full w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]"
+                  title="Expand All"
+                  data-title="Expand All"
+                  onClick={() => diffFile.onSplitHunkExpand("all", index)}
+                >
+                  <ExpandAll className="fill-current" />
+                </button>
+              ) : (
+                <>
+                  <button
+                    className="diff-widget-tooltip flex h-[50%] w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]"
+                    title="Expand Down"
+                    data-title="Expand Down"
+                    onClick={() => diffFile.onSplitHunkExpand("down", index)}
+                  >
+                    <ExpandDown className="fill-current" />
+                  </button>
+                  <button
+                    className="diff-widget-tooltip flex h-[50%] w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]"
+                    title="Expand Up"
+                    data-title="Expand Up"
+                    onClick={() => diffFile.onSplitHunkExpand("up", index)}
+                  >
+                    <ExpandUp className="fill-current" />
+                  </button>
+                </>
+              )
+            ) : (
+              <div className="min-h-[28px]">&ensp;</div>
+            )}
+          </div>
+          <div
+            className="diff-line-hunk-content flex w-full items-center px-[10px]"
+            style={{ backgroundColor: `var(${hunkContentBGName})`, color: `var(${hunkContentColorName})` }}
+          >
+            {currentHunk.splitInfo?.plainText || currentHunk.text}
+          </div>
+        </>
+      ) : (
+        <div
+          className="diff-line-hunk-placeholder w-full select-none"
+          style={{ backgroundColor: `var(${hunkContentBGName})` }}
+        />
+      )}
+    </div>
+  );
+};
+
+const InternalDiffSplitHunkLineGitLab = ({
+  index,
+  diffFile,
+  side,
+  lineNumber,
+}: {
+  index: number;
+  side: SplitSide;
+  diffFile: DiffFile;
+  lineNumber: number;
+}) => {
+  const currentHunk = diffFile.getSplitHunkLine(index);
+
+  const expandEnabled = diffFile.getExpandEnabled();
+
+  useSyncHeight({
+    selector: `div[data-state="hunk"][data-line="${lineNumber}-hunk"]`,
+    side: SplitSide[side],
+    enable: true,
+  });
+
+  const couldExpand = expandEnabled && currentHunk && currentHunk.splitInfo;
+
+  const isExpandAll =
+    currentHunk &&
+    currentHunk.splitInfo &&
+    currentHunk.splitInfo.endHiddenIndex - currentHunk.splitInfo.startHiddenIndex < composeLen;
+
+  const isFirstLine = currentHunk && currentHunk.isFirst;
+
+  const isLastLine = currentHunk && currentHunk.isLast;
+
+  return (
+    <div
+      data-line={`${lineNumber}-hunk`}
+      data-state="hunk"
+      data-side={SplitSide[side]}
+      className="diff-line diff-line-hunk flex"
+    >
+      <div
+        className="diff-line-hunk-action sticky left-0 w-[1%] min-w-[40px] select-none p-[1px]"
+        style={{
+          backgroundColor: `var(${hunkLineNumberBGName})`,
+          color: `var(${plainLineNumberColorName})`,
+          width: `var(${diffAsideWidthName})`,
+          minWidth: `var(${diffAsideWidthName})`,
+          maxWidth: `var(${diffAsideWidthName})`,
+        }}
+      >
+        {couldExpand ? (
+          isFirstLine ? (
+            <button
+              className="diff-widget-tooltip flex h-full w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]"
+              title="Expand Up"
+              data-title="Expand Up"
+              onClick={() => diffFile.onSplitHunkExpand("up", index)}
+            >
+              <ExpandUp className="fill-current" />
+            </button>
+          ) : isLastLine ? (
+            <button
+              className="diff-widget-tooltip relative flex h-full w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]"
+              title="Expand Down"
+              data-title="Expand Down"
+              onClick={() => {
+                diffFile.onSplitHunkExpand("down", index);
+              }}
+            >
+              <ExpandDown className="fill-current" />
+            </button>
+          ) : isExpandAll ? (
+            <button
+              className="diff-widget-tooltip flex h-full w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]"
+              title="Expand All"
+              data-title="Expand All"
+              onClick={() => diffFile.onSplitHunkExpand("all", index)}
+            >
+              <ExpandAll className="fill-current" />
+            </button>
+          ) : (
+            <>
+              <button
+                className="diff-widget-tooltip flex h-[50%] w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]"
+                title="Expand Down"
+                data-title="Expand Down"
+                onClick={() => diffFile.onSplitHunkExpand("down", index)}
+              >
+                <ExpandDown className="fill-current" />
+              </button>
+              <button
+                className="diff-widget-tooltip flex h-[50%] w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]"
+                title="Expand Up"
+                data-title="Expand Up"
+                onClick={() => diffFile.onSplitHunkExpand("up", index)}
+              >
+                <ExpandUp className="fill-current" />
+              </button>
+            </>
+          )
+        ) : (
+          <div className="min-h-[28px]">&ensp;</div>
+        )}
+      </div>
+      <div
+        className="diff-line-hunk-content flex w-full items-center px-[10px]"
+        style={{ backgroundColor: `var(${hunkContentBGName})`, color: `var(${hunkContentColorName})` }}
+      >
+        {currentHunk.splitInfo?.plainText || currentHunk.text}
+      </div>
+    </div>
+  );
+};
+
+const InternalDiffSplitHunkLine = ({
+  index,
+  diffFile,
+  side,
+  lineNumber,
+}: {
+  index: number;
+  side: SplitSide;
+  diffFile: DiffFile;
+  lineNumber: number;
+}) => {
+  const { useDiffContext } = useDiffViewContext();
+
+  const diffViewMode = useDiffContext.useShallowStableSelector((s) => s.mode);
+
+  if (
+    diffViewMode === DiffModeEnum.SplitGitHub ||
+    diffViewMode === DiffModeEnum.Split ||
+    diffViewMode === DiffModeEnum.Unified
+  ) {
+    return <InternalDiffSplitHunkLineGitHub index={index} diffFile={diffFile} side={side} lineNumber={lineNumber} />;
+  } else {
+    return <InternalDiffSplitHunkLineGitLab index={index} diffFile={diffFile} side={side} lineNumber={lineNumber} />;
+  }
+};
+
+export const DiffSplitHunkLine = ({
+  index,
+  diffFile,
+  side,
+  lineNumber,
+}: {
+  index: number;
+  side: SplitSide;
+  diffFile: DiffFile;
+  lineNumber: number;
+}) => {
+  const currentHunk = diffFile.getSplitHunkLine(index);
+
+  const currentIsShow =
+    currentHunk &&
+    currentHunk.splitInfo &&
+    currentHunk.splitInfo.startHiddenIndex < currentHunk.splitInfo.endHiddenIndex;
+
+  const currentIsPureHunk = currentHunk && diffFile._getIsPureDiffRender() && !currentHunk.splitInfo;
+
+  if (!currentIsShow && !currentIsPureHunk) return null;
+
+  return <InternalDiffSplitHunkLine index={index} diffFile={diffFile} side={side} lineNumber={lineNumber} />;
+};