forked from github/plane
7e92efee23
fix: header buttons not working. sub-issues mutation. customized the datepicker. mutation in the list and kanban view. some icons not displaying. fixed routing and added toast alert after creating a workspace. workspace logo display design in workspace settings. delete issue mutation error in cycles and modules. feat: added authorization to issue details page.
110 lines
3.0 KiB
TypeScript
110 lines
3.0 KiB
TypeScript
import React from "react";
|
|
// headless ui
|
|
import { Listbox, Transition } from "@headlessui/react";
|
|
// icons
|
|
import { ChevronDownIcon } from "@heroicons/react/20/solid";
|
|
|
|
type CustomSelectProps = {
|
|
value: any;
|
|
onChange: any;
|
|
children: React.ReactNode;
|
|
label: string | JSX.Element;
|
|
textAlignment?: "left" | "center" | "right";
|
|
maxHeight?: "sm" | "rg" | "md" | "lg" | "none";
|
|
width?: "auto" | string;
|
|
input?: boolean;
|
|
noChevron?: boolean;
|
|
disabled?: boolean;
|
|
};
|
|
|
|
const CustomSelect = ({
|
|
children,
|
|
label,
|
|
textAlignment,
|
|
value,
|
|
onChange,
|
|
maxHeight = "none",
|
|
width = "auto",
|
|
input = false,
|
|
noChevron = false,
|
|
disabled = false,
|
|
}: CustomSelectProps) => (
|
|
<Listbox
|
|
as="div"
|
|
value={value}
|
|
onChange={onChange}
|
|
className="relative flex-shrink-0 text-left"
|
|
disabled={disabled}
|
|
>
|
|
<div>
|
|
<Listbox.Button
|
|
className={`flex w-full ${
|
|
disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
|
|
} items-center justify-between gap-1 rounded-md border shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
|
|
input ? "border-gray-300 px-3 py-2 text-sm" : "px-2 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={`absolute right-0 z-10 mt-1 origin-top-right overflow-y-auto rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
|
|
width === "auto" ? "min-w-full whitespace-nowrap" : "w-56"
|
|
} ${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="py-1">{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 }) =>
|
|
`${selected ? "bg-indigo-50 font-medium" : ""} ${
|
|
active ? "bg-indigo-50" : ""
|
|
} relative flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900 ${className}`
|
|
}
|
|
>
|
|
{children}
|
|
</Listbox.Option>
|
|
);
|
|
|
|
CustomSelect.Option = Option;
|
|
|
|
export { CustomSelect };
|