mirror of https://github.com/grafana/grafana
grafana/ui: Add Timezone picker (#19364)
* first things and story * fixed data structure and fixed picker * remove console log * move variables into global scopepull/19369/head
Peter Holmberg
6 years ago
committed by
GitHub
parent
2474511d03
commit
bb0a438705
@ -0,0 +1,390 @@ |
||||
// List taken from https://stackoverflow.com/questions/38399465/how-to-get-list-of-all-timezones-in-javascript
|
||||
|
||||
export const getTimeZoneGroups = () => { |
||||
const europeZones = [ |
||||
'Europe/Amsterdam', |
||||
'Europe/Andorra', |
||||
'Europe/Astrakhan', |
||||
'Europe/Athens', |
||||
'Europe/Belgrade', |
||||
'Europe/Berlin', |
||||
'Europe/Brussels', |
||||
'Europe/Bucharest', |
||||
'Europe/Budapest', |
||||
'Europe/Chisinau', |
||||
'Europe/Copenhagen', |
||||
'Europe/Dublin', |
||||
'Europe/Gibraltar', |
||||
'Europe/Helsinki', |
||||
'Europe/Istanbul', |
||||
'Europe/Kaliningrad', |
||||
'Europe/Kiev', |
||||
'Europe/Kirov', |
||||
'Europe/Lisbon', |
||||
'Europe/London', |
||||
'Europe/Luxembourg', |
||||
'Europe/Madrid', |
||||
'Europe/Malta', |
||||
'Europe/Minsk', |
||||
'Europe/Monaco', |
||||
'Europe/Moscow', |
||||
'Europe/Oslo', |
||||
'Europe/Paris', |
||||
'Europe/Prague', |
||||
'Europe/Riga', |
||||
'Europe/Rome', |
||||
'Europe/Samara', |
||||
'Europe/Saratov', |
||||
'Europe/Simferopol', |
||||
'Europe/Sofia', |
||||
'Europe/Stockholm', |
||||
'Europe/Tallinn', |
||||
'Europe/Tirane', |
||||
'Europe/Ulyanovsk', |
||||
'Europe/Uzhgorod', |
||||
'Europe/Vienna', |
||||
'Europe/Vilnius', |
||||
'Europe/Volgograd', |
||||
'Europe/Warsaw', |
||||
'Europe/Zaporozhye', |
||||
'Europe/Zurich', |
||||
]; |
||||
|
||||
const africaZones = [ |
||||
'Africa/Abidjan', |
||||
'Africa/Accra', |
||||
'Africa/Algiers', |
||||
'Africa/Bissau', |
||||
'Africa/Cairo', |
||||
'Africa/Casablanca', |
||||
'Africa/Ceuta', |
||||
'Africa/El_Aaiun', |
||||
'Africa/Johannesburg', |
||||
'Africa/Juba', |
||||
'Africa/Khartoum', |
||||
'Africa/Lagos', |
||||
'Africa/Maputo', |
||||
'Africa/Monrovia', |
||||
'Africa/Nairobi', |
||||
'Africa/Ndjamena', |
||||
'Africa/Sao_Tome', |
||||
'Africa/Tripoli', |
||||
'Africa/Tunis', |
||||
'Africa/Windhoek', |
||||
]; |
||||
|
||||
const asiaZones = [ |
||||
'Asia/Almaty', |
||||
'Asia/Amman', |
||||
'Asia/Anadyr', |
||||
'Asia/Aqtau', |
||||
'Asia/Aqtobe', |
||||
'Asia/Ashgabat', |
||||
'Asia/Atyrau', |
||||
'Asia/Baghdad', |
||||
'Asia/Baku', |
||||
'Asia/Bangkok', |
||||
'Asia/Barnaul', |
||||
'Asia/Beirut', |
||||
'Asia/Bishkek', |
||||
'Asia/Brunei', |
||||
'Asia/Chita', |
||||
'Asia/Choibalsan', |
||||
'Asia/Colombo', |
||||
'Asia/Damascus', |
||||
'Asia/Dhaka', |
||||
'Asia/Dili', |
||||
'Asia/Dubai', |
||||
'Asia/Dushanbe', |
||||
'Asia/Famagusta', |
||||
'Asia/Gaza', |
||||
'Asia/Hebron', |
||||
'Asia/Ho_Chi_Minh', |
||||
'Asia/Hong_Kong', |
||||
'Asia/Hovd', |
||||
'Asia/Irkutsk', |
||||
'Asia/Jakarta', |
||||
'Asia/Jayapura', |
||||
'Asia/Jerusalem', |
||||
'Asia/Kabul', |
||||
'Asia/Kamchatka', |
||||
'Asia/Karachi', |
||||
'Asia/Kathmandu', |
||||
'Asia/Khandyga', |
||||
'Asia/Kolkata', |
||||
'Asia/Krasnoyarsk', |
||||
'Asia/Kuala_Lumpur', |
||||
'Asia/Kuching', |
||||
'Asia/Macau', |
||||
'Asia/Magadan', |
||||
'Asia/Makassar', |
||||
'Asia/Manila', |
||||
'Asia/Nicosia', |
||||
'Asia/Novokuznetsk', |
||||
'Asia/Novosibirsk', |
||||
'Asia/Omsk', |
||||
'Asia/Oral', |
||||
'Asia/Pontianak', |
||||
'Asia/Pyongyang', |
||||
'Asia/Qatar', |
||||
'Asia/Qostanay', |
||||
'Asia/Qyzylorda', |
||||
'Asia/Riyadh', |
||||
'Asia/Sakhalin', |
||||
'Asia/Samarkand', |
||||
'Asia/Seoul', |
||||
'Asia/Shanghai', |
||||
'Asia/Singapore', |
||||
'Asia/Srednekolymsk', |
||||
'Asia/Taipei', |
||||
'Asia/Tashkent', |
||||
'Asia/Tbilisi', |
||||
'Asia/Tehran', |
||||
'Asia/Thimphu', |
||||
'Asia/Tokyo', |
||||
'Asia/Tomsk', |
||||
'Asia/Ulaanbaatar', |
||||
'Asia/Urumqi', |
||||
'Asia/Ust-Nera', |
||||
'Asia/Vladivostok', |
||||
'Asia/Yakutsk', |
||||
'Asia/Yangon', |
||||
'Asia/Yekaterinburg', |
||||
'Asia/Yerevan', |
||||
]; |
||||
|
||||
const antarcticaZones = [ |
||||
'Antarctica/Casey', |
||||
'Antarctica/Davis', |
||||
'Antarctica/DumontDUrville', |
||||
'Antarctica/Macquarie', |
||||
'Antarctica/Mawson', |
||||
'Antarctica/Palmer', |
||||
'Antarctica/Rothera', |
||||
'Antarctica/Syowa', |
||||
'Antarctica/Troll', |
||||
'Antarctica/Vostok', |
||||
]; |
||||
|
||||
const americaZones = [ |
||||
'America/Adak', |
||||
'America/Anchorage', |
||||
'America/Araguaina', |
||||
'America/Argentina/Buenos_Aires', |
||||
'America/Argentina/Catamarca', |
||||
'America/Argentina/Cordoba', |
||||
'America/Argentina/Jujuy', |
||||
'America/Argentina/La_Rioja', |
||||
'America/Argentina/Mendoza', |
||||
'America/Argentina/Rio_Gallegos', |
||||
'America/Argentina/Salta', |
||||
'America/Argentina/San_Juan', |
||||
'America/Argentina/San_Luis', |
||||
'America/Argentina/Tucuman', |
||||
'America/Argentina/Ushuaia', |
||||
'America/Asuncion', |
||||
'America/Atikokan', |
||||
'America/Bahia', |
||||
'America/Bahia_Banderas', |
||||
'America/Barbados', |
||||
'America/Belem', |
||||
'America/Belize', |
||||
'America/Blanc-Sablon', |
||||
'America/Boa_Vista', |
||||
'America/Bogota', |
||||
'America/Boise', |
||||
'America/Cambridge_Bay', |
||||
'America/Campo_Grande', |
||||
'America/Cancun', |
||||
'America/Caracas', |
||||
'America/Cayenne', |
||||
'America/Chicago', |
||||
'America/Chihuahua', |
||||
'America/Costa_Rica', |
||||
'America/Creston', |
||||
'America/Cuiaba', |
||||
'America/Curacao', |
||||
'America/Danmarkshavn', |
||||
'America/Dawson', |
||||
'America/Dawson_Creek', |
||||
'America/Denver', |
||||
'America/Detroit', |
||||
'America/Edmonton', |
||||
'America/Eirunepe', |
||||
'America/El_Salvador', |
||||
'America/Fort_Nelson', |
||||
'America/Fortaleza', |
||||
'America/Glace_Bay', |
||||
'America/Godthab', |
||||
'America/Goose_Bay', |
||||
'America/Grand_Turk', |
||||
'America/Guatemala', |
||||
'America/Guayaquil', |
||||
'America/Guyana', |
||||
'America/Halifax', |
||||
'America/Havana', |
||||
'America/Hermosillo', |
||||
'America/Indiana/Indianapolis', |
||||
'America/Indiana/Knox', |
||||
'America/Indiana/Marengo', |
||||
'America/Indiana/Petersburg', |
||||
'America/Indiana/Tell_City', |
||||
'America/Indiana/Vevay', |
||||
'America/Indiana/Vincennes', |
||||
'America/Indiana/Winamac', |
||||
'America/Inuvik', |
||||
'America/Iqaluit', |
||||
'America/Jamaica', |
||||
'America/Juneau', |
||||
'America/Kentucky/Louisville', |
||||
'America/Kentucky/Monticello', |
||||
'America/La_Paz', |
||||
'America/Lima', |
||||
'America/Los_Angeles', |
||||
'America/Maceio', |
||||
'America/Managua', |
||||
'America/Manaus', |
||||
'America/Martinique', |
||||
'America/Matamoros', |
||||
'America/Mazatlan', |
||||
'America/Menominee', |
||||
'America/Merida', |
||||
'America/Metlakatla', |
||||
'America/Mexico_City', |
||||
'America/Miquelon', |
||||
'America/Moncton', |
||||
'America/Monterrey', |
||||
'America/Montevideo', |
||||
'America/Nassau', |
||||
'America/New_York', |
||||
'America/Nipigon', |
||||
'America/Nome', |
||||
'America/Noronha', |
||||
'America/North_Dakota/Beulah', |
||||
'America/North_Dakota/Center', |
||||
'America/North_Dakota/New_Salem', |
||||
'America/Ojinaga', |
||||
'America/Panama', |
||||
'America/Pangnirtung', |
||||
'America/Paramaribo', |
||||
'America/Phoenix', |
||||
'America/Port-au-Prince', |
||||
'America/Port_of_Spain', |
||||
'America/Porto_Velho', |
||||
'America/Puerto_Rico', |
||||
'America/Punta_Arenas', |
||||
'America/Rainy_River', |
||||
'America/Rankin_Inlet', |
||||
'America/Recife', |
||||
'America/Regina', |
||||
'America/Resolute', |
||||
'America/Rio_Branco', |
||||
'America/Santarem', |
||||
'America/Santiago', |
||||
'America/Santo_Domingo', |
||||
'America/Sao_Paulo', |
||||
'America/Scoresbysund', |
||||
'America/Sitka', |
||||
'America/St_Johns', |
||||
'America/Swift_Current', |
||||
'America/Tegucigalpa', |
||||
'America/Thule', |
||||
'America/Thunder_Bay', |
||||
'America/Tijuana', |
||||
'America/Toronto', |
||||
'America/Vancouver', |
||||
'America/Whitehorse', |
||||
'America/Winnipeg', |
||||
'America/Yakutat', |
||||
'America/Yellowknife', |
||||
]; |
||||
|
||||
const pacificZones = [ |
||||
'Pacific/Apia', |
||||
'Pacific/Auckland', |
||||
'Pacific/Bougainville', |
||||
'Pacific/Chatham', |
||||
'Pacific/Chuuk', |
||||
'Pacific/Easter', |
||||
'Pacific/Efate', |
||||
'Pacific/Enderbury', |
||||
'Pacific/Fakaofo', |
||||
'Pacific/Fiji', |
||||
'Pacific/Funafuti', |
||||
'Pacific/Galapagos', |
||||
'Pacific/Gambier', |
||||
'Pacific/Guadalcanal', |
||||
'Pacific/Guam', |
||||
'Pacific/Honolulu', |
||||
'Pacific/Kiritimati', |
||||
'Pacific/Kosrae', |
||||
'Pacific/Kwajalein', |
||||
'Pacific/Majuro', |
||||
'Pacific/Marquesas', |
||||
'Pacific/Nauru', |
||||
'Pacific/Niue', |
||||
'Pacific/Norfolk', |
||||
'Pacific/Noumea', |
||||
'Pacific/Pago_Pago', |
||||
'Pacific/Palau', |
||||
'Pacific/Pitcairn', |
||||
'Pacific/Pohnpei', |
||||
'Pacific/Port_Moresby', |
||||
'Pacific/Rarotonga', |
||||
'Pacific/Tahiti', |
||||
'Pacific/Tarawa', |
||||
'Pacific/Tongatapu', |
||||
'Pacific/Wake', |
||||
'Pacific/Wallis', |
||||
]; |
||||
|
||||
const australiaZones = [ |
||||
'Australia/Adelaide', |
||||
'Australia/Brisbane', |
||||
'Australia/Broken_Hill', |
||||
'Australia/Currie', |
||||
'Australia/Darwin', |
||||
'Australia/Eucla', |
||||
'Australia/Hobart', |
||||
'Australia/Lindeman', |
||||
'Australia/Lord_Howe', |
||||
'Australia/Melbourne', |
||||
'Australia/Perth', |
||||
'Australia/Sydney', |
||||
]; |
||||
|
||||
const atlanticZones = [ |
||||
'Atlantic/Azores', |
||||
'Atlantic/Bermuda', |
||||
'Atlantic/Canary', |
||||
'Atlantic/Cape_Verde', |
||||
'Atlantic/Faroe', |
||||
'Atlantic/Madeira', |
||||
'Atlantic/Reykjavik', |
||||
'Atlantic/South_Georgia', |
||||
'Atlantic/Stanley', |
||||
]; |
||||
|
||||
const indianZones = [ |
||||
'Indian/Chagos', |
||||
'Indian/Christmas', |
||||
'Indian/Cocos', |
||||
'Indian/Kerguelen', |
||||
'Indian/Mahe', |
||||
'Indian/Maldives', |
||||
'Indian/Mauritius', |
||||
'Indian/Reunion', |
||||
]; |
||||
|
||||
return [ |
||||
{ label: 'Africa', options: africaZones }, |
||||
{ label: 'America', options: americaZones }, |
||||
{ label: 'Antarctica', options: antarcticaZones }, |
||||
{ label: 'Asia', options: asiaZones }, |
||||
{ label: 'Atlantic', options: atlanticZones }, |
||||
{ label: 'Australia', options: australiaZones }, |
||||
{ label: 'Europe', options: europeZones }, |
||||
{ label: 'Indian', options: indianZones }, |
||||
{ label: 'Pacific', options: pacificZones }, |
||||
]; |
||||
}; |
||||
@ -0,0 +1,34 @@ |
||||
import React from 'react'; |
||||
import { storiesOf } from '@storybook/react'; |
||||
import { action } from '@storybook/addon-actions'; |
||||
|
||||
import { TimeZonePicker } from './TimeZonePicker'; |
||||
import { UseState } from '../../utils/storybook/UseState'; |
||||
import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; |
||||
|
||||
const TimeZonePickerStories = storiesOf('UI/TimeZonePicker', module); |
||||
|
||||
TimeZonePickerStories.addDecorator(withCenteredStory); |
||||
|
||||
TimeZonePickerStories.add('default', () => { |
||||
return ( |
||||
<UseState |
||||
initialState={{ |
||||
value: 'europe/stockholm', |
||||
}} |
||||
> |
||||
{(value, updateValue) => { |
||||
return ( |
||||
<TimeZonePicker |
||||
value={value.value} |
||||
onChange={newValue => { |
||||
action('on selected')(newValue); |
||||
updateValue({ value: newValue }); |
||||
}} |
||||
width={20} |
||||
/> |
||||
); |
||||
}} |
||||
</UseState> |
||||
); |
||||
}); |
||||
@ -0,0 +1,41 @@ |
||||
import React, { FC } from 'react'; |
||||
import { getTimeZoneGroups, SelectableValue } from '@grafana/data'; |
||||
import { Select } from '..'; |
||||
|
||||
interface Props { |
||||
value: string; |
||||
width?: number; |
||||
|
||||
onChange: (newValue: string) => void; |
||||
} |
||||
|
||||
export const TimeZonePicker: FC<Props> = ({ onChange, value, width }) => { |
||||
const timeZoneGroups = getTimeZoneGroups(); |
||||
|
||||
const groupOptions = timeZoneGroups.map(group => { |
||||
const options = group.options.map(timeZone => { |
||||
return { |
||||
label: timeZone, |
||||
value: timeZone.toLowerCase(), |
||||
}; |
||||
}); |
||||
|
||||
return { |
||||
label: group.label, |
||||
options, |
||||
}; |
||||
}); |
||||
|
||||
const selectedValue = groupOptions.map(group => { |
||||
return group.options.find(option => option.value === value); |
||||
}); |
||||
|
||||
return ( |
||||
<Select |
||||
options={groupOptions} |
||||
value={selectedValue} |
||||
onChange={(newValue: SelectableValue) => onChange(newValue.value)} |
||||
width={width} |
||||
/> |
||||
); |
||||
}; |
||||
Loading…
Reference in new issue