update

Author: MrWangJustToDo

ui/react-example/src/components/MainContent.tsx

@@ -14,14 +14,18 @@ import {
   getThemeColor,
   Container,
 } from "@mantine/core";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 
 import { MainContentDiffConfig } from "./MainContentDiffConfig";
 import { MainContentDiffExample } from "./MainContentDiffExample";
 
+import type { DiffFile } from "@git-diff-view/react";
+
 export const MainContent = () => {
   const theme = useMantineTheme();
 
+  const [d, setD] = useState<DiffFile>();
+
   const { colorScheme } = useMantineColorScheme();
 
   const color = useMemo(() => alpha(getThemeColor("yellow", theme), 0.5), [theme]);
@@ -44,14 +48,14 @@ export const MainContent = () => {
           <Space h="12" />
           <Title order={4}>Diff View Config</Title>
           <Space h="4" />
-          <MainContentDiffConfig />
+          <MainContentDiffConfig diffFile={d} />
         </Stack>
 
         <Box
           className={`relative h-[calc(100vh-200px)] transform-gpu overflow-hidden rounded-md border border-solid ${colorScheme === "light" ? "border-gray-200" : "border-gray-600"}`}
           w={{ base: "100%", sm: "60%" }}
         >
-          <MainContentDiffExample />
+          <MainContentDiffExample onUpdate={setD} />
         </Box>
       </Flex>
     </Container>

ui/react-example/src/components/MainContentDiffConfig.tsx

@@ -1,11 +1,44 @@
 import { DiffModeEnum } from "@git-diff-view/react";
 import { Button, Group, Tooltip } from "@mantine/core";
+import { useEffect, useState } from "react";
 
 import { useDiffConfig } from "../hooks/useDiffConfig";
 
-export const MainContentDiffConfig = () => {
+import type { DiffFile } from "@git-diff-view/react";
+
+export const MainContentDiffConfig = ({ diffFile }: { diffFile?: DiffFile }) => {
   const { mode, setEngine, setHighlight, setMode, setWrap, wrap, engine, highlight } = useDiffConfig();
 
+  const [expandAll, setExpandAll] = useState(false);
+
+  useEffect(() => {
+    if (diffFile) {
+      if (mode === DiffModeEnum.Unified) {
+        setExpandAll(diffFile.hasExpandUnifiedAll);
+      } else {
+        setExpandAll(diffFile.hasExpandSplitAll);
+      }
+    }
+  }, [diffFile, mode]);
+
+  const toggleExpandAll = () => {
+    if (diffFile) {
+      if (mode === DiffModeEnum.Unified) {
+        if (expandAll) {
+          diffFile.onAllCollapse("unified");
+        } else {
+          diffFile.onAllExpand("unified");
+        }
+      } else {
+        if (expandAll) {
+          diffFile.onAllCollapse("split");
+        } else {
+          diffFile.onAllExpand("split");
+        }
+      }
+    }
+  };
+
   return (
     <Group>
       <Tooltip label="diff view mode">
@@ -24,6 +57,16 @@ export const MainContentDiffConfig = () => {
           {engine}
         </Button>
       </Tooltip>
+      <Tooltip label="expand all lines">
+        <Button
+          onClick={() => {
+            toggleExpandAll();
+            setExpandAll(!expandAll);
+          }}
+        >
+          {expandAll ? "collapse all" : "expand all"}
+        </Button>
+      </Tooltip>
     </Group>
   );
 };

ui/react-example/src/components/MainContentDiffExample.tsx

@@ -2,7 +2,7 @@ import { generateDiffFile, DiffFile } from "@git-diff-view/file";
 import { Button, ButtonGroup, Card, FloatingIndicator, Group, LoadingOverlay, Popover, Tooltip } from "@mantine/core";
 import { useDisclosure, useMounted } from "@mantine/hooks";
 import { IconCode, IconPlayerPlay, IconRefresh, IconBrandReact, IconBrandVue } from "@tabler/icons-react";
-import { useState, startTransition, useCallback, forwardRef, useMemo } from "react";
+import { useState, startTransition, useCallback, forwardRef, useMemo, useEffect } from "react";
 
 import { useDiffHighlighter } from "../hooks/useDiffHighlighter";
 
@@ -22,7 +22,7 @@ const getNewDiffFile = () => {
   return instance;
 };
 
-export const MainContentDiffExample = () => {
+export const MainContentDiffExample = ({ onUpdate }: { onUpdate?: (diffFile: DiffFile) => void }) => {
   const [code, { open, close }] = useDisclosure();
 
   const isMounted = useMounted();
@@ -56,6 +56,12 @@ export const MainContentDiffExample = () => {
 
   const [controlsRefs, setControlsRefs] = useState<Record<string, HTMLButtonElement | null>>({});
 
+  useEffect(() => {
+    if (onUpdate) {
+      onUpdate(diffFile);
+    }
+  }, [diffFile]);
+
   const Element = useMemo(
     () =>
       forwardRef<HTMLButtonElement, any>(({ onClick, ...props }, ref) => (