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

2025-12-06 22:33:01 +01:00
parent a10b2fa953
commit c581f1511f
9 changed files with 321 additions and 151 deletions
--- a/components/example.tsx
+++ b/components/example.tsx
@@ -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',
+  },
+});
--- a/components/selectChantier.tsx
+++ b/components/selectChantier.tsx
@@ -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',
--- a/components/themed-button.tsx
+++ b/components/themed-button.tsx
@@ -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}/>;
 }
--- a/components/themed-textinpute.tsx
+++ b/components/themed-textinpute.tsx
@@ -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={[
--- a/components/themed-view.tsx
+++ b/components/themed-view.tsx
@@ -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} />;
 }