Update icons with pointerEvents="none" and upgrade lucide-react-native to v0.563.0

This commit is contained in:
2026-02-17 10:22:18 +01:00
parent cded5e8f00
commit 68e25fac71
27 changed files with 106 additions and 128 deletions

View File

@@ -2,12 +2,12 @@ import { Redirect, Tabs } from 'expo-router';
import { Home, Clock, Zap, CalendarIcon, Building } from 'lucide-react-native';
import { useContext } from 'react';
import { AuthContext } from '@/utils/authContext';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import {useSafeAreaInsets} from "react-native-safe-area-context";
export default function ProtectedLayout() {
const authState = useContext(AuthContext);
const insets = useSafeAreaInsets();
if (!authState.isReady) {
return null;
}
@@ -24,7 +24,7 @@ export default function ProtectedLayout() {
backgroundColor: '#ffffff',
borderTopWidth: 1,
borderTopColor: '#f3f4f6',
height: 90,
height: 70 + insets.bottom,
paddingBottom: insets.bottom,
paddingTop: 10,
paddingHorizontal: 10,
@@ -43,28 +43,28 @@ export default function ProtectedLayout() {
name="index"
options={{
title: 'Home',
tabBarIcon: ({ color, size }) => <Home color={color} size={24} />,
tabBarIcon: ({ color, size }) => <Home pointerEvents="none" color={color} size={24} />,
}}
/>
<Tabs.Screen
name="attendance/index"
options={{
title: 'Presenze',
tabBarIcon: ({ color, size }) => <Clock color={color} size={24} />,
tabBarIcon: ({ color, size }) => <Clock pointerEvents="none" color={color} size={24} />,
}}
/>
<Tabs.Screen
name="permits/index"
options={{
title: 'Permessi',
tabBarIcon: ({ color, size }) => <CalendarIcon color={color} size={24} />,
tabBarIcon: ({ color, size }) => <CalendarIcon pointerEvents="none" color={color} size={24} />,
}}
/>
<Tabs.Screen
name="sites"
options={{
title: 'Cantieri',
tabBarIcon: ({ color, size }) => <Building color={color} size={24} />,
tabBarIcon: ({ color, size }) => <Building pointerEvents="none" color={color} size={24} />,
}}
/>
{/* // TODO: Probably needs to be restricted to admin */}
@@ -72,7 +72,7 @@ export default function ProtectedLayout() {
name="automation"
options={{
title: 'Domotica',
tabBarIcon: ({ color, size }) => <Zap color={color} size={24} />,
tabBarIcon: ({ color, size }) => <Zap pointerEvents="none" color={color} size={24} />,
}}
/>
{/* TODO: Should be removed - move tabs inside (tabs) and refactor _layout */}
@@ -85,4 +85,4 @@ export default function ProtectedLayout() {
/>
</Tabs>
);
}
}

View File

@@ -139,7 +139,7 @@ export default function AttendanceScreen() {
{lastScan ? (
<View className="w-full bg-green-50 border border-green-200 rounded-3xl p-5 mb-8 flex-row items-center gap-4 shadow-sm">
<View className="bg-green-500 rounded-full p-3 shadow-lg shadow-green-500/40 flex-shrink-0">
<CheckCircle2 size={32} color="white" />
<CheckCircle2 size={32} color="white" pointerEvents="none" />
</View>
<View className="flex-1">
<Text
@@ -171,7 +171,7 @@ export default function AttendanceScreen() {
onPress={handleStartScan}
className="bg-[#099499] rounded-2xl py-6 flex-row items-center justify-center active:bg-[#077d82] shadow-lg shadow-teal-900/20 active:scale-[0.98]"
>
{scannerType === 'qr' ? <QrCode color="white" size={32} /> : <Nfc color="white" size={32} />}
{scannerType === 'qr' ? <QrCode color="white" size={32} pointerEvents="none" /> : <Nfc color="white" size={32} pointerEvents="none" />}
<Text className="text-white text-xl font-bold ml-3">Scansiona Codice</Text>
</TouchableOpacity>

View File

@@ -84,7 +84,7 @@ export default function AutomationDetailScreen() {
if (!area) {
return (
<View className="flex-1 items-center justify-center">
<WifiOff size={48} color="#9ca3af" />
<WifiOff size={48} color="#9ca3af" pointerEvents="none" />
<Text className="text-xl text-gray-600 font-bold mt-4">Area non trovata</Text>
<Text className="text-gray-400 text-center mt-2 mb-4">L'area che stai cercando non esiste o è stata rimossa.</Text>
<TouchableOpacity onPress={() => router.back()} className="mt-4 bg-[#099499] px-6 py-3 rounded-xl active:scale-95">
@@ -101,7 +101,7 @@ export default function AutomationDetailScreen() {
<View className="flex-row justify-between items-center">
<View className='flex-row items-center gap-4'>
<TouchableOpacity onPress={() => router.back()} className='rounded-full active:bg-gray-100'>
<ChevronLeft size={28} color="#4b5563" />
<ChevronLeft size={28} color="#4b5563" pointerEvents="none" />
</TouchableOpacity>
<Text className="text-2xl font-bold text-gray-800">{area.name}</Text>
</View>
@@ -122,7 +122,7 @@ export default function AutomationDetailScreen() {
</View>
) : (
<View className="items-center">
<ServerOff size={48} color="#9ca3af" />
<ServerOff size={48} color="#9ca3af" pointerEvents="none" />
<Text className="text-lg text-gray-500 font-medium mt-4">Nessun dispositivo</Text>
<Text className="text-center text-gray-400 mt-2">
Non ci sono dispositivi in quest'area.

View File

@@ -95,7 +95,7 @@ export default function AutomationScreen() {
contentContainerClassName="flex-grow items-center justify-center pb-[100px]"
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} colors={['#099499']} tintColor={'#099499'} />}
>
<WifiOff size={48} color="#9ca3af" />
<WifiOff size={48} color="#9ca3af" pointerEvents="none" />
<Text className="text-lg text-gray-500 font-medium mt-4">Errore di connessione</Text>
<Text className="text-center text-gray-400 mt-2 px-10">
{connectionStatus.message}
@@ -162,7 +162,7 @@ export default function AutomationScreen() {
>
<View className="flex-1 justify-between">
<View className={`${bgColor} w-14 h-14 items-center justify-center rounded-2xl`}>
<IconComponent size={32} />
<IconComponent size={32} pointerEvents="none" />
</View>
<View>
<Text
@@ -182,7 +182,7 @@ export default function AutomationScreen() {
</View>
) : (
<View className="mt-20 items-center justify-center">
<WifiOff size={48} color="#9ca3af" />
<WifiOff size={48} color="#9ca3af" pointerEvents="none" />
<Text className="text-lg text-gray-500 font-medium mt-4">Nessuna area trovata</Text>
<Text className="text-center text-gray-400 mt-2">
{`Nessuna area per il piano "${selectedFloor}"`}

View File

@@ -79,7 +79,7 @@ export default function HomeScreen() {
</View>
<View className="flex-row gap-4 flex-shrink-0">
<TouchableOpacity className="p-3 bg-white/10 rounded-full active:bg-white/20" onPress={() => router.push('/profile')}>
<User size={28} color="white" />
<User size={28} color="white" pointerEvents="none"/>
</TouchableOpacity>
</View>
</View>
@@ -104,7 +104,7 @@ export default function HomeScreen() {
>
<View className="flex-row items-center gap-5">
<View className="bg-orange-100 p-4 rounded-full">
<AlertTriangle size={32} color="#f97316" />
<AlertTriangle size={32} color="#f97316" pointerEvents="none"/>
</View>
<View className="flex-1">
<Text className="font-bold text-gray-800 text-lg">Presenza incompleta</Text>
@@ -123,7 +123,7 @@ export default function HomeScreen() {
className="flex-1 bg-white p-6 rounded-3xl shadow-sm items-center justify-center gap-4 border border-gray-100 active:scale-[0.98]"
>
<View className="w-20 h-20 rounded-full bg-teal-50 items-center justify-center mb-1">
<QrCode size={40} color="#099499" />
<QrCode size={40} color="#099499" pointerEvents="none"/>
</View>
<Text className="text-lg font-bold text-gray-700 text-center">Nuova Presenza</Text>
</TouchableOpacity>
@@ -133,7 +133,7 @@ export default function HomeScreen() {
className="flex-1 bg-white p-6 rounded-3xl shadow-sm items-center justify-center gap-4 border border-gray-100 active:scale-[0.98]"
>
<View className="w-20 h-20 rounded-full bg-blue-50 items-center justify-center mb-1">
<CalendarDays size={40} color="#2563eb" />
<CalendarDays size={40} color="#2563eb" pointerEvents="none"/>
</View>
<Text className="text-lg font-bold text-gray-700 text-center">Gestisci Permessi</Text>
</TouchableOpacity>
@@ -159,7 +159,7 @@ export default function HomeScreen() {
{/* Icon */}
<View className={`${config.bg} p-4 rounded-2xl flex-shrink-0`}>
<IconComponent size={24} color={config.color} />
<IconComponent size={24} color={config.color} pointerEvents="none"/>
</View>
{/* Title and Subtitle */}
@@ -206,4 +206,4 @@ export default function HomeScreen() {
</ScrollView>
</View>
);
}
}

View File

@@ -12,10 +12,10 @@ import { SafeAreaView } from 'react-native-safe-area-context';
// Icon Mapping
const typeIcons: Record<string, (color: string) => JSX.Element> = {
Ferie: (color) => <CalendarIcon size={24} color={color} />,
Permesso: (color) => <Clock size={24} color={color} />,
Malattia: (color) => <Thermometer size={24} color={color} />,
Assenza: (color) => <CalendarX size={24} color={color} />,
Ferie: (color) => <CalendarIcon size={24} color={color} pointerEvents="none" />,
Permesso: (color) => <Clock size={24} color={color} pointerEvents="none" />,
Malattia: (color) => <Thermometer size={24} color={color} pointerEvents="none" />,
Assenza: (color) => <CalendarX size={24} color={color} pointerEvents="none" />,
};
export default function PermitsScreen() {
@@ -155,7 +155,7 @@ export default function PermitsScreen() {
onPress={() => setShowModal(true)}
className="absolute bottom-8 right-6 w-16 h-16 bg-[#099499] rounded-full shadow-lg items-center justify-center active:scale-90"
>
<Plus size={32} color="white" />
<Plus size={32} color="white" pointerEvents="none" />
</TouchableOpacity>
</View>
);

View File

@@ -110,7 +110,7 @@ export default function DocumentsScreen() {
<SafeAreaView edges={['top']} className='pt-5'>
<View className='flex-row items-center gap-4'>
<TouchableOpacity onPress={() => router.back()} className="p-2 rounded-full active:bg-gray-100">
<ChevronLeft size={28} color="#4b5563" />
<ChevronLeft size={28} color="#4b5563" pointerEvents="none" />
</TouchableOpacity>
<View className="flex-1">
<Text className="text-3xl font-bold text-gray-800">Documenti</Text>
@@ -126,7 +126,7 @@ export default function DocumentsScreen() {
{/* Search Bar */}
<View className={`flex-1 relative justify-center`}>
<View className="absolute left-4 z-10">
<Search size={24} color="#9ca3af" />
<Search size={24} color="#9ca3af" pointerEvents="none" />
</View>
<TextInput
placeholder="Cerca nome del documento..."
@@ -142,7 +142,7 @@ export default function DocumentsScreen() {
onPress={() => setShowRangePicker(true)}
className={`p-4 bg-white rounded-2xl shadow-sm border ${range.startDate ? 'border-[#099499]' : 'border-gray-200'}`}
>
<CalendarIcon size={24} color={range.startDate ? "#099499" : "#9ca3af"} />
<CalendarIcon size={24} color={range.startDate ? "#099499" : "#9ca3af"} pointerEvents="none" />
</TouchableOpacity>
</View>
@@ -166,12 +166,12 @@ export default function DocumentsScreen() {
<View key={doc.id} className="bg-white p-5 rounded-3xl shadow-sm flex-row items-center justify-between border border-gray-100">
<View className="flex-row items-center gap-5 flex-1">
<View className="bg-red-50 p-4 rounded-2xl">
<FileText size={32} color="#ef4444" />
<FileText size={32} color="#ef4444" pointerEvents="none" />
</View>
<View className="flex-1">
<Text className="font-bold text-gray-800 text-lg mb-1">{doc.title}</Text>
<View className="flex-row items-center mt-1">
<MapPin size={16} color="#9ca3af" />
<MapPin size={16} color="#9ca3af" pointerEvents="none" />
<Text className="text-sm text-gray-400 ml-1 font-medium">{formatTimestamp(doc.updated_at)}</Text>
</View>
</View>
@@ -179,7 +179,7 @@ export default function DocumentsScreen() {
<TouchableOpacity
onPress={() => downloadAndShareDocument(doc.mimetype, doc.title, doc.url)}
className="p-4 bg-gray-50 rounded-2xl active:bg-gray-100">
<Download size={24} color="#6b7280" />
<Download size={24} color="#6b7280" pointerEvents="none" />
</TouchableOpacity>
</View>
))}
@@ -195,7 +195,7 @@ export default function DocumentsScreen() {
onPress={() => setShowUploadModal(true)}
className="absolute bottom-8 right-6 w-16 h-16 bg-[#099499] rounded-full shadow-lg items-center justify-center active:scale-90"
>
<Plus size={32} color="white" />
<Plus size={32} color="white" pointerEvents="none" />
</TouchableOpacity>
{/* Document Upload Modal */}

View File

@@ -22,7 +22,7 @@ export default function ProfileScreen() {
<TouchableOpacity
onPress={() => router.back()}
>
<ChevronLeft size={28} color="white" />
<ChevronLeft size={28} color="white" pointerEvents="none"/>
</TouchableOpacity>
<View className="flex-row items-center gap-4">
<View className="w-16 h-16 rounded-full bg-white/20 items-center justify-center">
@@ -50,7 +50,7 @@ export default function ProfileScreen() {
<View className="mt-6 gap-5">
<View className="flex-row items-center gap-5">
<View className="w-14 h-14 bg-gray-100 rounded-2xl items-center justify-center">
<Mail size={24} color="#374151" />
<Mail size={24} color="#374151" pointerEvents="none" />
</View>
<View>
<Text className="text-lg text-gray-700 font-bold">Email</Text>
@@ -60,7 +60,7 @@ export default function ProfileScreen() {
<View className="flex-row items-center gap-5">
<View className="w-14 h-14 bg-gray-100 rounded-2xl items-center justify-center">
<User size={24} color="#374151" />
<User size={24} color="#374151" pointerEvents="none" />
</View>
<View>
<Text className="text-lg text-gray-700 font-bold">Ruolo</Text>
@@ -77,7 +77,7 @@ export default function ProfileScreen() {
<TouchableOpacity onPress={() => router.push('/profile/documents')} className="bg-white p-4 rounded-3xl shadow-sm flex-row items-center justify-between border border-gray-100 mb-4">
<View className="flex-row items-center gap-5">
<View className="bg-[#099499]/10 p-3.5 rounded-2xl">
<FileText size={26} color="#099499" />
<FileText size={26} color="#099499" pointerEvents="none" />
</View>
<View>
<Text className="text-lg text-gray-800 font-bold">I miei documenti</Text>
@@ -104,7 +104,7 @@ export default function ProfileScreen() {
<TouchableOpacity onPress={authContext.logOut} className="bg-white p-4 rounded-3xl shadow-sm flex-row items-center justify-between border border-gray-100">
<View className="flex-row items-center gap-5">
<View className="bg-red-50 p-3.5 rounded-2xl">
<LogOut size={26} color="#ef4444" />
<LogOut size={26} color="#ef4444" pointerEvents="none" />
</View>
<View>
<Text className="text-lg text-gray-800 font-bold">Esci</Text>
@@ -117,4 +117,4 @@ export default function ProfileScreen() {
</ScrollView>
</View>
);
}
}

View File

@@ -135,7 +135,7 @@ export default function SiteDocumentsScreen() {
<SafeAreaView edges={['top']} className='pt-5'>
<View className='flex-row items-center gap-4'>
<TouchableOpacity onPress={() => router.back()} className="p-2 -ml-2 rounded-full active:bg-gray-100">
<ChevronLeft size={28} color="#4b5563" />
<ChevronLeft size={28} color="#4b5563" pointerEvents="none" />
</TouchableOpacity>
<View className="flex-1">
@@ -168,7 +168,7 @@ export default function SiteDocumentsScreen() {
<View className="flex-row gap-2">
<View className="flex-1 relative justify-center">
<View className="absolute left-4 z-10">
<Search size={24} color="#9ca3af" />
<Search size={24} color="#9ca3af" pointerEvents="none" />
</View>
<TextInput
placeholder="Cerca documento..."
@@ -183,7 +183,7 @@ export default function SiteDocumentsScreen() {
onPress={() => setShowRangePicker(true)}
className={`p-4 bg-white rounded-2xl shadow-sm border ${range.startDate ? 'border-[#099499]' : 'border-gray-200'}`}
>
<CalendarIcon size={24} color={range.startDate ? "#099499" : "#9ca3af"} />
<CalendarIcon size={24} color={range.startDate ? "#099499" : "#9ca3af"} pointerEvents="none" />
</TouchableOpacity>
</View>
@@ -206,7 +206,7 @@ export default function SiteDocumentsScreen() {
<View key={doc.id} className="bg-white p-5 rounded-3xl shadow-sm flex-row items-center justify-between border border-gray-100">
<View className="flex-row items-center gap-5 flex-1">
<View className="bg-red-50 p-4 rounded-2xl">
<FileText size={32} color="#ef4444" />
<FileText size={32} color="#ef4444" pointerEvents="none" />
</View>
<View className="flex-1">
<Text className="font-bold text-gray-800 text-lg mb-1">{doc.title}</Text>
@@ -216,7 +216,7 @@ export default function SiteDocumentsScreen() {
<TouchableOpacity
onPress={() => handleDownloadAndShare(doc.mimetype, doc.title, doc.url)}
className="p-4 bg-gray-50 rounded-2xl active:bg-gray-100">
<Download size={24} color="#6b7280" />
<Download size={24} color="#6b7280" pointerEvents="none" />
</TouchableOpacity>
</View>
))}
@@ -232,7 +232,7 @@ export default function SiteDocumentsScreen() {
onPress={() => setShowUploadModal(true)}
className="absolute bottom-8 right-6 w-16 h-16 bg-[#099499] rounded-full shadow-lg items-center justify-center active:scale-90"
>
<Plus size={32} color="white" />
<Plus size={32} color="white" pointerEvents="none" />
</TouchableOpacity>
{/* Upload Document Modal */}

View File

@@ -66,7 +66,7 @@ export default function SitesScreen() {
{/* Search Bar */}
<View className={`relative justify-center`}>
<View className="absolute left-4 z-10">
<Search size={24} color="#9ca3af" />
<Search size={24} color="#9ca3af" pointerEvents="none" />
</View>
<TextInput
placeholder="Cerca per codice o nome cantiere..."
@@ -99,13 +99,13 @@ export default function SitesScreen() {
>
<View className="flex-row items-center gap-5 flex-1">
<View className="bg-blue-50 p-4 rounded-2xl">
<Building2 size={32} color="#2563eb" />
<Building2 size={32} color="#2563eb" pointerEvents="none" />
</View>
<View className="flex-1">
<Text className="text-base font-medium text-gray-400 mb-0.5">{site.code}</Text>
<Text className="font-bold text-gray-800 text-lg mb-1">{site.name}</Text>
<View className="flex-row items-center mt-1">
<MapPin size={16} color="#9ca3af" />
<MapPin size={16} color="#9ca3af" pointerEvents="none" />
<Text className="text-sm text-gray-400 ml-1 font-medium">
{site.attachments_count} Documenti disponibili
</Text>
@@ -113,7 +113,7 @@ export default function SitesScreen() {
</View>
</View>
<ChevronRight size={24} color="#9ca3af" />
<ChevronRight size={24} color="#9ca3af" pointerEvents="none" />
</TouchableOpacity>
))}