131 lines
3.4 KiB
TypeScript
131 lines
3.4 KiB
TypeScript
import { useChantier } from '@/app/ContextChantier';
|
|
import { useCallback, useState } from 'react';
|
|
import { Dimensions, LayoutAnimation, Modal, Pressable, StyleSheet, View } from 'react-native';
|
|
import Animated, { LinearTransition } from 'react-native-reanimated';
|
|
import { ThemedButton } from './themed-button';
|
|
import { ThemedText } from './themed-text';
|
|
import { ThemedView } from "./themed-view";
|
|
|
|
const { width, height } = Dimensions.get("window");
|
|
|
|
|
|
export default function SetStatus() {
|
|
|
|
const { chantier, setChantier} = useChantier();
|
|
const [currentSatus, setCurrentSearch] = useState("En cours");
|
|
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 {
|
|
LayoutAnimation.configureNext(
|
|
LayoutAnimation.Presets.easeInEaseOut
|
|
);
|
|
setIsOpen(!isOpen);
|
|
}
|
|
|
|
function selectSatus(status: string): void {
|
|
setOpenConfirmation(true);
|
|
setCurrentSearch(status);
|
|
setIsOpen(false);
|
|
}
|
|
|
|
|
|
|
|
const choice = (status:string, index: number) => {
|
|
return(
|
|
<Pressable key={index} onPress={() => selectSatus(status)}>
|
|
<View style={styles.satus}>
|
|
<ThemedText style={styles.centeredText}>{status}</ThemedText>
|
|
</View >
|
|
</Pressable>
|
|
);
|
|
};
|
|
|
|
|
|
return(
|
|
|
|
|
|
<Animated.View layout={LinearTransition.duration(200)} style={styles.windowBox}>
|
|
{isOpen && (<Pressable style={styles.autoClose} onPress={() => setIsOpen(false)}/>)}
|
|
|
|
<AnimatedThemedView layout={LinearTransition.duration(200)} lvl={2} shadow={true} style={styles.window}>
|
|
<ThemedButton style={styles.button} lvl={isOpen ? 1 : 1} onPress={() => onPressOpen()}>
|
|
<ThemedText style={styles.centeredText}>{currentSatus}</ThemedText>
|
|
</ThemedButton>
|
|
{isOpen && (
|
|
<>
|
|
{//TODO : Modal pour confirmer la changement
|
|
}
|
|
<View style={styles.menu}>
|
|
<View style={styles.list}>
|
|
|
|
{choices.map((str, index) => (
|
|
str!==currentSatus && choice(str, index)
|
|
))}
|
|
</View>
|
|
</View>
|
|
</>
|
|
)}
|
|
</AnimatedThemedView>
|
|
</Animated.View>
|
|
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
windowBox:{
|
|
zIndex: 2,
|
|
//backgroundColor: '#00FFFF40',
|
|
width:"30%",
|
|
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)',
|
|
},
|
|
menu:{
|
|
padding:0,
|
|
flex: 1,
|
|
//backgroundColor:'#FF00FF',
|
|
},
|
|
list:{
|
|
flex: 1,
|
|
//overflow: 'hidden',
|
|
borderRadius:10,
|
|
|
|
},
|
|
satus:{
|
|
padding:10,
|
|
margin:5,
|
|
},
|
|
button:{
|
|
width:'100%',
|
|
margin: 0,
|
|
borderRadius: 15,
|
|
padding: 10,
|
|
height:40,
|
|
},
|
|
centeredText:{
|
|
textAlign: 'center',
|
|
}
|
|
});
|