vuminh224/mmm-projet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

selection chantier (animation,correction) ; ajustement et amélioration du thème ; chantier provider

Browse Source
This commit is contained in:
Rochas
2025-12-06 22:33:01 +01:00
parent a10b2fa953
commit c581f1511f
9 changed files with 321 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
app/(tabs)/bonjourFL.tsx
View File

@@ -6,6 +6,11 @@ import { useLocalSearchParams, useRouter } from 'expo-router';
import React, { useMemo, useState } from 'react';
import { Button, FlatList, Image, StyleSheet, Text } from 'react-native';
import rawConcerts from '../../data/concerts.json';
import Constants from 'expo-constants' //pour connaître la taille de la barre menu de l'OS en haut
import Example from '@/components/example';
import { useChantier } from '../Context';
type Concert = {
group: string;
@@ -23,6 +28,8 @@ export default function BonjourScreen() {
const router = useRouter();
const { nom, prenom } = useLocalSearchParams(); // Recup data ecran precedent
const [search, setSearch] = useState('');
const { chantier, setChantier } = useChantier();
const concertsData: Concert[] = Array.isArray(rawConcerts)
@@ -44,9 +51,9 @@ export default function BonjourScreen() {
return null;
}
return(
<ThemedView lvl={2} border={5} style={styles.card}>
<ThemedView lvl={1} shadow={true} style={styles.card}>
<Image source={{ uri: item.Image }} style={styles.image} />
<ThemedView lvl={2} style={styles.info}>
<ThemedView lvl={1} style={styles.info}>
<ThemedText style={styles.group}>{item.group}</ThemedText>
<ThemedText>{item.date}</ThemedText>
<ThemedText>{item.location}</ThemedText>
@@ -60,29 +67,27 @@ export default function BonjourScreen() {
return(
<ThemedView style={styles.container}>
<ThemedView style={styles.selectChantier}>
<SelectChantier ></SelectChantier>
</ThemedView>
<ThemedView lvl={3} style={styles.container}>
<FlatList
data={filteredData}
renderItem={renderItem}
keyExtractor={(_, index) => index.toString()}
contentContainerStyle={{ paddingBottom: 40 }}
ListHeaderComponent={
<ThemedView style={styles.header}>
<ThemedView opacity="00" style={styles.header}>
<ThemedText style={styles.text}>
Bonjour {prenom} {nom}
Bonjour {prenom} {nom} {chantier&&chantier.chef.nom}
</ThemedText>
<ThemedTextInput
lvl={0}
border={5}
style={styles.input}
placeholder="Rechercher un groupe..."
value={search}
onChangeText={setSearch}
/>
<ThemedView style={styles.inputBack} shadow={true}>
<ThemedTextInput
lvl={0}
style={styles.input}
placeholder="Rechercher un groupe..."
value={search}
onChangeText={setSearch}
/>
</ThemedView>
</ThemedView>
}
ListEmptyComponent={
@@ -93,6 +98,11 @@ export default function BonjourScreen() {
<ThemedView style={styles.footer}>
<Button title="Retour" onPress={() => router.push("/(tabs)/mapScreen") } />
</ThemedView>
<ThemedView style={{width:"100%", position: 'absolute', backgroundColor:'transparent',}}>
<SelectChantier ></SelectChantier>
</ThemedView>
</ThemedView>
)
}
@@ -100,7 +110,8 @@ export default function BonjourScreen() {
const styles = StyleSheet.create({
container: {
flex: 1,
//backgroundColor: '#fff',
marginTop: Constants.statusBarHeight, //pour la barre menu du haut
//backgroundColor: '#00FFFF',
},
header: {
marginTop: 60,
@@ -113,9 +124,14 @@ const styles = StyleSheet.create({
fontWeight: 'bold',
marginBottom: 10,
},
inputBack:{
width:"100%",
borderRadius:10,
backgroundColor:'transparent'
},
input: {
width: '100%',
borderWidth: 1,
//borderWidth: 1,
//borderColor: '#ccc',
borderRadius: 10,
padding: 10,
@@ -125,11 +141,12 @@ const styles = StyleSheet.create({
flexDirection: 'row',
marginHorizontal: 20,
marginBottom: 15,
borderWidth: 1,
//borderWidth: 1,
//borderColor: '#ddd',
borderRadius: 10,
padding: 10,
//backgroundColor: '#fafafa',
},
image: {
width: 80,
@@ -154,7 +171,4 @@ const styles = StyleSheet.create({
marginTop: 30,
color: '#888',
},
selectChantier:{
width:"100%",
},
});

36
app/Context.tsx Normal file
View File

@@ -0,0 +1,36 @@
import { Chantier, Chef, exempleChantier } from '@/class/class';
import { createContext, ReactNode, useContext, useMemo, useState } from 'react';
type ChantierContextType = {
chantier: Chantier | null;
setChantier: (p: Chantier | null) => void;
};
const ChantierContext = createContext<ChantierContextType | null>(null);
type ChantierProviderProps = {
children: ReactNode;
};
export const ChantierProvider = ({ children }: ChantierProviderProps) => {
const [chantier, setChantier] = useState<Chantier | null>(null);
const value = useMemo(
() => ({ chantier, setChantier }),
[chantier]
);
return (
<ChantierContext.Provider value={value}>
{children}
</ChantierContext.Provider>
);
};
export const useChantier = () => {
const context = useContext(ChantierContext);
if (!context) {
throw new Error('useChantier doit être utilisé dans <ChantierProvider>');
}
return context;
};

39
app/_layout.tsx
View File

@@ -13,6 +13,10 @@ import { useRouter } from "expo-router";
import { useColorScheme } from "@/hooks/use-color-scheme";
import { doc, getDoc } from "firebase/firestore";
import { UIManager, Platform } from 'react-native';
import { ChantierProvider } from "./Context";
export const unstable_settings = {
anchor: "(tabs)",
};
@@ -23,6 +27,14 @@ export default function RootLayout() {
const [user, setUser] = useState<User | null>(null);
const [userRole, setUserRole] = useState<string | null>(null);
useEffect(() => {
if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
}, []);
useEffect(() => {
const unsubscribe = onAuthStateChanged(auth, async (currentUser) => {
setUser(currentUser);
@@ -56,18 +68,19 @@ export default function RootLayout() {
}, []);
return (
<ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
<Stack>
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
<Stack.Screen name="selectChantier" options={{ headerShown: false }}/>
<Stack.Screen
name="modal"
options={{ presentation: "modal", title: "Modal" }}
/>
<Stack.Screen name="login" options={{ headerShown: false }} />
</Stack>
<StatusBar style="auto" />
</ThemeProvider>
<ChantierProvider>
<ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
<Stack>
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
<Stack.Screen name="selectChantier" options={{ headerShown: false }}/>
<Stack.Screen
name="modal"
options={{ presentation: "modal", title: "Modal" }}
/>
<Stack.Screen name="login" options={{ headerShown: false }} />
</Stack>
<StatusBar style="auto" />
</ThemeProvider>
</ChantierProvider>
);
}

68
components/example.tsx Normal file
View File

@@ -0,0 +1,68 @@
import React, { useEffect, useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, LayoutAnimation, Platform, UIManager } from 'react-native';
import Animated, { Layout } from 'react-native-reanimated';
export default function Example() {
useEffect(() => {
// Activer sur Android
if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
}, []);
const [isOpen, setIsOpen] = useState(false);
function onPressOpen() {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
setIsOpen(prev => !prev);
}
return (
<View style={styles.container}>
<TouchableOpacity onPress={onPressOpen} style={styles.button}>
<Text>Toggle</Text>
</TouchableOpacity>
<Animated.View layout={Layout.springify()} style={[styles.box, isOpen ? styles.boxOpen : styles.boxClosed]}>
<View
style={{
width: '100%',
height: '100%',
backgroundColor: 'tomato',
}}
>
<View
style={{
width: '10%',
height: '10%',
backgroundColor: '#FFFFFF',
}}
>
</View>
</View>
</Animated.View>
</View>
);
}
const styles = StyleSheet.create({
container: { padding: 20 },
button: { marginBottom: 12, padding: 10, backgroundColor: '#eee' },
box: {
// important pour masquer l'excédent pendant l'animation
overflow: 'hidden',
},
boxClosed: {
height: 10,
width:10,
//backgroundColor: '#00FF00',
},
boxOpen: {
// mettre une valeur numérique (pas 'auto')
height: 120,
width:120,
//backgroundColor: '#00FF00',
},
});

214
components/selectChantier.tsx
View File

@@ -1,133 +1,152 @@
import { useState } from 'react';
import { Button, GestureResponderEvent, Pressable, ScrollView, StyleSheet, View } from 'react-native';
import { Button, GestureResponderEvent, Pressable, ScrollView, StyleSheet, View, LayoutAnimation } from 'react-native';
import { ThemedTextInput } from './themed-textinpute';
import { ThemedView } from "./themed-view";
import { ThemedText } from './themed-text';
import { ThemedButton } from './themed-button';
import { Chantier, Chef, exempleChantier } from '@/class/class';
import {BlurView} from 'expo-blur';
import { Dimensions } from "react-native";
import Animated, { Layout,LinearTransition,Easing,runOnJS } from 'react-native-reanimated';
import { useChantier } from '@/app/Context';
const screenHeight = Dimensions.get("window").height;
/*
<ThemedView style={{width:"100%", position: 'absolute', backgroundColor:'transparent',}}>
<SelectChantier ></SelectChantier>
</ThemedView>
*/
export default function SelectChantier() {
const { chantier, setChantier } = useChantier();
const [search, setSearch] = useState('');
const [isOpen,setIsOpen] = useState(false);
const [chantiers,setChantiers] = useState<Chantier[]>([exempleChantier,exempleChantier,exempleChantier,exempleChantier,exempleChantier,exempleChantier]);
const AnimatedThemedView = Animated.createAnimatedComponent(ThemedView);
const AnimatedThemedText = Animated.createAnimatedComponent(ThemedText);
const AnimatedThemedButton = Animated.createAnimatedComponent(ThemedButton);
const AnimatedThemedTextInput = Animated.createAnimatedComponent(ThemedTextInput);
function onPressOpen(event: GestureResponderEvent): void {
function onPressOpen(): void {
LayoutAnimation.configureNext(
LayoutAnimation.Presets.easeInEaseOut
);
setIsOpen(!isOpen);
}
function selectChantier(chantier: Chantier): void {
setChantier(chantier);
setIsOpen(false);
}
const renderChantier = (chantier:Chantier, index: number) => {
return(
<ThemedView key={index} lvl={3} style={styles.chantier}>
<ThemedText>adresse: {chantier.adresse}</ThemedText>
<ThemedText>chef de chantier: {chantier.chef.prenom} {chantier.chef.nom}</ThemedText>
<ThemedText>date de début: {chantier.dateDep}</ThemedText>
<ThemedText>etat: {chantier.etat}</ThemedText>
</ThemedView>
<Pressable key={index} onPress={() => selectChantier(chantier)}>
<ThemedView lvl={4} style={styles.chantier}>
<ThemedText>adresse: {chantier.adresse}</ThemedText>
<ThemedText>chef de chantier: {chantier.chef.prenom} {chantier.chef.nom}</ThemedText>
<ThemedText >date de début: {chantier.dateDep}</ThemedText>
<ThemedText>etat: {chantier.etat}</ThemedText>
</ThemedView >
</Pressable>
);
};
if(!isOpen){
return (
<View style={styles.closedSelectZone}>
<ThemedButton style={styles.button} lvl={2} onPress={onPressOpen}>
<ThemedText style={styles.buttonText}>Open</ThemedText>
return(
<Animated.View
layout={LinearTransition.duration(200)}
style={isOpen ? styles.windowOpean : styles.windowClose}>
<AnimatedThemedView layout={LinearTransition.duration(200)} lvl={2} shadow={true} style={styles.window}>
<ThemedButton style={isOpen ? styles.buttonOpen : styles.buttonClose} lvl={isOpen ? 1 : 1} onPress={() => onPressOpen()}>
<ThemedText style={styles.buttonText}>{isOpen ? "Close" : "Open"}</ThemedText>
</ThemedButton>
</View>
{isOpen &&
<View style={styles.menu}>
<ThemedTextInput
lvl={1}
border={4}
style={styles.input}
placeholder='Rechercher un chantier'
value={search}
onChangeText={setSearch}
/>
<ThemedView lvl={2} style={styles.list}>
<ScrollView contentContainerStyle={styles.chantiersList} >
{chantiers.map((chantier, index) => (
renderChantier(chantier, index)
))
}
</ScrollView>
</ThemedView>
</View>
}
</AnimatedThemedView>
</Animated.View>
)
}
else{
return(
<View style={styles.openedSelectZone}>
<BlurView intensity={1} blurReductionFactor={0.2} experimentalBlurMethod='dimezisBlurView' style={styles.blur}>
<ThemedView lvl={0} opacity="40">
<ThemedButton style={styles.buttonOpen} lvl={3} onPress={onPressOpen}>
<ThemedText style={styles.buttonText}>Close</ThemedText>
</ThemedButton>
<View style={styles.searchZone}>
<ThemedTextInput
lvl={1}
border={4}
style={styles.input}
placeholder='Rechercher un chantier'
value={search}
onChangeText={setSearch}
/>
</View>
<ScrollView>
{chantiers.map((chantier, index) => (
renderChantier(chantier, index)
))
}
</ScrollView>
</ThemedView>
</BlurView>
</View>
)
};
}
const styles = StyleSheet.create({
openedSelectZone:{
position: 'absolute',
width: "100%",
borderRadius: 10,
zIndex: 9999,
elevation: 9999,
overflow: "hidden",
paddingTop:25,
height: screenHeight/2,
},
blur:{
/*flex: 1,*/
/*backgroundColor: "rgba(255,255,255,0.0001)",*/
},
closedSelectZone:{
position: 'absolute',
width: "50%",
borderRadius: 10,
zIndex: 9999,
elevation: 9999,
},
titleContainer: {
flexDirection: 'row',
alignItems: 'center',
gap: 8,
},
searchMenu:{
color:'#FFAAAA',
borderRadius: 5,
width: "100%",
margin: 0,
windowClose:{
//backgroundColor: '#00FFFF',
//borderRadius:10,
padding: 10,
width:"50%",
height:60,
overflow: 'hidden',
},
windowOpean:{
//backgroundColor: '#00FFFF',
//borderRadius:10,
width:"100%",
height: screenHeight/2,
padding: 10,
},
window:{
borderRadius:15,
height: "100%",
//backgroundColor: '#00FF00',
overflow: 'hidden',
},
menu:{
padding:5,
flex: 1,
minHeight: 0,
//backgroundColor:'#FF00FF',
},
list:{
flex: 1,
overflow: 'hidden',
borderRadius:10,
},
chantiersList:{
//padding:5,
//backgroundColor:'0000FF',
//flexDirection: 'row',
//alignItems: 'center',
gap: 8,
},
searchZone:{
width: "100%",
padding:10,
marginTop:10,
alignItems: 'center',
},
chantier:{
padding:10,
margin:10,
padding:5,
//marginTop:5,
//margin:5,
borderRadius:10,
//borderWidth: 1,
},
input: {
width: '100%',
@@ -135,18 +154,21 @@ const styles = StyleSheet.create({
borderRadius: 10,
padding: 10,
fontSize: 16,
marginBottom:10,
},
button:{
buttonClose:{
width:'100%',
margin: 5,
borderRadius: 10,
margin: 0,
borderRadius: 15,
padding: 10,
height:40,
},
buttonOpen:{
width:'50%',
margin: 5,
borderRadius: 10,
padding: 10,
height:40,
},
buttonText:{
textAlign: 'center',

17
components/themed-button.tsx
View File

@@ -1,4 +1,4 @@
import { Pressable, type PressableProps } from 'react-native';
import { Pressable, ViewStyle, type PressableProps } from 'react-native';
import { useThemeColor } from '@/hooks/use-theme-color';
@@ -8,10 +8,11 @@ export type ThemedPressableProps = PressableProps & {
lvl?:number;
border?:number;
opacity?:string;
shadow?: boolean;
};
//nb : pour border ne pas oublier de mettre en plus "borderWidth" dans le style du composant /!\
export function ThemedButton({ style, lightColor, darkColor,lvl=1,border=-1,opacity="FF", ...otherProps }: ThemedPressableProps) {
export function ThemedButton({ style, lightColor, darkColor,lvl=1,border=-1,opacity="FF",shadow=false, ...otherProps }: ThemedPressableProps) {
var lvlStr:string = "background";
var borderColor ="";
if(lvl>=0 && lvl<6){
@@ -33,7 +34,15 @@ export function ThemedButton({ style, lightColor, darkColor,lvl=1,border=-1,opac
}
}
const shadowStyle: ViewStyle = {
//android
elevation: 10,
//iOS
shadowColor: '#000',
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.2,
shadowRadius: 6,
}
return <Pressable style={(state) =>[{ backgroundColor, borderColor }, typeof style === 'function' ? style(state) : style,]} {...otherProps}/>;
return <Pressable style={(state) =>[{ backgroundColor, borderColor }, shadow && shadowStyle, typeof style === 'function' ? style(state) : style,]} {...otherProps}/>;
}

3
components/themed-textinpute.tsx
View File

@@ -1,4 +1,4 @@
import { StyleSheet, TextInput, type TextInputProps } from 'react-native';
import { StyleSheet, TextInput, ViewStyle, type TextInputProps } from 'react-native';
import { useThemeColor } from '@/hooks/use-theme-color';
@@ -41,7 +41,6 @@ export function ThemedTextInput({style, lightColor, darkColor, reverse=false, lv
}
}
return (
<TextInput
style={[

17
components/themed-view.tsx
View File

@@ -1,4 +1,4 @@
import { View, type ViewProps } from 'react-native';
import { View, ViewStyle, type ViewProps } from 'react-native';
import { useThemeColor } from '@/hooks/use-theme-color';
@@ -8,11 +8,12 @@ export type ThemedViewProps = ViewProps & {
lvl?:number;
border?:number;
opacity?:string;
shadow?: boolean;
};
//nb : pour border ne pas oublier de mettre en plus "borderWidth" dans le style du composant /!\
export function ThemedView({ style, lightColor, darkColor,lvl=1,border=-1,opacity="FF", ...otherProps }: ThemedViewProps) {
export function ThemedView({ style, lightColor, darkColor,lvl=1,border=-1,opacity="FF",shadow=false, ...otherProps }: ThemedViewProps) {
var lvlStr:string = "background";
var borderColor ="";
if(lvl>=0 && lvl<6){
@@ -34,7 +35,15 @@ export function ThemedView({ style, lightColor, darkColor,lvl=1,border=-1,opacit
}
}
const shadowStyle: ViewStyle = {
//android
elevation: 10,
//iOS
shadowColor: '#000',
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.2,
shadowRadius: 6,
}
return <View style={[{ backgroundColor, borderColor }, style]} {...otherProps} />;
return <View style={[{ backgroundColor, borderColor }, shadow && shadowStyle, style]} {...otherProps} />;
}

20
constants/theme.ts
View File

@@ -13,11 +13,11 @@ export const Colors = {
text: '#11181C',
text_: '#ECEDEE',
background0: '#ffffff',
background1: '#F0F0F0',
background2: '#E0E0E0',
background3: '#D0D0D0',
background4: '#C0C0C0',
background5: '#B0B0B0',
background1: '#F1F1F0',
background2: '#E2E1E0',
background3: '#D3D2D0',
background4: '#C4C2C0',
background5: '#B5B3B0',
tint: tintColorLight,
icon: '#687076',
tabIconDefault: '#687076',
@@ -27,11 +27,11 @@ export const Colors = {
text: '#ECEDEE',
text_: '#11181C',
background0: '#000000',
background1: '#101112',
background2: '#202224',
background3: '#303336',
background4: '#404448',
background5: '#50555A',
background1: '#111010',
background2: '#222120',
background3: '#333130',
background4: '#444240',
background5: '#555250',
tint: tintColorDark,
icon: '#9BA1A6',
tabIconDefault: '#9BA1A6',