122 lines
2.7 KiB
TypeScript
122 lines
2.7 KiB
TypeScript
import { useState } from 'react';
|
|
import { Button, GestureResponderEvent, Pressable, ScrollView, StyleSheet, View } from 'react-native';
|
|
import { ThemedTextInput } from './themed-textinpute';
|
|
import { ThemedView } from "./themed-view";
|
|
import { ThemedText } from './themed-text';
|
|
import { ThemedButton } from './themed-button';
|
|
|
|
export default function SelectChantier() {
|
|
|
|
const [search, setSearch] = useState('');
|
|
const [isOpen,setIsOpen] = useState(false);
|
|
const [chantiers,setChantiers] = useState([]);
|
|
|
|
|
|
function onPressOpen(event: GestureResponderEvent): void {
|
|
setIsOpen(!isOpen);
|
|
}
|
|
|
|
|
|
const renderChantier = () => {
|
|
return(
|
|
<ThemedView lvl={0} style={styles.chantier}>
|
|
</ThemedView>
|
|
);
|
|
};
|
|
|
|
if(isOpen){
|
|
return (
|
|
<View style={styles.closedSelectZone}>
|
|
<ThemedButton style={styles.button} lvl={2} onPress={onPressOpen}>
|
|
<ThemedText style={styles.buttonText}>Open</ThemedText>
|
|
</ThemedButton>
|
|
</View>
|
|
)
|
|
}
|
|
else{
|
|
return(
|
|
<ThemedView lvl={2} style={styles.openedSelectZone}>
|
|
<ScrollView>
|
|
<ThemedButton style={styles.buttonOpen} lvl={3} onPress={onPressOpen}>
|
|
<ThemedText style={styles.buttonText}>Close</ThemedText>
|
|
</ThemedButton>
|
|
<View style={styles.searchZone}>
|
|
<ThemedTextInput
|
|
lvl={1}
|
|
border={5}
|
|
style={styles.input}
|
|
placeholder='Rechercher un chantier'
|
|
value={search}
|
|
onChangeText={setSearch}
|
|
/>
|
|
</View>
|
|
|
|
<View>
|
|
|
|
</View>
|
|
</ScrollView>
|
|
</ThemedView>
|
|
)
|
|
};
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
openedSelectZone:{
|
|
position: 'absolute',
|
|
width: "100%",
|
|
borderRadius: 10,
|
|
zIndex: 9999,
|
|
elevation: 9999,
|
|
},
|
|
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,
|
|
|
|
|
|
},
|
|
searchZone:{
|
|
width: "100%",
|
|
padding:20,
|
|
marginTop:50,
|
|
alignItems: 'center',
|
|
},
|
|
chantier:{
|
|
},
|
|
input: {
|
|
width: '100%',
|
|
borderWidth: 1,
|
|
borderRadius: 10,
|
|
padding: 10,
|
|
fontSize: 16,
|
|
},
|
|
button:{
|
|
width:'100%',
|
|
margin: 5,
|
|
borderRadius: 10,
|
|
padding: 10,
|
|
},
|
|
buttonOpen:{
|
|
width:'50%',
|
|
margin: 5,
|
|
borderRadius: 10,
|
|
padding: 10,
|
|
},
|
|
buttonText:{
|
|
textAlign: 'center',
|
|
}
|
|
});
|