thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

style: state Icon

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2023-03-02 11:32:18 +05:30
parent 216c565afc
commit 9a88803a3f
1 changed files with 10 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
apps/app/components/issues/select/state.tsx
View File

@ -19,6 +19,7 @@ import { Combobox, Transition } from "@headlessui/react";
import { getStatesList } from "helpers/state.helper"; import { getStatesList } from "helpers/state.helper";
// fetch keys // fetch keys
import { STATE_LIST } from "constants/fetch-keys"; import { STATE_LIST } from "constants/fetch-keys";
import { getStateGroupIcon } from "components/icons";
type Props = { type Props = {
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>; setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
@ -46,12 +47,15 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
value: state.id, value: state.id,
display: state.name, display: state.name,
color: state.color, color: state.color,
group: state.group,
})); }));
const filteredOptions = const filteredOptions =
query === "" query === ""
? options ? options
: options?.filter((option) => option.display.toLowerCase().includes(query.toLowerCase())); : options?.filter((option) => option.display.toLowerCase().includes(query.toLowerCase()));
const currentOption = options?.find((option) => option.value === value);
return ( return (
<Combobox <Combobox
as="div" as="div"
@ -73,22 +77,15 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
> >
{value && value !== "" ? ( {value && value !== "" ? (
<span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5"> <span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
<span {currentOption && currentOption.group
className="h-3 w-3 flex-shrink-0 rounded-full" ? getStateGroupIcon(currentOption.group, "16", "16", currentOption.color)
style={{ : ""}
backgroundColor: options?.find((option) => option.value === value)?.color, <span className=" text-[#495057]">{currentOption?.display}</span>
}}
/>
<span className=" text-[#495057]">
{options?.find((option) => option.value === value)?.display}
</span>
</span> </span>
) : ( ) : (
<span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5"> <span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
<Squares2X2Icon className="h-4 w-4 text-gray-500 " /> <Squares2X2Icon className="h-4 w-4 text-gray-500 " />
<span className=" text-[#858E96]"> <span className=" text-[#858E96]">{currentOption?.display || "State"}</span>
{options?.find((option) => option.value === value)?.display || "State"}
</span>
</span> </span>
)} )}
</Combobox.Button> </Combobox.Button>
@ -130,12 +127,7 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
states && ( states && (
<div className="flex w-full gap-2 justify-between rounded"> <div className="flex w-full gap-2 justify-between rounded">
<div className="flex justify-start items-center gap-2"> <div className="flex justify-start items-center gap-2">
<span {getStateGroupIcon(option.group, "16", "16", option.color)}
className="h-3 w-3 flex-shrink-0 rounded-full"
style={{
backgroundColor: option.color,
}}
/>
<span>{option.display}</span> <span>{option.display}</span>
</div> </div>
<div className="flex justify-center items-center p-1 rounded"> <div className="flex justify-center items-center p-1 rounded">