addChanter, selectChefChantier, en cour + Update de themed-button pour prendre en charge le changement de theme pendant la pression

components/selectChefChantier.tsx

@@ -0,0 +1,126 @@
+import { useChantier } from '@/app/ContextChantier';
+import { changeChantierStatus } from "@/services/ressourcesService";
+import { useState } from 'react';
+import { Dimensions, LayoutAnimation, Modal, Pressable, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import Animated, { LinearTransition } from 'react-native-reanimated';
+import { ThemedButton } from './theme/themed-button';
+import { ThemedText } from './theme/themed-text';
+import { ThemedView } from "./theme/themed-view";
+import { User } from '@/class/class';
+
+const { width, height } = Dimensions.get("window");
+
+type Props = {
+
+    style?: StyleProp<ViewStyle>;
+};
+
+export default function SelectChafChantier({style , ...otherProps }: Props) {
+
+    const { chantier, setChantier} = useChantier();
+    const [chefDeChantier, setChefDeChantier] = useState<User>();
+    const [tempStatus, setTempStatus] = useState("");
+    const [isOpen,setIsOpen] = useState(false);
+    const [openConfirmation,setOpenConfirmation] = useState(false);
+
+    const AnimatedThemedView = Animated.createAnimatedComponent(ThemedView);
+
+    const choices = ["En cours","Interrompu","Terminé","Non réalisé"]
+
+    function onPressOpen(): void {
+        setIsOpen(!isOpen);
+    }
+
+
+
+
+    const chefChantierSearch = () => {
+      return(
+        <Modal transparent={true} >
+          <View style={styles.overlay}>
+            <ThemedView style={styles.overlayView}>
+              <ThemedText style={{fontSize: 25}}>Rechercher un chef de chantier :</ThemedText>
+
+              <View style={styles.overlayView}>
+                <ThemedButton lvl={2} border={5} style={styles.buttonValid} onPress={() => setIsOpen(false)}>
+                  <ThemedText style={{fontSize: 25}}>Annuler</ThemedText>
+                </ThemedButton>
+              </View>
+            </ThemedView>
+          </View>
+        </Modal>
+      )
+    }
+
+    return(
+            <ThemedButton style={style} lvl={1} onPress={() => onPressOpen()}>
+                <ThemedText style={styles.centeredText}>{chefDeChantier?chefDeChantier.name+" "+chefDeChantier.last_name:"selectionner un chef de chantier"}</ThemedText>
+                {isOpen && chefChantierSearch()}
+            </ThemedButton>
+            
+      
+    )
+}
+
+const styles = StyleSheet.create({
+
+  windowBox:{
+    zIndex: 2,
+    //backgroundColor: '#00FFFF40',
+    width:"100%",
+    padding: 10,
+    paddingLeft: 0,
+    //overflow: 'hidden',
+  },
+  window:{
+    borderRadius:15,
+    //backgroundColor: '#00FF00',
+    overflow: 'hidden',
+    position: 'relative',
+  },
+  autoClose: {
+    
+    position: 'absolute',
+    top: -height,
+    left: -width,
+    width:width*2,
+    height:height*2,
+    //backgroundColor: 'rgba(255, 0, 0, 0.5)',
+  },
+  button:{
+    width:'100%',
+    margin: 0,
+    borderRadius: 15,
+    padding: 10,
+    height:40,
+    justifyContent: 'center',
+  },
+  centeredText:{
+    textAlign: 'center',
+  },
+  overlay:{
+    backgroundColor:'#00000080',
+    padding:"5%",
+    paddingVertical:"20%",
+    width:"100%",
+    height:"100%",
+  },
+  overlayView:{
+    borderRadius: 20,
+    padding: 20,
+    alignItems: "center",
+    width: "100%",
+    //backgroundColor:'#ff0000',
+  },
+  buttonValid:{
+    //borderWidth: 2,
+    width:'100%',
+    margin: 0,
+    borderRadius: 15,
+    padding: 10,
+    height:60,
+    alignItems: "center",
+    justifyContent: 'center',
+  },
+  
+});

components/theme/themed-button.tsx

@@ -6,23 +6,32 @@ export type ThemedPressableProps = PressableProps & {
   lightColor?: string;
   darkColor?: string;
   lvl?:number;
+  lvlPressed?: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",shadow=false, ...otherProps }: ThemedPressableProps) {
+export function ThemedButton({ style, lightColor, darkColor,lvl=1,lvlPressed=1,border=-1,opacity="FF",shadow=false, ...otherProps }: ThemedPressableProps) {
   var lvlStr:string = "background";
+  var lvlStrPressed:string = "background";
   var borderColor ="";
   var borderWidth = 0;
+
   if(lvl>=0 && lvl<6){
     lvlStr+=lvl;
   }
   else lvlStr+='5';
 
+  if((lvl+lvlPressed)>=0 && (lvl+lvlPressed)<6){
+    lvlStrPressed+=(lvl+lvlPressed);
+  }
+  else lvlStrPressed+='0';
+
   const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor },lvlStr as 'background0'|'background1'|'background2'|'background3'|'background4'|'background5')+opacity;
 
+  const backgroundPressed = useThemeColor({ light: lightColor, dark: darkColor },lvlStrPressed as 'background0'|'background1'|'background2'|'background3'|'background4'|'background5')+opacity;
 
   if(border!=-1){
     var borderStr = "";
@@ -46,5 +55,9 @@ export function ThemedButton({ style, lightColor, darkColor,lvl=1,border=-1,opac
     shadowRadius: 6,
   }
 
-  return <Pressable  style={(state) =>[{ backgroundColor, borderColor, borderWidth }, shadow && shadowStyle, typeof style === 'function' ? style(state) : style,]} {...otherProps}/>;
+  return <Pressable  style={(state) =>[{
+    backgroundColor: state.pressed ? backgroundPressed: backgroundColor,
+    borderColor,
+    borderWidth 
+  }, shadow && shadowStyle, typeof style === 'function' ? style(state) : style,]} {...otherProps}/>;
 }