review-codecommit/src/components/DiffLine.tsx at ce232f06dad1bf0d134629d1a6a35ab24a93b3bf · watany-dev/review-codecommit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
import { Text } from "ink";
import React from "react";
import type { DisplayLine } from "../utils/formatDiff.js";
import { detectLanguage, type HighlightSegment, highlightLine } from "../utils/highlightCode.js";

function renderSegments(segments: HighlightSegment[]): React.ReactNode {
  if (segments.length === 1 && !segments[0]?.color && !segments[0]?.bold && !segments[0]?.dim) {
    /* v8 ignore next -- segments always have at least one element here */
    return segments[0]?.text ?? "";
  }
  let offset = 0;
  return segments.map((seg) => {
    const key = `s${offset}`;
    offset += seg.text.length;
    return (
      <Text
        key={key}
        {...(seg.color ? { color: seg.color } : {})}
        {...(seg.bold ? { bold: true } : {})}
        {...(seg.dim ? { dimColor: true } : {})}
        {...(seg.italic ? { italic: true } : {})}
      >
        {seg.text}
      </Text>
    );
  });
}

function renderCodeLine(
  line: DisplayLine,
  prefixColor: string | undefined,
  bold: boolean,
): React.ReactNode {
  const prefix = line.text.slice(0, 1);
  const content = line.text.slice(1);
  const lang = line.filePath ? detectLanguage(line.filePath) : undefined;

  if (lang && content) {
    const segments = highlightLine(content, lang);
    return (
      <Text bold={bold}>
        {prefixColor ? <Text color={prefixColor}>{prefix}</Text> : <Text>{prefix}</Text>}
        {renderSegments(segments)}
      </Text>
    );
  }
  return (
    <Text {...(prefixColor ? { color: prefixColor } : {})} bold={bold}>
      {line.text}
    </Text>
  );
}

export function renderDiffLine(line: DisplayLine, isCursor = false): React.ReactNode {
  const bold = isCursor;
  switch (line.type) {
    case "header":
      return (
        <Text bold color="yellow">
          {line.text}
        </Text>
      );
    case "separator":
      return <Text dimColor>{line.text}</Text>;
    case "add":
      return renderCodeLine(line, "green", bold);
    case "delete":
      return renderCodeLine(line, "red", bold);
    case "context":
      return renderCodeLine(line, undefined, bold);
    case "truncate-context":
      return <Text dimColor>{line.text}</Text>;
    case "truncation":
      return <Text dimColor>{line.text}</Text>;
    case "comment-header":
      return <Text bold>{line.text}</Text>;
    case "comment":
      return (
        <Text>
          {" "}
          {line.text}
          {line.reactionText ? <Text dimColor> {line.reactionText}</Text> : null}
        </Text>
      );
    case "inline-comment":
      return (
        <Text color="magenta">
          {" "}
          {line.text}
          {/* v8 ignore next -- inline comments rendered without reactions in tests */}
          {line.reactionText ? <Text dimColor> {line.reactionText}</Text> : null}
        </Text>
      );
    case "inline-reply":
      return (
        <Text color="magenta">
          {"   "}
          {line.text}
          {/* v8 ignore next -- inline replies rendered without reactions in tests */}
          {line.reactionText ? <Text dimColor> {line.reactionText}</Text> : null}
        </Text>
      );
    case "comment-reply":
      return (
        <Text>
          {"   "}
          {line.text}
          {line.reactionText ? <Text dimColor> {line.reactionText}</Text> : null}
        </Text>
      );
    case "fold-indicator":
      return (
        <Text dimColor>
          {"   "}
          {line.text}
        </Text>
      );
  }
}