plane/apps/app/components/ui/custom-select.tsx
Aaryan Khandelwal 253edebb93
fix: updated text and background colors (#1496)
* fix: custom colors opacity

* chore: update text colors for dark mode

* fix: dropdown text colors, datepicker bg color

* chore: update text colors

* chore: updated primary bg color
2023-07-11 15:18:47 +05:30

137 lines
4.0 KiB
TypeScript

import React from "react";
// headless ui
import { Listbox, Transition } from "@headlessui/react";
// icons
import { ChevronDownIcon } from "@heroicons/react/20/solid";
import { CheckIcon } from "@heroicons/react/24/outline";
type CustomSelectProps = {
value: any;
onChange: any;
children: React.ReactNode;
label?: string | JSX.Element;
textAlignment?: "left" | "center" | "right";
maxHeight?: "sm" | "rg" | "md" | "lg" | "none";
position?: "right" | "left";
verticalPosition?: "top" | "bottom";
width?: "auto" | string;
input?: boolean;
noChevron?: boolean;
customButton?: JSX.Element;
optionsClassName?: string;
disabled?: boolean;
selfPositioned?: boolean;
};
const CustomSelect = ({
children,
label,
textAlignment,
value,
onChange,
maxHeight = "none",
position = "left",
verticalPosition = "bottom",
width = "auto",
input = false,
noChevron = false,
customButton,
optionsClassName = "",
disabled = false,
selfPositioned = false,
}: CustomSelectProps) => (
<Listbox
as="div"
value={value}
onChange={onChange}
className={`${!selfPositioned ? "relative" : ""} flex-shrink-0 text-left`}
disabled={disabled}
>
<div>
{customButton ? (
<Listbox.Button as="div">{customButton}</Listbox.Button>
) : (
<Listbox.Button
className={`flex w-full ${
disabled
? "cursor-not-allowed text-custom-text-200"
: "cursor-pointer hover:bg-custom-background-80"
} items-center justify-between gap-1 rounded-md border border-custom-border-100 shadow-sm duration-300 focus:outline-none ${
input ? "border-custom-border-100 px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
} ${
textAlignment === "right"
? "text-right"
: textAlignment === "center"
? "text-center"
: "text-left"
}`}
>
{label}
{!noChevron && !disabled && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
</Listbox.Button>
)}
</div>
<Transition
as={React.Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Listbox.Options
className={`${optionsClassName} absolute border border-custom-border-100 ${
position === "right" ? "right-0" : "left-0"
} ${
verticalPosition === "top" ? "bottom-full mb-1" : "mt-1"
} z-10 mt-1 origin-top-right overflow-y-auto rounded-md bg-custom-background-90 text-xs shadow-lg focus:outline-none ${
width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width
} ${input ? "max-h-48" : ""} ${
maxHeight === "lg"
? "max-h-60"
: maxHeight === "md"
? "max-h-48"
: maxHeight === "rg"
? "max-h-36"
: maxHeight === "sm"
? "max-h-28"
: ""
}`}
>
<div className="space-y-1 p-2">{children}</div>
</Listbox.Options>
</Transition>
</Listbox>
);
type OptionProps = {
children: string | JSX.Element;
value: any;
className?: string;
};
const Option: React.FC<OptionProps> = ({ children, value, className }) => (
<Listbox.Option
value={value}
className={({ active, selected }) =>
`${className} ${active || selected ? "bg-custom-background-80" : ""} ${
selected ? "text-custom-text-100" : "text-custom-text-200"
} cursor-pointer select-none truncate rounded px-1 py-1.5`
}
>
{({ selected }) => (
<div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-2">{children}</div>
{selected && <CheckIcon className="h-4 w-4 flex-shrink-0" />}
</div>
)}
</Listbox.Option>
);
CustomSelect.Option = Option;
export { CustomSelect };