time picker reservas

This commit is contained in:
Maria Sanchez 2022-08-22 22:50:38 -06:00
parent d1976e988b
commit 03e78f24c5
2 changed files with 45 additions and 24 deletions

View File

@ -1,18 +1,17 @@
import React, {useContext, useEffect, useState} from "react";
import {
Box,
Heading,
VStack,
FormControl,
Input,
Button,
Center,
Select, CheckIcon
Select, CheckIcon, ScrollView
} from "native-base";
import { UserContext } from "../context/UserContext";
import { API } from "../environment/api";
import {TimePicker} from 'react-native-simple-time-picker';
import { View, StyleSheet } from "react-native";
export default function AreaComun({navigation}){
const { user } = useContext(UserContext)
@ -20,6 +19,12 @@ export default function AreaComun({navigation}){
const [areas, setAreas] = useState([])
const [isRequesting, setIsRequesting] = useState(false);
const [selectedHours, setSelectedHours] = useState(0);
const [selectedMinutes, setSelectedMinutes] = useState(0);
const [endSelectedHours, setEndSelectedHours] = useState(0);
const [endSelectedMinutes, setEndSelectedMinutes] = useState(0);
useEffect(() => {
const onRequestReservasData = async () => {
@ -68,6 +73,7 @@ export default function AreaComun({navigation}){
}} fontWeight="medium" size="xs">
Reserve su área común
</Heading>
<ScrollView showsVerticalScrollIndicator={false}>
<VStack space={3} mt="5">
<FormControl isRequired>
<FormControl.Label>Área común</FormControl.Label>
@ -80,31 +86,34 @@ export default function AreaComun({navigation}){
<Select.Item label={item.name} value={item.name} />
))}
</Select>
</FormControl>
<FormControl isRequired>
<FormControl.Label>Hora de inicio</FormControl.Label>
<Select selectedValue={service} minWidth="200" accessibilityLabel="Choose Service" placeholder="Hora de inicio" _selectedItem={{
bg: "teal.600",
endIcon: <CheckIcon size="5" />
}} mt={1} onValueChange={itemValue => setService(itemValue)}>
<Select.Item label="UX Research" value="ux" />
<Select.Item label="Web Development" value="web" />
</Select>
<View height="80" >
<TimePicker
selectedHours={selectedHours}
selectedMinutes={selectedMinutes}
onChange={(hours, minutes) => {
setSelectedHours(hours);
setSelectedMinutes(minutes);
}}/>
</View>
</FormControl>
<FormControl isRequired>
<FormControl.Label>Hora de finalización</FormControl.Label>
<Select selectedValue={service} minWidth="200" accessibilityLabel="Choose Service" placeholder="Hora de finalización" _selectedItem={{
bg: "teal.600",
endIcon: <CheckIcon size="5" />
}} mt={1} onValueChange={itemValue => setService(itemValue)}>
<Select.Item label="UX Research" value="ux" />
<Select.Item label="Web Development" value="web" />
<View height="80" >
<TimePicker
selectedHours={selectedHours}
//initial Hourse value
selectedMinutes={selectedMinutes}
//initial Minutes value
onChange={(hours, minutes) => {
setEndSelectedHours(hours);
setEndSelectedMinutes(minutes);
}}/>
</View>
</Select>
</FormControl>
@ -115,8 +124,19 @@ export default function AreaComun({navigation}){
Cancelar
</Button>
</VStack>
</ScrollView>
</Box>
</Center>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 10,
justifyContent: 'center',
alignItems: 'center',
height: 40
}
});

View File

@ -34,6 +34,7 @@
"react-native-reanimated": "~2.3.1",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.10.1",
"react-native-simple-time-picker": "^1.3.11",
"react-native-svg": "12.1.1",
"react-native-web": "0.17.1",
"universal-cookie": "^4.0.4"