diff-DiffView-U1.json

{"fileDiff":"diff --git a/src/DiffFile/DiffView.tsx b/src/DiffFile/DiffView.tsx\nindex fa97fa8..fd3d40c 100644\n--- a/src/DiffFile/DiffView.tsx\n+++ b/src/DiffFile/DiffView.tsx\n@@ -1,2 +1,2 @@\n-import { Fragment, useMemo } from \"react\";\n+import {  useMemo, useState } from \"react\";\n import {\n@@ -9,2 +9,5 @@ import {\n   parseDiff,\n+  getCollapsedLinesCountBetween,\n+  textLinesToHunk,\n+  insertHunk,\n } from \"react-diff-view\";\n@@ -15,2 +18,4 @@ import styles from \"./DiffFile.module.css\";\n import type { ReactNode } from \"react\";\n+import { getLines, lines } from \"../baseFile\";\n+import type { ExtendedChange } from \"./types\";\n \n@@ -20,10 +25,124 @@ const getFileExtension = (filePath: string) => {\n \n-const renderHunk = (hunk: HunkData) => (\n-  <Fragment key={hunk.content}>\n-    <Decoration className={styles.decoration}>{hunk.content}</Decoration>\n-    <Hunk key={hunk.content} hunk={hunk} />\n-  </Fragment>\n-);\n+type ExpandType = 'up' | 'down' | \"up&down\" | 'all' | \"none\";\n \n-const renderDiffChildren = (hunks: HunkData[]) => hunks.map(renderHunk);\n+const ExpandButton = ({expand, onClick}: {expand: ExpandType, onClick: (type?: \"up\" | \"down\") => void}) => {\n+  if (expand === \"up&down\") {\n+    return (<div className={styles.decorationGutterButtonsWrapper}>\n+      <button style={{backgroundColor: 'rgb(133, 206, 255)'}} className={styles.decorationGutterButton} onClick={() => onClick(\"down\")}>↓</button>\n+      <button style={{backgroundColor: 'rgb(133, 206, 255)'}} className={styles.decorationGutterButton} onClick={() => onClick(\"up\")}>↑</button>\n+    </div>)\n+  }\n+  if (expand === \"up\") return <button style={{backgroundColor: 'rgb(133, 206, 255)'}} className={styles.decorationGutterButton} onClick={() => onClick()}>↑</button>;\n+  if (expand === \"down\") return <button style={{backgroundColor: 'rgb(133, 206, 255)'}} className={styles.decorationGutterButton} onClick={() => onClick()}>↓</button>;\n+  if (expand === \"none\") return null;\n+  return <button style={{backgroundColor: 'rgb(133, 206, 255)'}} className={styles.decorationGutterButton} onClick={() => onClick()}>↓↑</button>;\n+};\n+\n+const ExpandedDecoratedHunk = ({hunk, expand, onClick}: {hunk?: HunkData, expand: ExpandType, onClick?: (type?: \"up\" | \"down\") => void} ) => {\n+  return (<>\n+  <Decoration className={styles.decoration} gutterClassName={styles.decorationGutter} contentClassName={styles.decorationContent}>\n+    <ExpandButton expand={expand} onClick={(type) => onClick?.(type)} />\n+    {hunk && hunk.content}\n+  </Decoration>\n+  {hunk && <Hunk hunk={hunk} />}\n+</>)\n+}\n+\n+const TOTAL_NUMBER = lines.length - 1; // TODO: какое-то число от бэка нужно\n+\n+console.log(\"TOTAL_NUMBER: \", TOTAL_NUMBER, lines);\n+\n+const renderDiffChildren = (hunks: HunkData[], setHunks: (hunk: HunkData[]) => void) => {\n+  const expand = async (startOld: number, endOld: number, startNew: number) => {\n+    console.log(\"DIFF EXPAND REQUEST: \", startOld, endOld);\n+\n+    // Тип запрос\n+    const getReponse = async () => {\n+      await new Promise(resolve => setTimeout(resolve, 100));\n+\n+      return getLines(startOld, endOld);\n+    }\n+\n+    const lines = await getReponse();\n+\n+    console.log(lines);\n+  \n+    const newHunk = textLinesToHunk(lines, startOld, startNew);\n+\n+    if (newHunk) {\n+      newHunk.changes.forEach(change => {\n+        (change as ExtendedChange).isExpanded = true;\n+      })\n+\n+      const nextHunks = insertHunk(hunks, newHunk)\n+      setHunks(nextHunks);\n+    };\n+  };\n+\n+  const elements = hunks.reduce<React.ReactElement[]>((acc, hunk, ind) => {\n+    if (ind === 0) {\n+      if (hunk.oldStart > 1) {\n+        const startOld = Math.max(1, hunk.oldStart - 20);\n+        const endOld = hunk.oldStart - 1;\n+\n+        acc.push(\n+          <ExpandedDecoratedHunk key={hunk.content} hunk={hunk} expand=\"up\" onClick={() => expand(startOld, endOld, startOld)}/>\n+        );\n+      }\n+      else {\n+        acc.push(\n+          <ExpandedDecoratedHunk key={hunk.content} hunk={hunk} expand=\"none\" />\n+        );\n+      }\n+    }\n+\n+    const prevHunk = hunks[ind - 1]\n+\n+    if (ind > 0 && prevHunk) {\n+      const collapsedCount = getCollapsedLinesCountBetween(prevHunk, hunk);\n+\n+      if (collapsedCount > 0 && collapsedCount <= 20) {\n+        const startOld = prevHunk.oldStart + prevHunk.oldLines;\n+        const endOld = hunk.oldStart - 1;\n+        const startNew = prevHunk.newStart + prevHunk.newLines;\n+\n+        acc.push(\n+          <ExpandedDecoratedHunk key={hunk.content} hunk={hunk} expand=\"all\" onClick={() => expand(startOld, endOld, startNew)} />\n+        );\n+      };\n+\n+      if (collapsedCount > 20) {\n+        acc.push(\n+          <ExpandedDecoratedHunk key={hunk.content} hunk={hunk} expand=\"up&down\" onClick={(type) => {\n+            if (type === \"up\") {\n+              const startOld = hunk.oldStart - 20;\n+              const endOld = hunk.oldStart - 1;\n+              const startNew = hunk.newStart - (hunk.oldStart - startOld);\n+              \n+              expand(startOld, endOld, startNew)};\n+            if (type === \"down\") {\n+              const startOld = prevHunk.oldStart + prevHunk.oldLines;\n+              const endOld = startOld + 19;\n+              const startNew = prevHunk.newStart + prevHunk.newLines;\n+              \n+              expand(startOld, endOld, startNew)};\n+          }} />\n+        );\n+      };\n+    };\n+\n+    if (hunks.length - 1 === ind && hunk.oldStart + hunk.oldLines < TOTAL_NUMBER) {\n+      const startOld = hunk.oldStart + hunk.oldLines;\n+      const endOld = Math.min(startOld + 19, TOTAL_NUMBER);\n+      const startNew = hunk.newStart + hunk.newLines;\n+\n+      acc.push(<ExpandedDecoratedHunk key={`${hunk.content}-down`} expand=\"down\" onClick={() => expand(startOld, endOld, startNew)}/>)\n+    }\n+\n+    return acc;\n+  }, []);\n+  \n+\n+  return elements;\n+};\n \n@@ -75,5 +194,9 @@ export const DiffView = ({\n   );\n+\n+  const { oldRevision, newRevision, type, hunks } = file;\n+  const [diffHunks, setHunks] = useState(hunks);\n+\n   const tokenizePayload = useMemo(\n     () => ({\n-      hunks: file.hunks ?? \"\",\n+      hunks: diffHunks ?? \"\",\n       oldSource: null,\n@@ -82,3 +205,3 @@ export const DiffView = ({\n     }),\n-    [file.hunks, file.newPath, enableComments]\n+    [diffHunks, file.newPath, enableComments]\n   );\n@@ -86,7 +209,3 @@ export const DiffView = ({\n \n-  if (!file) {\n-    return null;\n-  }\n-\n-  const { oldRevision, newRevision, type, hunks } = file;\n+  console.log(\"DIFF HUNKS===\", diffHunks);\n \n@@ -97,3 +216,3 @@ export const DiffView = ({\n       diffType={type}\n-      hunks={hunks}\n+      hunks={diffHunks}\n       tokens={tokens}\n@@ -104,3 +223,3 @@ export const DiffView = ({\n     >\n-      {renderDiffChildren}\n+      {(diffHunks) => renderDiffChildren(diffHunks, setHunks)}\n     </Diff>\n"}