time picker reservas
This commit is contained in:
parent
d1976e988b
commit
03e78f24c5
|
@ -1,18 +1,17 @@
|
|||
import React, {useContext, useEffect, useState} from "react";
|
||||
|
||||
import {
|
||||
Box,
|
||||
Heading,
|
||||
VStack,
|
||||
FormControl,
|
||||
Input,
|
||||
FormControl,
|
||||
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" />
|
||||
|
||||
</Select>
|
||||
<View height="80" >
|
||||
<TimePicker
|
||||
selectedHours={selectedHours}
|
||||
//initial Hourse value
|
||||
selectedMinutes={selectedMinutes}
|
||||
//initial Minutes value
|
||||
onChange={(hours, minutes) => {
|
||||
setEndSelectedHours(hours);
|
||||
setEndSelectedMinutes(minutes);
|
||||
}}/>
|
||||
</View>
|
||||
|
||||
</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
|
||||
}
|
||||
});
|
|
@ -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"
|
||||
|
|
Loading…
Reference in New Issue