Implement TimezonePicker component

This commit is contained in:
rui hildt 2020-05-27 20:49:49 +02:00
parent 2620bc92aa
commit 733060d770
7 changed files with 4821 additions and 22 deletions

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,26 @@
import React, { useState, useEffect } from 'react';
import { timezones } from '../../assets/data/timezonesFlat';
import { InputPicker } from 'rsuite';
export default function TimezonePicker(props) {
const [timezone, setTimezone] = useState('');
useEffect(() => {
console.log('useEffect:', timezone);
}, [timezone]);
return (
<InputPicker
data={timezones}
// cleanable={false}
style={{ width: 320 }}
labelKey='timezone'
groupBy='area'
placeholder='Type to search and select your timezone'
onSelect={(value, item, event) => setTimezone(item.timezone)}
onClean={(event) => setTimezone('')}
value={timezone}
valueKey='timezone'
/>
);
}

View File

@ -1,17 +0,0 @@
import React from 'react';
import { timezones } from '../../assets/data/timezones';
import { Cascader } from 'rsuite';
export default function TzDropdown() {
// do something here
// const handleSelect = event => {
// console.log(event)
// }
return (
<>
<h1>Aha!</h1>
<Cascader data={timezones} style={{ width: 224 }} />
</>
);
}

View File

@ -9,7 +9,7 @@ import {
Button, Button,
} from 'rsuite'; } from 'rsuite';
import TzDropdown from '../components/General/TimezonesCascader'; import TimezonePicker from '../components/General/TimezonePicker';
const boxStyle = { const boxStyle = {
maxWidth: 373, maxWidth: 373,
@ -43,7 +43,7 @@ export default function Register() {
/> />
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<TzDropdown /> <TimezonePicker />
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<FormControl <FormControl

View File

@ -1,13 +1,13 @@
import React from 'react'; import React from 'react';
import TzDropdown from '../components/General/TimezonesCascader'; import TimezonePicker from '../components/General/TimezonePicker';
import { Container, Form, FormControl, FormGroup, Input } from 'rsuite'; import { Container, Form, FormControl, FormGroup, Input } from 'rsuite';
export default function Schedule() { export default function Schedule() {
return ( return (
<Container> <Container>
<h3>Schedule a meeting</h3> <h3>Schedule a meeting</h3>
<Form horizontal> <Form>
<FormGroup> <FormGroup>
<FormControl name='title' type='text' placeholder='title' /> <FormControl name='title' type='text' placeholder='title' />
</FormGroup> </FormGroup>
@ -21,7 +21,7 @@ export default function Schedule() {
/> />
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<TzDropdown /> <TimezonePicker />
</FormGroup> </FormGroup>
</Form> </Form>
</Container> </Container>