121 lines
3.1 KiB
TypeScript
121 lines
3.1 KiB
TypeScript
import React from "react";
|
|
import { View, Text } from "react-native";
|
|
import { ScrollView } from "react-native-gesture-handler";
|
|
import { StyleSheet } from "react-native-unistyles";
|
|
import type { DiffLine } from "@/utils/tool-call-parsers";
|
|
|
|
interface DiffViewerProps {
|
|
diffLines: DiffLine[];
|
|
maxHeight?: number;
|
|
emptyLabel?: string;
|
|
}
|
|
|
|
export function DiffViewer({ diffLines, maxHeight = 280, emptyLabel = "No changes to display" }: DiffViewerProps) {
|
|
if (!diffLines.length) {
|
|
return (
|
|
<View style={styles.emptyState}>
|
|
<Text style={styles.emptyText}>{emptyLabel}</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<ScrollView
|
|
style={[styles.verticalScroll, { maxHeight }]}
|
|
contentContainerStyle={styles.verticalContent}
|
|
nestedScrollEnabled
|
|
showsVerticalScrollIndicator
|
|
>
|
|
<ScrollView
|
|
horizontal
|
|
nestedScrollEnabled
|
|
showsHorizontalScrollIndicator
|
|
contentContainerStyle={styles.horizontalContent}
|
|
>
|
|
<View style={styles.linesContainer}>
|
|
{diffLines.map((line, index) => (
|
|
<View
|
|
key={`${line.type}-${index}`}
|
|
style={[
|
|
styles.line,
|
|
line.type === "header" && styles.headerLine,
|
|
line.type === "add" && styles.addLine,
|
|
line.type === "remove" && styles.removeLine,
|
|
line.type === "context" && styles.contextLine,
|
|
]}
|
|
>
|
|
<Text
|
|
style={[
|
|
styles.lineText,
|
|
line.type === "header" && styles.headerText,
|
|
line.type === "add" && styles.addText,
|
|
line.type === "remove" && styles.removeText,
|
|
line.type === "context" && styles.contextText,
|
|
]}
|
|
>
|
|
{line.content}
|
|
</Text>
|
|
</View>
|
|
))}
|
|
</View>
|
|
</ScrollView>
|
|
</ScrollView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create((theme) => ({
|
|
verticalScroll: {},
|
|
verticalContent: {
|
|
flexGrow: 1,
|
|
},
|
|
horizontalContent: {
|
|
flexDirection: "column" as const,
|
|
},
|
|
linesContainer: {
|
|
alignSelf: "flex-start",
|
|
},
|
|
line: {
|
|
minWidth: "100%",
|
|
paddingHorizontal: theme.spacing[3],
|
|
paddingVertical: theme.spacing[1],
|
|
},
|
|
lineText: {
|
|
fontFamily: "monospace",
|
|
fontSize: theme.fontSize.xs,
|
|
color: theme.colors.foreground,
|
|
},
|
|
headerLine: {
|
|
backgroundColor: theme.colors.muted,
|
|
},
|
|
headerText: {
|
|
color: theme.colors.mutedForeground,
|
|
},
|
|
addLine: {
|
|
backgroundColor: theme.colors.palette.green[900],
|
|
},
|
|
addText: {
|
|
color: theme.colors.palette.green[200],
|
|
},
|
|
removeLine: {
|
|
backgroundColor: theme.colors.palette.red[900],
|
|
},
|
|
removeText: {
|
|
color: theme.colors.palette.red[200],
|
|
},
|
|
contextLine: {
|
|
backgroundColor: theme.colors.card,
|
|
},
|
|
contextText: {
|
|
color: theme.colors.mutedForeground,
|
|
},
|
|
emptyState: {
|
|
padding: theme.spacing[4],
|
|
alignItems: "center" as const,
|
|
justifyContent: "center" as const,
|
|
},
|
|
emptyText: {
|
|
fontSize: theme.fontSize.sm,
|
|
color: theme.colors.mutedForeground,
|
|
},
|
|
}));
|