meeting-planner
/
frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Extract DurationSelector to its own component

This commit is contained in:
rui hildt 2020-06-02 11:17:10 +02:00
parent 0d6ed2accb
commit f03fc0c461
2 changed files with 38 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/Schedule/DurationSelector.js Normal file
View File

@ -0,0 +1,31 @@
import React, {useState} from 'react';
import { InputGroup, Icon } from 'rsuite';
import { durations } from '../../assets/data/durations';
export default function DurationSelector() {
const [durationIdx, setDurationIdx] = useState(0);
const handleIncrement = () => {
if (durationIdx <= durations.length - 2) {
setDurationIdx(durationIdx + 1);
}
};
const handleDecrement = () => {
if (durationIdx > 0) {
setDurationIdx(durationIdx - 1);
}
};
return (
<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>
);
}

35
src/screens/Schedule.js
View File

@ -4,29 +4,17 @@ import {
Form,
FormControl,
FormGroup,
InputGroup,
Input,
Divider,
Icon,
} from 'rsuite';
import { DateTime } from 'luxon';
import TimezonePicker from '../components/General/TimezonePicker';
import DaySelector from '../components/Schedule/DaySelector';
import { durations } from '../assets/data/durations';
import DurationSelector from '../components/Schedule/DurationSelector';
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 (
<Container>
<h3>Schedule a meeting</h3>
@ -47,20 +35,11 @@ export default function Schedule() {
<TimezonePicker />
</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>
<DurationSelector />
</FormGroup>
<FormGroup>
<DaySelector />
</FormGroup>
<DaySelector />
<FormGroup></FormGroup>
</Form>
</Container>
);