@git-diff-view/react 0.0.26 → 0.0.27

package/src/components/tools.ts

@@ -0,0 +1,132 @@
+import { createStore, ref } from "reactivity-store";
+
+import type { DiffModeEnum, DiffViewProps, SplitSide } from "./DiffView";
+import type { RefObject } from "react";
+
+export const createDiffConfigStore = (props: DiffViewProps<any> & { isMounted: boolean }, diffFileId: string) => {
+  return createStore(() => {
+    const id = ref(diffFileId);
+
+    const setId = (_id: string) => (id.value = _id);
+
+    const mode = ref(props.diffViewMode);
+
+    const setMode = (_mode: DiffModeEnum) => (mode.value = _mode);
+
+    const mounted = ref(props.isMounted);
+
+    const setMounted = (_mounted: boolean) => (mounted.value = _mounted);
+
+    const enableWrap = ref(props.diffViewWrap);
+
+    const setEnableWrap = (_enableWrap: boolean) => (enableWrap.value = _enableWrap);
+
+    const enableAddWidget = ref(props.diffViewAddWidget);
+
+    const setEnableAddWidget = (_enableAddWidget: boolean) => (enableAddWidget.value = _enableAddWidget);
+
+    const enableHighlight = ref(props.diffViewHighlight);
+
+    const setEnableHighlight = (_enableHighlight: boolean) => (enableHighlight.value = _enableHighlight);
+
+    const fontSize = ref(props.diffViewFontSize);
+
+    const setFontSize = (_fontSize: number) => (fontSize.value = _fontSize);
+
+    const extendData = ref({
+      oldFile: { ...props.extendData?.oldFile },
+      newFile: { ...props.extendData?.newFile },
+    });
+
+    const setExtendData = (_extendData: DiffViewProps<any>["extendData"]) => {
+      const existOldKeys = Object.keys(extendData.value.oldFile || {});
+      const inComingOldKeys = Object.keys(_extendData.oldFile || {});
+      for (const key of existOldKeys) {
+        if (!inComingOldKeys.includes(key)) {
+          delete extendData.value.oldFile[key];
+        }
+      }
+      for (const key of inComingOldKeys) {
+        extendData.value.oldFile[key] = _extendData.oldFile[key];
+      }
+      const existNewKeys = Object.keys(extendData.value.newFile || {});
+      const inComingNewKeys = Object.keys(_extendData.newFile || {});
+      for (const key of existNewKeys) {
+        if (!inComingNewKeys.includes(key)) {
+          delete extendData.value.newFile[key];
+        }
+      }
+      for (const key of inComingNewKeys) {
+        extendData.value.newFile[key] = _extendData.newFile[key];
+      }
+    };
+
+    const renderWidgetLine = ref(props.renderWidgetLine);
+
+    const setRenderWidgetLine = (_renderWidgetLine: typeof renderWidgetLine.value) =>
+      (renderWidgetLine.value = _renderWidgetLine);
+
+    const renderExtendLine = ref(props.renderExtendLine);
+
+    const setRenderExtendLine = (_renderExtendLine: typeof renderExtendLine.value) =>
+      (renderExtendLine.value = _renderExtendLine);
+
+    const onCreateUseWidgetHook = ref(props.onCreateUseWidgetHook);
+
+    const setOnCreateUseWidgetHook = (_onCreateUseWidgetHook: typeof onCreateUseWidgetHook.value) =>
+      (onCreateUseWidgetHook.value = _onCreateUseWidgetHook);
+
+    // 避免无意义的订阅
+    const onAddWidgetClick = { current: props.onAddWidgetClick };
+
+    const setOnAddWidgetClick = (_onAddWidgetClick: typeof onAddWidgetClick) =>
+      (onAddWidgetClick.current = _onAddWidgetClick.current);
+
+    return {
+      id,
+      setId,
+      mode,
+      setMode,
+      mounted,
+      setMounted,
+      enableWrap,
+      setEnableWrap,
+      enableAddWidget,
+      setEnableAddWidget,
+      enableHighlight,
+      setEnableHighlight,
+      fontSize,
+      setFontSize,
+      extendData,
+      setExtendData,
+      renderWidgetLine,
+      setRenderWidgetLine,
+      renderExtendLine,
+      setRenderExtendLine,
+      onAddWidgetClick,
+      setOnAddWidgetClick,
+      onCreateUseWidgetHook,
+      setOnCreateUseWidgetHook,
+    };
+  });
+};
+
+export const createDiffWidgetStore = (useDiffContextRef: RefObject<ReturnType<typeof createDiffConfigStore>>) => {
+  return createStore(() => {
+    const widgetSide = ref<SplitSide>(undefined);
+
+    const widgetLineNumber = ref<number>(undefined);
+
+    const setWidget = ({ side, lineNumber }: { side?: SplitSide; lineNumber?: number }) => {
+      const { renderWidgetLine } = useDiffContextRef.current?.getReadonlyState?.() || {};
+
+      if (typeof renderWidgetLine !== "function") return;
+
+      widgetSide.value = side;
+
+      widgetLineNumber.value = lineNumber;
+    };
+
+    return { widgetSide, widgetLineNumber, setWidget };
+  });
+};

