114 lines
3.4 KiB
TypeScript
114 lines
3.4 KiB
TypeScript
import { convertToDMS, kmhToKnot } from "@/utils/geom";
|
|
import { MaterialIcons } from "@expo/vector-icons";
|
|
import { useEffect, useRef, useState } from "react";
|
|
import { Animated, TouchableOpacity, View } from "react-native";
|
|
import { Description } from "./Description";
|
|
|
|
type GPSInfoPanelProps = {
|
|
gpsData: Model.GPSResonse | undefined;
|
|
};
|
|
|
|
const GPSInfoPanel = ({ gpsData }: GPSInfoPanelProps) => {
|
|
const [isExpanded, setIsExpanded] = useState(true);
|
|
const [panelHeight, setPanelHeight] = useState(0);
|
|
const translateY = useRef(new Animated.Value(0)).current;
|
|
const blockBottom = useRef(new Animated.Value(0)).current;
|
|
|
|
useEffect(() => {
|
|
Animated.timing(translateY, {
|
|
toValue: isExpanded ? 0 : 200, // Dịch chuyển xuống 200px khi thu gọn
|
|
duration: 500,
|
|
useNativeDriver: true,
|
|
}).start();
|
|
}, [isExpanded]);
|
|
|
|
useEffect(() => {
|
|
const targetBottom = isExpanded ? panelHeight + 12 : 10;
|
|
Animated.timing(blockBottom, {
|
|
toValue: targetBottom,
|
|
duration: 500,
|
|
useNativeDriver: false,
|
|
}).start();
|
|
}, [isExpanded, panelHeight, blockBottom]);
|
|
|
|
const togglePanel = () => {
|
|
setIsExpanded(!isExpanded);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{/* Khối hình vuông */}
|
|
<Animated.View
|
|
style={{
|
|
position: "absolute",
|
|
bottom: blockBottom,
|
|
left: 5,
|
|
width: 48,
|
|
height: 48,
|
|
backgroundColor: "blue",
|
|
borderRadius: 4,
|
|
zIndex: 30,
|
|
}}
|
|
/>
|
|
|
|
<Animated.View
|
|
style={{
|
|
transform: [{ translateY }],
|
|
}}
|
|
className="absolute bottom-0 gap-3 right-0 p-3 left-0 h-auto w-full rounded-t-xl bg-white shadow-md"
|
|
onLayout={(event) => setPanelHeight(event.nativeEvent.layout.height)}
|
|
>
|
|
{/* Nút toggle ở top-right */}
|
|
<TouchableOpacity
|
|
onPress={togglePanel}
|
|
className="absolute top-2 right-2 z-10 bg-white rounded-full p-1 shadow-sm"
|
|
>
|
|
<MaterialIcons
|
|
name={isExpanded ? "expand-more" : "expand-less"}
|
|
size={20}
|
|
color="#666"
|
|
/>
|
|
</TouchableOpacity>
|
|
|
|
<View className="flex-row justify-between">
|
|
<View className="flex-1">
|
|
<Description
|
|
title="Kinh độ"
|
|
description={convertToDMS(gpsData?.lat ?? 0, true)}
|
|
/>
|
|
</View>
|
|
<View className="flex-1">
|
|
<Description
|
|
title="Vĩ độ"
|
|
description={convertToDMS(gpsData?.lon ?? 0, false)}
|
|
/>
|
|
</View>
|
|
</View>
|
|
<View className="flex-row justify-between">
|
|
<View className="flex-1">
|
|
<Description
|
|
title="Tốc độ"
|
|
description={`${kmhToKnot(gpsData?.s ?? 0).toString()} knot`}
|
|
/>
|
|
</View>
|
|
<View className="flex-1">
|
|
<Description title="Hướng" description={`${gpsData?.h ?? 0}°`} />
|
|
</View>
|
|
</View>
|
|
</Animated.View>
|
|
|
|
{/* Nút floating để mở lại panel khi thu gọn */}
|
|
{!isExpanded && (
|
|
<TouchableOpacity
|
|
onPress={togglePanel}
|
|
className="absolute bottom-5 right-2 z-20 bg-white rounded-full p-2 shadow-lg"
|
|
>
|
|
<MaterialIcons name="info-outline" size={24} />
|
|
</TouchableOpacity>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default GPSInfoPanel;
|