65 lines
2.3 KiB
TypeScript
65 lines
2.3 KiB
TypeScript
import { Fragment, useState } from "react";
|
|
import { Combobox, Transition } from "@headlessui/react";
|
|
import { BsChevronExpand } from "react-icons/bs";
|
|
import moment from "moment-timezone";
|
|
|
|
interface Props {
|
|
value?: string;
|
|
onChange?: (value: string) => void;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export default function TimezoneSelect({
|
|
value,
|
|
disabled = false,
|
|
onChange,
|
|
}: Props) {
|
|
const [query, setQuery] = useState("");
|
|
|
|
const timezones = moment.tz.names();
|
|
|
|
const filteredTimezones = query === "" ? timezones : timezones.filter((x) => x.toLowerCase().includes(query.toLowerCase()));
|
|
return (
|
|
<>
|
|
<Combobox value={value} onChange={onChange} disabled={disabled}>
|
|
<div className="relative mt-1">
|
|
<div className="relative w-full cursor-default overflow-hidden ">
|
|
<Combobox.Input
|
|
className="py-6 w-full px-8 text-sm font-normal placeholder:text-mti-gray-cool bg-white disabled:bg-mti-gray-platinum/40 rounded-full border border-mti-gray-platinum focus:outline-none"
|
|
onChange={(e) => setQuery(e.target.value)}
|
|
/>
|
|
<Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-8">
|
|
<BsChevronExpand />
|
|
</Combobox.Button>
|
|
</div>
|
|
<Transition
|
|
as={Fragment}
|
|
leave="transition ease-in duration-100"
|
|
leaveFrom="opacity-100"
|
|
leaveTo="opacity-0"
|
|
afterLeave={() => setQuery("")}
|
|
>
|
|
<Combobox.Options className="absolute z-20 mt-1 max-h-60 w-full overflow-auto rounded-xl bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
|
|
{filteredTimezones.map((timezone: string) => (
|
|
<Combobox.Option
|
|
key={timezone}
|
|
value={timezone}
|
|
className={({ active }) =>
|
|
`relative cursor-default select-none py-2 pl-10 pr-4 ${
|
|
active
|
|
? "bg-mti-purple-light text-white"
|
|
: "text-gray-900"
|
|
}`
|
|
}
|
|
>
|
|
{timezone}
|
|
</Combobox.Option>
|
|
))}
|
|
</Combobox.Options>
|
|
</Transition>
|
|
</div>
|
|
</Combobox>
|
|
</>
|
|
);
|
|
}
|