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

Implement TimezonePicker component

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/assets/data/timezones.js → src/assets/data/timezonesCascade.js
View File

2555
src/assets/data/timezonesFlat.js Normal file
View File

File diff suppressed because it is too large Load Diff

2235
src/assets/data/timezonesStructured.js Normal file
View File

File diff suppressed because it is too large Load Diff

26
src/components/General/TimezonePicker.js Normal file
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'
/>
);
}

17
src/components/General/TimezonesCascader.js
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 }} />
</>
);
}

4
src/screens/Register.js
View File

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

6
src/screens/Schedule.js
View File

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