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 | 1x 9x 9x 9x 1x | import { View, StyleSheet } from "react-native";
import React from "react";
import CircleIconButton from "../CircleIconButton";
import NavigationInfoTopCombined from "../navigation-info/NavigationInfoTopCombined";
import { Step } from "../../api/outdoorDirectionsApi";
interface NavigationBarProps {
readonly destination: string;
readonly onPress?: () => void;
readonly navigationInfoToggleState?: "maximize" | "minimize";
readonly navigationHUDToggleState?: "maximize" | "minimize";
readonly isCancellingNavigation?: boolean;
readonly navigationHUDStep?: Step;
}
const NavigationBar = ({
destination,
onPress,
navigationInfoToggleState,
navigationHUDToggleState,
isCancellingNavigation = false,
navigationHUDStep,
}: NavigationBarProps) => {
// In screen state wiring, index===0 (snapped down/hidden) maps to "maximize".
const showInfoExtended = isCancellingNavigation
? true
: navigationInfoToggleState === "maximize";
const shouldShowHudTopExt = isCancellingNavigation
? true
: navigationInfoToggleState !== "maximize" &&
navigationHUDToggleState === "maximize";
return (
<View style={styles.container}>
{!isCancellingNavigation && (
<View style={styles.circleButtonWrapper}>
<CircleIconButton
icon="arrow-back"
onPress={onPress}
backgroundColor="#FFFFFF"
/>
</View>
)}
<View
style={[
styles.navigationWrapper,
isCancellingNavigation && styles.navigationWrapperNoBack,
]}
>
<NavigationInfoTopCombined
destination={destination}
showInfoExtended={showInfoExtended}
showHudExtended={shouldShowHudTopExt}
hudStep={navigationHUDStep}
/>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flexDirection: "row",
paddingHorizontal: 12,
paddingVertical: 8,
},
circleButtonWrapper: {
justifyContent: "flex-start",
},
navigationWrapper: {
marginLeft: 12,
flex: 1,
justifyContent: "flex-start",
},
navigationWrapperNoBack: {
marginLeft: 0,
},
});
export default NavigationBar;
|