cập nhật themes cho tab
This commit is contained in:
@@ -12,6 +12,7 @@ import {
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { useThings } from "@/state/use-thing";
|
||||
import { useI18n } from "@/hooks/use-i18n";
|
||||
import { useThemeContext } from "@/hooks/use-theme-context";
|
||||
|
||||
interface ShipOption {
|
||||
id: string;
|
||||
@@ -25,6 +26,7 @@ interface ShipDropdownProps {
|
||||
|
||||
export default function ShipDropdown({ value, onChange }: ShipDropdownProps) {
|
||||
const { t } = useI18n();
|
||||
const { colors } = useThemeContext();
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [searchText, setSearchText] = useState("");
|
||||
|
||||
@@ -53,18 +55,32 @@ export default function ShipDropdown({ value, onChange }: ShipDropdownProps) {
|
||||
|
||||
const displayValue = value ? value.shipName : t("diary.shipDropdown.placeholder");
|
||||
|
||||
const themedStyles = {
|
||||
label: { color: colors.text },
|
||||
selector: { backgroundColor: colors.card, borderColor: colors.border },
|
||||
selectorText: { color: colors.text },
|
||||
placeholder: { color: colors.textSecondary },
|
||||
modalContent: { backgroundColor: colors.card },
|
||||
searchContainer: { backgroundColor: colors.backgroundSecondary, borderColor: colors.border },
|
||||
searchInput: { color: colors.text },
|
||||
option: { borderBottomColor: colors.separator },
|
||||
selectedOption: { backgroundColor: colors.backgroundSecondary },
|
||||
optionText: { color: colors.text },
|
||||
emptyText: { color: colors.textSecondary },
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.label}>{t("diary.shipDropdown.label")}</Text>
|
||||
<Text style={[styles.label, themedStyles.label]}>{t("diary.shipDropdown.label")}</Text>
|
||||
<TouchableOpacity
|
||||
style={styles.selector}
|
||||
style={[styles.selector, themedStyles.selector]}
|
||||
onPress={() => setIsOpen(true)}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Text style={[styles.selectorText, !value && styles.placeholder]}>
|
||||
<Text style={[styles.selectorText, themedStyles.selectorText, !value && themedStyles.placeholder]}>
|
||||
{displayValue}
|
||||
</Text>
|
||||
<Ionicons name="chevron-down" size={20} color="#6B7280" />
|
||||
<Ionicons name="chevron-down" size={20} color={colors.textSecondary} />
|
||||
</TouchableOpacity>
|
||||
|
||||
<Modal
|
||||
@@ -79,80 +95,73 @@ export default function ShipDropdown({ value, onChange }: ShipDropdownProps) {
|
||||
onPress={() => setIsOpen(false)}
|
||||
>
|
||||
<View
|
||||
style={styles.modalContent}
|
||||
style={[styles.modalContent, themedStyles.modalContent]}
|
||||
onStartShouldSetResponder={() => true}
|
||||
>
|
||||
{/* Search Input */}
|
||||
<View style={styles.searchContainer}>
|
||||
<View style={[styles.searchContainer, themedStyles.searchContainer]}>
|
||||
<Ionicons
|
||||
name="search"
|
||||
size={20}
|
||||
color="#9CA3AF"
|
||||
color={colors.textSecondary}
|
||||
style={styles.searchIcon}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.searchInput}
|
||||
style={[styles.searchInput, themedStyles.searchInput]}
|
||||
placeholder={t("diary.shipDropdown.searchPlaceholder")}
|
||||
placeholderTextColor="#9CA3AF"
|
||||
placeholderTextColor={colors.textSecondary}
|
||||
value={searchText}
|
||||
onChangeText={setSearchText}
|
||||
autoCapitalize="none"
|
||||
/>
|
||||
{searchText.length > 0 && (
|
||||
<TouchableOpacity onPress={() => setSearchText("")}>
|
||||
<Ionicons name="close-circle" size={20} color="#9CA3AF" />
|
||||
<Ionicons name="close-circle" size={20} color={colors.textSecondary} />
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<ScrollView style={styles.optionsList}>
|
||||
{/* Option to clear selection */}
|
||||
{/* "All Ships" option */}
|
||||
<TouchableOpacity
|
||||
style={[styles.option, !value && styles.selectedOption]}
|
||||
style={[
|
||||
styles.option,
|
||||
themedStyles.option,
|
||||
!value && themedStyles.selectedOption,
|
||||
]}
|
||||
onPress={() => handleSelect(null)}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.optionText,
|
||||
styles.placeholderOption,
|
||||
!value && styles.selectedOptionText,
|
||||
]}
|
||||
>
|
||||
<Text style={[styles.optionText, themedStyles.optionText]}>
|
||||
{t("diary.shipDropdown.allShips")}
|
||||
</Text>
|
||||
{!value && (
|
||||
<Ionicons name="checkmark" size={20} color="#3B82F6" />
|
||||
<Ionicons name="checkmark" size={20} color={colors.primary} />
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
|
||||
{filteredShips.map((ship) => (
|
||||
<TouchableOpacity
|
||||
key={ship.id}
|
||||
style={[
|
||||
styles.option,
|
||||
value?.id === ship.id && styles.selectedOption,
|
||||
]}
|
||||
onPress={() => handleSelect(ship)}
|
||||
>
|
||||
<View style={styles.shipInfo}>
|
||||
<Text
|
||||
style={[
|
||||
styles.shipName,
|
||||
value?.id === ship.id && styles.selectedOptionText,
|
||||
]}
|
||||
>
|
||||
{/* Filtered ship options */}
|
||||
{filteredShips.length > 0 ? (
|
||||
filteredShips.map((ship) => (
|
||||
<TouchableOpacity
|
||||
key={ship.id}
|
||||
style={[
|
||||
styles.option,
|
||||
themedStyles.option,
|
||||
value?.id === ship.id && themedStyles.selectedOption,
|
||||
]}
|
||||
onPress={() => handleSelect(ship)}
|
||||
>
|
||||
<Text style={[styles.optionText, themedStyles.optionText]}>
|
||||
{ship.shipName}
|
||||
</Text>
|
||||
</View>
|
||||
{value?.id === ship.id && (
|
||||
<Ionicons name="checkmark" size={20} color="#3B82F6" />
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
|
||||
{filteredShips.length === 0 && searchText.length > 0 && (
|
||||
<View style={styles.emptyState}>
|
||||
<Text style={styles.emptyText}>
|
||||
{value?.id === ship.id && (
|
||||
<Ionicons name="checkmark" size={20} color={colors.primary} />
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
))
|
||||
) : (
|
||||
<View style={styles.emptyContainer}>
|
||||
<Text style={[styles.emptyText, themedStyles.emptyText]}>
|
||||
{t("diary.shipDropdown.noShipsFound")}
|
||||
</Text>
|
||||
</View>
|
||||
@@ -172,7 +181,6 @@ const styles = StyleSheet.create({
|
||||
label: {
|
||||
fontSize: 16,
|
||||
fontWeight: "600",
|
||||
color: "#111827",
|
||||
marginBottom: 8,
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
@@ -184,16 +192,13 @@ const styles = StyleSheet.create({
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#FFFFFF",
|
||||
borderWidth: 1,
|
||||
borderColor: "#D1D5DB",
|
||||
borderRadius: 8,
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 12,
|
||||
},
|
||||
selectorText: {
|
||||
fontSize: 16,
|
||||
color: "#111827",
|
||||
flex: 1,
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
@@ -201,9 +206,6 @@ const styles = StyleSheet.create({
|
||||
default: "System",
|
||||
}),
|
||||
},
|
||||
placeholder: {
|
||||
color: "#9CA3AF",
|
||||
},
|
||||
modalOverlay: {
|
||||
flex: 1,
|
||||
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
||||
@@ -211,7 +213,6 @@ const styles = StyleSheet.create({
|
||||
alignItems: "center",
|
||||
},
|
||||
modalContent: {
|
||||
backgroundColor: "#FFFFFF",
|
||||
borderRadius: 12,
|
||||
width: "85%",
|
||||
maxHeight: "70%",
|
||||
@@ -231,8 +232,6 @@ const styles = StyleSheet.create({
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 12,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: "#F3F4F6",
|
||||
backgroundColor: "#F9FAFB",
|
||||
},
|
||||
searchIcon: {
|
||||
marginRight: 8,
|
||||
@@ -240,7 +239,6 @@ const styles = StyleSheet.create({
|
||||
searchInput: {
|
||||
flex: 1,
|
||||
fontSize: 16,
|
||||
color: "#111827",
|
||||
padding: 0,
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
@@ -258,58 +256,21 @@ const styles = StyleSheet.create({
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 16,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: "#F3F4F6",
|
||||
},
|
||||
selectedOption: {
|
||||
backgroundColor: "#EFF6FF",
|
||||
},
|
||||
optionText: {
|
||||
fontSize: 16,
|
||||
color: "#111827",
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
android: "Roboto",
|
||||
default: "System",
|
||||
}),
|
||||
},
|
||||
placeholderOption: {
|
||||
fontStyle: "italic",
|
||||
color: "#6B7280",
|
||||
},
|
||||
selectedOptionText: {
|
||||
color: "#3B82F6",
|
||||
fontWeight: "600",
|
||||
},
|
||||
shipInfo: {
|
||||
flex: 1,
|
||||
},
|
||||
shipName: {
|
||||
fontSize: 16,
|
||||
color: "#111827",
|
||||
fontWeight: "500",
|
||||
marginBottom: 2,
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
android: "Roboto",
|
||||
default: "System",
|
||||
}),
|
||||
},
|
||||
regNumber: {
|
||||
fontSize: 14,
|
||||
color: "#6B7280",
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
android: "Roboto",
|
||||
default: "System",
|
||||
}),
|
||||
},
|
||||
emptyState: {
|
||||
emptyContainer: {
|
||||
paddingVertical: 24,
|
||||
alignItems: "center",
|
||||
},
|
||||
emptyText: {
|
||||
fontSize: 14,
|
||||
color: "#9CA3AF",
|
||||
fontFamily: Platform.select({
|
||||
ios: "System",
|
||||
android: "Roboto",
|
||||
|
||||
Reference in New Issue
Block a user