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