Add duration selector

This commit is contained in:
rui hildt 2020-05-28 15:08:31 +02:00
parent 733060d770
commit a0cf11a9df
3 changed files with 49 additions and 3 deletions

View File

@ -0,0 +1,9 @@
export const durations = [
{ duration: 30, label: '30min' },
{ duration: 60, label: '1h' },
{ duration: 90, label: '1h30'},
{ duration: 120, label: '2h'},
{ duration: 150, label: '2h30'},
{ duration: 180, label: '3h'},
{ duration: 240, label: '4h'}
];

View File

@ -2,9 +2,10 @@ import React, { useState, useEffect } from 'react';
import { timezones } from '../../assets/data/timezonesFlat'; import { timezones } from '../../assets/data/timezonesFlat';
import { InputPicker } from 'rsuite'; import { InputPicker } from 'rsuite';
export default function TimezonePicker(props) { export default function TimezonePicker() {
const [timezone, setTimezone] = useState(''); const [timezone, setTimezone] = useState('');
// TODO Remove this if not used
useEffect(() => { useEffect(() => {
console.log('useEffect:', timezone); console.log('useEffect:', timezone);
}, [timezone]); }, [timezone]);

View File

@ -1,9 +1,32 @@
import React from 'react'; import React, { useState } from 'react';
import {
Container,
Form,
FormControl,
FormGroup,
InputGroup,
Input,
Icon,
} from 'rsuite';
import TimezonePicker from '../components/General/TimezonePicker'; import TimezonePicker from '../components/General/TimezonePicker';
import { Container, Form, FormControl, FormGroup, Input } from 'rsuite'; import { durations } from '../assets/data/durations';
export default function Schedule() { export default function Schedule() {
const [durationIdx, setDurationIdx] = useState(0);
const handleIncrement = () => {
if (durationIdx <= durations.length-2) {
setDurationIdx(durationIdx + 1);
}
};
const handleDecrement = () => {
if (durationIdx > 0) {
setDurationIdx(durationIdx - 1);
}
};
return ( return (
<Container> <Container>
<h3>Schedule a meeting</h3> <h3>Schedule a meeting</h3>
@ -23,6 +46,19 @@ export default function Schedule() {
<FormGroup> <FormGroup>
<TimezonePicker /> <TimezonePicker />
</FormGroup> </FormGroup>
<FormGroup style={{ width: 200 }}>
<InputGroup style={{background: 'white'}}>
<InputGroup.Button onClick={handleDecrement}>
<Icon icon='minus' />
</InputGroup.Button>
<div style={{ textAlign: 'center', paddingTop:5 }}>
{durations[durationIdx].label}
</div>
<InputGroup.Button onClick={handleIncrement}>
<Icon icon='plus' />
</InputGroup.Button>
</InputGroup>
</FormGroup>
</Form> </Form>
</Container> </Container>
); );