122 lines
3.9 KiB
TypeScript
122 lines
3.9 KiB
TypeScript
/* -------------------------------------------------------------------------- */
|
|
/* Imports */
|
|
/* -------------------------------------------------------------------------- */
|
|
import React from "react";
|
|
import { Fragment } from "react";
|
|
import { Listbox, Transition } from "@headlessui/react";
|
|
import classNames from "classnames";
|
|
import "../index.css";
|
|
import { ReactComponent as SelectIcon } from "../assets/svg/select-arrow.svg";
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Component props */
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
type Props<T> = {
|
|
options?: T[];
|
|
disabled?: boolean;
|
|
className?: string;
|
|
value: T;
|
|
displayValueResolver?: (element: T) => any;
|
|
onChange: (element: T) => void;
|
|
} & Omit<React.ComponentPropsWithRef<"select">, "value" | "onChange">;
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* styles */
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
const SelectButtonStyle = `
|
|
relative w-full
|
|
cursor-default
|
|
rounded
|
|
border border-gray-50
|
|
outline-8
|
|
bg-white
|
|
py-2 pl-3 pr-10 text-left
|
|
hover:border-gray-300
|
|
focus:outline-1
|
|
focus-visible:border-gray-500
|
|
sm:text-sm
|
|
`;
|
|
|
|
const SelectOptionsStyle = `
|
|
absolute z-10 mt-1 w-full max-h-56
|
|
bg-white shadow-lg
|
|
rounded py-1
|
|
overflow-auto
|
|
focus:outline-none
|
|
text-base
|
|
sm:text-sm
|
|
`;
|
|
|
|
const SelectIconStyle = `
|
|
pointer-events-none
|
|
absolute inset-y-0 right-0
|
|
flex items-center pr-2
|
|
`;
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Component implementation */
|
|
/* -------------------------------------------------------------------------- */
|
|
function Select<T>({
|
|
className,
|
|
options = [],
|
|
value,
|
|
onChange,
|
|
displayValueResolver,
|
|
disabled,
|
|
...props
|
|
}: Props<T>): JSX.Element {
|
|
return (
|
|
<div className={classNames("fixed top-16 w-60", className)}>
|
|
<Listbox value={value} {...props} onChange={onChange}>
|
|
<div className="relative mt-1">
|
|
<Listbox.Button className={`${SelectButtonStyle}`}>
|
|
{({ open }) => (
|
|
<>
|
|
<span className="block truncate">{`${
|
|
displayValueResolver ? displayValueResolver(value) : value
|
|
}`}</span>
|
|
<span className={`${SelectIconStyle}`}>
|
|
<SelectIcon
|
|
className={`${
|
|
open ? "rotate-180 transform" : "font-normal"
|
|
} h-2 w-3`}
|
|
/>
|
|
</span>
|
|
</>
|
|
)}
|
|
</Listbox.Button>
|
|
|
|
<Transition
|
|
as={Fragment}
|
|
leave="transition ease-in duration-100"
|
|
leaveFrom="opacity-100"
|
|
leaveTo="opacity-0"
|
|
>
|
|
<Listbox.Options className={`${SelectOptionsStyle}`}>
|
|
{options.map((option, id) => (
|
|
<Listbox.Option
|
|
key={id}
|
|
className={({ active, selected }) =>
|
|
classNames(
|
|
active ? "text-gray-900 bg-blue-50" : "font-normal ",
|
|
"cursor-default select-none relative py-2 pl-3 pr-9",
|
|
selected ? "text-gray-900 bg-blue-100" : "font-normal "
|
|
)
|
|
}
|
|
value={option}
|
|
>
|
|
{`${
|
|
displayValueResolver ? displayValueResolver(option) : option
|
|
}`}
|
|
</Listbox.Option>
|
|
))}
|
|
</Listbox.Options>
|
|
</Transition>
|
|
</div>
|
|
</Listbox>
|
|
</div>
|
|
);
|
|
}
|
|
export default Select;
|