Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 120 121 122 123 124 125 | 11x 11x 11x 11x 11x 11x 11x 2x 2x 1x | import React from "react";
import { StyleSheet, View, ActivityIndicator, Text } from "react-native";
import { useSharedValue } from "react-native-reanimated";
import RouteRow from "./RouteRow";
import SwapButton from "../SwapButton";
import CircleIconButton from "../CircleIconButton";
import useNavigationInfo from "../../hooks/useNavigationInfo";
import { useAccessibleTypography } from "../../hooks/useAccessibilitySettings";
import { useTheme } from "../../hooks/useTheme";
interface RouteCardProps {
readonly originLabel: string;
readonly destinationLabel: string;
readonly onBack: () => void;
readonly onSwap: () => void;
}
export default function RouteCard({
originLabel,
destinationLabel,
onBack,
onSwap,
}: RouteCardProps) {
const { colors } = useTheme();
const isLoading = useNavigationInfo((s) => s.isLoading);
const setIsLoading = useNavigationInfo((s) => s.setIsLoading);
const { textStyle } = useAccessibleTypography();
const originDragProgress = useSharedValue(0);
const destDragProgress = useSharedValue(0);
return (
<View style={[styles.card, { backgroundColor: colors.card }]}>
{/* Always rendered - user can cancel even while route is calculating */}
<CircleIconButton
icon="arrow-back"
onPress={() => {
setIsLoading(false);
onBack();
}}
/>
<View style={styles.rows}>
{isLoading ? (
<View style={styles.loadingRow}>
<ActivityIndicator size="small" color={colors.primary} />
<Text
style={[
styles.loadingText,
textStyle(14),
{ color: colors.textMuted },
]}
>
Calculating route…
</Text>
</View>
) : (
<>
<RouteRow
label="From"
value={originLabel}
onSwap={onSwap}
dragProgress={originDragProgress}
siblingDragProgress={destDragProgress}
/>
<View style={styles.dividerRow}>
<View
style={[styles.divider, { backgroundColor: colors.border }]}
/>
<SwapButton onPress={onSwap} />
</View>
<RouteRow
label="To"
value={destinationLabel}
onSwap={onSwap}
dragProgress={destDragProgress}
siblingDragProgress={originDragProgress}
/>
</>
)}
</View>
</View>
);
}
const styles = StyleSheet.create({
card: {
borderRadius: 14,
paddingVertical: 10,
paddingHorizontal: 12,
flexDirection: "row",
alignItems: "center",
gap: 10,
shadowColor: "#000",
shadowOpacity: 0.14,
shadowRadius: 12,
shadowOffset: { width: 0, height: 4 },
elevation: 6,
},
rows: {
flex: 1,
justifyContent: "center",
},
dividerRow: {
flexDirection: "row",
alignItems: "center",
gap: 8,
marginVertical: 3,
},
divider: {
flex: 1,
height: StyleSheet.hairlineWidth,
},
loadingRow: {
flexDirection: "row",
alignItems: "center",
gap: 10,
paddingVertical: 8,
},
loadingText: {
fontSize: 14,
fontStyle: "italic",
},
});
|