class métier + selectChanter toujours en cours
This commit is contained in:
@@ -4,12 +4,17 @@ 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";
|
||||
|
||||
const screenHeight = Dimensions.get("window").height;
|
||||
|
||||
export default function SelectChantier() {
|
||||
|
||||
const [search, setSearch] = useState('');
|
||||
const [isOpen,setIsOpen] = useState(false);
|
||||
const [chantiers,setChantiers] = useState([]);
|
||||
const [chantiers,setChantiers] = useState<Chantier[]>([exempleChantier,exempleChantier,exempleChantier,exempleChantier,exempleChantier,exempleChantier]);
|
||||
|
||||
|
||||
function onPressOpen(event: GestureResponderEvent): void {
|
||||
@@ -17,45 +22,62 @@ export default function SelectChantier() {
|
||||
}
|
||||
|
||||
|
||||
const renderChantier = () => {
|
||||
const renderChantier = (chantier:Chantier, index: number) => {
|
||||
return(
|
||||
<ThemedView lvl={0} style={styles.chantier}>
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
if(isOpen){
|
||||
if(!isOpen){
|
||||
return (
|
||||
<View style={styles.closedSelectZone}>
|
||||
<ThemedButton style={styles.button} lvl={2} onPress={onPressOpen}>
|
||||
<ThemedText style={styles.buttonText}>Open</ThemedText>
|
||||
</ThemedButton>
|
||||
<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 style={styles.openedSelectZone}>
|
||||
<BlurView intensity={1} blurReductionFactor={0.2} experimentalBlurMethod='dimezisBlurView' style={styles.blur}>
|
||||
<ThemedView lvl={0} opacity="40">
|
||||
|
||||
<View>
|
||||
<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>
|
||||
|
||||
|
||||
</View>
|
||||
</ScrollView>
|
||||
</ThemedView>
|
||||
)
|
||||
};
|
||||
}
|
||||
@@ -67,6 +89,13 @@ const styles = StyleSheet.create({
|
||||
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',
|
||||
@@ -90,11 +119,15 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
searchZone:{
|
||||
width: "100%",
|
||||
padding:20,
|
||||
marginTop:50,
|
||||
padding:10,
|
||||
marginTop:10,
|
||||
alignItems: 'center',
|
||||
},
|
||||
chantier:{
|
||||
padding:10,
|
||||
margin:10,
|
||||
borderRadius:10,
|
||||
//borderWidth: 1,
|
||||
},
|
||||
input: {
|
||||
width: '100%',
|
||||
|
||||
@@ -7,9 +7,11 @@ export type ThemedPressableProps = PressableProps & {
|
||||
darkColor?: string;
|
||||
lvl?:number;
|
||||
border?:number;
|
||||
opacity?:string;
|
||||
};
|
||||
|
||||
export function ThemedButton({ style, lightColor, darkColor,lvl=1,border=-1, ...otherProps }: ThemedPressableProps) {
|
||||
//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) {
|
||||
var lvlStr:string = "background";
|
||||
var borderColor ="";
|
||||
if(lvl>=0 && lvl<6){
|
||||
@@ -17,7 +19,7 @@ export function ThemedButton({ style, lightColor, darkColor,lvl=1,border=-1, ...
|
||||
}
|
||||
else lvlStr+='5';
|
||||
|
||||
const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor },lvlStr as 'background0'|'background1'|'background2'|'background3'|'background4'|'background5');
|
||||
const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor },lvlStr as 'background0'|'background1'|'background2'|'background3'|'background4'|'background5')+opacity;
|
||||
|
||||
|
||||
if(border!=-1){
|
||||
|
||||
@@ -8,10 +8,12 @@ export type ThemedTextInputProps = TextInputProps & {
|
||||
reverse?:boolean;
|
||||
lvl?:number;
|
||||
border?:number;
|
||||
opacity?:string;
|
||||
type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link';
|
||||
};
|
||||
|
||||
export function ThemedTextInput({style, lightColor, darkColor, reverse=false, lvl=1,border=-1,type = 'default', ...rest}: ThemedTextInputProps) {
|
||||
//nb : pour border ne pas oublier de mettre en plus "borderWidth" dans le style du composant /!\
|
||||
export function ThemedTextInput({style, lightColor, darkColor, reverse=false, lvl=1,border=-1,opacity="FF",type = 'default', ...rest}: ThemedTextInputProps) {
|
||||
|
||||
var text:string = 'text'
|
||||
if(reverse){
|
||||
@@ -26,7 +28,7 @@ export function ThemedTextInput({style, lightColor, darkColor, reverse=false, lv
|
||||
}
|
||||
else lvlStr+='5';
|
||||
|
||||
const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor },lvlStr as 'background0'|'background1'|'background2'|'background3'|'background4'|'background5');
|
||||
const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor },lvlStr as 'background0'|'background1'|'background2'|'background3'|'background4'|'background5')+opacity;
|
||||
|
||||
|
||||
if(border!=-1){
|
||||
|
||||
@@ -7,9 +7,12 @@ export type ThemedViewProps = ViewProps & {
|
||||
darkColor?: string;
|
||||
lvl?:number;
|
||||
border?:number;
|
||||
opacity?:string;
|
||||
};
|
||||
|
||||
export function ThemedView({ style, lightColor, darkColor,lvl=1,border=-1, ...otherProps }: ThemedViewProps) {
|
||||
|
||||
//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) {
|
||||
var lvlStr:string = "background";
|
||||
var borderColor ="";
|
||||
if(lvl>=0 && lvl<6){
|
||||
@@ -17,7 +20,7 @@ export function ThemedView({ style, lightColor, darkColor,lvl=1,border=-1, ...ot
|
||||
}
|
||||
else lvlStr+='5';
|
||||
|
||||
const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor },lvlStr as 'background0'|'background1'|'background2'|'background3'|'background4'|'background5');
|
||||
const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor },lvlStr as 'background0'|'background1'|'background2'|'background3'|'background4'|'background5')+opacity;
|
||||
|
||||
|
||||
if(border!=-1){
|
||||
|
||||
Reference in New Issue
Block a user