expose timezone list & details
This commit is contained in:
@@ -15,32 +15,21 @@
|
||||
const wbr = (str: string): string => {
|
||||
return str.replace(/\//g, '/<wbr />');
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import type { ClassValue } from 'svelte/elements';
|
||||
/**
|
||||
* Details about a timezone.
|
||||
*/
|
||||
export type TimezoneDetail = {
|
||||
timeZone: string;
|
||||
offset?: string;
|
||||
long?: string;
|
||||
short?: string;
|
||||
};
|
||||
|
||||
import Combobox, { type ComboboxOption } from './Combobox.svelte';
|
||||
|
||||
interface Props {
|
||||
label?: string;
|
||||
name?: string;
|
||||
value?: string;
|
||||
invalidMessage?: string;
|
||||
required?: boolean;
|
||||
class?: ClassValue | null | undefined;
|
||||
}
|
||||
|
||||
let {
|
||||
label,
|
||||
name,
|
||||
value = $bindable(''),
|
||||
invalidMessage = 'Please select a timezone',
|
||||
required,
|
||||
class: classValue
|
||||
}: Props = $props();
|
||||
|
||||
const sortedTimeZones = Intl.supportedValuesOf('timeZone')
|
||||
/**
|
||||
* A sorted list of timezones with details.
|
||||
*/
|
||||
export const sortedTimeZones: TimezoneDetail[] = Intl.supportedValuesOf('timeZone')
|
||||
.map((timeZone) => {
|
||||
// get short offset (e.g. GMT+1) for the timezone
|
||||
const offset = getTimeZonePart(timeZone, 'shortOffset');
|
||||
@@ -64,6 +53,40 @@
|
||||
return a.timeZone.localeCompare(b.timeZone);
|
||||
});
|
||||
|
||||
/**
|
||||
* A map of timezone names to details.
|
||||
*/
|
||||
export const timezoneMap: Record<string, TimezoneDetail> = sortedTimeZones.reduce(
|
||||
(acc, timeZone) => {
|
||||
acc[timeZone.timeZone] = timeZone;
|
||||
return acc;
|
||||
},
|
||||
{} as Record<string, TimezoneDetail>
|
||||
);
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import type { ClassValue } from 'svelte/elements';
|
||||
import Combobox, { type ComboboxOption } from './Combobox.svelte';
|
||||
|
||||
interface Props {
|
||||
label?: string;
|
||||
name?: string;
|
||||
value?: string;
|
||||
invalidMessage?: string;
|
||||
required?: boolean;
|
||||
class?: ClassValue | null | undefined;
|
||||
}
|
||||
|
||||
let {
|
||||
label,
|
||||
name,
|
||||
value = $bindable(''),
|
||||
invalidMessage = 'Please select a timezone',
|
||||
required,
|
||||
class: classValue
|
||||
}: Props = $props();
|
||||
|
||||
const options: ComboboxOption[] = sortedTimeZones.map((timeZone) => {
|
||||
const infotext = [...new Set([timeZone.short, timeZone.offset])]
|
||||
.filter((item) => item !== undefined)
|
||||
|
||||
@@ -23,7 +23,12 @@ export { default as Tabs, type TabPage } from './Tabs.svelte';
|
||||
export { default as TextareaInput } from './TextareaInput.svelte';
|
||||
export { default as TextInput } from './TextInput.svelte';
|
||||
export { default as TimeInput, formatTime } from './TimeInput.svelte';
|
||||
export { default as TimezoneInput } from './TimezoneInput.svelte';
|
||||
export {
|
||||
default as TimezoneInput,
|
||||
type TimezoneDetail,
|
||||
sortedTimeZones,
|
||||
timezoneMap
|
||||
} from './TimezoneInput.svelte';
|
||||
export { default as ToggleGroup } from './ToggleGroup.svelte';
|
||||
export { default as ToggleSelect } from './ToggleSelect.svelte';
|
||||
export {
|
||||
|
||||
Reference in New Issue
Block a user