108 lines
2.5 KiB
TypeScript
108 lines
2.5 KiB
TypeScript
import { AntDesign } from "@expo/vector-icons";
|
|
import React, { useState } from "react";
|
|
import { Alert, StyleSheet, Text, TouchableOpacity, View } from "react-native";
|
|
|
|
interface StartButtonProps {
|
|
title?: string;
|
|
onPress?: () => void;
|
|
}
|
|
|
|
const ButtonCreateNewHaulOrTrip: React.FC<StartButtonProps> = ({
|
|
title = "Bắt đầu mẻ lưới",
|
|
onPress,
|
|
}) => {
|
|
const [isStarted, setIsStarted] = useState(false);
|
|
|
|
const handlePress = () => {
|
|
if (isStarted) {
|
|
Alert.alert(
|
|
"Kết thúc mẻ lưới",
|
|
"Bạn có chắc chắn muốn kết thúc mẻ lưới này?",
|
|
[
|
|
{
|
|
text: "Hủy",
|
|
style: "cancel",
|
|
},
|
|
{
|
|
text: "Kết thúc",
|
|
onPress: () => {
|
|
setIsStarted(false);
|
|
Alert.alert("Thành công", "Đã kết thúc mẻ lưới!");
|
|
},
|
|
},
|
|
]
|
|
);
|
|
} else {
|
|
Alert.alert("Bắt đầu mẻ lưới", "Bạn có muốn bắt đầu mẻ lưới mới?", [
|
|
{
|
|
text: "Hủy",
|
|
style: "cancel",
|
|
},
|
|
{
|
|
text: "Bắt đầu",
|
|
onPress: () => {
|
|
setIsStarted(true);
|
|
Alert.alert("Thành công", "Đã bắt đầu mẻ lưới mới!");
|
|
},
|
|
},
|
|
]);
|
|
}
|
|
|
|
if (onPress) {
|
|
onPress();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
style={[styles.button, isStarted && styles.buttonActive]}
|
|
onPress={handlePress}
|
|
activeOpacity={0.8}
|
|
>
|
|
<View style={styles.content}>
|
|
<AntDesign
|
|
name={isStarted ? "close" : "plus"}
|
|
size={18}
|
|
color="#fff"
|
|
style={styles.icon}
|
|
/>
|
|
<Text style={styles.text}>
|
|
{isStarted ? "Kết thúc mẻ lưới" : title}
|
|
</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
button: {
|
|
backgroundColor: "#4ecdc4", // màu ngọc lam
|
|
borderRadius: 8,
|
|
paddingVertical: 10,
|
|
paddingHorizontal: 16,
|
|
alignSelf: "flex-start",
|
|
shadowColor: "#000",
|
|
shadowOpacity: 0.15,
|
|
shadowRadius: 3,
|
|
shadowOffset: { width: 0, height: 2 },
|
|
elevation: 3, // hiệu ứng nổi trên Android
|
|
},
|
|
buttonActive: {
|
|
backgroundColor: "#e74c3c", // màu đỏ khi đang hoạt động
|
|
},
|
|
content: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
},
|
|
icon: {
|
|
marginRight: 6,
|
|
},
|
|
text: {
|
|
color: "#fff",
|
|
fontSize: 16,
|
|
fontWeight: "600",
|
|
},
|
|
});
|
|
|
|
export default ButtonCreateNewHaulOrTrip;
|