package/src/components/v2/DiffSplitContentLineNormal_v2.tsx

@@ -0,0 +1,152 @@
+import { DiffLineType, type DiffFile, checkDiffLineIncludeChange } from "@git-diff-view/core";
+import {
+  getContentBG,
+  getLineNumberBG,
+  plainLineNumberColorName,
+  emptyBGName,
+  diffAsideWidthName,
+  expandLineNumberColorName,
+} from "@git-diff-view/utils";
+import * as React from "react";
+
+import { DiffSplitAddWidget } from "../DiffAddWidget";
+import { DiffContent } from "../DiffContent";
+import { SplitSide } from "../DiffView";
+import { useDiffViewContext } from "../DiffViewContext";
+import { useDiffWidgetContext } from "../DiffWidgetContext";
+
+const InternalDiffSplitLine = ({
+  index,
+  diffFile,
+  lineNumber,
+  side,
+}: {
+  index: number;
+  side: SplitSide;
+  diffFile: DiffFile;
+  lineNumber: number;
+}) => {
+  const getCurrentSyntaxLine = side === SplitSide.old ? diffFile.getOldSyntaxLine : diffFile.getNewSyntaxLine;
+
+  const getCurrentPlainLine = side === SplitSide.old ? diffFile.getOldPlainLine : diffFile.getNewPlainLine;
+
+  const oldLine = diffFile.getSplitLeftLine(index);
+
+  const newLine = diffFile.getSplitRightLine(index);
+
+  const currentLine = side === SplitSide.old ? oldLine : newLine;
+
+  const hasDiff = !!currentLine?.diff;
+
+  const hasContent = !!currentLine.lineNumber;
+
+  const hasChange = checkDiffLineIncludeChange(currentLine?.diff);
+
+  const isAdded = currentLine?.diff?.type === DiffLineType.Add;
+
+  const isDelete = currentLine?.diff?.type === DiffLineType.Delete;
+
+  const { useDiffContext } = useDiffViewContext();
+
+  const { enableHighlight, enableAddWidget, onAddWidgetClick } = useDiffContext.useShallowStableSelector((s) => ({
+    enableHighlight: s.enableHighlight,
+    enableAddWidget: s.enableAddWidget,
+    onAddWidgetClick: s.onAddWidgetClick,
+  }));
+
+  const { useWidget } = useDiffWidgetContext();
+
+  const setWidget = useWidget.getReadonlyState().setWidget;
+
+  const contentBG = getContentBG(isAdded, isDelete, hasDiff);
+
+  const lineNumberBG = getLineNumberBG(isAdded, isDelete, hasDiff);
+
+  const plainLine = getCurrentPlainLine(currentLine.lineNumber);
+
+  const syntaxLine = getCurrentSyntaxLine(currentLine.lineNumber);
+
+  return (
+    <div
+      data-line={lineNumber}
+      data-state={hasDiff || !hasContent ? "diff" : "plain"}
+      data-side={SplitSide[side]}
+      className={"diff-line flex" + (hasContent ? " group" : "")}
+    >
+      {hasContent ? (
+        <>
+          <div
+            className={`diff-line-${SplitSide[side]}-num sticky left-0 flex w-[1%] min-w-[40px] select-none items-center px-[10px] text-right`}
+            style={{
+              backgroundColor: lineNumberBG,
+              color: `var(${hasDiff ? plainLineNumberColorName : expandLineNumberColorName})`,
+              width: `var(${diffAsideWidthName})`,
+              minWidth: `var(${diffAsideWidthName})`,
+              maxWidth: `var(${diffAsideWidthName})`,
+            }}
+          >
+            {hasDiff && enableAddWidget && (
+              <DiffSplitAddWidget
+                index={index}
+                lineNumber={currentLine.lineNumber}
+                side={side}
+                diffFile={diffFile}
+                onWidgetClick={(...props) => onAddWidgetClick.current?.(...props)}
+                className="absolute left-[100%] top-[50%] z-[1] translate-x-[-50%] translate-y-[-50%]"
+                onOpenAddWidget={(lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side })}
+              />
+            )}
+            <span
+              className="w-full"
+              data-line-num={currentLine.lineNumber}
+              style={{ opacity: hasChange ? undefined : 0.5 }}
+            >
+              {currentLine.lineNumber}
+            </span>
+          </div>
+          <div
+            className={`diff-line-${SplitSide[side]}-content flex w-full items-center pr-[10px]`}
+            style={{ backgroundColor: contentBG }}
+          >
+            <DiffContent
+              enableWrap={false}
+              diffFile={diffFile}
+              rawLine={currentLine.value!}
+              diffLine={currentLine.diff}
+              plainLine={plainLine}
+              syntaxLine={syntaxLine}
+              enableHighlight={enableHighlight}
+            />
+          </div>
+        </>
+      ) : (
+        <div
+          className={`diff-line-${SplitSide[side]}-placeholder w-full select-none`}
+          style={{ backgroundColor: `var(${emptyBGName})` }}
+        >
+          &ensp;
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const DiffSplitContentLine = ({
+  index,
+  diffFile,
+  lineNumber,
+  side,
+}: {
+  index: number;
+  side: SplitSide;
+  diffFile: DiffFile;
+  lineNumber: number;
+}) => {
+  const getCurrentLine = side === SplitSide.old ? diffFile.getSplitLeftLine : diffFile.getSplitRightLine;
+
+  const currentLine = getCurrentLine(index);
+
+  if (currentLine?.isHidden) return null;
+
+  return <InternalDiffSplitLine index={index} diffFile={diffFile} lineNumber={lineNumber} side={side} />;
+};

package/src/components/v2/DiffSplitContentLineWrap_v2.tsx

@@ -0,0 +1,259 @@
+import { DiffLineType, type DiffFile, checkDiffLineIncludeChange } from "@git-diff-view/core";
+import {
+  getContentBG,
+  getLineNumberBG,
+  plainLineNumberColorName,
+  emptyBGName,
+  borderColorName,
+  diffAsideWidthName,
+  expandLineNumberColorName,
+} from "@git-diff-view/utils";
+import * as React from "react";
+
+import { DiffSplitAddWidget } from "../DiffAddWidget";
+import { DiffContent } from "../DiffContent";
+import { SplitSide } from "../DiffView";
+import { useDiffViewContext } from "../DiffViewContext";
+import { useDiffWidgetContext } from "../DiffWidgetContext";
+
+const InternalDiffSplitLine = ({
+  index,
+  diffFile,
+  lineNumber,
+}: {
+  index: number;
+  diffFile: DiffFile;
+  lineNumber: number;
+}) => {
+  const oldLine = diffFile.getSplitLeftLine(index);
+
+  const newLine = diffFile.getSplitRightLine(index);
+
+  const oldSyntaxLine = diffFile.getOldSyntaxLine(oldLine?.lineNumber);
+
+  const newSyntaxLine = diffFile.getNewSyntaxLine(newLine?.lineNumber);
+
+  const oldPlainLine = diffFile.getOldPlainLine(oldLine.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 { enableHighlight, enableAddWidget, onAddWidgetClick } = useDiffContext.useShallowStableSelector((s) => ({
+    enableHighlight: s.enableHighlight,
+    enableAddWidget: s.enableAddWidget,
+    onAddWidgetClick: s.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 (
+    <div data-line={lineNumber} data-state={hasDiff ? "diff" : "plain"} className="diff-line flex">
+      {hasOldLine ? (
+        <>
+          <div
+            className="diff-line-old-num group relative flex w-[1%] min-w-[40px] select-none items-start px-[10px] text-right"
+            data-side={SplitSide[SplitSide.old]}
+            style={{
+              backgroundColor: oldLineNumberBG,
+              color: `var(${hasDiff ? plainLineNumberColorName : expandLineNumberColorName})`,
+              width: `var(${diffAsideWidthName})`,
+              minWidth: `var(${diffAsideWidthName})`,
+              maxWidth: `var(${diffAsideWidthName})`,
+            }}
+          >
+            {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
+              className="w-full"
+              data-line-num={oldLine.lineNumber}
+              style={{ opacity: hasChange ? undefined : 0.5 }}
+            >
+              {oldLine.lineNumber}
+            </span>
+          </div>
+          <div
+            className="diff-line-old-content group relative flex w-[50%] items-center pr-[10px]"
+            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%] top-0 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}
+            />
+          </div>
+        </>
+      ) : (
+        <>
+          <div
+            className="diff-line-old-num-placeholder w-[1%] min-w-[40px] select-none px-[10px]"
+            data-side={SplitSide[SplitSide.old]}
+            style={{
+              backgroundColor: `var(${emptyBGName})`,
+              width: `var(${diffAsideWidthName})`,
+              minWidth: `var(${diffAsideWidthName})`,
+              maxWidth: `var(${diffAsideWidthName})`,
+            }}
+          >
+            &ensp;
+          </div>
+          <div
+            className="diff-line-old-placeholder w-[50%] select-none pr-[10px]"
+            data-side={SplitSide[SplitSide.old]}
+            style={{ backgroundColor: `var(${emptyBGName})` }}
+          >
+            &ensp;
+          </div>
+        </>
+      )}
+      <div className="diff-split-line w-[1px] flex-shrink-0" style={{ backgroundColor: `var(${borderColorName})` }} />
+      {hasNewLine ? (
+        <>
+          <div
+            className="diff-line-new-num group relative flex w-[1%] min-w-[40px] select-none items-start px-[10px] text-right"
+            data-side={SplitSide[SplitSide.new]}
+            style={{
+              backgroundColor: newLineNumberBG,
+              color: `var(${hasDiff ? plainLineNumberColorName : expandLineNumberColorName})`,
+              width: `var(${diffAsideWidthName})`,
+              minWidth: `var(${diffAsideWidthName})`,
+              maxWidth: `var(${diffAsideWidthName})`,
+            }}
+          >
+            {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
+              className="w-full"
+              data-line-num={newLine.lineNumber}
+              style={{ opacity: hasChange ? undefined : 0.5 }}
+            >
+              {newLine.lineNumber}
+            </span>
+          </div>
+          <div
+            className="diff-line-new-content group relative flex w-[50%] items-center pr-[10px]"
+            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%] top-0 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}
+            />
+          </div>
+        </>
+      ) : (
+        <>
+          <div
+            className="diff-line-new-num-placeholder w-[1%] min-w-[40px] select-none px-[10px]"
+            data-side={SplitSide[SplitSide.new]}
+            style={{
+              backgroundColor: `var(${emptyBGName})`,
+              width: `var(${diffAsideWidthName})`,
+              minWidth: `var(${diffAsideWidthName})`,
+              maxWidth: `var(${diffAsideWidthName})`,
+            }}
+          >
+            &ensp;
+          </div>
+          <div
+            className="diff-line-new-placeholder w-[50%] select-none pr-[10px]"
+            data-side={SplitSide[SplitSide.new]}
+            style={{ backgroundColor: `var(${emptyBGName})` }}
+          >
+            &ensp;
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export const DiffSplitContentLine = ({
+  index,
+  diffFile,
+  lineNumber,
+}: {
+  index: number;
+  diffFile: DiffFile;
+  lineNumber: number;
+}) => {
+  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} />;
+};

package/src/components/v2/DiffSplitExtendLineNormal_v2.tsx

@@ -0,0 +1,146 @@
+import { emptyBGName } from "@git-diff-view/utils";
+import * as React from "react";
+
+import { useDomWidth } from "../../hooks/useDomWidth";
+import { useSyncHeight } from "../../hooks/useSyncHeight";
+import { SplitSide } from "../DiffView";
+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);
+
+  useSyncHeight({
+    wrapper: `div[data-state="extend"][data-line="${lineNumber}-extend"]`,
+    selector: `div[data-line="${lineNumber}-extend-content"]`,
+    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 (
+    <div
+      data-line={`${lineNumber}-extend`}
+      data-state="extend"
+      data-side={SplitSide[side]}
+      className="diff-line diff-line-extend"
+    >
+      {currentSideHasExtend ? (
+        <div className={`diff-line-extend-${SplitSide[side]}-content p-0`}>
+          <div
+            data-line={`${lineNumber}-extend-content`}
+            data-side={SplitSide[side]}
+            className="diff-line-extend-wrapper sticky left-0 z-[1]"
+            style={{ width }}
+          >
+            {width > 0 &&
+              hasExtend &&
+              renderExtendLine?.({
+                diffFile,
+                side,
+                lineNumber: currentLineNumber,
+                data: currentExtend?.data,
+                onUpdate: diffFile.notifyAll,
+              })}
+          </div>
+        </div>
+      ) : (
+        <div
+          className={`diff-line-extend-${SplitSide[side]}-placeholder h-full select-none p-0`}
+          style={{ backgroundColor: `var(${emptyBGName})` }}
+        >
+          <div data-line={`${lineNumber}-extend-content`} data-side={SplitSide[side]} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+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}
+    />
+  );
+};