133 lines
3.5 KiB
TypeScript
133 lines
3.5 KiB
TypeScript
import { useChantier } from '@/app/ContextChantier';
|
|
import { 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 { ThemedTextInput } from './themed-textinput';
|
|
import { ThemedView } from "./themed-view";
|
|
|
|
const screenHeight = Dimensions.get("window").height;
|
|
|
|
|
|
|
|
export default function SetStatus() {
|
|
|
|
const { chantier, setChantier} = useChantier();
|
|
const [currentSatus, setCurrentSearch] = useState("En cours");
|
|
const [isOpen,setIsOpen] = useState(false);
|
|
|
|
const AnimatedThemedView = Animated.createAnimatedComponent(ThemedView);
|
|
const AnimatedThemedText = Animated.createAnimatedComponent(ThemedText);
|
|
const AnimatedThemedButton = Animated.createAnimatedComponent(ThemedButton);
|
|
const AnimatedThemedTextInput = Animated.createAnimatedComponent(ThemedTextInput);
|
|
|
|
const choices = ["En cours","Interrompu","Terminé","Non réalisé"]
|
|
|
|
function onPressOpen(): void {
|
|
LayoutAnimation.configureNext(
|
|
LayoutAnimation.Presets.easeInEaseOut
|
|
);
|
|
setIsOpen(!isOpen);
|
|
}
|
|
|
|
function selectSatus(status: string): void {
|
|
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(
|
|
<>
|
|
<Modal
|
|
visible={isOpen}
|
|
transparent
|
|
animationType="none"
|
|
onRequestClose={() => setIsOpen(false)}
|
|
>
|
|
{isOpen && (
|
|
<Pressable
|
|
style={styles.overlay}
|
|
onPress={() => setIsOpen(false)}
|
|
/>
|
|
)}
|
|
</Modal>
|
|
<Animated.View layout={LinearTransition.duration(200)} style={styles.windowBox}>
|
|
<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 &&
|
|
<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({
|
|
overlay: {
|
|
...StyleSheet.absoluteFillObject,
|
|
zIndex: 1,
|
|
},
|
|
windowBox:{
|
|
//backgroundColor: '#00FFFF40',
|
|
width:"30%",
|
|
padding: 10,
|
|
paddingLeft: 0,
|
|
overflow: 'hidden',
|
|
},
|
|
window:{
|
|
borderRadius:15,
|
|
//backgroundColor: '#00FF00',
|
|
overflow: 'hidden',
|
|
},
|
|
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',
|
|
fontSize: 13,
|
|
}
|
|
});
|