1import { StackActions, useNavigation } from "@react-navigation/native";
2import { useState } from "react";
3import { Platform, View } from "react-native";
4import { useAndroidWorkspaceSelection } from "../workspace/useAndroidWorkspaceSelection";
5import { AppText as Text } from "../../components/AppText";
6import { PullRequestCardGroup, PullRequestCardRow } from "./PullRequestControls";
7import { pullRequestStatus } from "./pullRequestStatus";
8import type { PullRequestParams } from "./usePullRequestDiff";
9import type { PullRequestStackState } from "./usePullRequestStack";
10
11export function PullRequestStackCard(props: {
12 readonly params: PullRequestParams;
13 readonly state: PullRequestStackState;
14}) {
15 const navigation = useNavigation();
16 const selectAndroidWorkspace = useAndroidWorkspaceSelection();
17 const [expanded, setExpanded] = useState(false);
18 const stack = props.state.stack;
19 if (!stack) {
20 const summary =
21 props.params.initialSummary?.number === props.params.number
22 ? props.params.initialSummary.stack
23 : undefined;
24 if (!summary) return null;
25 return (
26 <PullRequestCardGroup>
27 <PullRequestCardRow
28 title="Stack"
29 icon="square.3.layers.3d"
30 value={`${summary.position} of ${summary.size}`}
31 last
32 />
33 </PullRequestCardGroup>
34 );
35 }
36 const position = stack.layers.findIndex((layer) => layer.number === props.params.number) + 1;
37 return (
38 <PullRequestCardGroup>
39 <PullRequestCardRow
40 title="Stack"
41 icon="square.3.layers.3d"
42 value={`${position} of ${stack.layers.length}`}
43 accessibilityLabel={`Stack, ${position} of ${stack.layers.length}${props.state.isFresh ? "" : ", showing saved stack"}`}
44 expanded={expanded}
45 onPress={() => setExpanded(!expanded)}
46 last={!expanded}
47 />
48 {expanded ? (
49 <View>
50 {stack.layers.map((layer, index) => {
51 const selected = layer.number === props.params.number;
52 const status = pullRequestStatus({
53 state: layer.state,
54 isDraft: layer.isDraft === true,
55 });
56 return (
57 <View key={layer.number} className={selected ? "bg-thread-selected" : undefined}>
58 <PullRequestCardRow
59 title={layer.title ?? layer.headBranch}
60 icon={status.icon}
61 tint={status.tint}
62 value={selected ? "Current" : status.label}
63 detail={`#${layer.number} · ${index + 1} of ${stack.layers.length}`}
64 onPress={
65 selected
66 ? undefined
67 : () => {
68 const params = { ...props.params, number: layer.number };
69 if (Platform.OS === "android")
70 selectAndroidWorkspace({ name: "PullRequest", params });
71 else navigation.dispatch(StackActions.push("PullRequest", params));
72 }
73 }
74 last={index === stack.layers.length - 1}
75 />
76 </View>
77 );
78 })}
79 <Text className="px-4 py-3 text-xs text-foreground-muted">
80 Base: {stack.base}. Open a layer to review it or merge the stack through that layer.
81 </Text>
82 </View>
83 ) : null}
84 </PullRequestCardGroup>
85 );
86}